/* ==========================================================================
   use-cases-v4.css — the grids for the /use-cases family (hub + job pages).

   Loaded RAW (outside a usemin build block) by
   app/server/views/frontend/v4/_layout_i18n.pug, so every <link> to it carries
   ?v=YYYY-MM-DD matching this file's last git change. app.js:389 serves every
   raw .css under app/public as `immutable, max-age=31536000` with no
   revalidation, so a stale token pins the old bytes in a returning browser for
   a year and no CloudFront invalidation can reach it.
   Bump with: node scripts/v4/bump-raw.js <YYYY-MM-DD> use-cases-v4

   SCOPE. Structure only. Colour, type, buttons, cards and spacing come from
   designerbox-v4.css (the kit) and v4-pages.css (the v4 tree's shared grids),
   both loaded before this file. Nothing here re-declares a token or a kit
   class: this sheet owns the layouts the kit has no class for, and nothing
   else. Shared sheets are coordinator-owned (SITE-MIGRATION section 6).
   ========================================================================== */

/* EVERY selector in this file is prefixed `html body.v4p`, deliberately.
   home-next-v10.css ships blanket overrides at (0,1,2) — `body.v10 p { margin:0 }`
   and `body.v10 img { height:auto }` — which beat any single-class selector no
   matter which sheet loads last. Unprefixed, the job paragraphs rendered with no
   gaps and the card images overflowed their 4:3 box, leaving a grey strip under a
   short photo. v4-pages.css solves the same problem the same way for .v4-lead. */

/* The job list on the hub: a card per job, three up, two at tablet, one on a
   phone. Same 24px card radius and hairline as the kit; the kit paints them. */
html body.v4p .uc4-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* A job card's picture sits on the grey thumbnail paper, the one place the
   page kit allows grey (SITE-MIGRATION 4b: "grey only on small component
   surfaces"). 4:3 so a portrait render and a landscape render line up. */
html body.v4p .uc4-card-media {
    aspect-ratio: 4 / 3;
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #F4F3F1;
    margin-bottom: 14px;
}

html body.v4p .uc4-card-media img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

/* "What you get" and "Who it is for": plain two-up rows of text, no card, so a
   page does not read as eight boxes stacked. */
html body.v4p .uc4-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 40px;
}

html body.v4p .uc4-point-t {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
}

html body.v4p .uc4-point-d {
    font-size: 15px;
    line-height: 1.55;
    color: #6F6D6A;
    margin: 0;
}

/* The prose block. One 720px column, text left inside it, so the body copy a
   use-case page exists for is actually readable (SITE-MIGRATION 4b: reading
   pages put title and text in one 720px column). */
html body.v4p .uc4-prose {
    max-width: 720px;
}

/* home-next-v10.css zeroes every paragraph with `body.v10 p` at (0,1,2), which
   beats a bare `.uc4-prose p` at (0,1,1) no matter which sheet loads last. The
   three job paragraphs rendered as one wall of text until this was raised to the
   same `html body.v4p` shape v4-pages.css uses for .v4-lead. Every paragraph rule
   in this file needs that prefix for the same reason. */
html body.v4p .uc4-prose p {
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 16px;
}

html body.v4p .uc4-prose p:last-child {
    margin-bottom: 0;
}

/* The four ways to run the job: four numbered rows on one hairline card. */
html body.v4p .uc4-run {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

html body.v4p .uc4-run-step {
    padding: 20px;
    border-right: 1px solid #E6E4E1;
}

html body.v4p .uc4-run-step:last-child {
    border-right: 0;
}

html body.v4p .uc4-run-n {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: #6F6D6A;
    margin: 0 0 8px;
}

/* The FAQ: native <details>, one hairline between rows, a +/- marker. The one
   FAQ look site-wide. */
html body.v4p .uc4-faq {
    max-width: 780px;
}

html body.v4p .uc4-faq details {
    border-bottom: 1px solid #E6E4E1;
}

html body.v4p .uc4-faq summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    list-style: none;
}

html body.v4p .uc4-faq summary::-webkit-details-marker {
    display: none;
}

html body.v4p .uc4-faq summary::after {
    content: '+';
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: #6F6D6A;
}

html body.v4p .uc4-faq details[open] summary::after {
    content: '\2212';
}

html body.v4p .uc4-faq-a {
    padding: 0 0 18px;
    font-size: 15px;
    line-height: 1.65;
    color: #6F6D6A;
    max-width: 66ch;
}

html body.v4p .uc4-faq-a p {
    margin: 0 0 12px;
}

html body.v4p .uc4-faq-a p:last-child {
    margin-bottom: 0;
}

