hero-carousel {
  display: block;
}

hero-carousel [hidden] {
  display: none;
}

hero-carousel header {
  position: relative;
  height: 88vh;
  min-height: 620px;
  overflow: hidden;
}

hero-carousel header > button {
  position: absolute;
  bottom: 11%;
  width: 5%;
  top: 0px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  color: rgb(255, 255, 255);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  transition: opacity 0.3s;
}

hero-carousel header:not(:hover) > button {
  opacity: 0;
  pointer-events: none;
}

hero-carousel header[data-skeleton] > button {
  display: none;
}

hero-carousel header > button:nth-of-type(1) {
  left: 0px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent);
}

hero-carousel header > button:nth-of-type(2) {
  right: 0px;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.42), transparent);
}

hero-carousel header > button svg {
  min-height: 1.33rem;
  min-width: 1.33rem;
}

hero-carousel header > button:nth-of-type(1) svg {
  rotate: 180deg;
}

hero-carousel header .stage {
  position: absolute;
  inset: 0px;
}

hero-carousel header .backdrop {
  position: absolute;
  inset: 0px;
  animation: heroBgIn 0.9s ease;
}

hero-carousel header .scrim {
  position: absolute;
  inset: 0px;
}

hero-carousel header .scrim-radial {
  background: radial-gradient(120% 90% at 78% 30%, rgba(120, 140, 150, 0.26), transparent 55%);
}

hero-carousel header .scrim-left {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, transparent, var(--background) 92%) 0%,
    color-mix(in srgb, transparent, var(--background) 50%) 32%,
    transparent 62%
  );
}

@keyframes heroBgIn {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heroTextIn {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

hero-carousel header .subject {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 40%;
  background: linear-gradient(0deg, rgb(20, 20, 20) 5%, rgba(20, 20, 20, 0.35) 55%, transparent);
}
hero-carousel header .subject .container {
  position: absolute;
  left: 3.6%;
  bottom: 19%;
  /* max-width: 46%; */
  max-width: 66%;
  z-index: 5;
  animation: 0.7s ease 0s 1 normal none running heroTextIn;
}

hero-carousel header .subject .title {
  font-weight: 900;
  font-size: 4.4vw;
  line-height: 0.96;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0px;
  max-width: 40vw;
  text-shadow: rgba(0, 0, 0, 0.55) 0px 2px 14px;
}

hero-carousel header .subject .tags {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 1.15vw;
  font-weight: 500;
  margin-top: 16px;
  text-shadow: rgba(0, 0, 0, 0.6) 0px 2px 8px;
}

hero-carousel header .subject .tags > span {
  display: flex;
  align-items: center;
  gap: 11px;
}

hero-carousel header .subject .tags > span::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text);
}

hero-carousel header .subject .tags > span:nth-of-type(1):before {
  display: none;
}

hero-carousel header .subject .desc {
  transition:
    opacity 0.7s,
    transform 0.7s,
    max-height 0.8s,
    margin 0.7s;
  opacity: 1;
  transform: translateY(0px);
  max-height: 160px;
  margin-top: 12px;
}

hero-carousel header .subject .desc[collapsed] {
  opacity: 0;
  transform: translateY(14px);
  max-height: 0px;
  margin-top: 0px;
  overflow: hidden;
  pointer-events: none;
}
hero-carousel header .subject .desc p {
  font-size: 1.15vw;
  line-height: 1.42;
  margin: 0px;
  max-width: 34vw;
  text-shadow: rgba(0, 0, 0, 0.65) 0px 2px 8px;
}
hero-carousel header .subject .cta {
  display: flex;
  gap: 14px;
  margin-top: 24px;
}
hero-carousel header .subject .cta button {
  display: flex;
  align-items: center;
  gap: 10px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  cursor: pointer;
  background: var(--text);
  color: var(--background);
  font-size: 19px;
  font-weight: 600;
  padding: 9px 27px 9px 22px;
  border-radius: 5px;
  transition: all ease 300ms;
}

hero-carousel header .subject .cta button:nth-of-type(2):not(:hover) {
  filter: brightness(0.5);
}

hero-carousel header .subject .cta button svg {
  width: 1rem;
  height: 1rem;
}

hero-carousel header .subject .rating {
  position: absolute;
  right: 0px;
  bottom: 24%;
  display: flex;
  align-items: center;
  gap: 0px;
  z-index: 5;
}

