/* =====================================================================
   TARNOVSKI — Case Study template (custom-case-study.hbs)
   sections.css  —  design tokens + section component library
   ---------------------------------------------------------------------
   - All rules scoped under `.tk-cs` so existing theme pages are UNAFFECTED.
   - Tokens (colour/type/spacing) centralized as CSS custom properties.
   - Image behaviour = Option A + width-lock: intrinsic height, width capped
     at the module/container; never wider, never distorted.
   - Editor controls sections via native cards + HTML-card snippets (see
     EDITOR_SNIPPETS.md). Section bg/text colour via inline --tk-bg/--tk-fg.
   ===================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
.tk-cs{
  /* palette */
  --tk-dark:#1a2b2b; --tk-gold:#f0d074; --tk-mauve:#c87fa2;
  --tk-paper:#f1f3f5; --tk-paper-2:#ebf0f3; --tk-white:#ffffff;
  --tk-ink:#171717; --tk-text:#363f43; --tk-muted:#636466;
  --tk-line:rgba(26,43,43,.12);
  /* layout */
  --tk-container:1100px;            /* measured content max-width from 1920w light */
  --tk-gutter:clamp(20px,5vw,60px);
  --tk-narrow:683px;                /* readable text column */
  /* type scale (TLB, captured from frame) */
  --tk-fs-display:clamp(48px,9vw,180px);
  --tk-fs-h1:clamp(40px,6vw,100px);
  --tk-fs-h2:clamp(28px,3.4vw,80px);
  --tk-fs-h3:clamp(22px,2vw,30px);
  --tk-fs-lg:clamp(18px,1.4vw,20px);
  --tk-fs-body:16px; --tk-fs-sm:14px;
  --tk-lh-tight:1.04; --tk-lh-snug:1.25; --tk-lh-body:1.6;
  /* section spacing (content-responsive; editor-overridable) */
  --tk-section-py:clamp(48px,7vw,104px);
  --tk-section-gap:clamp(0px,0vw,0px); /* default 0; use .tk-section padding for rhythm */
  /* link colours (per spec) */
  --tk-link-underline:#f0d074;
  --tk-link-hover:#c87fa2;
  --tk-link-hover-underline:#1a2b2b;
  /* brand: square corners */
  --tk-radius:0;
  /* dynamic (editor can override per section via inline style) */
  --tk-bg:var(--tk-white); --tk-fg:var(--tk-text); --tk-heading:var(--tk-ink);

  font-family:'TLB',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  color:var(--tk-fg); background:var(--tk-bg);
  font-size:var(--tk-fs-body); line-height:var(--tk-lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.tk-cs *{ box-sizing:border-box; }
.tk-cs img{ max-width:100%; height:auto; display:block; } /* Option A: intrinsic, width-locked */

/* ---------- 2. LAYOUT PRIMITIVES ---------- */
.tk-cs .tk-container{ width:100%; max-width:var(--tk-container); margin-inline:auto; padding-inline:var(--tk-gutter); }
.tk-cs .tk-narrow{ max-width:var(--tk-narrow); }
.tk-cs .tk-bleed{ max-width:100%; }               /* full-bleed media */
.tk-cs .tk-section{ width:100%; padding-block:var(--tk-section-py); background:var(--tk-bg,transparent); color:var(--tk-fg,inherit); }
.tk-cs .tk-section--tight{ --tk-section-py:clamp(28px,3vw,48px); }
.tk-cs .tk-section--loose{ --tk-section-py:clamp(80px,11vw,160px); }
.tk-cs .tk-stack > * + *{ margin-top:1em; }
.tk-cs .tk-cluster{ display:flex; flex-wrap:wrap; gap:clamp(12px,1.6vw,24px); align-items:center; }
.tk-cs .tk-grid{ display:grid; gap:clamp(20px,3vw,40px); }
.tk-cs .tk-grid--2{ grid-template-columns:repeat(2,1fr); }
.tk-cs .tk-grid--3{ grid-template-columns:repeat(3,1fr); }
.tk-cs .tk-grid--half{ grid-template-columns:repeat(2,1fr); }

/* ---------- 3. COLOUR CONTROL (editor-facing, no theme code) ---------- */
/* bg utilities */
.tk-cs .tk-bg-dark   { --tk-bg:var(--tk-dark);   background:var(--tk-dark);   color:var(--tk-paper); --tk-heading:var(--tk-paper); --tk-fg:var(--tk-paper); }
.tk-cs .tk-bg-paper  { --tk-bg:var(--tk-paper);  background:var(--tk-paper); }
.tk-cs .tk-bg-paper2 { --tk-bg:var(--tk-paper-2);background:var(--tk-paper-2); }
.tk-cs .tk-bg-white  { --tk-bg:var(--tk-white);  background:var(--tk-white); }
.tk-cs .tk-bg-gold   { --tk-bg:var(--tk-gold);   background:var(--tk-gold);   color:var(--tk-dark); --tk-heading:var(--tk-dark); --tk-fg:var(--tk-dark); }
.tk-cs .tk-bg-mauve  { --tk-bg:var(--tk-mauve);  background:var(--tk-mauve);  color:var(--tk-white); --tk-heading:var(--tk-white); --tk-fg:var(--tk-white); }
/* arbitrary: <section style="--tk-bg:#xxxxxx; --tk-fg:#yyyyyy"> */
.tk-cs [style*="--tk-bg"]{ background:var(--tk-bg); }
.tk-cs [style*="--tk-fg"]{ color:var(--tk-fg); }
.tk-cs [style*="--tk-heading"] .tk-h1,
.tk-cs [style*="--tk-heading"] .tk-h2,
.tk-cs [style*="--tk-heading"] .tk-h3,
.tk-cs [style*="--tk-heading"] h1,
.tk-cs [style*="--tk-heading"] h2,
.tk-cs [style*="--tk-heading"] h3{ color:var(--tk-heading); }

/* ---------- 4. TYPOGRAPHY ---------- */
.tk-cs h1,.tk-cs .tk-display{ font-family:'TLB',sans-serif; font-weight:400; font-size:var(--tk-fs-display); line-height:var(--tk-lh-tight); letter-spacing:-.02em; color:var(--tk-heading); margin:0; text-transform:none; }
.tk-cs .tk-h1{ font-family:'TLB',sans-serif; font-weight:400; font-size:var(--tk-fs-h1); line-height:var(--tk-lh-tight); letter-spacing:-.015em; color:var(--tk-heading); margin:0; text-transform:none; }
.tk-cs h2,.tk-cs .tk-h2{ font-family:'TLB',sans-serif; font-weight:400; font-size:var(--tk-fs-h2); line-height:var(--tk-lh-snug); letter-spacing:-.01em; color:var(--tk-heading); margin:0; text-transform:none; }
.tk-cs h3,.tk-cs .tk-h3{ font-family:'TLB',sans-serif; font-weight:500; font-size:var(--tk-fs-h3); line-height:var(--tk-lh-snug); color:var(--tk-heading); margin:0; text-transform:none; }
.tk-cs .tk-eyebrow,.tk-cs .tk-label{ font-size:var(--tk-fs-sm); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--tk-muted); }
.tk-cs .tk-lead{ font-size:var(--tk-fs-lg); line-height:var(--tk-lh-body); }
.tk-cs p{ margin:0; }
.tk-cs .tk-muted{ color:var(--tk-muted); }