/* Related links at the foot: wrapping hairline chips. */
html body.v4p .uc4-related {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 1024px) {
    html body.v4p .uc4-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body.v4p .uc4-run { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body.v4p .uc4-run-step:nth-child(2) { border-right: 0; }
    html body.v4p .uc4-run-step:nth-child(1), html body.v4p .uc4-run-step:nth-child(2) { border-bottom: 1px solid #E6E4E1; }
}

@media (max-width: 680px) {
    html body.v4p .uc4-grid { grid-template-columns: minmax(0, 1fr); }
    html body.v4p .uc4-points { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    html body.v4p .uc4-run { grid-template-columns: minmax(0, 1fr); }
    html body.v4p .uc4-run-step { border-right: 0; border-bottom: 1px solid #E6E4E1; }
    html body.v4p .uc4-run-step:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html body.v4p .uc4-faq details { transition: none; }
}

/* ==========================================================================
   The ad-creative pages (/ai-ad-generator, /ai-ugc, /ai-video-ads).

   Those three render through frontend/product-images/_page.pug on the
   _uc_layout shell, so they carry `body.pi-page` and uc-pages.css, not the v4
   tree's `body.v4p`. The rules below are the ONLY ones that reach them, and
   every one is scoped to `.pi-story`, the class _page.pug adds when a row draws
   a transformation (config/ad-creative.js `story`). The commerce roster on the
   same template sets no story and carries its own `pi-v4` kit instead, so the
   two families cannot style each other.
   ========================================================================== */

/* Even rhythm (Vytas, 2026-09-18 rule 4): the same gap between every pair of
   sections on the page. The value is the kit's own --v4-section-y (80px, 56px
   on a phone), so these pages breathe like the rest of the v4 tree rather than
   like uc-pages.css, which mixes 96px, 80px and 60px down one page. Three
   :root hops: the sheet's own rules for .uc-cta-section and friends land at
   (0,3,2) and would otherwise win. */
html:root:root:root body.pi-story main > section { padding-block: var(--v4-section-y, 80px); }
html:root:root:root body.pi-story main > section.uc-hero { padding: 80px 0 40px; }
/* The hero, its disclosure and the transformation read as one opening group:
   40px between them, then the 80px rhythm for the rest of the page. */
html:root:root:root body.pi-story main > section.uc-honesty { padding-block: 0; }
html:root:root:root body.pi-story main > section.uc-story { padding-top: 40px; }

/* The transformation figure and the close card sit on the page grid. */
html body.pi-story .uc-story .v4x-fig { margin: 0; }

/* The three-shape figure at section size: the kit sizes its frames in cqw for a
   CARD, and at 1330px of container the 9:16 frame came out 590px tall, which
   broke the "one screen at 1440" rule (Vytas, 2026-09-18 rule 3). Smaller
   fractions of the same container keep the panel near 480px and keep the three
   shapes readable side by side. */
html body.pi-story .uc-story .v4x-size-story .v4x-size-frame { width: 17cqw; }
html body.pi-story .uc-story .v4x-size-square .v4x-size-frame { width: 20cqw; }
html body.pi-story .uc-story .v4x-size-wide .v4x-size-frame { width: 27cqw; }

/* "Does that sound like you?": the buyer's words left, the answer right. */
html body.pi-story .uc-buyer-head { margin-bottom: 20px; }
html body.pi-story .uc-buyer-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 32px;
    padding: 32px;
    align-items: start;
}
html body.pi-story .uc-buyer-text h3 { margin: 0 0 10px; }
html body.pi-story .uc-buyer-checks { padding-top: 2px; }

/* The two hero buttons sit in one row with the kit's gap, and stack full width
   on a phone (Vytas, 2026-09-18 rule 5). */
html body.pi-story .uc-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

@media (max-width: 900px) {
    html body.pi-story .uc-buyer-card { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 680px) {
    html:root:root:root body.pi-story main > section { padding-block: var(--v4-section-y-sm, 56px); }
    html:root:root:root body.pi-story main > section.uc-hero { padding: 48px 0 28px; }
    html:root:root:root body.pi-story main > section.uc-story { padding-top: 28px; }
    html body.pi-story .uc-hero-ctas { flex-direction: column; align-items: stretch; }
    html body.pi-story .uc-hero-ctas .uc-cta-button { width: 100%; justify-content: center; }

    /* A phone shows the input and at most four results, two across (Vytas,
       2026-09-18 rule 3), so no result tile falls under 120px wide. The kit's
       own phone grid is three across, which measured 99px here. */
    html body.pi-story .uc-story .v4x-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* max-width, not width: the kit caps an input tile at 40% on a phone, which
       measured 118px here, two under the 120px floor. */
    html body.pi-story .uc-story .v4x-in { max-width: 50%; }

    /* The three shapes wrap onto two rows rather than shrinking to 57px wide. */
    html body.pi-story .uc-story .v4x-sizes { flex-wrap: wrap; gap: 6% 8%; }
    html body.pi-story .uc-story .v4x-size-story .v4x-size-frame { width: 37cqw; }
    html body.pi-story .uc-story .v4x-size-square .v4x-size-frame { width: 38cqw; }
    html body.pi-story .uc-story .v4x-size-wide .v4x-size-frame { width: 58cqw; }
    html body.pi-story .uc-story .v4x-size-wide { flex-basis: 100%; }
}