/* ==========================================================================
   CERTINAL — article.css   (Blog/article DETAIL page)
   --------------------------------------------------------------------------
   Loaded by ArticleLayout.astro AFTER blog.css (reuses .blogCard*, .blogTag,
   .chip, .newsletter* for related cards + footer tags + newsletter). Adds the
   editorial reading layout: featured hero, breadcrumb/share, title/meta, prose
   body (block renderer output), article footer, related header. Certinal DS.
   ========================================================================== */

/* ==========================================================================
   1. FEATURED HERO (placeholder gradient banner; real image at data step)
   ========================================================================== */
.articleHeroWrap{max-width:1080px;margin:0 auto;
  padding:calc(var(--nav-offset) + clamp(24px,4vh,44px)) clamp(20px,4vw,40px) 0}
.articleHero{position:relative;overflow:hidden;border-radius:var(--r-lg);
  min-height:clamp(240px,32vw,420px);
  background:linear-gradient(135deg,var(--lime-200),var(--lime-400) 55%,var(--lime-500))}
.articleHero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 15% 12%,rgba(255,255,255,.5),transparent 55%),
  radial-gradient(circle at 82% 88%,rgba(62,79,5,.14),transparent 45%)}
.articleHero::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle,rgba(20,20,21,.05) 1px,transparent 1.4px);background-size:18px 18px;opacity:.5}
.articleHero .blogTag{top:18px;left:18px;z-index:2}
.articleHeroImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* ==========================================================================
   2. READING COLUMN (breadcrumb/share · head · body · footer)
   ========================================================================== */
.articleBodyWrap{max-width:760px;margin:0 auto;padding:0 clamp(20px,4vw,24px)}

/* breadcrumb + share */
.articleCrumbsRow{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:clamp(22px,4vh,34px) 0 0}
.crumbs{display:flex;align-items:center;gap:9px;font-size:var(--text-sm);color:var(--text-muted)}
.crumbs a{color:var(--lime-800);font-weight:var(--w-secondary);transition:color .2s}
.crumbs a:hover{color:var(--lime-900)}
.crumbs a:last-child{color:var(--text-muted);pointer-events:none}
.crumbSep{color:var(--n-300)}
.shareRow{display:flex;align-items:center;gap:8px}
.shareLabel{font-size:var(--text-xs);font-weight:var(--w-primary);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);margin-right:2px}
.shareBtn{position:relative;width:36px;height:36px;border-radius:var(--r-full);border:1px solid var(--n-200);background:#fff;
  display:grid;place-items:center;color:var(--n-700);
  transition:color .2s,border-color .2s,transform .2s var(--ease-lift),background .2s}
.shareBtn:hover{color:var(--lime-800);border-color:var(--lime-600);transform:translateY(-2px)}
/* copy-link confirmation */
.shareBtn.shareCopied{background:var(--lime-400);border-color:var(--lime-400);color:var(--n-950)}
.shareBtn.shareCopied::after{content:"Copied";position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);background:var(--n-950);color:#fff;font-size:11px;font-weight:var(--w-secondary);
  letter-spacing:.02em;padding:4px 9px;border-radius:6px;white-space:nowrap;pointer-events:none}

/* title + meta */
.articleHead{padding:clamp(20px,3vh,28px) 0 0}
.articleTitle{font-size:var(--h2);font-weight:var(--w-primary);line-height:var(--lh-h2);
  letter-spacing:-.02em;color:var(--n-950);text-wrap:balance}
.articleMeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:18px;
  font-size:var(--text-sm);color:var(--text-muted)}
.articleMeta .metaSep{width:4px;height:4px;border-radius:50%;background:var(--n-300)}
.articleMeta .metaAuthor{color:var(--lime-800);font-weight:var(--w-secondary)}

/* ==========================================================================
   3. PROSE (block renderer output) — editorial reading rhythm
   ========================================================================== */
.prose{padding-top:clamp(24px,4vh,36px)}
.prose > * + *{margin-top:1.35em}
.pText{font-size:clamp(17px,16px + .3vw,19px);line-height:1.78;color:var(--n-800)}
.pText a{color:var(--lime-800);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(121,150,27,.4);transition:text-decoration-color .2s}
.pText a:hover{text-decoration-color:var(--lime-700)}
.pH2{font-size:var(--h4);font-weight:var(--w-primary);line-height:var(--lh-h4);letter-spacing:-.015em;
  color:var(--lime-800);margin-top:1.9em}
.pH3{font-size:var(--h5);font-weight:var(--w-primary);line-height:var(--lh-h5);color:var(--n-950);margin-top:1.6em}
.pQuote{margin-block:1.6em;padding:6px 0 6px 24px;border-left:3px solid var(--lime-500);
  font-size:var(--h5);line-height:1.5;font-weight:var(--w-secondary);font-style:italic;color:var(--n-900)}
.pList{display:flex;flex-direction:column;gap:12px;padding-left:2px}
.pList li{position:relative;padding-left:28px;font-size:clamp(16px,15px + .2vw,18px);
  line-height:1.7;color:var(--n-800)}
.pList li::before{content:"";position:absolute;left:6px;top:.62em;width:7px;height:7px;border-radius:2px;
  background:var(--lime-500)}
