/* Landing page — auto-loaded for the landing snippet (site/snippets/landing.php).
   Three-track layout: left column · decorative/feature centre · right column.
   Columns scroll independently; collection titles stick. */

[x-cloak] {
    display: none !important;
}

.landing {
    display: grid;
    grid-template-columns: var(--cols-page);
    grid-template-rows: 100%;
    height: calc(100vh - var(--menubar-h));
}

/* --- Columns (independent scroll containers) ------------------------------- */
.landing__column {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.landing__column--left {
    order: 0;
    border-right: var(--border);
}
.landing__column--right {
    order: 2;
    border-left: var(--border);
}

/* 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__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--space-xs) var(--space-s) var(--space-3xs);
    background: var(--color-bg);
    border-bottom: var(--border);
}
.landing__heading {
    font-size: var(--fs-heading);
    font-weight: 400;
}
.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 {
    flex: 0 0 20px;
    /*position: absolute;*/
    display: block;
    min-width: 0;
    width: 20px;
    height: 20px;
    clip-path: var(--shape, var(--shape-circle));
    background: var(--dot, #ccc);
}
.landing__issue-title {


}

/* Chapter (collection) — a non-interactive group label heading its articles.
   Figma 290:6970: plain title, left-padded, hairline below. */
.landing__chapter {
    padding: var(--space-2xs) var(--space-s);
    border-bottom: var(--border-thin);
    font-size: var(--fs-subheading);
}

/* --- Centre (tunnel + feature panel) --------------------------------------- */
.landing__center {
    order: 1;
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    /* 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;
}

/* The animated tunnel layer scales about the grid centre. Its rings sit
   symmetrically around (0,0) in the group's local space, so fill-box + centre
   pin the zoom to the middle regardless of the viewBox/object-fit crop. */
.landing__center > svg #test {
    transform-box: fill-box;
    transform-origin: center;
}


/* 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 renderGrid), 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);
    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);
    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(0.69); }
.landing__feature--preview.is-shown { animation: landing-feature-in 500ms var(--ease-tunnel) both; }
@keyframes landing-feature-in {
    from { opacity: 0; transform: scale(1.44); }
    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(1.44); }
.landing__feature--full.is-shown { animation: landing-feature-emerge 500ms var(--ease-tunnel) both; }
@keyframes landing-feature-emerge {
    from { opacity: 0; transform: scale(0.69); }
    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 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;
}

.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-s);
    align-items: flex-start;
}
.landing__corner--tr {
    right: var(--space-s);
    align-items: flex-end;
}
.landing__ctx {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-3xs);
}
.landing__ctx-dot {
    width: 0.75em;
    height: 0.75em;
    clip-path: var(--shape, var(--shape-circle));
    background: var(--dot, #ccc);
}

.landing__cover {
    width: max(20%, 10rem);
    aspect-ratio: 320 / 420;   /* matches the server-side crop → box reserved before load, no layout shift */
    object-fit: cover;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.landing__feature-title {
    font-size: var(--fs-title);
    font-weight: 400;
    line-height: var(--leading-tight);
    max-width: 12em;
}
.landing__feature-sub,
.landing__feature-author {
    font-size: var(--fs-subtext);
}
.landing__feature-author {
    --fa-italic: 100;
}
.landing__feature-abstract {
    max-width: 34rem;
    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 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 {
    --fa-serif: 0;
    padding: var(--space-2xs) var(--space-s);
    font-size: var(--fs-meta);
    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 {
    --fa-serif: 0;
    font-size: var(--fs-subheading);
    width: max-content;
    margin: 0 auto;
    padding:  var(--space-2xs) var(--space-s);
    background: var(--color-bar);
    border-radius: 50px;
    box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.25);
}
.landing__cta:hover {
    text-decoration: none;
    background: #dcdcdc;
}

/* Colour-dot navs (bottom-left + bottom-right) */
.landing__dots {
    position: absolute;
    bottom: var(--space-m);
    display: flex;
    gap: var(--space-2xs);
    /*display: none;*/

}
.landing__dots--left {
    left: var(--space-m);
    display: none;
}
.landing__dots--right {
    right: var(--space-m);
}
.landing__dot {
    width: 20px;
    height: 20px;
    clip-path: var(--shape, var(--shape-circle));
    background: var(--dot, #ccc);
}
.landing__dot.is-active {
    background: var(--color-fg);   /* contrasting fill marks the active dot */
}

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 60rem) {
    /* Single column; centre (and its feature/dots) hidden — articles link
     straight to their page, issues expand in place (Figma mobile designs). */
    .landing {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        height: auto;
    }
    .landing__column {
        height: auto;
        overflow: visible;
    }
    .landing__column--left,
    .landing__column--right {
        border: 0;
        border-bottom: var(--border);
    }
    .landing__center {
        display: none;
    }
}