/* guides-v4.css: the /guides cookbook (hub, business type, recipe), 2026-09-18.
   Brief: docs/v4/COOKBOOK-V4.md.
   Loaded raw by frontend/v4/guides_*.pug through the layout's head_extra block:
   bump ?v= on all three links on every edit (app.js serves raw CSS immutable).
   Values are the page kit's (docs/v4/SITE-MIGRATION.md 4b): white page, hairline
   #E6E4E1, cards 24px, media 16px, controls 10px, lime only as a state, no
   gradient, no glow, nothing lifts on hover. */

/* ---- Shared ---------------------------------------------------------------- */
/* Nine business types do not fit one 1380px row, and the kit's rail scrolls
   sideways, so the last chip was clipped at every width with no sign it was
   there. It wraps instead, centred, at every width. */
body.v4p .gv-rail {
    width: fit-content; max-width: 100%; margin-inline: auto;
    flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 8px;
}
body.v4p .gv-rail .v4p-rail-item { padding: 0 14px; }
body.v4p .gv-hero-cta { justify-content: center; margin-top: 24px; }
body.v4p .gv-dot { margin: 0 6px; }

body.v4p .gv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
body.v4p .gv-chip {
    padding: 4px 10px; border-radius: 999px; background-color: #F3F2F0;
    color: #3D3D3C; font-size: 12px; font-weight: 500; line-height: 1.5;
}