/* ---------- 5. LINKS (per spec; scoped to template so existing pages unaffected) ---------- */
.tk-cs a{
  color:inherit; text-decoration:underline;
  text-decoration-color:var(--tk-link-underline);
  text-decoration-thickness:.09em; text-underline-offset:.22em;
  transition:color .15s ease, text-decoration-color .15s ease;
}
.tk-cs a:hover{ color:var(--tk-link-hover); text-decoration-color:var(--tk-link-hover-underline); }
.tk-cs a:focus-visible{ outline:2px solid var(--tk-dark); outline-offset:3px; border-radius:1px; }
/* don't turn buttons/nav-like things into inline links */
.tk-cs .tk-btn,.tk-cs .gh-btn,.tk-cs button,.tk-cs .kg-button-card a,
.tk-cs nav a,.tk-cs .tk-no-link{ text-decoration:none; }
.tk-cs .tk-btn,.tk-cs .kg-button-card a{
  display:inline-block; background:var(--tk-gold); color:var(--tk-dark);
  font-weight:500; padding:.85em 1.6em; border-radius:var(--tk-radius);
  border:0; cursor:pointer; transition:background .15s ease,color .15s ease;
}
.tk-cs .tk-btn:hover,.tk-cs .kg-button-card a:hover{ background:var(--tk-dark); color:var(--tk-paper); }

