/* assets/css/content.css  -  article/content-page styles (.art-*, .fact-*, .pullquote,
   .related-links/.rel-link). Used on the 63 content pages, never on the homepage,
   so it is loaded conditionally and kept off the home critical path. Extracted from style.css. */

/* ── ARTICLE ── */
.art-hero{background:var(--forest);padding:3.5rem 2rem 3rem;position:relative;overflow:hidden}
.art-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 30%,rgba(201,168,76,0.13) 0%,transparent 65%)}
.art-hero-inner{max-width:780px;margin:0 auto;position:relative}

/* Hero-image variant: when .art-hero has .has-hero-image, a <picture class="art-hero-bg">
   child renders the photograph behind a dark gradient overlay for legibility.
   Pages without a matching image keep the existing flat forest-green hero. */
.art-hero-bg{position:absolute;inset:0;z-index:0;margin:0;pointer-events:none}
.art-hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.art-hero.has-hero-image::before{background:linear-gradient(135deg,rgba(13,38,28,0.85) 0%,rgba(13,38,28,0.55) 50%,rgba(13,38,28,0.78) 100%);z-index:1}
.art-hero.has-hero-image > .art-hero-inner{position:relative;z-index:2}
.art-eyebrow{font-size:11px;font-weight:500;letter-spacing:0.15em;color:var(--gold);text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:8px}
.art-eyebrow::before{content:'';display:block;width:18px;height:1px;background:var(--gold)}
.art-hero h1{font-family:'Playfair Display',serif;font-size:clamp(30px,5vw,50px);font-weight:700;color:#fff;line-height:1.2;margin-bottom:1rem}
.art-hero .lead{font-size:16px;color:rgba(255,255,255,0.72);line-height:1.8;max-width:580px}
.art-body{max-width:780px;margin:0 auto;padding:3rem 2rem}
.art-body h2{font-family:'Playfair Display',serif;font-size:24px;font-weight:600;color:var(--forest);margin:2.5rem 0 1rem;line-height:1.3}
.art-body h3{font-family:'Playfair Display',serif;font-size:18px;font-weight:600;color:var(--text-dark);margin:2rem 0 0.75rem}
.art-body p{font-size:15px;color:var(--text-mid);line-height:1.85;margin-bottom:1.2rem}
.art-body ul{margin:0.5rem 0 1.2rem 1.5rem}
.art-body li{font-size:14px;color:var(--text-mid);line-height:1.75;margin-bottom:5px}
.art-body .city-tip-box{color:#fff}
.art-body .city-tip-box h2,
.art-body .city-tip-box h3{color:var(--gold-light);margin:0 0 .75rem}
.art-body .city-tip-box p,
.art-body .city-tip-box li{color:rgba(255,255,255,.86)}
.art-body .city-tip-box p{margin:0 0 .75rem}
.art-body .city-tip-box p:last-child{margin-bottom:0}
.art-body .city-tip-box ul{margin:.75rem 0 0 1.2rem}
.art-body .plan-strip h2,
.art-body .plan-strip h3{color:#fff;margin:0 0 .35rem}
.art-body .plan-strip p{color:rgba(255,255,255,.84);margin:0}
.art-body .phrase-tip p{color:rgba(255,255,255,.86);margin:0}
.art-body .phrase-tip strong{color:var(--gold-light)}
.pullquote{border-left:4px solid var(--gold);padding:1rem 1.5rem;margin:2rem 0;background:var(--cream);border-radius:0 10px 10px 0}
.pullquote p{font-family:'Playfair Display',serif;font-size:17px;font-style:italic;color:var(--forest);line-height:1.6;margin:0}
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:2rem 0}
.fact-box{background:var(--cream);border:1px solid var(--border);border-radius:12px;padding:1.1rem;text-align:center}
.fact-box .num{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;color:var(--forest);display:block;line-height:1}
.fact-box .lbl{font-size:11px;color:var(--text-muted);margin-top:5px}
.art-related{background:var(--cream);border-top:1px solid var(--border);padding:2.5rem 2rem}
.art-related-inner{max-width:780px;margin:0 auto}
.art-related h3{font-family:'Playfair Display',serif;font-size:19px;font-weight:600;color:var(--forest);margin-bottom:1rem}
.related-links{display:flex;gap:8px;flex-wrap:wrap}
.rel-link{display:inline-block;padding:7px 16px;border:1px solid var(--forest-light);border-radius:20px;font-size:13px;color:var(--forest-mid);text-decoration:none;transition:all 0.2s}
.rel-link:hover{background:var(--forest);color:#fff;border-color:var(--forest)}


/* ── Article pages (responsive) ── */
@media (max-width: 600px) {
  .art-hero { padding: 2.5rem 1.25rem 2rem; }
  .art-hero h1 { font-size: clamp(24px, 7vw, 36px); }
  .art-hero .lead { font-size: 15px; }
  .art-body { padding: 1.75rem 1.25rem; }
  .art-body h2 { font-size: 20px; margin-top: 2rem; }
  .art-body p { font-size: 14px; line-height: 1.8; }
  .pullquote { padding: 0.875rem 1rem; }
  .pullquote p { font-size: 15px; }
  .fact-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .fact-box { padding: 0.875rem; }
  .fact-box .num { font-size: 20px; }
  .fact-box .lbl { font-size: 10px; }
  .art-related { padding: 2rem 1.25rem; }
  .related-links { gap: 8px; }
  .rel-link { font-size: 12px; padding: 7px 12px; }
}