/* OF4S Blog Skin — Design System v3 (Schibsted Grotesk / navy). One shared stylesheet
 * for all v3-migrated blog posts. Served as a public ir.attachment at
 * /web/content/<id>/of4s-blog-v3.css; each post links it and wraps itself in
 * <div class="of4s-blog">. EVERYTHING is scoped under .of4s-blog (plus two
 * :has() page-level rules that only fire when a .of4s-blog wrapper is present)
 * so unmigrated posts and the shared blog chrome are unaffected.
 *
 * TOKENS: the blog page is rendered by Odoo's blog template, which does NOT t-call
 * website.of4s_ds_v2_tokens (view 5755). Per DELTA.md §8 the blog is a self-contained
 * "one-file skin swap", so this file carries a SCOPED SNAPSHOT of the v3 tokens
 * (mirror of view 5755 / design_system_v2/tokens.css) plus the v3 font @import.
 * If the design system rebrands, edit view 5755 AND this snapshot.
 *
 * v3 rules honored: Schibsted display; navy does ALL structural accent (eyebrows,
 * em words, links, markers, borders) — navy-600 light / navy-300 dark; brass is
 * garnish ONLY (.of4s-garnish mono proof line); NO italics except blockquote;
 * photos rounded + borderless; ~68ch measure.
 */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@300;400;500;600;700;800&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* Warm paper page background + un-cap the post column, only on pages carrying a v3 post. */
#wrapwrap:has(.of4s-blog){background:#faf8f4}
#o_wblog_post_content:has(.of4s-blog){max-width:none;width:100%;flex:1 1 100%}

.of4s-blog{
  /* ── v3 token snapshot (mirror of view 5755) ── */
  --of4s-navy-950:#0a1628;--of4s-navy-900:#0f1d33;--of4s-navy-800:#15273f;
  --of4s-navy-700:#1e3554;--of4s-navy-600:#2d4a6e;--of4s-navy-500:#466489;
  --of4s-navy-300:#8fa9c7;--of4s-navy-100:#dde5ee;
  --of4s-brass-700:#8e6a30;--of4s-brass-400:#c9a474;--of4s-brass-300:#d9bd95;
  --of4s-paper-50:#faf8f4;--of4s-paper-100:#f3efe7;--of4s-paper-200:#e8e2d4;--of4s-paper-300:#d6cfbe;
  --of4s-stone-400:#a8a094;--of4s-stone-500:#7a7468;--of4s-stone-600:#555047;
  --of4s-stone-700:#3a362f;--of4s-stone-900:#1a1814;
  --of4s-danger:#9c3a30;
  --of4s-font-display:'Schibsted Grotesk','Geist',sans-serif;
  --of4s-font-sans:'Geist',-apple-system,system-ui,sans-serif;
  --of4s-font-mono:'Geist Mono','SF Mono',Menlo,monospace;
  --of4s-radius-md:4px;--of4s-radius-lg:8px;--of4s-radius-xl:14px;--of4s-radius-pill:999px;
  --of4s-border-thin:1px solid rgba(15,29,51,0.1);
  --of4s-ease:cubic-bezier(0.2,0.8,0.2,1);--of4s-dur-fast:150ms;--of4s-dur-base:240ms;
  /* Fixed-px measure (~68ch of 17px Geist) so headings, body, figures and rules
     all align on one column; ch would recompute per font size. */
  --of4s-measure:720px;
  --of4s-wide-max:1160px;

  font-family:var(--of4s-font-sans);
  font-size:17px;
  line-height:1.7;
  color:var(--of4s-stone-900);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}

.of4s-blog ::selection{background:var(--of4s-navy-800);color:var(--of4s-paper-50)}

/* Italics ban — the ONLY sanctioned italic is inside a blockquote. */
.of4s-blog em,.of4s-blog i{font-style:normal}
.of4s-blog blockquote em,.of4s-blog blockquote i{font-style:italic}

/* ── Reading measure: loose text blocks sit at ~68ch, centered. Text inside snippet
      grid columns is narrower than the measure, so these rules are a no-op there. ── */
.of4s-blog > p,
.of4s-blog > h2,
.of4s-blog > h3,
.of4s-blog > h4,
.of4s-blog > ul,
.of4s-blog > ol,
.of4s-blog > blockquote,
.of4s-blog > figure,
.of4s-blog .container > p,
.of4s-blog .container > h2,
.of4s-blog .container > h3,
.of4s-blog .container > h4,
.of4s-blog .container > ul,
.of4s-blog .container > ol,
.of4s-blog .container > blockquote,
.of4s-blog .container > figure{
  max-width:var(--of4s-measure);
  margin-left:auto;
  margin-right:auto;
}