/* ---------- 6. NATIVE GHOST CARDS (editor content) ---------- */
.tk-cs .gh-content{ max-width:var(--tk-container); margin-inline:auto; padding-inline:var(--tk-gutter); }
.tk-cs .gh-content > * + *{ margin-top:1.4em; }
.tk-cs .gh-content p,.tk-cs .gh-content ul,.tk-cs .gh-content ol{ max-width:var(--tk-narrow); }
.tk-cs .gh-content h2{ margin-top:1.6em; }
.tk-cs .gh-content h3{ margin-top:1.4em; }
.tk-cs .gh-content figure.kg-card{ margin:2em auto; max-width:var(--tk-container); }
.tk-cs .gh-content .kg-width-wide{ max-width:100%; }
.tk-cs .gh-content .kg-width-full{ max-width:100%; width:100%; }
.tk-cs .gh-content figcaption{ font-size:var(--tk-fs-sm); color:var(--tk-muted); margin-top:.6em; }
.tk-cs .gh-content .kg-callout-card{ background:var(--tk-paper-2); padding:1.4em 1.6em; border-radius:var(--tk-radius); }
.tk-cs .gh-content .kg-gallery-card{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.tk-cs .gh-content blockquote{ border-left:3px solid var(--tk-gold); padding-left:1.2em; font-size:var(--tk-fs-lg); }

/* ---------- 7. SECTION COMPONENTS (the 13 archetypes) ---------- */

/* 7.1 Case intro / hero body */
.tk-cs .tk-intro{ display:grid; gap:1.2em; }
.tk-cs .tk-intro .tk-lead{ max-width:var(--tk-narrow); }

/* 7.2 Full-bleed media — intrinsic (Option A), width-locked */
.tk-cs .tk-media{ width:100%; }
.tk-cs .tk-media--bleed{ max-width:100%; }
.tk-cs .tk-media--contain{ max-width:var(--tk-container); margin-inline:auto; }
.tk-cs .tk-media figure{ margin:0; }

/* 7.3 Text explainer — label | body */
.tk-cs .tk-explainer{ display:grid; grid-template-columns:1fr; gap:1em; }
.tk-cs .tk-explainer .tk-explainer__body{ max-width:var(--tk-narrow); }
@media(min-width:768px){ .tk-cs .tk-explainer{ grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:clamp(24px,4vw,64px); } }

/* 7.4 Brand + colour swatches */
.tk-cs .tk-palette{ display:flex; flex-wrap:wrap; gap:clamp(8px,1vw,14px); }
.tk-cs .tk-swatch{ width:clamp(64px,9vw,96px); }
.tk-cs .tk-swatch__chip{ width:100%; aspect-ratio:1/1; border-radius:var(--tk-radius); border:1px solid var(--tk-line); }
.tk-cs .tk-swatch__name{ font-size:var(--tk-fs-sm); margin-top:.5em; color:var(--tk-fg); }

/* 7.5 Logo reveal — centred */
.tk-cs .tk-logo-reveal{ display:grid; place-items:center; gap:1.2em; text-align:center; }
.tk-cs .tk-logo-reveal img{ max-height:clamp(80px,12vw,200px); width:auto; }

/* 7.6 Before / After — 2-col */
.tk-cs .tk-beforeafter{ display:grid; grid-template-columns:1fr; gap:clamp(16px,2vw,28px); }
@media(min-width:768px){ .tk-cs .tk-beforeafter{ grid-template-columns:1fr 1fr; } }
.tk-cs .tk-beforeafter figure{ margin:0; position:relative; }
.tk-cs .tk-beforeafter .tk-tag{ position:absolute; top:0; left:0; background:var(--tk-dark); color:var(--tk-paper); font-size:var(--tk-fs-sm); padding:.4em .8em; letter-spacing:.1em; text-transform:uppercase; }

/* 7.7 Section heading divider */
.tk-cs .tk-sectiontitle{ display:flex; align-items:baseline; gap:.6em; }
.tk-cs .tk-sectiontitle .tk-num{ font-size:var(--tk-fs-sm); color:var(--tk-muted); }

/* 7.8 Process steps — CSS counter */
.tk-cs .tk-steps{ display:grid; gap:clamp(20px,3vw,40px); counter-reset:step; }
.tk-cs .tk-step{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1em 1.4em; counter-increment:step; }
.tk-cs .tk-step::before{ content:counter(step); font-size:var(--tk-fs-h3); font-weight:500; color:var(--tk-gold); }
@media(min-width:768px){ .tk-cs .tk-steps{ grid-template-columns:repeat(2,1fr); } }

/* 7.9 Motion / video */
.tk-cs .tk-motion{ width:100%; }
.tk-cs .tk-motion video,.tk-cs .tk-motion iframe{ width:100%; max-width:var(--tk-container); height:auto; }

/* 7.10 Carousel — CSS scroll-snap (JS optional enhancement) */
.tk-cs .tk-carousel{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.6em; scroll-padding-left:var(--tk-gutter); -webkit-overflow-scrolling:touch; }
.tk-cs .tk-carousel > *{ flex:0 0 auto; scroll-snap-align:start; width:min(82%,720px); }
.tk-cs .tk-carousel::-webkit-scrollbar{ height:6px; }
.tk-cs .tk-carousel::-webkit-scrollbar-thumb{ background:var(--tk-line); border-radius:0; }
.tk-cs .tk-carousel__btn{ background:var(--tk-dark); color:var(--tk-paper); border:0; width:44px; height:44px; border-radius:var(--tk-radius); cursor:pointer; font-size:18px; display:none; }
.tk-cs .tk-carousel[data-enhanced] .tk-carousel__btn{ display:inline-flex; align-items:center; justify-content:center; }

/* 7.11 Results — big stat */
.tk-cs .tk-result{ display:grid; gap:.4em; }
.tk-cs .tk-result__num{ font-size:var(--tk-fs-h2); font-weight:400; color:var(--tk-heading); line-height:1; }

/* 7.12 Project metadata — definition grid */
.tk-cs .tk-meta{ display:grid; grid-template-columns:1fr; gap:1em 2em; }
@media(min-width:768px){ .tk-cs .tk-meta{ grid-template-columns:repeat(2,1fr); } }
.tk-cs .tk-meta dt{ font-size:var(--tk-fs-sm); text-transform:uppercase; letter-spacing:.1em; color:var(--tk-muted); }
.tk-cs .tk-meta dd{ margin:0 0 1em; }

/* ---------- 8. SPACER (editor-facing; increase / reduce / zero / custom bg) ---------- */
.tk-cs .tk-spacer{ height:var(--tk-gap,0px); background:var(--tk-bg,transparent); width:100%; }
.tk-cs .tk-spacer--sm{ --tk-gap:clamp(16px,2vw,32px); }
.tk-cs .tk-spacer--md{ --tk-gap:clamp(40px,5vw,72px); }
.tk-cs .tk-spacer--lg{ --tk-gap:clamp(72px,9vw,140px); }

/* ---------- 9. HERO (template-controlled, partial) ---------- */
.tk-cs .tk-hero{ background:var(--tk-dark); color:var(--tk-paper); --tk-heading:var(--tk-paper); }
.tk-cs .tk-hero__inner{ max-width:var(--tk-container); margin-inline:auto; padding-block:clamp(56px,9vw,140px); padding-inline:var(--tk-gutter); }
.tk-cs .tk-hero__eyebrow{ font-size:var(--tk-fs-sm); letter-spacing:.14em; text-transform:uppercase; color:var(--tk-gold); }
.tk-cs .tk-hero__title{ font-size:var(--tk-fs-h1); font-weight:400; line-height:var(--tk-lh-tight); margin:.3em 0 0; letter-spacing:-.015em; }
.tk-cs .tk-hero__sub{ max-width:var(--tk-narrow); margin-top:1em; color:var(--tk-paper); opacity:.85; font-size:var(--tk-fs-lg); }
.tk-cs .tk-hero__img{ margin-top:clamp(28px,4vw,56px); }
.tk-cs .tk-hero__img img{ width:100%; height:auto; } /* Option A */

/* ---------- 10. RESPONSIVE (breakpoints from frame: 1440/1024/768/390) ---------- */
@media(max-width:1024px){
  .tk-cs .tk-grid--3{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  .tk-cs .tk-grid--2,.tk-cs .tk-grid--half{ grid-template-columns:1fr; }
  .tk-cs .tk-steps{ grid-template-columns:1fr; }
  .tk-cs .gh-content .kg-gallery-card{ grid-template-columns:1fr; }
  .tk-cs .tk-explainer{ grid-template-columns:1fr; }
  .tk-cs .tk-beforeafter{ grid-template-columns:1fr; }
  .tk-cs .tk-meta{ grid-template-columns:1fr; }
  .tk-cs .tk-carousel > *{ width:min(88%,86vw); }
}

/* ---------- 11. A11Y / MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  .tk-cs *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}
.tk-cs :focus-visible{ outline-offset:3px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }