/* GHI Blog V3 Universal Compact Article Layout (Blog Experience 3.1.0)
   Presentation layer only. Scoped to V3 posts via body.ghi-blog-v3.
   No per-article or per-topic rules. */

/* Hero: fixed two columns */
body.ghi-blog-v3 .ghi-article-hero{padding:34px 0 42px}
body.ghi-blog-v3 .ghi-hero-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:center}
body.ghi-blog-v3 .ghi-hero-copy{text-align:left}
body.ghi-blog-v3 .ghi-hero-copy h1{margin:10px 0 12px;font-size:clamp(30px,3.4vw,46px);line-height:1.12;text-align:left}
body.ghi-blog-v3 .ghi-hero-description{margin:0;font-size:17px;line-height:1.6}
body.ghi-blog-v3 .ghi-hero-byline{justify-content:flex-start;margin-top:16px;font-size:13px}
body.ghi-blog-v3 .ghi-reading-time{color:var(--text);font-size:12px}
body.ghi-blog-v3 .ghi-reading-time:before{content:"·";margin-right:6px;color:#9db4ae}
body.ghi-blog-v3 .ghi-article-hero .ghi-actions{justify-content:flex-start;margin-top:18px}
body.ghi-blog-v3 .ghi-hero-media{max-width:420px;margin-left:auto}
body.ghi-blog-v3 .ghi-hero-media img.ghi-blog-hero-image{max-height:300px!important}

/* Main content: left sticky sidebar + right main column */
body.ghi-blog-v3 .ghi-v3-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;align-items:start;justify-content:center}
body.ghi-blog-v3 .ghi-v3-main{min-width:0;max-width:900px}
body.ghi-blog-v3 .ghi-v3-sidebar{position:sticky;top:110px;display:grid;gap:16px}
body.ghi-blog-v3 .ghi-toc-v3{position:static;padding:16px;border:1px solid var(--line);border-radius:var(--radius)}
body.ghi-blog-v3 .ghi-toc-v3 .ghi-toc-toggle{font-size:13px}
body.ghi-blog-v3 .ghi-toc-v3 nav{margin-top:10px;gap:2px}
body.ghi-blog-v3 .ghi-toc-v3 a{padding:4px 0;font-size:12px;line-height:1.4}
body.ghi-blog-v3 .ghi-v3-consult{padding:14px 16px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius)}
body.ghi-blog-v3 .ghi-v3-consult p{margin:6px 0 10px;font-size:13px;line-height:1.5}
body.ghi-blog-v3 .ghi-v3-consult .ghi-button-text{padding:0;font-size:13px}

/* Top cards: Quick Answer + Author side by side */
body.ghi-blog-v3 .ghi-v3-topcards{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:18px;margin:0 0 28px}
body.ghi-blog-v3 .ghi-v3-topcards .ghi-quick-answer{margin:0;padding:20px 22px}
body.ghi-blog-v3 .ghi-v3-topcards .ghi-quick-answer h2{font-size:20px}
body.ghi-blog-v3 .ghi-v3-topcards .ghi-quick-answer p{font-size:15px;line-height:1.55}
body.ghi-blog-v3 .ghi-v3-topcards .ghi-author-panel{margin:0;padding:20px 22px;display:block}
body.ghi-blog-v3 .ghi-v3-topcards .ghi-author-avatar{width:52px;height:52px;font-size:15px;margin-bottom:10px}
body.ghi-blog-v3 .ghi-v3-topcards .ghi-author-panel h2{font-size:17px}
body.ghi-blog-v3 .ghi-v3-topcards .ghi-author-panel p{font-size:13px;line-height:1.5}

/* Typography compaction */
body.ghi-blog-v3 .ghi-article-content h2{margin:34px 0 14px;font-size:28px}
body.ghi-blog-v3 .ghi-article-content h3{margin:24px 0 10px;font-size:21px}
body.ghi-blog-v3 .ghi-article-content p,body.ghi-blog-v3 .ghi-article-content ul,body.ghi-blog-v3 .ghi-article-content ol{margin:0 0 12px}
body.ghi-blog-v3 .ghi-article-content li+li{margin-top:5px}
body.ghi-blog-v3 .ghi-article-content blockquote{margin:20px 0;padding:18px 22px}
body.ghi-blog-v3 .ghi-article-content figure{margin:20px 0}

/* Body images: smaller universal standard */
body.ghi-blog-v3 .ghi-article-content figure img,
body.ghi-blog-v3 .ghi-article-content>img,
body.ghi-blog-v3 .ghi-article-content p>img{max-width:420px;max-height:340px!important}

/* Compact two-column sections */
body.ghi-blog-v3 .ghi-v3-compact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:8px 0 26px}
body.ghi-blog-v3 .ghi-v3-compact-card{padding:20px 22px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius)}
body.ghi-blog-v3 .ghi-v3-compact-card h2{margin-top:0!important}

/* Text + image two-column */
body.ghi-blog-v3 .ghi-v3-text-image{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:center}
body.ghi-blog-v3 .ghi-v3-text-image .ghi-v3-figure{margin:0}
body.ghi-blog-v3 .ghi-v3-text-image .ghi-v3-figure img{max-width:300px;max-height:300px}

/* Tables stay full width, slightly compact */
body.ghi-blog-v3 .ghi-article-content th,body.ghi-blog-v3 .ghi-article-content td{padding:8px 12px}

