/* ==========================================================================
   Blog — shared styling for the blog LISTING page and every blog POST page.
   Reuses the site's existing design tokens/components (css/styles.css):
   --color-*, --font-*, --shadow-*, --radius, .btn, .section-label,
   .gold-divider, .container. Do not fork a parallel palette here — add new
   tokens to css/styles.css :root if the design system itself needs to grow.
   ========================================================================== */

/* ---- Shared article shell. Matches the site's own .container pattern
   (full width, side-padding only — see about.html/index.html) instead of the
   narrow fixed-width magazine column the original blog sample used, so the
   page uses the full browser width like every other page on this site. ---- */
.blog-wrap{max-width:100%;margin:0 auto;padding:48px 60px 100px}
.blog-wrap--wide{max-width:100%}
.blog-wrap--wide.blog-wrap{padding-top:140px}

/* ---- Post layout: wide content column + a sticky sidebar TOC on desktop,
   so the page fills the screen like the rest of the site while the actual
   paragraph text (.post-body) still caps at a comfortable reading width. ---- */
.post-layout{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start;max-width:1320px;margin:0 auto}
.post-main{min-width:0}
.post-body{max-width:760px}
.post-cta{max-width:760px}
.toc--sidebar{position:sticky;top:110px}

@media(max-width:1100px){
  .post-layout{grid-template-columns:1fr;gap:0}
  .toc--sidebar{position:static;order:-1;margin-bottom:28px}
}

/* ---- Full-width post hero band (image spans the browser, matches the
   site's other full-bleed section pattern instead of sitting in a narrow
   centered column like the rest of the reading content) ---- */
.post-hero-band{position:relative;overflow:hidden;min-height:52vh;display:flex;align-items:flex-end;background-color:var(--color-dark);background-size:cover;background-position:center;padding-top:92px}
.post-hero-band::before{content:'';position:absolute;inset:0;background:rgba(8,8,8,.5);z-index:1}
.post-hero-band::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.15) 0%,rgba(5,5,5,.55) 70%,rgba(5,5,5,.8) 100%);z-index:2}
.post-hero-band .blog-wrap{position:relative;z-index:3;padding:0 60px 48px}
.post-hero-band .crumbs,.post-hero-band .section-label,.post-hero-band .post-title,.post-hero-band .post-meta{max-width:820px}

/* ---- Breadcrumb ---- */
.crumbs{font-size:13px;color:rgba(255,255,255,.65);margin-bottom:18px;font-family:var(--font-body)}
.crumbs a{color:rgba(255,255,255,.65);text-decoration:none}
.crumbs a:hover{color:var(--color-gold-light)}
.crumbs span{color:#fff}

/* ---- Post header (sits over the hero band image) ---- */
.post-hero-band .section-label{color:var(--color-gold-light)}
.post-title{margin:.2em 0 .35em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.4)}
.post-meta{color:rgba(255,255,255,.75);font-size:14px;font-family:var(--font-body)}

@media(max-width:600px){
  .post-hero-band{min-height:44vh}
}

/* ---- Table of contents ---- */
.toc{background:var(--color-section-alt);border:1px solid var(--color-border);border-radius:var(--radius);padding:20px 24px;margin:28px 0}
.toc h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;color:var(--color-gold);margin:0 0 .7em;font-family:var(--font-body);font-weight:600}
.toc ol{margin:0;padding-left:1.2em}
.toc li{margin:.35em 0}
.toc a{color:var(--color-text);text-decoration:none;font-size:.95rem}
.toc a:hover{color:var(--color-gold);text-decoration:underline}

/* ---- Article body typography (post content is authored HTML: h2/h3/p/ul/etc,
   scoped under .post-body so it never leaks into the rest of the site) ---- */
.post-body{font-size:17px;line-height:1.75;color:var(--color-text)}
.post-body h2{font-size:clamp(1.4rem,3vw,1.7rem);margin:1.7em 0 .5em;scroll-margin-top:100px}
.post-body h3{font-size:1.15rem;margin:1.3em 0 .4em;scroll-margin-top:100px;font-family:var(--font-heading);color:var(--color-dark)}
.post-body p{margin:.75em 0;color:var(--color-text-muted)}
.post-body strong{color:var(--color-text)}
.post-body a{color:var(--color-gold);text-decoration:underline;text-decoration-color:rgba(200,169,110,.4)}
.post-body a:hover{text-decoration-color:var(--color-gold)}
.post-body ul,.post-body ol{padding-left:1.3em;color:var(--color-text-muted)}
.post-body li{margin:.35em 0}
.post-body blockquote{margin:1.3em 0;padding:.7em 1.2em;border-left:4px solid var(--color-gold);background:var(--color-section-alt);color:var(--color-text-muted);border-radius:0 8px 8px 0}