/* ── Type — Schibsted display, upright navy accent word ── */
.of4s-blog h2,
.of4s-blog h3,
.of4s-blog h4{
  font-family:var(--of4s-font-display);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--of4s-stone-900);
  text-wrap:pretty;
}
.of4s-blog h2{font-size:clamp(28px,3.4vw,38px);margin-top:2.2em;margin-bottom:0.5em}
.of4s-blog h3{font-size:clamp(21px,2.4vw,26px);margin-top:1.8em;margin-bottom:0.45em}
.of4s-blog h4{font-size:19px;font-weight:600;margin-top:1.6em;margin-bottom:0.5em}
.of4s-blog h2 em,
.of4s-blog h3 em{font-style:normal;color:var(--of4s-navy-600);font-weight:500}

.of4s-blog p{margin-bottom:1.1em}
.of4s-blog .of4s-lede{font-size:20px;font-weight:400;line-height:1.6;color:var(--of4s-stone-700)}

/* ── Links (navy, never brass) ── */
.of4s-blog a:not(.of4s-cta-btn){
  color:var(--of4s-navy-600);
  text-decoration:underline;
  text-decoration-color:var(--of4s-navy-300);
  text-underline-offset:3px;
  transition:text-decoration-color var(--of4s-dur-fast) var(--of4s-ease);
}
.of4s-blog a:not(.of4s-cta-btn):hover{text-decoration-color:var(--of4s-navy-800)}
.of4s-blog a:focus-visible,
.of4s-blog button:focus-visible{outline:2px solid var(--of4s-navy-800);outline-offset:2px;border-radius:2px}

.of4s-blog ul,.of4s-blog ol{padding-left:1.4em;margin-bottom:1.1em}
.of4s-blog li{margin-bottom:0.35em}
.of4s-blog li::marker{color:var(--of4s-navy-600)}

.of4s-blog hr{border:0;border-top:var(--of4s-border-thin);max-width:var(--of4s-measure);margin:2.5em auto}

/* ── Eyebrow (mono-caps section kicker; navy, never brass) ── */
.of4s-blog .of4s-eyebrow{
  font-family:var(--of4s-font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--of4s-navy-600);
  margin-bottom:0.4em;
}

/* ── Brass garnish — the ONLY sanctioned brass. Tiny mono proof line (ratings, counts). ── */
.of4s-blog .of4s-garnish,
.of4s-blog p.of4s-garnish{
  font-family:var(--of4s-font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--of4s-brass-700);
  margin:0.6em 0 0;
}

/* ── Images: rounded, borderless (v3), never wider than their block ── */
.of4s-blog img{max-width:100%;height:auto;border-radius:var(--of4s-radius-lg);border:0}
.of4s-blog figure{margin:2em auto}
.of4s-blog figcaption{
  font-family:var(--of4s-font-mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--of4s-stone-500);
  margin-top:10px;
}

/* ── Gallery (2-up / 3-up image grid) ── */
.of4s-blog .of4s-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:2em 0}
.of4s-blog .of4s-gallery figure{margin:0;display:flex;flex-direction:column}
.of4s-blog .of4s-gallery img{width:100%;height:auto;flex:1 1 auto;min-height:0;object-fit:cover}

/* ── Blockquote — the single sanctioned italic ── */
.of4s-blog blockquote{
  font-family:var(--of4s-font-sans);
  font-style:italic;
  font-size:21px;
  line-height:1.5;
  color:var(--of4s-stone-700);
  border-left:3px solid var(--of4s-navy-600);
  padding:4px 0 4px 24px;
  margin:2em auto;
}
.of4s-blog blockquote p{margin-bottom:0.4em}

/* ── Standfirst ── */
.of4s-blog .of4s-standfirst{max-width:var(--of4s-measure);margin:0 auto 2em}
.of4s-blog .of4s-standfirst .of4s-lede{margin-bottom:0}

/* ── Snapshot card (facts; mono navy labels) ── */
.of4s-blog .of4s-snapshot{
  max-width:var(--of4s-measure);margin:0 auto 2.5em;
  background:var(--of4s-paper-100);border:var(--of4s-border-thin);
  border-radius:var(--of4s-radius-xl);padding:24px 28px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 28px;
}
.of4s-blog .of4s-snapshot div{margin:0}
.of4s-blog .of4s-snapshot dt{font-family:var(--of4s-font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--of4s-navy-600);margin-bottom:2px}
.of4s-blog .of4s-snapshot dd{margin:0;font-size:15px;color:var(--of4s-stone-700)}

/* ── Section head ── */
.of4s-blog .of4s-sec{max-width:var(--of4s-measure);margin:2.8em auto 1em}
.of4s-blog .of4s-sec h2{margin-top:0}
.of4s-blog .of4s-sec .of4s-eyebrow{margin-bottom:0.5em}

/* ── Shared breakout: escapes the wrapper/container up to 1160px or 96vw, centered
      on the viewport, immune to scrollbar width. ── */
.of4s-blog .of4s-wide,.of4s-blog .of4s-band,.of4s-blog .of4s-stats,
.of4s-blog .of4s-pair,.of4s-blog .of4s-blog-cta{
  --of4s-w:min(var(--of4s-wide-max),96vw);
  width:var(--of4s-w);
  max-width:none;
  margin-left:calc(50% - var(--of4s-w) / 2);
  margin-right:calc(50% - var(--of4s-w) / 2);
}

