/*
 * home.css — port of idm-prototype/app/page.tsx's layout. Shared component styles
 * (card, section-heading, arrow-link, dither-image, program-card, featured-carousel)
 * live in assets/css/index.css since those snippets are reused across templates; this
 * file only holds markup unique to home.php.
 */

.home-hero {
  padding: 1.5rem 0 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.home-hero-pairs {
  /* Two columns: the words (which wrap freely) and the pause button, pinned to the
     right edge so it doesn't shift as the words change length. */
  --hero-pair-size: clamp(1.9rem, 5vw, 3.25rem);
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.75rem;
  align-items: start;
  font-family: var(--idm-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: var(--hero-pair-size);
  /* Halves the hero's 1.5rem gap below the pairs only. */
  margin-bottom: -0.75rem;
}
.home-hero-pair-words {
  /* Per-character spans (rendered/animated by assets/js/text-morph.js) live inside
     each .home-hero-pair-word; this is just the wrapping row. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.home-hero-pair-word {
  display: inline-block;
  position: relative;
}
.home-hero-pair-connector {
  color: #111;
  margin: 0 0.35em;
}
/* Forces the pair to always split across two lines on mobile (left word +
   connector, then the right word), instead of wrapping wherever a given
   cycle's word lengths happen to run out of row width — otherwise the hero's
   height (and the break point) shifts unpredictably as hero-pairs.js swaps
   in different-length pairs. */
@media screen and (max-width: 47.99em) {
  .home-hero-pair-word[data-hero-word="right"] {
    flex-basis: 100%;
  }
}
/* Pause/play for the pair cycle (see hero-pairs.js). Understated but always
   visible while the cycle can run; 2rem (40px) target, muted icon (>= 3:1).
   Vertically centered on the first line of words, so wrapping doesn't move it. */
.home-hero-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: calc((1.2 * var(--hero-pair-size) - 2rem) / 2);
  font-size: 1rem;
  color: var(--idm-text-muted);
  transition: color 0.2s ease-out;
}
.home-hero-pause[hidden] {
  display: none;
}
.home-hero-pause:hover {
  color: var(--riso-ink-text, var(--idm-text));
}
.home-hero-pause [data-hero-pause-icon="play"],
.home-hero-pause[data-paused] [data-hero-pause-icon="pause"] {
  display: none;
}
.home-hero-pause[data-paused] [data-hero-pause-icon="play"] {
  display: block;
}

.home-hero-statement {
  font-family: var(--idm-font-display);
  font-size: 1.15rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--idm-text) 90%, transparent);
  max-width: 36ch;
}
/* Mobile — same breakpoint as the mobile nav (index.css). */
@media screen and (max-width: 47.99em) {
  .home-hero-statement {
    font-size: 1rem;
  }
}

.home-work {
  padding: 2.5rem 0 4rem;
}

.home-programs {
  padding: 2.5rem 0 4rem;
}

.home-discovery-section {
  padding: 2.5rem 0 4rem;
}

/* Research: deliberately NOT part of the shared discovery-tile scroll flow —
   a plain section heading + 3-column card grid instead. */
.home-research-section {
  padding: 2.5rem 0 4rem;
}
.home-research-section .section-heading {
  margin-bottom: 0;
}
.home-research-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media screen and (min-width: 40em) {
  .home-research-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*
 * Programs / Exhibitions / Research headings sit on a shared 3-column grid
 * (matches app/page.tsx's HEADING_GRID_COLUMN comment) so their sticky labels
 * line up horizontally as you scroll past each section. Events intentionally
 * isn't part of this grid — its heading just sits in column 1.
 */
.discovery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media screen and (min-width: 40em) {
  .discovery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.section-heading-sticky {
  padding-bottom: 2rem;
}
/* .section-heading's own margin-bottom (assets/css/index.css) would double
   up with this wrapper's padding-bottom — the sticky wrapper owns the gap
   here instead. */
.section-heading-sticky .section-heading {
  margin-bottom: 0;
}
@media screen and (min-width: 40em) {
  .section-heading-sticky {
    position: sticky;
    top: 3.5rem;
    z-index: 5;
  }
}

/* Programs' card list sits at the same column the Exhibitions heading uses
   (col 2, span 2) — a deliberate alignment trick carried over from the
   prototype, not a coincidence. */
.home-programs-body {
  padding-top: 0.5rem;
}
@media screen and (min-width: 40em) {
  .home-programs-body .program-card-list {
    grid-column: 2 / span 2;
  }
}

.discovery-tiles {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.discovery-tile {
  display: block;
  width: 100%;
  color: var(--idm-text);
}
.discovery-tile-body {
  padding-top: 0.6rem;
}
.discovery-tile-title {
  font-family: var(--idm-font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--idm-text);
}
.discovery-tile-dates {
  font-family: var(--idm-font-mono);
  font-size: 0.72rem;
  color: var(--idm-text-muted);
  margin-top: 0.2rem;
}
.discovery-tile-subtitle {
  font-family: var(--idm-font-sans);
  font-size: 0.85rem;
  color: var(--idm-text-light);
  margin-top: 0.1rem;
}
.discovery-tile:hover .discovery-tile-title {
  color: var(--riso-ink-text, var(--idm-text-light));
}

/* Exhibitions/Research: full width, no offset below `sm:`; the staggered
   left/right offset (via --tile-ml/--tile-mr) only kicks in from `sm:` up. */
.discovery-tile-stack {
  width: 100%;
}
@media screen and (min-width: 40em) {
  .discovery-tile-stack {
    width: 38%;
    margin-left: var(--tile-ml, 0);
    margin-right: var(--tile-mr, 0);
  }
}

/* Events: full width on mobile, like exhibitions — the offset zig-zag
   (--tile-ml/--tile-mr, set inline in home.php) only kicks in from `sm:` up,
   same split as .discovery-tile-stack. A 45%-wide tile plus an offset margin
   was too cramped on phones. */
.discovery-tile-fixed {
  width: 100%;
}
@media screen and (min-width: 40em) {
  .discovery-tile-fixed {
    width: 38%;
    margin-left: var(--tile-ml, 0);
    margin-right: var(--tile-mr, 0);
  }
}