/* looks-hub.css - the /looks/ hub listing page.
   Auto-loaded by _main.php for the `looks-hub` template (css/{template}.css).
   Mobile-first. Consumes Velvet Cinema tokens from design-tokens.css via style.css.
   Verify in BOTH light and dark themes before shipping.

   Elevation pass (2026-07-07, punchlist §16): promote-the-first featured lead
   card (dominant moment), theme-adaptive hero depth (rose glow light / teal glow
   dark), numbered editorial index (01, 02...), image-zoom + title underline
   micro-interactions. Card TITLES stay grotesk (--font-display) per the LOCKED
   two-voice system - only the hero + the index numeral carry the serif voice. */

/* ─────────────────────────────────────────────────────────────
   HERO
   DOMINANT MOMENT: oversized Fraunces serif title over warm depth - .looks-hub__title
   Light = warm cream depth (rose radial + cream gradient); dark = cinematic
   teal glow. --color-accent-glow is rose in light, teal in dark, so one rule
   gives both experiences. Padding tightened so the first look pulls into the fold
   instead of leaving a ~460px hollow void (punchlist spacing MAJOR).
   ───────────────────────────────────────────────────────────── */
.looks-hub__header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
    background:
        radial-gradient(ellipse 90% 70% at 20% 0%, color-mix(in srgb, var(--color-accent-glow) 13%, transparent) 0%, transparent 60%),
        linear-gradient(to bottom, var(--color-bg-mid) 0%, var(--color-bg) 100%);
}
/* Faint grain so the hero band has tooth, not a flat wash. */
.looks-hub__header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.05;
    background-image: radial-gradient(circle at 1px 1px, var(--color-heading) 1px, transparent 0);
    background-size: 24px 24px;
}
[data-theme="dark"] .looks-hub__header::before { opacity: 0.07; }

/* Velvet Cinema editorial serif hero (matches the pillar heroes: home
   .hero__heading, .svcs-hero__title) - Fraunces, light weight, optical sizing. */
.looks-hub__title {
    font-family: var(--font-serif);
    font-optical-sizing: auto;
    font-size: clamp(2.6rem, 1.6rem + 5vw, 5rem);
    font-weight: 350;
    line-height: 1.0;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    text-wrap: balance;
}
.looks-hub__title em {
    font-style: italic;
    font-weight: 480;
    color: var(--color-rose-deep);
}
.looks-hub__lede {
    max-width: 58ch;
    margin-top: var(--space-md, 1rem);
    font-size: var(--text-lg, 1.125rem);
    line-height: 1.6;
    color: var(--color-body);
}

/* ─────────────────────────────────────────────────────────────
   GRID SECTION
   Tighten the top so the featured card sits near the fold; keep generous
   bottom air. Dark gets a faint off-axis glow so the grid field isn't a flat
   navy slab below the lit hero.
   ───────────────────────────────────────────────────────────── */
.looks-hub__grid-section {
    position: relative;
    isolation: isolate;
    padding-block: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem) var(--space-section);
}
[data-theme="dark"] .looks-hub__grid-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 42vh;
    z-index: -1;
    pointer-events: none;
    opacity: 0.08;
    background: radial-gradient(70% 100% at 84% 0%, var(--color-accent-glow) 0%, transparent 70%);
}

.looks-hub__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 1rem + 1vw, 2rem);
    counter-reset: look;
}
.looks-hub__card { counter-increment: look; }

.looks-hub__card-link {
    display: block;
    position: relative;
    text-decoration: none;
    border-radius: var(--radius-lg, 1rem);
    overflow: hidden;
    background: var(--color-bg-card, transparent);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
/* Dark cards lift off the field with an inset top-light + softer border. */
[data-theme="dark"] .looks-hub__card-link {
    background: var(--color-bg-elevated);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-md);
}

.looks-hub__card-frame {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--color-bg-alt);
    aspect-ratio: 3 / 4; /* hub cards crop intentionally; detail grid never does */
}
.looks-hub__card-picture {
    display: contents; /* webp <picture> stays layout-invisible; img keeps the frame box */
}
.looks-hub__card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.looks-hub__card-frame-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--color-muted);
    opacity: 0.45;
}

.looks-hub__card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: var(--space-md, 1rem);
}
/* Numbered editorial index (01, 02...) - the page's bespoke signature, set in the
   serif voice so it reads as a magazine folio, not a UI label. */
.looks-hub__card-index {
    font-family: var(--font-serif);
    font-optical-sizing: auto;
    font-size: var(--text-sm, 0.9rem);
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--color-muted);
    opacity: 0.75;
}
.looks-hub__card-index::before { content: counter(look, decimal-leading-zero); }

