/* Landing page — auto-loaded for the landing snippet (site/snippets/landing/landing.php).
   Laid out by the shared frame (layout/frame): left column · decorative/feature
   centre · right column, with a sticky column heading per collection. */

/* No horizontal padding — grid covers reach the column edges (Figma). Text
   rows (header, index) carry their own inline padding. */
.landing__collection {
  padding-bottom: var(--space-l);
}

.landing__sort {
  display: none;
  font-size: var(--fs-small);
  color: var(--color-muted);
}

/* --- Grid view ------------------------------------------------------------- */
/* Covers in a 2-up grid. An open issue's article list is a full-width row that
   drops below its shelf (see landing.php), so it spans the column while the cover
   beside it stays in place. Hairlines are per-cover borders, so empty cells stay
   on the column background. */
.landing__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.landing__grid > .card {
  border-bottom: var(--border);
}

.landing__grid > .card:nth-of-type(2n + 1) {
  border-right: var(--border);
}
/* Expanded issue contents — chapters (inert labels) + article rows. Same flat
   list layout in both views (per the Figma spec); full column width in the grid. */
.landing__children {
  display: flex;
  flex-direction: column;
}
.landing__grid > .landing__children {
  grid-column: 1 / -1;
}

/* Issue title bar under the active cover (Figma 290:5377): light-grey band,
   accent dot top-left, centred "#12 Title" set in the light (wght 100) instance. */
.landing__issue-head {
  display: flex;
  align-items: baseline;
  position: relative;
  padding: var(--space-2xs);
  border-bottom: var(--border);
  gap: var(--space-2xs);
  --fa-weight: 0;
  font-size: var(--fs-heading);
  line-height: 1.1;
}
.landing__issue-dot {
  --dot-size: 20px;
  flex: 0 0 20px;
  min-width: 0;
}
.landing__issue-title {
  min-width: 0; /* a long word breaks inside the bar (main.css) */
}

/* Chapter (collection) — a non-interactive group label heading its articles,
   a list item (ui/list-item). Figma 290:6970: plain title, left-padded,
   hairline below. */
.landing__chapter {
  padding-inline: var(--space-s);
}

/* --- Centre (tunnel + feature panel) --------------------------------------- */
.landing__center {
  position: relative;
  height: 100%;
  overflow: hidden;
  /* The featured item's colour (set by the landing component as --grid-color)
       tints the visual grid via currentColor; falls back to the accent. */
  color: var(--grid-color, var(--color-bg));
  transition: color 200ms ease;
}
.landing__center > svg {
  pointer-events: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Feature panel — two directions:
   • Preview (hover): appears BIG → normal from the front, leaves normal → SMALL
     into the centre.
   • Full (selected): REVERSED — emerges SMALL → normal out of the tunnel centre,
     then leaves growing back out toward the viewer. Paired with the tunnel
     reversing while selected (see step() in landing.snippet.js), a selected
     item reads as zooming out of the tunnel.
   ENTER is a keyframe (plays its full arc); LEAVE is a transition to the variant's
   hidden resting transform, easing from the current value if interrupted. Easing
   fitted to the grid's exponential ease-out, pos(t)=1−e^(−k·t). */
.landing__feature {
  --ease-tunnel: cubic-bezier(0.25, 0.75, 0.6, 1);
  /* Two rings of the tunnel either way: the grid's ring ratio squared toward
     the viewer (1.44), its inverse into the centre (≈ 0.69). */
  --feature-zoom-out: calc(var(--ring-ratio) * var(--ring-ratio));
  --feature-zoom-in: calc(1 / (var(--ring-ratio) * var(--ring-ratio)));
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xl) var(--space-m);
  text-align: center;
  color: var(--color-fg);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 200ms var(--ease-tunnel),
    transform 200ms var(--ease-tunnel);
}
.landing__feature.is-shown {
  opacity: 1;
  transform: scale(1);
}

