/**
 * sanctuary-archetype.css — Styles for /sanctuary/[archetype] landing pages.
 * Extends hub.css variables and quiz.css patterns. Does NOT override global nav/footer.
 */

/* ═══ HERO ══════════════════════════════════════════════════════════════════ */
.sarch-hero { position:relative; min-height:72vh; display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center; }
.sarch-hero-bg { position:absolute; inset:0; z-index:0; }
.sarch-hero-img { width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.sarch-hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(20,18,16,.45) 0%,rgba(20,18,16,.65) 100%); }
.sarch-hero-content { position:relative; z-index:2; max-width:720px; padding:4rem 2rem; color:#fff; }
.sarch-eyebrow { color:rgba(255,255,255,.72); margin-bottom:.75rem; }
.sarch-headline { font-family:var(--font-display,'Cormorant Garamond',Georgia,serif); font-size:clamp(2rem,5vw,3.5rem); font-weight:500; color:#fff; margin:.5rem 0 .75rem; line-height:1.15; }
.sarch-tagline { font-family:var(--font-display,'Cormorant Garamond',Georgia,serif); font-size:clamp(1.1rem,2.5vw,1.5rem); color:rgba(255,255,255,.85); margin:0 0 2rem; }
.sarch-hero-cta-row { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.sarch-hero-btn { display:inline-block; padding:13px 28px; font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.85rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; border-radius:3px; transition:opacity .18s; }
.sarch-hero-btn:hover { opacity:.88; }
.sarch-hero-btn--primary { background:var(--hub-sage,#7A9E7E); color:#fff; }
.sarch-hero-btn--ghost { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(4px); }

/* ═══ IDENTITY ══════════════════════════════════════════════════════════════ */
.sarch-identity { background:var(--hub-white,#FDFBF7); padding:5rem 2rem; }
.sarch-identity-inner { max-width:720px; margin:0 auto; }
.sarch-identity-para { font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:1.05rem; color:var(--hub-charcoal,#2C2926); line-height:1.8; margin:0 0 1.4rem; }
.sarch-identity-lead { font-family:var(--font-display,'Cormorant Garamond',Georgia,serif); font-size:clamp(1.15rem,2.2vw,1.4rem); font-style:italic; color:var(--hub-forest,#2D3E33); border-left:3px solid var(--hub-sage,#7A9E7E); padding-left:1.25rem; margin-bottom:1.8rem; }

/* ═══ PILLAR MAP ═════════════════════════════════════════════════════════════ */
.sarch-pillars { background:var(--hub-cream,#F5F0E8); padding:5rem 2rem; }
.sarch-pillars-inner { max-width:960px; margin:0 auto; }
.sarch-pillars-headline { font-family:var(--font-display,'Cormorant Garamond',Georgia,serif); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:500; color:var(--hub-forest,#2D3E33); margin:.4rem 0 2.5rem; }
.sarch-pillar-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; }
.sarch-pillar-card { background:var(--hub-white,#FDFBF7); border:1px solid var(--hub-stone,#C9BFA8); border-radius:6px; padding:1.5rem 1.4rem; }
.sarch-pillar-card--primary   { border-top:3px solid var(--hub-sage-dark,#4E7255); }
.sarch-pillar-card--secondary { border-top:3px solid var(--hub-sage,#7A9E7E); }
.sarch-pillar-card--tertiary  { border-top:3px solid var(--hub-stone,#C9BFA8); }
.sarch-pillar-card--fourth    { border-top:3px solid #E8E2D6; }
.sarch-pillar-card-header { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; margin-bottom:.75rem; }
.sarch-pillar-name { font-family:var(--font-display,'Cormorant Garamond',Georgia,serif); font-size:1.15rem; font-weight:600; color:var(--hub-forest,#2D3E33); }
.sarch-pillar-rank { font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; padding:2px 7px; border-radius:3px; white-space:nowrap; }
.sarch-rank--primary   { background:#E0EBE1; color:#2D5A35; }
.sarch-rank--secondary { background:#EAF0E8; color:#3B6B42; }
.sarch-rank--tertiary  { background:#F0EDE8; color:#6B5B3B; }
.sarch-rank--fourth    { background:#F5F2EE; color:#9A9285; }
.sarch-pillar-desc { font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.88rem; color:var(--hub-warm-gray,#7A7067); line-height:1.7; margin:0 0 1rem; }
.sarch-pillar-bar { height:4px; background:#EDE9E2; border-radius:2px; overflow:hidden; }
.sarch-pillar-bar-fill { height:100%; border-radius:2px; background:var(--hub-sage,#7A9E7E); }
.sarch-bar--primary   { width:92%; background:var(--hub-sage-dark,#4E7255); }
.sarch-bar--secondary { width:65%; background:var(--hub-sage,#7A9E7E); }
.sarch-bar--tertiary  { width:38%; background:var(--hub-stone,#C9BFA8); }
.sarch-bar--fourth    { width:18%; background:#DDD8CF; }

/* ═══ PRODUCT GRID ══════════════════════════════════════════════════════════ */
.sarch-products { background:var(--hub-white,#FDFBF7); padding:5rem 2rem; }
.sarch-products-inner { max-width:1100px; margin:0 auto; }
.sarch-products-headline { font-family:var(--font-display,'Cormorant Garamond',Georgia,serif); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:500; color:var(--hub-forest,#2D3E33); margin:.4rem 0 .5rem; }
.sarch-products-sub { font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.95rem; color:var(--hub-warm-gray,#7A7067); margin:0 0 2.5rem; }
.sarch-product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.sarch-product-card { background:var(--hub-white,#FDFBF7); border:1px solid var(--hub-stone,#C9BFA8); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:box-shadow .18s,transform .18s; }
.sarch-product-card:hover { box-shadow:0 4px 16px rgba(44,41,38,.1); transform:translateY(-2px); }
.sarch-product-img-wrap { width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--hub-cream,#F5F0E8); }
.sarch-product-img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.sarch-product-card:hover .sarch-product-img { transform:scale(1.04); }
.sarch-product-img-placeholder { display:flex; align-items:center; justify-content:center; }
.sarch-product-img-icon { font-size:2rem; opacity:.5; }
.sarch-product-body { padding:1.25rem; flex:1; display:flex; flex-direction:column; }
.sarch-product-brand-badge { display:inline-block; font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--hub-sage-dark,#4E7255); background:#E0EBE1; padding:2px 7px; border-radius:3px; margin-bottom:.5rem; }
.sarch-product-name { font-family:var(--font-display,'Cormorant Garamond',Georgia,serif); font-size:1.15rem; font-weight:500; color:var(--hub-charcoal,#2C2926); margin:0 0 .5rem; line-height:1.3; }
.sarch-product-desc { font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.87rem; color:var(--hub-warm-gray,#7A7067); line-height:1.6; margin:0 0 auto; flex:1; }
.sarch-product-cta { display:inline-block; margin-top:1rem; font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--hub-sage-dark,#4E7255); font-weight:500; }
.sarch-products-footer { margin-top:2.5rem; text-align:center; }
.sarch-collection-btn { display:inline-block; padding:12px 28px; background:transparent; border:1.5px solid var(--hub-sage,#7A9E7E); color:var(--hub-sage-dark,#4E7255); font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.82rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; border-radius:3px; transition:background .18s,color .18s; }
.sarch-collection-btn:hover { background:var(--hub-sage,#7A9E7E); color:#fff; }

/* ═══ RESOURCES ══════════════════════════════════════════════════════════════ */
.sarch-resources { background:var(--hub-cream,#F5F0E8); padding:5rem 2rem; }
.sarch-resources-inner { max-width:960px; margin:0 auto; }
.sarch-resources-headline { font-family:var(--font-display,'Cormorant Garamond',Georgia,serif); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:500; color:var(--hub-forest,#2D3E33); margin:.4rem 0 2.5rem; }
.sarch-resources-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.sarch-resource-card { background:var(--hub-white,#FDFBF7); border:1px solid var(--hub-stone,#C9BFA8); border-radius:6px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:box-shadow .18s; }
.sarch-resource-card:hover { box-shadow:0 4px 16px rgba(44,41,38,.09); }
.sarch-resource-card--guide   { border-top:3px solid var(--hub-sage,#7A9E7E); }
.sarch-resource-card--compare { border-top:3px solid var(--hub-gold,#C4A84B); }
.sarch-resource-img-wrap { width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--hub-cream,#F5F0E8); }
.sarch-resource-img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.sarch-resource-card:hover .sarch-resource-img { transform:scale(1.04); }
.sarch-resource-body { padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.sarch-resource-body--compare { justify-content:center; min-height:200px; }
.sarch-resource-type { font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--hub-warm-gray,#7A7067); display:block; margin-bottom:.6rem; }
.sarch-resource-title { font-family:var(--font-display,'Cormorant Garamond',Georgia,serif); font-size:1.25rem; font-weight:500; color:var(--hub-charcoal,#2C2926); margin:0 0 .6rem; line-height:1.3; }
.sarch-resource-teaser { font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.88rem; color:var(--hub-warm-gray,#7A7067); line-height:1.6; margin:0 0 auto; flex:1; }
.sarch-resource-cta { display:inline-block; margin-top:1.1rem; font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--hub-sage-dark,#4E7255); font-weight:500; }
.sarch-resource-card--compare .sarch-resource-cta { color:var(--hub-gold,#C4A84B); }

/* ═══ NEWSLETTER ═════════════════════════════════════════════════════════════ */
.sarch-newsletter { background:var(--hub-white,#FDFBF7); border-top:1px solid var(--hub-stone,#C9BFA8); padding:4rem 2rem; text-align:center; }
.sarch-newsletter-inner { max-width:520px; margin:0 auto; }
.sarch-newsletter-headline { font-family:var(--font-display,'Cormorant Garamond',Georgia,serif); font-size:clamp(1.4rem,3vw,2rem); font-weight:500; color:var(--hub-charcoal,#2C2926); margin:.5rem 0 .5rem; }
.sarch-newsletter-sub { font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.9rem; color:var(--hub-warm-gray,#7A7067); margin:0 0 1.8rem; }
.sarch-newsletter-form { display:flex; gap:0; max-width:420px; margin:0 auto; }
.sarch-newsletter-input { flex:1; padding:12px 14px; font-size:.9rem; border:1px solid var(--hub-stone,#C9BFA8); background:#fff; outline:none; font-family:inherit; color:var(--hub-charcoal,#2C2926); }
.sarch-newsletter-btn { padding:12px 22px; background:var(--hub-sage-dark,#4E7255); color:#fff; border:none; font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; font-family:var(--font-body,'DM Sans',system-ui,sans-serif); white-space:nowrap; transition:background .18s; }
.sarch-newsletter-btn:hover { background:var(--hub-forest,#2D3E33); }
.sarch-newsletter-success p { font-family:var(--font-body,'DM Sans',system-ui,sans-serif); color:var(--hub-forest,#2D3E33); font-size:.95rem; margin:0; }
.sarch-newsletter-fine { font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.73rem; color:#B0A899; margin-top:.75rem; }

/* ═══ SHARE ══════════════════════════════════════════════════════════════════ */
.sarch-share { background:var(--hub-cream,#F5F0E8); padding:4rem 2rem; text-align:center; }
.sarch-share-inner { max-width:600px; margin:0 auto; }
.sarch-share-headline { font-family:var(--font-display,'Cormorant Garamond',Georgia,serif); font-size:clamp(1.3rem,2.8vw,1.9rem); font-weight:500; color:var(--hub-forest,#2D3E33); margin:.4rem 0 1.8rem; }
.sarch-share-row { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.5rem; }
.sarch-share-btn { display:inline-block; padding:11px 22px; font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.82rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; border-radius:3px; cursor:pointer; border:none; transition:opacity .18s,transform .18s; }
.sarch-share-btn:hover { opacity:.85; transform:translateY(-1px); }
.sarch-share-btn--twitter   { background:#000; color:#fff; }
.sarch-share-btn--pinterest { background:#E60023; color:#fff; }
.sarch-share-btn--copy      { background:var(--hub-sage,#7A9E7E); color:#fff; }
.sarch-share-quiz-cta { font-family:var(--font-body,'DM Sans',system-ui,sans-serif); font-size:.9rem; color:var(--hub-warm-gray,#7A7067); }
.sarch-share-quiz-cta a { color:var(--hub-sage-dark,#4E7255); text-decoration:none; }
.sarch-share-quiz-cta a:hover { text-decoration:underline; }

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════════════ */
@media (max-width:680px) {
  .sarch-hero { min-height:60vh; }
  .sarch-pillar-grid,
  .sarch-product-grid,
  .sarch-resources-grid { grid-template-columns:1fr; }
  .sarch-newsletter-form { flex-direction:column; }
  .sarch-newsletter-input,
  .sarch-newsletter-btn { width:100%; box-sizing:border-box; }
  .sarch-hero-cta-row { flex-direction:column; align-items:center; }
}