/* site/css/wolf-stone.css — Wolf & Stone v2 ONLY (site-leah/wolf-and-stone.html).
   Loaded AFTER leah.css. Reuses every V4 token (--espresso/--cream/--gold,
   --theme-*, --gold-22/40/70, --ease) already defined in styles.css — none
   redeclared here. This file adds exactly the 3 things v2 needs that no
   existing component covers:

     1 .ws2-gallery / .ws2-piece  — asymmetric editorial photo mosaic (§3)
     2 .ws2-process               — 01-04 as a plain typographic row, no
                                     boxes/circles (§4 — deliberately NOT
                                     design.css's .d-method, which is boxed)
     3 .ws2-src / .ws2-note / .ws2-why / .ws2-ctas — small layout helpers
       for §5 (private sourcing duo), the italic note under §3, the
       centered §6 block, and the CTA row used in the hero + final CTA.

   Everything else in the page (hero, section titles, form, final CTA) is
   the SHARED .aeterna-hero/.aeterna-section__title/.body-copy/.eyebrow/
   .cta/.design-form/.lw-form/.lw-ws-line/.lw-final-cta vocabulary already
   in styles.css / design.css / leah.css — deliberately not duplicated. */


/* ============================================================
   1. GALLERY — 5 pieces (p1..p5), 12-col asymmetric grid on desktop
   (implicit auto-rows: a row-spanning piece's box is sized by the grid
   algorithm to match the combined height of the rows it spans — the
   standard CSS-grid editorial-mosaic technique, no JS masonry needed).
   Single column on mobile, offsets reset. Object-position is set per
   piece below specifically so p1/p2 (which currently share the same
   underlying placeholder photo — design-before and design-after are the
   same source image today) crop into visibly different frames instead
   of reading as a duplicate. */
.ws2-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 32px 24px;
    margin-top: 56px;
}
.ws2-piece {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ws2-piece__frame {
    position: relative;
    overflow: hidden;
    background: var(--theme-canvas-alt);
}
.ws2-piece__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease, ease);
}
.ws2-piece:hover .ws2-piece__img { transform: scale(1.025); }
.ws2-piece__cap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ws2-piece__name {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    color: var(--theme-ink);
}
.ws2-piece__sub {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--theme-ink-45);
}

/* Placement — cols 1-12: p1(1-5, rows1-2) · p2(6-8, row1) · p3(9-12,
   rows1-2) · p4(6-8, row2) · p5(1-4, row3). p2/p4 stack in the same
   column band as p1/p3's combined two-row height; p5 sits alone on row
   3 with generous negative space to its right — asymmetric on purpose. */
