/* One owner for hero layout, media and interaction states. Colors come from
the existing inverse/menu theme palettes;
Admin media stays untouched. */
:root {
  --avs-hero-bg: var(--avs-utility-bg);
  --avs-hero-text: var(--avs-utility-text);
  --avs-hero-primary-bg: var(--avs-surface);
  --avs-hero-primary-text: var(--avs-blue-deep);
  --avs-hero-primary-hover: var(--avs-surface-alt);
  --avs-hero-control-bg: color-mix(in srgb, var(--avs-hero-bg) 90%, transparent);
  --avs-hero-control-hover: color-mix(in srgb, var(--avs-hero-bg) 98%, transparent);
  --avs-hero-border: color-mix(in srgb, var(--avs-hero-text) 60%, var(--avs-hero-bg));
  --avs-hero-focus: var(--avs-hero-text);
  --avs-hero-dot: color-mix(in srgb, var(--avs-hero-text) 65%, var(--avs-hero-bg));
}
.home-carousel {
  --hero-edge: 24px;
  --hero-content-inset: max(88px, calc((100% - 1240px) / 2));
  --hero-shade-end: max(50%, calc(46% + 88px));
  background: var(--avs-hero-bg);
  color: var(--avs-hero-text);
  min-height: 480px;
  overflow: hidden;
  position: relative;
}
.home-carousel[hidden], .home-carousel [hidden] {
  display: none;
}
.carousel-loading {
  align-content: center;
  min-height: 480px;
  padding: 24px;
  text-align: center;
}
.home-carousel-viewport {
  overflow: hidden;
  touch-action: pan-y;
}
.home-carousel-track {
  display: flex;
  transition: transform 550ms ease;
  will-change: transform;
}
.home-carousel-track.is-dragging {
  transition: none;
  cursor: grabbing;
}
.home-carousel-slide {
  align-items: var(--slide-content-position, center);
  background: var(--avs-hero-bg);
  display: grid;
  flex: 0 0 100%;
  isolation: isolate;
  min-width: 0;
  min-height: clamp(480px, 38vw, 540px);
  padding-block: 32px 88px;
  position: relative;
}
.home-carousel-media {
  inset: 0 0 0 42%;
  position: absolute;
  z-index: 0;
}
.home-carousel-media::after {
  background: var(--slide-overlay, none);
  content: "";
  inset: 0;
  opacity: var(--slide-overlay-opacity, .66);
  pointer-events: none;
  position: absolute;
}
.home-carousel-bg {
  height: 100%;
  inset: 0;
  object-fit: contain;
  object-position: var(--slide-bg-pos, center);
  position: absolute;
  width: 100%;
}
.home-carousel-slide::before {
  background: linear-gradient(var(--slide-gradient-direction, 90deg), color-mix(in srgb, var(--avs-hero-bg) calc(var(--slide-text-opacity, .95) * 100%), transparent) 0%, color-mix(in srgb, var(--avs-hero-bg) 94%, transparent) var(--hero-shade-end), color-mix(in srgb, var(--avs-hero-bg) 24%, transparent) 78%, transparent 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.home-carousel-content {
  margin: 0 0 0 var(--hero-content-inset);
  max-width: min(560px, 46%);
  min-width: 0;
  padding: 0;
  position: relative;
  text-align: var(--slide-text-align, left);
  width: auto;
  z-index: 2;
}
.home-carousel-slide[data-content-align="right"] .home-carousel-media {
  inset-inline: 0 42%;
}
.home-carousel-slide[data-content-align="right"] {
  --hero-shade-end: max(50%, calc(46% + var(--av-floating-reserve) + 64px));
}
.home-carousel-slide[data-content-align="right"] .home-carousel-content {
  margin-inline: auto max(var(--hero-content-inset), calc(var(--av-floating-reserve) + 64px));
}
.home-carousel-slide[data-content-align="center"] .home-carousel-media {
  inset-inline: 0;
}
.home-carousel-slide[data-content-align="center"] .home-carousel-content {
  background: var(--avs-hero-control-bg);
  border-radius: var(--radius);
  margin-inline: auto;
  padding: 24px;
}
.home-carousel-slide[data-content-align="right"] .home-carousel-content > :is(h1,h2,p) {
  margin-inline-start: auto;
}
.home-carousel-slide[data-content-align="center"] .home-carousel-content > :is(h1,h2,p) {
  margin-inline: auto;
}
.home-carousel :is(h1,h2) {
  color: var(--avs-hero-text);
  font: 800 clamp(32px, 3.6vw, 50px)/1.12 var(--avs-font-family);
  letter-spacing: -.035em;
  margin: 0 0 16px;
  max-width: 18ch;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.home-carousel p:not(.carousel-kicker,.carousel-meta) {
  color: var(--avs-hero-text);
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 500;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 46ch;
}
.carousel-kicker {
  color: var(--avs-hero-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.7;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.carousel-meta {
  color: var(--avs-hero-text);
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  gap: 6px 12px;
  line-height: 1.6;
  margin: 0 0 18px;
}
.carousel-meta span + span::before {
  content: "·";
  margin-inline-end: 12px;
}
.carousel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: var(--slide-actions-align, flex-start);
}
.carousel-actions:empty {
  display: none;
}
.home-carousel .carousel-actions .btn {
  align-items: center;
  border: 1px solid var(--avs-hero-border);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  gap: 8px;
  justify-content: center;
  letter-spacing: .02em;
  line-height: 1.5;
  min-height: 46px;
  min-width: 0;
  padding: 12px 20px;
  text-align: center;
  text-shadow: none;
  transform: none;
  white-space: normal;
}
.home-carousel .btn-primary {
  background: var(--avs-hero-primary-bg);
  border-color: var(--avs-hero-primary-bg);
  color: var(--avs-hero-primary-text);
}
.home-carousel .btn-primary:is(:hover,:active) {
  background: var(--avs-hero-primary-hover);
  color: var(--avs-hero-primary-text);
}
.home-carousel .btn-primary::after {
  content: "→";
}
.home-carousel .btn-secondary {
  background: var(--avs-hero-control-bg);
  color: var(--avs-hero-text);
}
.home-carousel .btn-secondary:is(:hover,:active) {
  background: var(--avs-hero-control-hover);
  color: var(--avs-hero-text);
}
.home-carousel :is(.btn,.carousel-video-play)::before {
  display: none;
}
.home-carousel :is(a,button):focus-visible {
  outline: 2px solid var(--avs-hero-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--avs-hero-bg);
}
.home-carousel-content > * {
  transition: opacity 250ms ease;
}
.home-carousel.is-enhanced .home-carousel-slide:not(.is-active) .home-carousel-content > * {
  opacity: 0;
}
.home-carousel-slide.is-active .home-carousel-content > * {
  opacity: 1;
}
.carousel-control {
  align-items: center;
  background: var(--avs-hero-control-bg);
  border: 1px solid var(--avs-hero-border);
  border-radius: 50%;
  color: var(--avs-hero-text);
  cursor: pointer;
  display: inline-flex;
  font: 500 30px/1 var(--avs-font-family);
  height: 48px;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  visibility: visible;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  width: 48px;
  z-index: 3;
}
.carousel-control:is(:hover,:active) {
  background: var(--avs-hero-control-hover);
  color: var(--avs-hero-text);
}
.carousel-control-prev {
  left: var(--hero-edge);
}
.carousel-control-next {
  right: var(--av-floating-reserve);
}
.carousel-footer {
  align-items: center;
  background: var(--avs-hero-control-bg);
  border: 1px solid var(--avs-hero-border);
  border-radius: 999px;
  bottom: 18px;
  display: flex;
  gap: 10px;
  left: 50%;
  max-width: calc(100% - 48px);
  min-height: 48px;
  padding: 4px 12px;
  position: absolute;
  transform: translateX(-50%);
  width: max-content;
  z-index: 3;
}
.carousel-status {
  align-items: baseline;
  color: var(--avs-hero-text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  gap: 4px;
  line-height: 1.5;
  white-space: nowrap;
}
.carousel-dots {
  display: flex;
  gap: 2px;
  max-width: 176px;
  min-width: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.carousel-dots::-webkit-scrollbar {
  display: none;
}
.carousel-dots button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--avs-hero-text);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 32px;
  height: 36px;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 32px;
}
.carousel-dots button::before {
  background: var(--avs-hero-dot);
  border-radius: 999px;
  content: "";
  height: 4px;
  width: 12px;
}
.carousel-dots button.active::before {
  background: var(--avs-hero-text);
  width: 24px;
}
.carousel-dots button:is(:hover,:active)::before {
  background: var(--avs-hero-text);
}
.carousel-dots button:focus-visible {
  outline-offset: -2px;
  box-shadow: none;
}
.carousel-video {
  pointer-events: none;
}
.carousel-video-play {
  background: var(--avs-hero-control-bg);
  border: 1px solid var(--avs-hero-border);
  border-radius: var(--radius-sm);
  color: var(--avs-hero-text);
  cursor: pointer;
  min-height: 44px;
  padding: 10px 14px;
  position: absolute;
  right: var(--av-floating-reserve);
  top: 16px;
  z-index: 3;
}
.home-carousel[data-slide-count="1"] .home-carousel-slide {
  padding-bottom: 32px;
}
.home-carousel :lang(hi) {
  letter-spacing: normal;
  text-transform: none;
}
@media (max-width: 767px) {
  .home-carousel {
    --hero-edge: 16px;
    min-height: calc(100vw * .5625 + 330px);
  }
  .carousel-loading {
    min-height: calc(100vw * .5625 + 330px);
  }
  .home-carousel-slide {
    align-content: start;
    align-items: stretch;
    display: flex;
    flex-direction: column;
    min-height: calc(100vw * .5625 + 330px);
    padding: 0 0 84px;
  }
  .home-carousel-media {
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
    inset: auto;
    position: relative;
    width: 100%;
  }
  .home-carousel-slide::before {
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--avs-hero-bg) 10%, transparent) 30%, var(--avs-hero-bg) 43%);
  }
  .home-carousel-slide[data-content-align] .home-carousel-media {
    inset: auto;
  }
  .home-carousel-slide[data-content-align] .home-carousel-content {
    background: var(--avs-hero-bg);
    border-radius: 0;
    margin: 0;
    max-width: none;
    padding: 20px;
    width: 100%;
  }
  .home-carousel :is(h1,h2) {
    font-size: clamp(27px, 7vw, 36px);
    margin-bottom: 12px;
    max-width: 20ch;
  }
  .home-carousel p:not(.carousel-kicker,.carousel-meta) {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .carousel-kicker {
    font-size: 10px;
    margin-bottom: 8px;
  }
  .carousel-actions {
    max-width: calc(100vw - 20px - var(--av-floating-reserve));
  }
  .home-carousel .carousel-actions .btn {
    flex: 1 1 145px;
    min-height: 44px;
    padding: 10px 14px;
  }
  .carousel-control {
    bottom: 16px;
    height: 44px;
    top: auto;
    transform: none;
    width: 44px;
  }
  .carousel-control-next {
    left: calc(var(--hero-edge) + 48px);
    right: auto;
  }
  .carousel-footer {
    bottom: 16px;
    gap: 6px;
    left: calc(var(--hero-edge) + 96px);
    max-width: calc(100% - var(--hero-edge) - 96px - var(--av-floating-reserve));
    min-height: 44px;
    padding: 4px 6px;
    transform: none;
  }
  .carousel-status {
    font-size: 10px;
    gap: 2px;
  }
  .carousel-dots {
    max-width: 80px;
  }
  .carousel-dots button {
    flex-basis: 24px;
    height: 32px;
    width: 24px;
  }
  .carousel-dots button::before {
    width: 8px;
  }
  .carousel-dots button.active::before {
    width: 18px;
  }
}
@media (max-height: 500px) and (min-width: 768px) {
  .home-carousel-slide {
    min-height: 400px;
    padding-block: 24px 76px;
  }
  .home-carousel :is(h1,h2) {
    font-size: clamp(28px, 3.6vw, 38px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-carousel-track, .home-carousel-content > *, .home-carousel .btn, .carousel-control {
    transition: none;
  }
}