/* Preview — from the front (big → normal), vanishing into the centre. */
.landing__feature--preview {
  transform: scale(var(--feature-zoom-in));
}
.landing__feature--preview.is-shown {
  animation: landing-feature-in 500ms var(--ease-tunnel) both;
}
@keyframes landing-feature-in {
  from {
    opacity: 0;
    transform: scale(var(--feature-zoom-out));
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Full (selected) — reversed: emerges out of the tunnel centre (small → normal),
   leaves growing back out toward the viewer. */
.landing__feature--full {
  transform: scale(var(--feature-zoom-out));
}
.landing__feature--full.is-shown {
  animation: landing-feature-emerge 500ms var(--ease-tunnel) both;
}
@keyframes landing-feature-emerge {
  from {
    opacity: 0;
    transform: scale(var(--feature-zoom-in));
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* The panel stays pointer-events:none (see base rule) even when shown: it covers
   the centre, so if it took pointer events, appearing/scaling over the cursor
   would fire phantom mouseover/out → toggle hover → restart this animation in a
   loop. Only the CTA (a shared pill button) of a shown panel opts back in so it
   stays clickable. */
.landing__feature.is-shown .landing__cta {
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .landing__feature,
  .landing__feature--preview,
  .landing__feature--full {
    transition-property: opacity;
    transform: none;
  }
  .landing__feature--preview.is-shown,
  .landing__feature--full.is-shown {
    animation: none;
    transform: none;
  }
}

/* Hover preview holds a single title+subtitle block — centre it (the full
   card keeps the three-track top/cover/bottom grid above). */
.landing__feature--preview {
  grid-template-rows: 1fr;
  align-items: center;
}

.landing__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  overflow: hidden;
}

.landing__section--top {
  align-self: flex-end;
}

.landing__section--center {
  width: 100%;
  align-items: center;
  margin: var(--space-m) 0;
}

.landing__corner {
  position: absolute;
  top: var(--space-s);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-meta);
  --fa-serif: 0;
}
.landing__corner--tl {
  left: var(--space-m);
  align-items: flex-start;
}
.landing__corner--tr {
  right: var(--space-m);
  align-items: flex-end;
}
.landing__ctx {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3xs);
}
.landing__ctx-dot,
.showcase__dot {
  --dot-size: var(--mark-size);
}

.landing__cover,
.showcase__cover {
  aspect-ratio: 2 / 3; /* the Cover crop, as in the Grid → box reserved before load, no layout shift */
  object-fit: cover;
}
.landing__cover {
  width: max(20%, 10rem);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.landing__feature-title {
  font-size: var(--fs-title);
  --fa-weight: 0;
  line-height: var(--leading-tight);
  max-width: 12em;
}
.landing__feature-sub,
.landing__feature-author,
.showcase__author {
  font-size: var(--fs-subtext);
}
.landing__feature-author,
.showcase__author {
  --fa-italic: 0;
}
.landing__feature-abstract {
  text-align: left;
  max-width: var(--measure);
  font-size: var(--fs-subtext);
  line-height: 1.1;
}
.landing__feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  justify-content: left;
}
/* Feature-card and showcase tags use the pill look from Figma (322:18603):
   translucent fill with an inset shadow, no border — distinct from the
   bordered sidebar .tag. */
.landing__feature-tags .tag,
.showcase__tags .tag {
  --fa-serif: 0;
  font-size: var(--fs-meta);
  line-height: inherit;
  white-space: nowrap;
  border: 0;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.01);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.25);
}

.landing__cta {
  margin: 0 auto;
}

/* Colour-dot navs (bottom-left + bottom-right) */
.landing__dots {
  position: absolute;
  bottom: var(--space-xs);
  display: flex;
  gap: var(--space-3xs);
  /*display: none;*/
}
.landing__dots--left {
  left: var(--space-m);
  display: none;
}
.landing__dots--right {
  right: var(--space-xs);
}
.landing__dot {
  --dot-size: var(--nav-dot-size);
}
.landing__dot.is-active .dot {
  background: var(--color-fg); /* contrasting fill marks the active dot */
}

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 60rem) {
  /* The frame stacks into a single column; the centre (and its feature/dots)
     is hidden — articles link straight to their page, issues expand in place
     (Figma mobile designs). */
  .landing__center {
    display: none;
  }

  /* A collection hash (/#/<collection-slug>) shows only that collection; a
     column left without it disappears with its border. */
  .landing--single .landing__collection:not(.is-current),
  .landing--single .frame__column:not(:has(.is-current)) {
    display: none;
  }

  /* Without a collection hash, the showcase of featured articles
     (landing/showcase) is all there is under the menubar: no lists, no site
     footer. */
  .landing:not(.landing--single) .frame,
  .landing--single .showcase,
  body:has(.landing:not(.landing--single)) .site-footer {
    display: none;
  }
  /* The showcase's cards snap on the page's own scroll (a scroll box of
     their own would keep iOS from collapsing its toolbars), each to just
     under the sticky menubar — always on a card, never between two. The
     page still bounces past the first card (pull to reload); the showcase
     reads a bounce as resting on it (see offset() in showcase.snippet.js). */
  html:has(.landing:not(.landing--single) .showcase__card) {
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--menubar-h);
  }
}