/* ==========================================================================
   Hero — editorial copy on the left, image composition on the right
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.96fr);
  align-items: start;
  gap: clamp(2rem, 4.35vw, 4.25rem);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0.9375rem var(--gutter) 0;
}

/* The reference composition is intentionally asymmetric: the gallery sits
   slightly inside the right edge. Locking its width keeps the image grid at
   a native 704 x 490 px ratio on large screens. */
@media (min-width: 1568px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 44rem;
    padding-right: calc(var(--gutter) + 1.3125rem);
  }
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */
.hero__content {
  max-width: 46.5rem;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: #5e5e5e;
}

.hero__title {
  margin-top: 0.625rem;
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.hero__title-accent {
  display: block;
  color: var(--color-periwinkle-ink);
}

.hero__lead {
  max-width: 43rem;
  margin-top: 0.625rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: #5a5a5a;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Date / category picker
   -------------------------------------------------------------------------- */
.experience-picker {
  margin-top: 1rem;
}

.calendar-teaser {
  margin-top: 1.25rem;
}

.calendar-teaser__text {
  font-size: var(--fs-ui);
  color: #656565;
}

.calendar-teaser__months {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.hero__gallery {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.625rem;
  aspect-ratio: 704 / 490;
}

/* Soft violet bloom tucked behind the images to separate them from the
   page gradient without introducing a hard edge. */
.hero__gallery::before {
  content: "";
  position: absolute;
  inset: -24% -20%;
  z-index: -1;
  background:
    radial-gradient(48% 44% at 60% 44%, rgba(199, 193, 243, 0.6), rgba(199, 193, 243, 0) 72%),
    radial-gradient(38% 42% at 94% 82%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  filter: blur(26px);
}

.media-card--tall {
  grid-row: 1 / span 2;
}

.media-card img {
  user-select: none;
}

/* --------------------------------------------------------------------------
   Entrance choreography (skipped entirely with reduced motion)
   -------------------------------------------------------------------------- */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__content > * {
  animation: rise-in 700ms var(--ease-out) both;
}

.hero__content > *:nth-child(1) {
  animation-delay: 40ms;
}

.hero__content > *:nth-child(2) {
  animation-delay: 100ms;
}

.hero__content > *:nth-child(3) {
  animation-delay: 170ms;
}

.hero__content > *:nth-child(4) {
  animation-delay: 240ms;
}

.hero__content > *:nth-child(5) {
  animation-delay: 310ms;
}

.hero__gallery {
  animation: rise-in 900ms var(--ease-out) 180ms both;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 2.5rem;
    padding-top: 1.75rem;
  }
}

@media (max-width: 1020px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 2rem;
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__lead {
    max-width: 40rem;
  }

  .hero__gallery {
    max-width: 46rem;
    margin-top: 0.5rem;
    aspect-ratio: 10 / 7;
  }
}

/* Between the stacked and the desktop layout the column is narrow, so the
   display size needs its own rhythm to keep two clean lines. */
@media (min-width: 641px) and (max-width: 1020px) {
  .hero__title {
    font-size: clamp(2.75rem, 5.6vw, 3.25rem);
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 1.5rem;
  }

  .hero__title {
    font-size: clamp(2rem, 8.2vw, 3rem);
  }

  .hero__lead {
    margin-top: 1.125rem;
    font-size: 1rem;
  }

  .experience-picker {
    margin-top: 1.25rem;
  }

  .chip {
    height: 2rem;
    padding: 0 0.6875rem;
    font-size: 0.75rem;
  }

  .search-bar {
    max-width: none;
  }

  .search-bar__submit {
    padding: 0 1.25rem;
  }

  .calendar-teaser {
    margin-top: 1.5rem;
  }

  .hero__gallery {
    aspect-ratio: 10 / 9;
    gap: 0.5rem;
    margin-top: 0.25rem;
  }

  .media-card {
    border-radius: 0.75rem;
  }

  .media-card__label {
    left: 0.5rem;
    bottom: 0.5rem;
    font-size: 0.625rem;
  }
}