/* look.css - individual /looks/{slug}/ look pages.
   Auto-loaded by _main.php for the `look` template (css/{template}.css).
   Mobile-first. Consumes Velvet Cinema tokens from design-tokens.css via style.css.
   The 12-photo grid reuses .photo-card (styled by photo-library.css); this file
   only owns the grid layout and the page-specific prose/faq/header rules.
   Verify in BOTH light and dark themes before shipping. */

/* ---- Header / breadcrumb ---- */
.look__breadcrumb {
    font-size: var(--text-sm, 0.875rem);
    letter-spacing: 0.02em;
    margin-bottom: var(--space-md, 1rem);
}
.look__breadcrumb a {
    text-decoration: none;
    /* Tap target: these crumbs were 38x16 at 320 and 42x19 at 768 - under the
       floor on BOTH axes, so an ::after alone is not enough. This is the same
       recipe already used by .cd-crumbs (career detail) and the inspiration
       crumbs, which both measure 44.75 wide. The look pages were the only
       breadcrumb left without it, because look-detail pages match no sweep
       signature and were dropped from the sample before they could be measured.
       inline-block + min-width fixes the horizontal axis no ::after can reach.
       Nearest other control is the header logo 82px above and a photo card
       2696px below, so widening and expanding steal nothing. */
    --hit-expander: 1;
    position: relative;
    display: inline-block;
    min-width: 44px;
}
/* Invisible vertical hit-expander -> 44px tap target; crumb text stays compact.
   Centred is safe here - verified nothing paints over the zone, unlike
   .post-hero__eyebrow where the h1 below forced an upward-anchored variant. */
.look__breadcrumb a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
}
.look__breadcrumb a:hover,
.look__breadcrumb a:focus-visible { text-decoration: underline; }

/* DOMINANT MOMENT: editorial serif hero headline - .look__title */
/* Velvet Cinema editorial serif hero (matches .chero__title / .svcs-hero__title).
   Was var(--font-display) - that token is Schibsted GROTESK, not the serif, so this
   was the only page hero on the site rendering in sans. Title is dynamic + escaped,
   so it stays plain (no rose-italic accent) per the dynamic-title rule. */
.look__title {
    font-family: var(--font-serif);
    font-optical-sizing: auto;
    font-size: clamp(2.6rem, 1.6rem + 5vw, 5rem);
    font-weight: 350;
    letter-spacing: -0.015em;
    line-height: 1.02;
    margin: 0;
    text-wrap: balance;
}

/* Eyebrow adds the category the heading does not carry (the heading already
   states the look + city). Base .eyebrow supplies font/tracking/colour. */
.look .look__eyebrow {
    margin: 0 0 var(--space-sm);
}

/* Close the dead band between the H1 and the first paragraph: the header's
   bottom padding and the prose section's top padding were stacking. */
.look .look__header {
    padding-bottom: var(--space-lg);
}

/* Header shares the prose measure so breadcrumb, eyebrow, H1 and body copy all
   hang off ONE left edge. Without this the header sat at the container edge
   while the centred 68ch prose began ~270px further right, which read as a
   misalignment rather than an intentional editorial column. */
.look .look__header > .container {
    max-width: 68ch;
    margin-inline: auto;
}
.look .look__prose {
    padding-top: var(--space-xl);
}

/* ---- Prose ---- */
.look__prose-inner {
    max-width: 68ch;
    margin-inline: auto;
}
.look__prose-inner p {
    margin: 0 0 1.25rem;
    line-height: 1.7;
}

/* DOMINANT MOMENT: rose drop-cap lede opening the story - .look__prose-inner p:first-of-type */
/* The page had no bespoke moment and opened as a flat text column. Mirrors the
   shipped .post-body drop cap in inspiration.css so the looks read as editorial. */
.look__prose-inner > p:first-of-type {
    font-size: var(--text-lg);
    line-height: 1.6;
}
.look__prose-inner > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 4.2em;
    line-height: 0.85;
    font-weight: 800;
    color: var(--color-rose);
    margin: 0.08em 0.12em 0 0;
    padding: 0;
}

/* ---- Photo grid (cards styled by photo-library.css) ---- */
.look__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md, 1rem);
}

/* ---- FAQ ---- */
.look__faq-inner { max-width: 72ch; margin-inline: auto; }
/* Major section title -> serif (two-voice rule); grotesk stays for card/UI titles.
   Same var(--font-display) mix-up as .look__title had. */
.look__faq-title {
    font-family: var(--font-serif);
    font-optical-sizing: auto;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
    font-weight: 380;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0 0 1.25rem;
    text-wrap: balance;
}
.look__faq-list { margin: 0; }
.look__faq-q {
    font-weight: 600;
    margin-top: 1.25rem;
}
.look__faq-a {
    margin: var(--space-sm, 0.5rem) 0 0;
    line-height: 1.65;
    color: var(--color-muted, inherit);
}

/* ---- Look actions (service + gallery links) ---- */
.look__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

.look__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-button);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    text-decoration: none;
    border: 2px solid transparent;
}

/* Filled accent variant (Book service CTA) */
.look__action--book {
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    border-color: var(--color-btn-primary-bg);
}

/* Outline / secondary variant (See more in gallery) */
.look__action--gallery {
    background-color: transparent;
    color: var(--color-btn-outline-text);
    border-color: var(--color-btn-outline-border);
}

@media (prefers-reduced-motion: no-preference) {
    .look__action {
        transition: background-color var(--transition-base),
                    color var(--transition-base),
                    border-color var(--transition-base);
    }

    .look__action--book:hover,
    .look__action--book:focus-visible {
        background-color: var(--color-accent-hover);
        border-color: var(--color-accent-hover);
    }

    .look__action--gallery:hover,
    .look__action--gallery:focus-visible {
        background-color: var(--color-btn-outline-border);
        color: var(--color-bg);
    }
}

.look__action:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 3px;
}

/* ---- Tablet ---- */
@media (min-width: 48rem) {
    .look__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Desktop ---- */
@media (min-width: 64rem) {
    .look__grid { grid-template-columns: repeat(4, 1fr); }
}