.looks-hub__card-title {
    /* Title stays grotesk (functional voice). Inline so the hover underline-reveal
       hugs the text width instead of spanning the padded box. */
    display: inline;
    font-family: var(--font-display, sans-serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    /* Title is a <span> inside the card <a>, so it inherited the teal link color
       and read as a rash across the grid. Pin it to heading color; teal is
       reserved for the hover underline-reveal below. */
    color: var(--color-heading);
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0 100%;
    padding-bottom: 3px;
}

/* ─────────────────────────────────────────────────────────────
   FEATURED LEAD CARD
   DOMINANT MOMENT: full-width editorial split, oversized title + CTA - .looks-hub__card--feature
   Stacked on mobile (bigger title); horizontal image/copy split from 48rem up.
   ───────────────────────────────────────────────────────────── */
.looks-hub__card--feature .looks-hub__card-index { font-size: var(--text-base, 1rem); }
.looks-hub__card--feature .looks-hub__card-title {
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
    /* Constrain the measure so the title wraps to 2-3 lines and commands the
       copy column instead of floating as one short line in a wide void. */
    max-width: 13ch;
}
.looks-hub__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    font-family: var(--font-body);
    font-size: var(--text-sm, 0.9rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-accent);
}
.looks-hub__card-cta .ph-icon { flex: none; }

/* ---- Tablet ---- */
@media (min-width: 48rem) {
    .looks-hub__grid { grid-template-columns: repeat(2, 1fr); }
    .looks-hub__card--feature {
        grid-column: 1 / -1;
    }
    .looks-hub__card--feature .looks-hub__card-link {
        display: grid;
        /* Portrait media column (looks covers are 3:4). Portrait-proportioned width
           so the uncropped photo commands the split as a cinematic portrait, with
           the oversized title owning the copy column - an editorial portrait split,
           not a letterbox. */
        grid-template-columns: clamp(17rem, 36%, 26rem) 1fr;
        align-items: stretch;
    }
    /* NO CROP. Ben's rule: portraits are never cropped to landscape - shown at
       full aspect ratio. All looks covers are 3:4, so the featured frame matches
       the cover ratio (object-fit:cover then has nothing to trim). The copy
       column stretches to the portrait's height and centers its content. */
    .looks-hub__card--feature .looks-hub__card-frame {
        aspect-ratio: 3 / 4;
        height: 100%;
    }
    .looks-hub__card--feature .looks-hub__card-body {
        justify-content: center;
        gap: 0.55rem;
        padding: clamp(1.5rem, 1rem + 2.6vw, 3.5rem);
    }
}

/* ---- Desktop ---- */
@media (min-width: 64rem) {
    .looks-hub__grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
    }
    /* Featured keeps spanning the full row above the 3-up grid. */
    .looks-hub__card--feature { grid-column: 1 / -1; }
}
/* Raised/lowered stagger (playbook item 2 - grid rhythm): the MIDDLE column of
   each 3-up row drops by --space-2xl for a consistent, repeating arc rhythm.
   Middle column = child 3,6,9 (nth-child(3n)) because the full-width featured
   lead is child 1. A 3-col grid has an odd column count, so nth-child(even)
   would flip the offset column every row (looks broken) - targeting the middle
   column keeps the SAME column dropped every row. Uses margin (reserves space,
   no overlap); reduced-motion gated. Cards are uniform (fixed 3:4 media + short
   title) so the offset reads designed. */
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
    .looks-hub__grid > .looks-hub__card:nth-child(3n):not(.looks-hub__card--feature) {
        margin-block-start: var(--space-2xl);
    }
}

/* ─────────────────────────────────────────────────────────────
   MOTION - hover micro-interactions (tier 3). Two mechanisms: transform + background-size.
   ───────────────────────────────────────────────────────────── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .looks-hub__card-link {
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .looks-hub__card-img {
        transition: transform var(--transition-slow, 500ms) ease;
    }
    .looks-hub__card-title {
        transition: background-size var(--transition-base, 300ms) ease;
    }
    .looks-hub__card-cta .ph-icon {
        transition: transform var(--transition-base, 300ms) ease;
    }
    .looks-hub__card-link:hover,
    .looks-hub__card-link:focus-visible {
        transform: translateY(-4px);
        box-shadow: var(--shadow-xl, 0 20px 40px rgba(0, 0, 0, 0.18));
        border-color: var(--color-border-hover);
    }
    .looks-hub__card-link:hover .looks-hub__card-img,
    .looks-hub__card-link:focus-visible .looks-hub__card-img {
        transform: scale(1.04);
    }
    .looks-hub__card-link:hover .looks-hub__card-title,
    .looks-hub__card-link:focus-visible .looks-hub__card-title {
        background-size: 100% 2px;
    }
    .looks-hub__card-link:hover .looks-hub__card-cta .ph-icon,
    .looks-hub__card-link:focus-visible .looks-hub__card-cta .ph-icon {
        transform: translateX(3px);
    }
}