/* ---- The card picture: three real results on the kit's dotted paper -------- */
body.v4p .gv-trio {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    padding: 10px; border-radius: 16px;
}
body.v4p .gv-trio-cell { overflow: hidden; border-radius: 10px; background-color: #EFEEEC; aspect-ratio: 1 / 1; }
body.v4p .gv-trio-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Three tiles on a 390 screen fall to 97px; the floor is 120px, so the third goes. */
@media (max-width: 520px) {
    body.v4p .gv-card .gv-trio { grid-template-columns: repeat(2, 1fr); }
    body.v4p .gv-card .gv-trio-cell-3 { display: none; }
}

/* ---- The recipe card ------------------------------------------------------- */
/* The row width is the number of cards in the band, capped at four, written on
   the list as data-cols. An explicit selector per count, never min() inside
   repeat(): repeat() takes an integer, and a math function there is not
   guaranteed to parse. */
body.v4p .gv-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
    margin: 0; padding: 0; list-style: none;
}
body.v4p .gv-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
body.v4p .gv-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.v4p .gv-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) {
    body.v4p .gv-grid, body.v4p .gv-grid[data-cols="4"], body.v4p .gv-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    body.v4p .gv-grid, body.v4p .gv-grid[data-cols="4"], body.v4p .gv-grid[data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    body.v4p .gv-grid, body.v4p .gv-grid[data-cols="2"], body.v4p .gv-grid[data-cols="3"], body.v4p .gv-grid[data-cols="4"] { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
body.v4p .gv-grid > li { display: flex; }

body.v4p a.gv-card {
    display: flex; flex: 1 1 auto; flex-direction: column; gap: 0;
    padding: 8px; color: inherit; text-decoration: none;
}
body.v4p a.gv-card:hover { border-color: #C9F2A0; background-color: #FAFFF2; }
body.v4p .gv-card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 16px 12px 12px; }
/* Block, not flex: a long business type ("Beauty and wellness brands") wrapped
   to two lines in a flex row and left the dot and the step count at half height. */
body.v4p .gv-card-cat {
    margin: 0 0 8px; color: #6F6D6A; font-size: 12px; font-weight: 500;
    line-height: 1.5; letter-spacing: 0.025em; text-transform: uppercase;
    text-wrap: balance;
}
body.v4p .gv-card-title { color: #121212; text-wrap: pretty; }
body.v4p .gv-card-sub {
    display: -webkit-box; margin: 8px 0 16px; overflow: hidden; color: #6F6D6A;
    font-size: 14px; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
body.v4p .gv-card .gv-chips { margin-top: auto; }

/* ---- Hub: one band per kind of business ------------------------------------ */
body.v4p .gv-cat-section { padding-top: 0; }
body.v4p .gv-cat-section + .gv-cat-section { padding-top: 0; }
body.v4p .gv-cat-link { color: inherit; text-decoration: none; }
body.v4p .gv-cat-link:hover { text-decoration: underline; text-underline-offset: 4px; }
body.v4p .gv-grid-section { padding-top: 32px; }

/* ---- Category: the other kinds of business --------------------------------- */
body.v4p .gv-others {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
    margin: 0; padding: 0; list-style: none;
}
@media (max-width: 900px) { body.v4p .gv-others { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { body.v4p .gv-others { grid-template-columns: minmax(0, 1fr); } }
body.v4p a.gv-other { display: block; padding: 20px; color: inherit; text-decoration: none; }
body.v4p a.gv-other:hover { border-color: #C9F2A0; background-color: #FAFFF2; }
body.v4p .gv-other-line { margin: 6px 0 0; color: #6F6D6A; font-size: 14px; line-height: 1.5; }

/* ---- Recipe: the hero ------------------------------------------------------ */
/* The kit starts the first block 48px under the bar (32px on a phone) with a rule on
   `main > section`; the article hero sits one level down, inside <article>. */
html:root body .v10-navwrap ~ main > .gv-article > section:first-of-type { padding-top: 48px !important; }
body.v4p .gv-article-hero { padding-bottom: 40px; }
body.v4p .gv-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { body.v4p .gv-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
body.v4p .gv-hero-text .v4-lead { max-width: 56ch; }
body.v4p .gv-hero-text .v4-cta-row { margin-top: 28px; }
body.v4p .gv-kicker { display: flex; align-items: center; margin: 0 0 12px; color: #6F6D6A; font-size: 13px; line-height: 1.5; }
body.v4p .gv-kicker a { color: #121212; text-decoration: underline; text-decoration-color: #D7D4CF; text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
body.v4p .gv-kicker a:hover { text-decoration-color: #121212; }
body.v4p .gv-hero-trio { padding: 12px; }
/* 16px is the kit's own picture tile (.v4x-cell in v4-transform.css), which is
   also what the card-radius gate allows. The small tiles on a card stay at 10px,
   the value the kit drops to at narrow widths: a 16px corner on a 95px tile
   reads as a lozenge. */
body.v4p .gv-hero-trio .gv-trio-cell { border-radius: 16px; }
@media (max-width: 560px) {
    body.v4p .gv-hero-trio { grid-template-columns: repeat(2, 1fr); }
    body.v4p .gv-hero-trio .gv-trio-cell-3 { display: none; }
}
@media (max-width: 560px) { body.v4p .gv-hero-text .v4-cta-row a { flex: 1 1 100%; text-align: center; } }

/* ---- Recipe: the example results ------------------------------------------ */
/* Every picture keeps its own shape: flex-grow is set to the file's aspect ratio
   and the row has one height, so a portrait shot is narrow and a room is wide,
   and nothing is cropped to a square it was not shot in. */
body.v4p .gv-body-wrap { padding-bottom: 24px; }
body.v4p .gv-results { margin: 0 0 56px; }
body.v4p .gv-results-fig { margin: 20px 0 0; }
body.v4p .gv-results-row { display: flex; flex-wrap: wrap; gap: 12px; }
body.v4p .gv-result { flex: var(--gv-ar, 1) 1 0; height: 260px; min-width: 150px; }
body.v4p .gv-result img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; background-color: #F6F5F4; }
body.v4p .gv-results-cap { margin: 10px 0 0; }
@media (max-width: 1100px) { body.v4p .gv-result { height: 210px; } }
@media (max-width: 640px) {
    body.v4p .gv-results-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body.v4p .gv-result { height: auto; aspect-ratio: 1 / 1; min-width: 0; }
}

/* ---- Recipe: the body ------------------------------------------------------ */
body.v4p .gv-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
@media (max-width: 1000px) { body.v4p .gv-body-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
body.v4p .gv-body-main { min-width: 0; }
body.v4p .gv-section { margin: 0 0 48px; }
body.v4p .gv-section:last-child { margin-bottom: 0; }
body.v4p .gv-section > h2 { margin: 0 0 16px; }
body.v4p .gv-intro { margin: 0 0 28px; max-width: 68ch; color: #3D3D3C; font-size: 16px; line-height: 1.65; }

body.v4p .gv-before { margin: 0 0 40px; padding: 20px; }
body.v4p .gv-before p { margin: 8px 0 0; max-width: 68ch; color: #3D3D3C; font-size: 15px; line-height: 1.65; }

body.v4p .gv-steps { margin: 0; padding: 0; list-style: none; counter-reset: gv; }
body.v4p .gv-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 0 0 28px; }
body.v4p .gv-step:last-child { padding-bottom: 0; }
body.v4p .gv-step-num {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 999px; background-color: #F3F2F0;
    color: #121212; font-size: 13px; font-weight: 600; line-height: 1;
}
body.v4p .gv-step-text h3 { margin: 6px 0 0; }
body.v4p .gv-step-text p { margin: 8px 0 0; max-width: 68ch; color: #3D3D3C; font-size: 15px; line-height: 1.65; }
body.v4p .gv-step-note { color: #6F6D6A !important; font-size: 13px !important; }
body.v4p .gv-step-btn { margin-top: 14px; }

body.v4p .gv-after { margin: 0; padding: 0; list-style: none; }
body.v4p .gv-after li {
    position: relative; margin: 0 0 12px; padding-left: 26px; max-width: 68ch;
    color: #3D3D3C; font-size: 15px; line-height: 1.65;
}
body.v4p .gv-after li::before {
    position: absolute; top: 9px; left: 4px; width: 8px; height: 8px;
    border-radius: 999px; background-color: #121212; content: "";
}
body.v4p .gv-repeat { padding: 24px; }
body.v4p .gv-repeat h2 { margin: 0; }
body.v4p .gv-repeat p { margin: 10px 0 0; max-width: 68ch; color: #3D3D3C; font-size: 15px; line-height: 1.65; }
/* The card is a block, so a bare <a> stretched the button to the full width. */
body.v4p .gv-repeat a { display: inline-flex; margin-top: 16px; }

/* ---- Recipe: the details card ---------------------------------------------- */
body.v4p .gv-side { position: sticky; top: 96px; }
@media (max-width: 1000px) { body.v4p .gv-side { position: static; } }
body.v4p .gv-details { padding: 24px; }
body.v4p .gv-dl { margin: 16px 0 0; }
/* The house hairline, not a lighter one of its own: #F0EEEB was off the v4
   neutral ladder and the colour gate counted it. */
body.v4p .gv-dl > div { padding: 0 0 14px; border-bottom: 1px solid #E6E4E1; margin-bottom: 14px; }
body.v4p .gv-dl > div:last-of-type { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
body.v4p .gv-dl dt {
    margin: 0 0 6px; color: #6F6D6A; font-size: 12px; font-weight: 500;
    line-height: 1.5; letter-spacing: 0.025em; text-transform: uppercase;
}
body.v4p .gv-dl dd { margin: 0; color: #121212; font-size: 14px; line-height: 1.55; }
body.v4p .gv-details-cta { display: block; margin-top: 20px; text-align: center; }

/* ---- Recipe: questions and what comes next --------------------------------- */
body.v4p .gv-article #faq { margin-top: 8px; }
body.v4p .gv-related { padding-top: 24px; }