/* ── Wide moments ── */
.of4s-blog .of4s-wide{margin-top:2.5em;margin-bottom:2.5em}
.of4s-blog .of4s-wide img{width:100%;border-radius:var(--of4s-radius-lg)}
.of4s-blog .of4s-wide figcaption{max-width:var(--of4s-measure);margin:10px auto 0;text-align:center}

/* ── Pair (render vs reality / before-after) ── */
.of4s-blog .of4s-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:2.5em;margin-bottom:2.5em}
.of4s-blog .of4s-pair figure{margin:0;display:flex;flex-direction:column}
.of4s-blog .of4s-pair img{width:100%;height:auto;flex:1 1 auto;min-height:0;object-fit:cover}

/* ── Dark band (navy; one per post; verbatim client quote) ── */
.of4s-blog .of4s-band{
  background:var(--of4s-navy-900);color:var(--of4s-paper-50);
  border-radius:var(--of4s-radius-xl);padding:clamp(40px,6vw,72px) clamp(24px,6vw,80px);
  margin-top:3em;margin-bottom:3em;text-align:center;
}
.of4s-blog .of4s-band .of4s-eyebrow{color:var(--of4s-navy-300)}
.of4s-blog .of4s-band blockquote{border-left:0;padding:0;margin:0 auto 0.8em;color:var(--of4s-paper-50);font-size:clamp(22px,3vw,30px);max-width:24ch;line-height:1.35}
.of4s-blog .of4s-band .of4s-band-attr{font-family:var(--of4s-font-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--of4s-paper-200);margin:0}

/* ── Stats strip (display numbers stone; quiet mono labels) ── */
.of4s-blog .of4s-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;
  margin-top:2.5em;margin-bottom:2.5em;padding:28px 0;
  border-top:var(--of4s-border-thin);border-bottom:var(--of4s-border-thin);text-align:center;
}
.of4s-blog .of4s-stats h3{font-family:var(--of4s-font-display);font-weight:300;font-size:clamp(34px,4vw,48px);letter-spacing:-0.025em;margin:0 0 2px;color:var(--of4s-stone-900)}
.of4s-blog .of4s-stats h3 em{font-style:normal;color:var(--of4s-navy-600);font-weight:400}
.of4s-blog .of4s-stats p{font-family:var(--of4s-font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--of4s-stone-500);margin:0}

/* ── End-of-post CTA block (marketing dark = navy) ── */
.of4s-blog .of4s-blog-cta{
  background:var(--of4s-navy-900);color:var(--of4s-paper-50);
  border-radius:var(--of4s-radius-xl);
  padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px);
  text-align:center;margin-top:3.5em;margin-bottom:1em;
}
.of4s-blog .of4s-blog-cta .of4s-eyebrow{color:var(--of4s-navy-300)}
.of4s-blog .of4s-blog-cta h2{font-family:var(--of4s-font-display);color:var(--of4s-paper-50);font-weight:400;font-size:clamp(30px,4vw,44px);letter-spacing:-0.02em;line-height:1.1;margin:0.2em 0 0.5em;max-width:none}
.of4s-blog .of4s-blog-cta h2 em{font-style:normal;color:var(--of4s-navy-300);font-weight:400}
.of4s-blog .of4s-blog-cta p{color:var(--of4s-paper-200);font-size:17px;line-height:1.6;max-width:52ch;margin:0 auto 1.6em}
.of4s-blog .of4s-cta-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px}
.of4s-blog .of4s-cta-btn{
  display:inline-block;background:var(--of4s-paper-50);color:var(--of4s-navy-900);
  font-family:var(--of4s-font-sans);font-weight:600;font-size:16px;text-decoration:none;
  padding:14px 32px;border-radius:var(--of4s-radius-md);
  transition:background var(--of4s-dur-fast) var(--of4s-ease),transform var(--of4s-dur-fast) var(--of4s-ease);
}
.of4s-blog .of4s-cta-btn:hover{background:var(--of4s-paper-200);transform:translateY(-1px)}
.of4s-blog .of4s-cta-tel{font-family:var(--of4s-font-mono);font-size:15px;color:var(--of4s-navy-300);text-decoration:underline;text-decoration-color:rgba(143,169,199,0.4);text-underline-offset:3px}
.of4s-blog .of4s-cta-tel:hover{text-decoration-color:var(--of4s-navy-300)}

/* ── Responsive ── */
@media (max-width:900px){
  .of4s-blog{font-size:16px}
  .of4s-blog .of4s-lede{font-size:18px}
  .of4s-blog blockquote{font-size:19px;padding-left:18px}
}
@media (max-width:700px){
  .of4s-blog .of4s-pair{grid-template-columns:1fr}
  .of4s-blog .of4s-snapshot{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .of4s-blog .of4s-blog-cta{text-align:left}
  .of4s-blog .of4s-blog-cta p{margin-left:0}
  .of4s-blog .of4s-cta-actions{justify-content:flex-start}
  .of4s-blog .of4s-cta-btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .of4s-blog *{transition:none !important}
}