/* ── Selection landing page (/selection/{slug}) ────────────────────────────
   Only the page's OWN furniture lives here: the hero and the closing copy.
   The product grid is a <selection-rail>, so everything below it is already
   styled by css/pages/home.css — which this page loads for exactly that
   reason. Do not restyle .home-rail* here; change it once, on the rail.

   The frame (max-width + gutters) is duplicated from home.css's shared
   section-frame rule rather than added to it: that list lives on the homepage
   and a page that merely borrows the rails should not reach into it. */

.sel-page-actions,
.sel-page-hero,
.sel-page-outro {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

.sel-page-hero {
    display: block;
    padding-top: 28px;
    padding-bottom: 8px;
}

/* A float is out of flow, so without this a portrait image taller than the copy
   would hang over the rails below instead of the hero growing to hold it. */
.sel-page-hero::after {
    content: '';
    display: block;
    clear: both;
}

/* Hero art is optional — without it the copy simply takes the full width.
   Floated rather than a flex column so the heading, subtitle and body copy WRAP
   around it and then run full width underneath, instead of every line being
   confined to a narrow right-hand column. */
.sel-page-hero-media {
    float: left;
    width: 42%;
    margin: 0 28px 16px 0;
}

.sel-page-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.sel-page-hero-copy { min-width: 0; }

.sel-page-title {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-color);
}

.sel-page-sub {
    margin: 10px 0 0;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.45;
    /* Brand accent — the one line that says what this page is for. Full
       opacity: the pink is AA on white only at 100% (#b60378 ≈ 6.9:1). */
    color: var(--pink-highlight);
}

/* Admin-authored body copy. nl2br gives it paragraphs; the max-width keeps a
   long paragraph readable instead of running the full 1200px. */
.sel-page-intro,
.sel-page-outro {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
}

.sel-page-intro { max-width: 68ch; }

/* With hero art present the intro shares its line box with the float, and a
   68ch CAP does not move out of the float's way — it just shortens the block,
   leaving ~120px of usable line beside a 42% image (measured). Lines beside the
   art are already ~650px, so the cap has nothing left to protect here. */
.sel-page-hero-media + .sel-page-hero-copy .sel-page-intro { max-width: none; }

.sel-page-outro {
    margin-top: 8px;
    padding-top: 20px;
    padding-bottom: 40px;
    border-top: 1px solid var(--border-color);
}

/* Stack below the rails' own tablet breakpoint: the hero splits its width with
   the art, so it runs out of room for a headline sooner than a grid does. */
@media (max-width: 820px) {
    .sel-page-hero {
        padding-top: 18px;
    }

    /* Un-float: art above the words, full width. It is already first in the
       DOM, so no ordering is needed once it stops floating. */
    .sel-page-hero-media {
        float: none;
        width: 100%;
        margin: 0 0 18px;
    }

    .sel-page-title { font-size: 28px; }
    /* 18px, not the desktop 16px: a phone is read at arm's length and the copy
       has the full width to itself once the art stacks above it. */
    .sel-page-sub,
    .sel-page-intro,
    .sel-page-outro { font-size: 18px; }
}

/* Count + "Save to list", above the grid. Shares the hero's frame so it
   lines up with both the copy above and the cards below. */
.sel-page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    /* Rule above, matching .sel-page-outro's: it closes the hero copy and opens
       the grid, which the float alone gave no edge to. */
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
    padding-top: 18px;
    padding-bottom: 4px;
}

.sel-page-actions-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
}

/* ── Page tiles — the /page hub and the "More pages" strip ─────────────────
   One tile per selection page. The image keeps its OWN proportions (the
   admin's art is mostly ~16:9, some 4:3): no crop, no forced ratio — the
   width/height attributes from the file reserve the box before it loads, and
   the grid aligns tiles to the top so a taller picture just makes a taller
   tile. Same card surface as the star/list tiles (.celeb-card). */

.sel-hub-crumbs,
.sel-hub-list,
.sel-more {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

.sel-hub-crumbs { padding-top: 20px; margin-bottom: 0; }
.sel-hub-hero { padding-top: 8px; padding-bottom: 20px; }
.sel-hub-list { padding-bottom: 48px; }

.sel-hub-empty {
    margin: 0;
    padding: 32px 0;
    font-size: 16px;
    color: var(--text-light);
}

.sel-tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.sel-tile {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sel-tile-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* The global a:hover in core.css underlines links; the tile lifts instead. */
.sel-tile-link:hover { text-decoration: none; }

.sel-tile-img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--bg-light);
}

.sel-tile-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 16px;
}

.sel-tile-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-color);
}

.sel-tile-sub {
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-light);
    /* A subtitle is one sentence of admin copy; three lines keep the tiles of a
       row close in height without cutting a normal one. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (hover: hover) {
    .sel-tile:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border-color: var(--pink-highlight);
    }
    .sel-tile:hover .sel-tile-title { color: var(--pink-highlight); }
}

.sel-tile-link:focus-visible {
    outline: 2px solid var(--pink-highlight);
    outline-offset: -2px;
    border-radius: var(--radius-md);
}

/* "More pages" under a page's own content. Rule above, like .sel-page-outro. */
.sel-more {
    margin-top: 8px;
    padding-top: 20px;
    padding-bottom: 40px;
    border-top: 1px solid var(--border-color);
}

.sel-more-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.sel-more-all {
    font-weight: 600;
    color: var(--pink-highlight);
    white-space: nowrap;
}

/* Tablet: two per row. */
@media (max-width: 900px) {
    .sel-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* Phone: one per row, full width — the art reads at its own size. */
@media (max-width: 560px) {
    .sel-tiles { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .sel-hub-crumbs { padding-top: 14px; }
    .sel-tile-title { font-size: 19px; }
    .sel-tile-sub { font-size: 16px; }
}