/* ---- In-body figures ---- */
.post-body figure{margin:1.8em 0}
.post-body figure img{width:100%;height:auto;border-radius:var(--radius);display:block;box-shadow:var(--shadow-sm)}
.post-body figcaption{font-size:13px;color:var(--color-text-muted);margin-top:8px;text-align:center}

/* ---- Data tables (horizontally scrollable on mobile) ---- */
.table-scroll{overflow-x:auto;margin:1.6em 0;-webkit-overflow-scrolling:touch}
.post-body table{width:100%;border-collapse:collapse;font-size:15px;min-width:420px}
.post-body th,.post-body td{border:1px solid var(--color-border);padding:11px 14px;text-align:left;vertical-align:top}
.post-body thead th{background:var(--color-section-alt);font-weight:600;font-family:var(--font-heading);color:var(--color-dark)}
.post-body tbody tr:nth-child(even){background:#fbfaf7}

/* ---- FAQ accordion ---- */
.faq{margin-top:2.6em}
.faq h2{font-size:clamp(1.4rem,3vw,1.7rem);margin-bottom:.6em}
.faq details{border:1px solid var(--color-border);border-radius:10px;padding:2px 20px;margin:12px 0;background:var(--color-card);transition:border-color .2s ease,box-shadow .2s ease}
.faq details[open]{border-color:var(--color-gold);box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;font-weight:600;padding:16px 28px 16px 0;position:relative;list-style:none;font-family:var(--font-heading);color:var(--color-dark)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:0;top:14px;font-size:1.3rem;color:var(--color-gold);transition:transform .2s ease;font-family:var(--font-body)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:.2em 0 18px;color:var(--color-text-muted)}

/* ---- Post-end CTA (reuses .btn / .section-label / .gold-divider) ---- */
.post-cta{margin-top:3em;padding:44px 32px;text-align:center;background:var(--color-section-alt);border-radius:var(--radius);border:1px solid var(--color-border)}
.post-cta h2{margin-bottom:10px}
.post-cta p{max-width:520px;margin:0 auto 24px}

@media(max-width:1200px){
  .blog-wrap{padding-left:28px;padding-right:28px}
  .post-hero-band .blog-wrap{padding-left:28px;padding-right:28px}
}
@media(max-width:768px){
  .blog-wrap{padding-left:20px;padding-right:20px}
  .post-hero-band .blog-wrap{padding-left:20px;padding-right:20px}
}
@media(max-width:600px){
  .blog-wrap{padding-top:32px;padding-bottom:70px}
  .blog-wrap--wide.blog-wrap{padding-top:120px}
  .post-hero-band .blog-wrap{padding-left:16px;padding-right:16px;padding-bottom:32px}
  .post-body table{font-size:13.5px}
  .post-cta{padding:32px 20px}
}

/* ==========================================================================
   Blog LISTING page
   ========================================================================== */
.blog-hero{text-align:center;max-width:680px;margin:0 auto 56px}
.blog-hero .section-label{justify-content:center;display:flex}
.blog-hero h1{margin:.1em 0 .3em}
.blog-hero p{color:var(--color-text-muted);font-size:1.1rem}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:32px}

.blog-card{display:flex;flex-direction:column;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease;text-decoration:none}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.blog-card__image{width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--color-section-alt)}
.blog-card__image img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.blog-card__tag{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-gold);margin-bottom:10px}
.blog-card__title{font-size:1.2rem;line-height:1.35;margin:0 0 10px;color:var(--color-dark)}
.blog-card__excerpt{font-size:.95rem;color:var(--color-text-muted);line-height:1.65;margin:0 0 18px;flex:1}
.blog-card__meta{font-size:.8rem;color:var(--color-text-muted);border-top:1px solid var(--color-border);padding-top:14px;margin-top:auto}

@media(max-width:600px){
  .blog-grid{grid-template-columns:1fr;gap:24px}
}