/* FAQ: compact accordion */
body.ghi-blog-v3 .ghi-faq-section{margin-top:44px}
body.ghi-blog-v3 .ghi-faq-item summary{padding:12px 4px;font-size:16px}
body.ghi-blog-v3 .ghi-faq-item div{padding:0 24px 12px 4px}

/* Bottom CTA: compact horizontal band */
body.ghi-blog-v3 .ghi-article-cta{margin-top:44px;padding:24px 30px}
body.ghi-blog-v3 .ghi-article-cta h2{font-size:24px}

/* Related products: 3 compact columns */
body.ghi-blog-v3 .ghi-product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
body.ghi-blog-v3 .ghi-product-card{grid-template-columns:110px minmax(0,1fr)}
body.ghi-blog-v3 .ghi-product-media{min-height:110px}
body.ghi-blog-v3 .ghi-product-card>div{padding:14px}
body.ghi-blog-v3 .ghi-product-card h3{font-size:16px}
body.ghi-blog-v3 .ghi-product-card p{font-size:13px;margin-bottom:9px}

/* Responsive */
@media(max-width:980px){
  body.ghi-blog-v3 .ghi-v3-layout{grid-template-columns:170px minmax(0,1fr);gap:24px}
}
@media(max-width:760px){
  body.ghi-blog-v3 .ghi-hero-split{grid-template-columns:1fr;gap:22px}
  body.ghi-blog-v3 .ghi-hero-copy{text-align:center}
  body.ghi-blog-v3 .ghi-hero-copy h1{text-align:center;font-size:32px}
  body.ghi-blog-v3 .ghi-hero-description{margin:0 auto}
  body.ghi-blog-v3 .ghi-hero-byline{justify-content:center}
  body.ghi-blog-v3 .ghi-article-hero .ghi-actions{justify-content:center}
  body.ghi-blog-v3 .ghi-hero-media{max-width:100%;margin:0 auto}
  body.ghi-blog-v3 .ghi-hero-media img.ghi-blog-hero-image{max-height:300px!important}
  body.ghi-blog-v3 .ghi-v3-layout{grid-template-columns:1fr;gap:0}
  body.ghi-blog-v3 .ghi-v3-sidebar{position:static;display:block;margin-bottom:24px}
  body.ghi-blog-v3 .ghi-v3-consult{display:none}
  body.ghi-blog-v3 .ghi-v3-topcards{grid-template-columns:1fr;gap:14px}
  body.ghi-blog-v3 .ghi-v3-compact-grid{grid-template-columns:1fr}
  body.ghi-blog-v3 .ghi-v3-text-image{grid-template-columns:1fr;gap:14px}
  body.ghi-blog-v3 .ghi-product-grid{grid-template-columns:1fr}
}
@media(max-width:430px){
  body.ghi-blog-v3 .ghi-product-card{grid-template-columns:1fr}
}

/* Body Image Gallery (3.1.1): body images moved to a unified strip above FAQ */
body.ghi-blog-v3 .ghi-v3-gallery{margin:10px 0 2px}
body.ghi-blog-v3 .ghi-v3-gallery .ghi-module-label{display:block;margin-bottom:10px}
body.ghi-blog-v3 .ghi-v3-gallery-grid{display:grid;gap:14px}
body.ghi-blog-v3 .ghi-v3-gallery-cols-1{grid-template-columns:minmax(0,340px);justify-content:center}
body.ghi-blog-v3 .ghi-v3-gallery-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.ghi-blog-v3 .ghi-v3-gallery-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.ghi-blog-v3 .ghi-v3-gallery-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
body.ghi-blog-v3 .ghi-v3-gallery figure{display:grid;grid-template-rows:180px auto;gap:6px;margin:0;padding:8px;background:#fff;border:1px solid #d7e5e0;border-radius:8px}
body.ghi-blog-v3 .ghi-v3-gallery figure img{width:100%;height:180px;max-width:none;max-height:none;object-fit:contain;object-position:center;border-radius:4px;margin:0}
body.ghi-blog-v3 .ghi-v3-gallery figcaption{margin:0;color:#6b8186;font-size:12px;line-height:1.4;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* FAQ: further compact, all collapsed by default (V3) */
body.ghi-blog-v3 .ghi-faq-list .ghi-faq-item{margin:0}
body.ghi-blog-v3 .ghi-faq-item summary{min-height:40px;padding:10px 8px;font-size:15px;line-height:1.4}
body.ghi-blog-v3 .ghi-faq-item div{padding:10px 28px 14px 8px}

@media(max-width:980px){
  body.ghi-blog-v3 .ghi-v3-gallery-cols-3,
  body.ghi-blog-v3 .ghi-v3-gallery-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ghi-blog-v3 .ghi-v3-gallery figure{grid-template-rows:160px auto}
  body.ghi-blog-v3 .ghi-v3-gallery figure img{height:160px}
}
@media(max-width:560px){
  body.ghi-blog-v3 .ghi-v3-gallery-cols-2,
  body.ghi-blog-v3 .ghi-v3-gallery-cols-3,
  body.ghi-blog-v3 .ghi-v3-gallery-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ghi-blog-v3 .ghi-v3-gallery figure{grid-template-rows:140px auto}
  body.ghi-blog-v3 .ghi-v3-gallery figure img{height:140px}
}
@media(max-width:400px){
  body.ghi-blog-v3 .ghi-v3-gallery-cols-2,
  body.ghi-blog-v3 .ghi-v3-gallery-cols-3,
  body.ghi-blog-v3 .ghi-v3-gallery-cols-4{grid-template-columns:1fr}
}