/* embedded video/media placeholder */
.pEmbed{aspect-ratio:16/9;border-radius:var(--r-lg);display:grid;place-items:center;
  background:linear-gradient(150deg,#1E1F21,#141415);color:rgba(255,255,255,.5);
  font-size:var(--text-sm);letter-spacing:.02em;border:1px solid rgba(255,255,255,.08)}
/* inline figure/image (real image or placeholder) — cap at NATURAL size and
   centre, so a small icon/badge is never blown up to the full column width
   (only large images fill the column). */
.pFigure{margin:0;text-align:center}
.pFigureImg{max-width:100%;width:auto;height:auto;border-radius:var(--r-lg);display:block;margin-inline:auto}
/* icon-sized image (≤160px source) → small centred glyph, not a hero image */
.pFigure--icon{margin-block:.4em}
.pFigure--icon .pFigureImg{width:auto;max-width:80px;border-radius:var(--r-md)}
/* a compact icon+title+desc highlight strip (icon-feature runs like a template's
   "Key Highlights") rendered as a responsive card grid */
.pHighlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(16px,2.4vw,24px);margin-block:1.6em}
.pHighlight{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2.4vw,24px);
  background:var(--n-50);border:1px solid var(--border);border-radius:var(--r-lg)}
.pHighlight img{width:44px;height:44px;object-fit:contain;object-position:left}
.pHighlightTitle{font-size:var(--text-md);font-weight:var(--w-primary);color:var(--n-950);line-height:1.35}
.pHighlight p{font-size:var(--text-sm);line-height:1.6;color:var(--n-700);margin:0}
.pFigureMedia{aspect-ratio:16/9;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--lime-200),var(--lime-400) 60%,var(--lime-500))}
.pFigure figcaption{margin-top:12px;text-align:center;font-size:var(--text-sm);color:var(--text-muted)}
/* live embed (iframe) */
.pEmbedLive{padding:0;border:0;background:none;aspect-ratio:auto}
.pEmbedLive iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r-lg);display:block}
/* video CARD (poster/player unavailable → tasteful play tile linking to source) */
.pEmbedVideo{position:relative;flex-direction:column;gap:16px;text-decoration:none;cursor:pointer;
  background:radial-gradient(120% 140% at 50% 0%,#26282b,#141415);transition:transform .25s var(--ease-lift),box-shadow .25s}
.pEmbedVideo:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(0,0,0,.28)}
.pPlay{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
  background:var(--lime-400);color:var(--n-950);box-shadow:0 10px 30px rgba(121,150,27,.45);transition:transform .25s var(--ease-lift)}
.pEmbedVideo:hover .pPlay{transform:scale(1.06)}
.pEmbedVideoLabel{color:rgba(255,255,255,.86);font-size:var(--text-sm);font-weight:var(--w-medium);letter-spacing:.02em}
/* inline CTA button */
.pCta{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;background:var(--lime-400);
  color:var(--n-950);font-weight:var(--w-button);font-size:var(--btn-size);border-radius:var(--r-full);
  transition:transform .2s var(--ease-lift),box-shadow .2s,background .2s}
.pCta:hover{background:var(--lime-500);transform:translateY(-2px);box-shadow:0 12px 28px rgba(121,150,27,.3)}
/* table */
.pTable{overflow-x:auto;margin-block:1.5em}
.pTable table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.pTable th,.pTable td{border:1px solid var(--border);padding:10px 14px;text-align:left;vertical-align:top;line-height:1.5}
.pTable th{background:var(--n-50);font-weight:var(--w-primary);color:var(--n-950)}
/* passthrough rich HTML */
.pRich :where(p){margin-block:1em;line-height:1.75;color:var(--n-800)}
.pRich :where(h2,h3){color:var(--lime-800);margin-top:1.4em;font-weight:var(--w-primary)}
.pRich :where(img){max-width:100%;height:auto;border-radius:var(--r-md)}
.pRich :where(a){color:var(--lime-800);text-decoration:underline}
.pRich :where(ul,ol){padding-left:22px;line-height:1.7}

/* ==========================================================================
   4. ARTICLE FOOTER — tags + share
   ========================================================================== */
.articleFoot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(36px,6vh,56px);padding-top:24px;border-top:1px solid var(--border)}
.articleTags{display:flex;flex-wrap:wrap;gap:8px}

/* ==========================================================================
   5. RELATED — reuses .blogCard / .blogTag / .blogCardMedia from blog.css
   ========================================================================== */
.relatedSection{max-width:1360px;margin:0 auto;padding:clamp(48px,8vh,88px) clamp(20px,4vw,40px) clamp(56px,9vh,100px)}
.relatedHead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.relatedTitle{font-size:var(--h4);font-weight:var(--w-primary);letter-spacing:-.02em;color:var(--n-950)}
.relatedLink{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-sm);
  font-weight:var(--w-button);color:var(--lime-800);transition:gap .2s}
.relatedLink:hover{gap:11px}
.relatedGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.6vw,24px)}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */
@media (max-width:1023px){
  .relatedGrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .articleTitle{font-size:var(--h3)}
  .relatedGrid{grid-template-columns:1fr}
  .articleCrumbsRow{gap:12px}
}