.ws2-piece--p1 { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.ws2-piece--p1 .ws2-piece__frame { aspect-ratio: 3 / 4; }
.ws2-piece--p1 .ws2-piece__img { object-position: 22% 28%; }

.ws2-piece--p2 { grid-column: 6 / span 3; grid-row: 1; margin-top: 64px; }
.ws2-piece--p2 .ws2-piece__frame { aspect-ratio: 1 / 1; }
.ws2-piece--p2 .ws2-piece__img { object-position: 78% 72%; }

.ws2-piece--p3 { grid-column: 9 / span 4; grid-row: 1 / span 2; }
.ws2-piece--p3 .ws2-piece__frame { aspect-ratio: 4 / 5; }
.ws2-piece--p3 .ws2-piece__img { object-position: 50% 30%; }

.ws2-piece--p4 { grid-column: 6 / span 3; grid-row: 2; }
.ws2-piece--p4 .ws2-piece__frame { aspect-ratio: 16 / 10; }
.ws2-piece--p4 .ws2-piece__img { object-position: 50% 60%; }

.ws2-piece--p5 { grid-column: 1 / span 4; grid-row: 3; margin-top: 48px; }
.ws2-piece--p5 .ws2-piece__frame { aspect-ratio: 3 / 4; }
.ws2-piece--p5 .ws2-piece__img { object-position: 50% 20%; }

@media (max-width: 820px) {
    .ws2-gallery { grid-template-columns: 1fr; gap: 48px; margin-top: 40px; }
    .ws2-piece--p1, .ws2-piece--p2, .ws2-piece--p3,
    .ws2-piece--p4, .ws2-piece--p5 {
        grid-column: auto;
        grid-row: auto;
        margin-top: 0;
    }
}

/* Discreet italic note under the gallery. */
.ws2-note {
    margin-top: 32px;
    max-width: 60ch;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.6;
    color: var(--theme-ink-45);
}


/* ============================================================
   2. PROCESS ROW — 01-04, plain typographic line (task spec: "SEM
   caixas" — no boxes/circles, unlike design.css's .d-method). A thin
   hairline divider marks the gap between steps instead of a bordered
   card; becomes a horizontal top-divider stack on mobile. */
.ws2-process {
    display: flex;
    flex-wrap: wrap;
    gap: 36px 28px;
    margin-top: 48px;
}
.ws2-process__step {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 28px;
    border-right: 1px solid var(--theme-hair);
}
body.rtl .ws2-process__step {
    padding-right: 0;
    padding-left: 28px;
    border-right: 0;
    border-left: 1px solid var(--theme-hair);
}
.ws2-process__step:last-child {
    border-right: 0;
    padding-right: 0;
}
body.rtl .ws2-process__step:last-child { border-left: 0; padding-left: 0; }
.ws2-process__num {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .3em;
    color: var(--theme-accent);
}
.ws2-process__text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--theme-ink-72);
    max-width: 26ch;
}
@media (max-width: 760px) {
    .ws2-process { flex-direction: column; gap: 26px; }
    .ws2-process__step,
    body.rtl .ws2-process__step {
        border: 0;
        padding: 0 0 22px;
        border-bottom: 1px solid var(--theme-hair);
    }
    .ws2-process__step:last-child { padding-bottom: 0; border-bottom: 0; }
    .ws2-process__text { max-width: none; }
}


/* ============================================================
   3. PRIVATE SOURCING — duo of editorial photos (§5). Photo A is the
   `design-leah` slot: NO portrait uploaded yet (CLAUDE.md "Pendências"
   #1 — same slot index.html's Meet Leah section and about.html's bio
   already guard). Same empty-guard idiom reused verbatim: the frame
   starts display:none and is only revealed by the inline script at the
   bottom of the page once the image has actually decoded with a real
   naturalWidth. Photo B (`design-after`) always renders normally. When
   A is missing, B simply stays a single centered photo — no broken
   image, no empty box. */
.ws2-src {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
}
.ws2-src__gallery {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 420px;
    margin: 0 auto;
}
.ws2-src__photo {
    position: relative;
    overflow: hidden;
    background: var(--theme-canvas-alt);
    aspect-ratio: 4 / 5;
}
.ws2-src__photo--a { display: none; }
.ws2-src__gallery.has-a .ws2-src__photo--a { display: block; }
.ws2-src__gallery.has-a .ws2-src__photo--b {
    width: 74%;
    margin-inline-start: auto;
    margin-top: -15%;
}
.ws2-src__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ws2-src__photo--a .ws2-src__img {
    opacity: 0;
    transition: opacity .7s var(--ease, ease);
}
.ws2-src__photo--a .ws2-src__img.is-loaded { opacity: 1; }
@media (max-width: 820px) {
    .ws2-src { grid-template-columns: 1fr; }
    .ws2-src__gallery.has-a .ws2-src__photo--b { width: 100%; margin-top: 0; }
}


/* ============================================================
   4. SMALL HELPERS — centered "Selected with purpose" block (§6) and
   the flex CTA rows reused by the hero (§1, two CTAs) and the final
   band (§7, two CTAs). */
.ws2-why {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.ws2-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}