/*
 * V93 homepage ring refinement.
 * Restore the accepted desktop card emphasis and raise the ring by 12–16px.
 * Mobile keeps the existing horizontal carousel without any changes.
 */

.hero-ring-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
}
.hero-ring-copy { opacity: 0; }
.hero-ring-copy .hero-ring-description {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.hero-ring-card::after { display: none; content: none; }
.hero-ring-copy strong { white-space: nowrap; overflow-wrap: normal; }
@media (min-width: 769px) {
  .hero-ring-copy { padding-bottom: 10px; }
}

@media (min-width: 769px) {
  .hero-ring {
    margin-top: clamp(28px, 3vw, 42px);
  }
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .hero-audience-switch,.hero-copy .personal-tags {
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .hero-ring-card:hover .hero-ring-visual,.hero-ring-card:focus .hero-ring-visual {
    transform: translate3d(0, -18px, 32px) scale(1.5);
  }

  /* Give the expanded foreground card a clean reading area, then restore controls on leave. */
  .hero-section:has(.hero-ring-card:hover) .hero-audience-switch,.hero-section:has(.hero-ring-card:focus) .hero-audience-switch,.hero-section:has(.hero-ring-card:hover) .personal-tags,.hero-section:has(.hero-ring-card:focus) .personal-tags {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }
}

@media (min-width: 769px) and (max-height: 820px) {
  .hero-ring {
    margin-top: 0;
  }
}

@media (min-width: 769px) and (max-height: 820px) and (hover: hover) and (pointer: fine) {
  .hero-ring-card:hover .hero-ring-visual,.hero-ring-card:focus .hero-ring-visual {
    transform: translate3d(0, -26px, 32px) scale(1.5);
  }
}