/* guides.css — Guides page only */

.page-header { padding:14rem var(--space-page) 6rem; position:relative; overflow:hidden; }
.page-header::before { content:'GUIDES'; position:absolute; top:6rem; left:-1rem; font-family:var(--serif); font-size:18vw; font-weight:300; color:rgba(91,191,181,0.04); letter-spacing:-0.02em; line-height:1; pointer-events:none; white-space:nowrap; }
.header-inner { max-width:680px; position:relative; z-index:1; }
.page-eyebrow { font-size:.65rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--teal); display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.page-eyebrow::before { content:''; display:block; width:36px; height:1px; background:var(--teal); opacity:.5; }
.page-title { font-family:var(--serif); font-size:clamp(2.6rem,5vw,4.4rem); line-height:1.1; color:var(--cream); margin-bottom:1.6rem; }
.page-title em { font-style:italic; color:var(--sand); }
.page-desc { font-size:.92rem; font-weight:300; line-height:1.85; color:var(--stone); max-width:520px; }

.filter-bar { padding:0 var(--space-page) 0; display:flex; border-bottom:1px solid rgba(91,191,181,.12); position:sticky; top:62px; background:var(--black); z-index:50; }
.filter-btn { font-family:var(--sans); font-size:.68rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); background:none; border:none; border-bottom:2px solid transparent; padding:1rem 2rem 1rem 0; cursor:pointer; transition:color .3s,border-color .3s; margin-right:1rem; white-space:nowrap; }
.filter-btn:hover { color:var(--cream); }
.filter-btn.active { color:var(--teal); border-bottom-color:var(--teal); }

.guides-section { padding:var(--space-section) var(--space-page); }
.category-block { margin-bottom:6rem; }
.category-label { font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--teal); margin-bottom:2.4rem; display:flex; align-items:center; gap:1rem; }
.category-label::after { content:''; flex:1; height:1px; background:rgba(91,191,181,.15); }

.guide-hero { display:grid; grid-template-columns:1fr 1fr; border:1px solid rgba(91,191,181,.15); margin-bottom:1.5rem; overflow:hidden; transition:border-color .4s; cursor:pointer; }
.guide-hero:hover { border-color:rgba(91,191,181,.38); }
.guide-hero-img { position:relative; overflow:hidden; min-height:360px; }
.guide-hero-img img { width:100%; height:100%; object-fit:cover; filter:brightness(.75) grayscale(15%); transition:transform .8s ease,filter .6s; }
.guide-hero:hover .guide-hero-img img { transform:scale(1.04); filter:brightness(.85) grayscale(0%); }
.guide-hero-img-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(14,13,11,.6) 0%,transparent 60%); }
.guide-hero-body { padding:3.5rem; display:flex; flex-direction:column; justify-content:center; background:var(--charcoal); }
.guide-badge { display:inline-block; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--teal); border:1px solid rgba(91,191,181,.35); padding:.35rem .9rem; margin-bottom:1.4rem; align-self:flex-start; }
.guide-badge.featured { background:rgba(91,191,181,.1); }
.guide-title { font-family:var(--serif); font-size:2rem; line-height:1.25; color:var(--cream); margin-bottom:1rem; }
.guide-title em { font-style:italic; color:var(--sand); }
.guide-excerpt { font-size:.85rem; font-weight:300; line-height:1.85; color:var(--stone); margin-bottom:2rem; }
.guide-meta { display:flex; gap:1.5rem; align-items:center; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); margin-bottom:2rem; }
.guide-meta-dot { width:3px; height:3px; border-radius:50%; background:var(--stone); }
.guide-cta { display:inline-flex; align-items:center; gap:.7rem; font-size:.68rem; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); text-decoration:none; border-bottom:1px solid rgba(201,191,168,.3); padding-bottom:3px; transition:color .3s,border-color .3s; align-self:flex-start; }
.guide-cta:hover { color:var(--teal); border-color:var(--teal); }
.cta-arrow { transition:transform .3s; }
.guide-cta:hover .cta-arrow { transform:translateX(4px); }

.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(91,191,181,.12); }
.guide-card { background:var(--black); padding:2.4rem 2rem; display:flex; flex-direction:column; transition:background .35s; cursor:pointer; position:relative; overflow:hidden; }
.guide-card::before { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.guide-card:hover { background:var(--charcoal-mid); }
.guide-card:hover::before { transform:scaleX(1); }
.card-num { font-family:var(--serif); font-size:3.5rem; color:rgba(91,191,181,.15); line-height:1; margin-bottom:1.4rem; transition:color .3s; }
.guide-card:hover .card-num { color:rgba(91,191,181,.3); }
.card-badge { font-size:.57rem; letter-spacing:.22em; text-transform:uppercase; color:var(--stone); margin-bottom:.8rem; }
.card-title { font-family:var(--serif); font-size:1.25rem; line-height:1.35; color:var(--cream); margin-bottom:.9rem; flex:1; }
.card-desc { font-size:.8rem; font-weight:300; line-height:1.75; color:var(--stone); margin-bottom:1.8rem; }
.card-link { font-size:.65rem; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); text-decoration:none; display:flex; align-items:center; gap:.5rem; transition:color .3s; }
.guide-card:hover .card-link { color:var(--teal); }
.card-link-arrow { transition:transform .3s; }
.guide-card:hover .card-link-arrow { transform:translateX(4px); }

.insight-list { display:flex; flex-direction:column; gap:1px; background:rgba(91,191,181,.12); }
.insight-row { background:var(--black); display:grid; grid-template-columns:2fr 1fr auto; align-items:center; gap:2rem; padding:2rem var(--space-page); cursor:pointer; transition:background .3s; }
.insight-row:hover { background:var(--charcoal); }
.insight-title { font-family:var(--serif); font-size:1.35rem; color:var(--cream); line-height:1.3; }
.insight-title em { font-style:italic; color:var(--sand); }
.insight-desc { font-size:.8rem; font-weight:300; line-height:1.7; color:var(--stone); }
.insight-cta { font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); white-space:nowrap; text-decoration:none; display:flex; align-items:center; gap:.5rem; transition:color .3s; }
.insight-row:hover .insight-cta { color:var(--teal); }

@media(max-width:900px) {
  .page-header { padding:10rem var(--space-page) 4rem; }
  .filter-bar { overflow-x:auto; top:58px; }
  .guides-section { padding:3rem var(--space-page) 6rem; }
  .guide-hero { grid-template-columns:1fr; }
  .guide-hero-img { min-height:240px; }
  .guide-hero-body { padding:2rem; }
  .guide-grid { grid-template-columns:1fr; }
  .insight-row { grid-template-columns:1fr; gap:.6rem; padding:1.5rem var(--space-page); }
  .insight-cta { display:none; }
}