hero-carousel header .rating > button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: rgba(40, 40, 40, 0.35);
  color: rgb(255, 255, 255);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

hero-carousel header .rating > div {
  border-left: 3px solid rgba(255, 255, 255, 0.5);
  padding: 5px 40px 5px 14px;
  margin-left: 16px;
  font-size: 16px;
}

hero-carousel header .hero-dots {
  position: absolute;
  bottom: 18px;
  left: 0px;
  right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  z-index: 7;
}

hero-carousel header .hero-dots .hero-dot {
  width: 26px;
  height: 3px;
  border: none;
  padding: 0px;
  cursor: pointer;
  background: color-mix(in srgb, transparent, var(--text) 35%);
  transition: background 0.25s;
}

hero-carousel header .hero-dots .hero-dot[active] {
  background: var(--text);
}

/* ---- Skeleton screen (shown until slides are provided) ---- */

@keyframes heroSkeletonShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

hero-carousel header[data-skeleton] .backdrop,
hero-carousel header[data-skeleton] .title,
hero-carousel header[data-skeleton] .tags,
hero-carousel header[data-skeleton] .desc p {
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--background), var(--text) 6%) 25%,
    color-mix(in srgb, var(--background), var(--text) 15%) 37%,
    color-mix(in srgb, var(--background), var(--text) 6%) 63%
  );
  background-size: 200% 100%;
  animation: heroSkeletonShimmer 1.4s ease-in-out infinite;
}

hero-carousel header[data-skeleton] .backdrop {
  animation-duration: 2.2s;
}

hero-carousel header[data-skeleton] .title {
  width: 34vw;
  height: 4vw;
  border-radius: 8px;
}

hero-carousel header[data-skeleton] .tags {
  width: 18vw;
  height: 1.3vw;
  border-radius: 6px;
  margin-top: 20px;
}

hero-carousel header[data-skeleton] .tags::before,
hero-carousel header[data-skeleton] .tags > span::before {
  display: none;
}

hero-carousel header[data-skeleton] .desc p {
  width: 30vw;
  height: 3.4vw;
  border-radius: 6px;
}

hero-carousel header[data-skeleton] .cta,
hero-carousel header[data-skeleton] .rating,
hero-carousel header[data-skeleton] .hero-dots {
  visibility: hidden;
}

/* ---- Mobile ---- */
/* On narrow screens the `vw` type collapses and the `vw`/`%` width caps squeeze
   the copy, while the fixed-size buttons no longer fit on one row. Switch to
   readable `rem` type, let the text span the full width, and shrink the CTAs. */

@media (max-width: 768px) {
  hero-carousel header {
    height: 82vh;
    min-height: 560px;
  }

  /* Touch devices have no hover, so keep the nav arrows visible and tappable,
     but lift them into the media area so they don't sit over the copy/CTAs. */
  hero-carousel header > button {
    width: 12%;
    bottom: 44%;
  }
  hero-carousel header:not(:hover) > button {
    opacity: 1;
    pointer-events: auto;
  }

  hero-carousel header .subject {
    height: 58%;
  }

  hero-carousel header .subject .container {
    left: 5%;
    right: 5%;
    bottom: 14%;
    max-width: none;
  }

  hero-carousel header .subject .title {
    font-size: clamp(2rem, 11vw, 3.2rem);
    max-width: none;
  }

  hero-carousel header .subject .tags {
    font-size: 0.8rem;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
  }
  hero-carousel header .subject .tags > span {
    gap: 8px;
  }

  hero-carousel header .subject .desc {
    margin-top: 10px;
  }
  hero-carousel header .subject .desc p {
    font-size: 0.92rem;
    line-height: 1.45;
    max-width: none;
  }

  hero-carousel header .subject .cta {
    gap: 10px;
    margin-top: 18px;
  }
  hero-carousel header .subject .cta button {
    font-size: 0.95rem;
    padding: 10px 20px;
    border-radius: 6px;
    white-space: nowrap;
  }
  hero-carousel header .subject .cta button svg {
    width: 0.9rem;
    height: 0.9rem;
  }

  /* Skeleton placeholders sized to match the mobile type. */
  hero-carousel header[data-skeleton] .title {
    width: 62vw;
    height: 11vw;
  }
  hero-carousel header[data-skeleton] .tags {
    width: 46vw;
    height: 3.6vw;
  }
  hero-carousel header[data-skeleton] .desc p {
    width: 74vw;
    height: 8vw;
  }
}