/**
 * Hero section — values from /specs/hero.spec.md + production theme.css.
 * Shared tokens live in global.css (:root).
 */

/* -------------------------------------------------------------------------- */
/* Section shell                                                              */
/* -------------------------------------------------------------------------- */

.hero {
  position: relative;
  margin: calc(var(--spacing) * 2.5);
  overflow: hidden;
  border-radius: var(--radius);
  color: rgb(255, 255, 255);
  opacity: 0;
  /* Opacity driven by GSAP ScrollTrigger in hero.js */
}

/*
 * Production sets these on the hero node (page.html inline style) and uses
 * div[data-section-type="full-bleed-hero"].hero-height-dynamic rules in theme.css.
 */
.hero.hero-height-dynamic,
.hero[data-section-type="full-bleed-hero"].hero-height-dynamic {
  --hero-height-mobile: calc(100vh - var(--hero-header-offset-mobile-lg));
  --hero-height-desktop: calc(100vh - var(--hero-header-offset-desktop-lg));
  height: var(--hero-height-mobile);
}

@media (min-width: 48rem) {
  .hero.hero-height-dynamic,
  .hero[data-section-type="full-bleed-hero"].hero-height-dynamic {
    height: var(--hero-height-desktop);
  }
}

body.global-banner-active .hero.hero-height-dynamic,
body.global-banner-active .hero[data-section-type="full-bleed-hero"].hero-height-dynamic {
  height: calc(var(--hero-height-mobile) - var(--global-banner-height));
}

@media (min-width: 48rem) {
  body.global-banner-active .hero.hero-height-dynamic,
  body.global-banner-active .hero[data-section-type="full-bleed-hero"].hero-height-dynamic {
    height: calc(var(--hero-height-desktop) - var(--global-banner-height));
  }
}

/* Spec: div[data-section-type="full-bleed-hero"].hero-height-dynamic */

/* -------------------------------------------------------------------------- */
/* Carousel (spec swiper / swiper-wrapper / swiper-slide utilities)           */
/* -------------------------------------------------------------------------- */

.hero__carousel {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  overflow: hidden;
}

.hero__slides {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  box-sizing: content-box;
}

.hero__slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  color: rgb(255, 255, 255);
  backface-visibility: hidden;
  transform: translateZ(0);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.hero__slide--active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* Production: w-full h-full object-cover on hero images */
.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Production: hidden md:block */
.hero__image--desktop {
  display: none;
}

/* Production: span.hidden.max-md:block + img.block.md:hidden */
.hero__media--mobile {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__image--mobile {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 48rem) {
  .hero__image--desktop {
    display: block;
  }

  .hero__media--mobile,
  .hero__image--mobile {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Content overlay (spec: inset-0, p-8, flex-col, justify-end, items-start)   */
/* -------------------------------------------------------------------------- */

/* Production: absolute inset-0 flex size-full flex-col p-8 !pt-20 md:p-16 justify-end */
.hero__content {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  z-index: var(--z-content);
  opacity: 0;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: calc(var(--spacing) * 8);
  padding-top: calc(var(--spacing) * 20);
  text-align: left;
  pointer-events: none;
}

@media (min-width: 48rem) {
  .hero__content {
    align-items: flex-end;
    align-self: stretch;
    padding: calc(var(--spacing) * 16);
    text-align: right;
  }
}

.hero__content a {
  pointer-events: auto;
}

.hero__eyebrow:empty,
.hero__title:empty {
  display: none;
  margin: 0;
}

/* Eyebrow — theme font-mono */
.hero__eyebrow {
  position: relative;
  z-index: var(--z-content);
  margin: 0 0 16px;
  padding: 0;
  font-family: "Akkurat Mono", ui-monospace, monospace;
  font-size: var(--text-xs);
  line-height: calc(var(--spacing) * 5);
  font-weight: var(--font-weight-medium);
  font-synthesis: none;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgb(255, 255, 255);
}

/* Title — theme font-sans, matching production hero */
.hero__title {
  position: relative;
  z-index: var(--z-content);
  margin: 0 0 24px;
  padding: 0;
  font-family: "Geograph", system-ui, sans-serif;
  font-size: var(--text-2xl);
  line-height: calc(var(--spacing) * 8);
  font-weight: var(--font-weight-normal);
  font-synthesis: none;
  letter-spacing: var(--tracking-wide);
  color: rgb(255, 255, 255);
}

/* Actions row — spec: grid gap-2 grid-cols-2 */
.hero__actions {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing) * 2);
  pointer-events: auto;
}

/* Primary CTA — spec: .btn.btn-primary */
.hero__cta {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  margin: 0;
  border: 1px solid var(--color-white);
  border-radius: 3.40282e38px;
  background-color: rgb(255, 255, 255);
  color: rgb(33, 33, 33);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  transition:
    background-color 0.2s var(--ease-sine-in-out),
    color 0.2s var(--ease-sine-in-out),
    border-color 0.2s var(--ease-sine-in-out),
    opacity 0.2s var(--ease-sine-out);
}

/* Spec: @media (hover: hover) .btn.btn-primary:hover */
@media (hover: hover) {
  .hero__cta:hover {
    border-color: var(--color-black);
    background-color: var(--color-black);
    color: var(--color-white);
  }
}