/* ════════════════════════════════════════════════════════════
   seo-pages.css
   Dedicated stylesheet for the individually-authored SEO landing
   page templates in /templates/seo/.

   This file holds ONLY components that don't already exist in the
   theme's main style.css. Everything that does already exist there —
   .page-hero, .breadcrumb, .sec-label, .btn-primary/.btn-dark,
   .faq-home-*, .service-cta-band, .areas-grid/.area-card,
   .process-steps/.ps, .benefits-grid/.benefit-card, .gi/.gi-label —
   gets reused as-is from style.css. Duplicating that here would just
   create two sources of truth for the same look.

   Enqueue only on pages using a /templates/seo/ template — see
   sl_enqueue_css() in inc/seo-page-helpers.php.
   ════════════════════════════════════════════════════════════ */

/* ── Section wrapper (shared spacing for new bespoke sections) ── */
.sl-section{padding:100px 60px;}
.sl-section.is-dark{background:var(--dark);}
.sl-section.is-cream2{background:var(--cream2);}
.sl-inner{max-width:1380px;margin:0 auto;}
.sl-inner.is-narrow{max-width:860px;}
.sl-head{max-width:680px;margin-bottom:48px;}
.sl-head.is-centered{margin-left:auto;margin-right:auto;text-align:center;}
.sl-headline{font-family:var(--fd);font-size:clamp(28px,3.2vw,48px);font-weight:700;line-height:1.1;letter-spacing:-.5px;color:var(--dark);margin-bottom:16px;}
.sl-headline em{font-style:italic;color:var(--gold);}
.sl-section.is-dark .sl-headline{color:var(--cream);}
.sl-section.is-dark .sl-headline em{color:var(--gold-light);}
.sl-sub{font-size:16px;line-height:1.8;color:var(--text-light);}
.sl-section.is-dark .sl-sub{color:rgba(250,247,242,.5);}

/* ── Two-option comparison (e.g. stamped concrete vs cabro pavers) ── */
.compare-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;}
.compare-card{background:var(--cream2);border-radius:20px;padding:40px 36px;position:relative;}
.compare-card.is-recommended{background:var(--dark);color:var(--cream);}
.compare-card.is-recommended::before{
    content:attr(data-badge);position:absolute;top:-14px;left:32px;background:var(--gold);color:#fff;
    font-family:var(--fm);font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:6px 14px;border-radius:50px;
}
.compare-vs{display:flex;align-items:center;justify-content:center;padding:0 28px;font-family:var(--fd);font-size:20px;font-weight:700;color:var(--text-light);}
.compare-title{font-family:var(--fd);font-size:24px;font-weight:700;margin-bottom:4px;color:var(--dark);}
.compare-card.is-recommended .compare-title{color:var(--cream);}
.compare-sub{font-family:var(--fm);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:24px;display:block;}
.compare-card.is-recommended .compare-sub{color:var(--gold-light);}
.compare-list{display:flex;flex-direction:column;gap:12px;margin:0 0 24px;padding:0;}
.compare-list li{list-style:none;display:flex;gap:10px;font-size:14px;line-height:1.6;color:var(--text-light);}
.compare-card.is-recommended .compare-list li{color:rgba(250,247,242,.6);}
.compare-list li::before{content:'✓';color:var(--gold);flex-shrink:0;font-weight:700;}
.compare-price{font-family:var(--fd);font-size:22px;font-weight:700;color:var(--gold2);}
.compare-card.is-recommended .compare-price{color:var(--gold-light);}

/* ── Surface / pattern showcase strip ── */
.surface-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.surface-tile{border-radius:14px;overflow:hidden;height:170px;position:relative;}
.surface-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s ease;}
.surface-tile:hover img{transform:scale(1.06);}
.surface-tile span{
    position:absolute;bottom:0;left:0;right:0;padding:16px 14px 12px;
    background:linear-gradient(to top,rgba(28,20,10,.82),transparent);color:#fff;
    font-family:var(--fd);font-size:13px;font-weight:700;
}

/* ── Quick spec comparison table ── */
.spec-table-wrap{border-radius:16px;overflow:hidden;border:1px solid var(--stone);}
.spec-table{width:100%;border-collapse:collapse;font-size:14px;}
.spec-table th{background:var(--dark);color:rgba(250,247,242,.5);font-family:var(--fm);font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:400;text-align:left;padding:14px 20px;}
.spec-table th.is-highlight{color:var(--gold-light);}
.spec-table td{padding:14px 20px;border-bottom:1px solid var(--stone);color:var(--text);}
.spec-table td.is-label{font-weight:600;color:var(--dark);}
.spec-table tr:nth-child(even) td{background:var(--cream2);}

/* ── Inline scenario cards (e.g. "best for driveways" / "best for parking") ── */
.scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--stone);border-radius:20px;overflow:hidden;}
.scenario-card{background:var(--cream);padding:36px 30px;}
.scenario-icon{font-size:30px;margin-bottom:14px;}
.scenario-title{font-family:var(--fd);font-size:17px;font-weight:700;color:var(--dark);margin-bottom:10px;}
.scenario-desc{font-size:13px;line-height:1.7;color:var(--text-light);}
.scenario-pick{display:inline-block;margin-top:14px;font-family:var(--fm);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);background:rgba(184,132,58,.08);padding:6px 12px;border-radius:50px;}

@media(max-width:1024px){
    .sl-section{padding:80px 40px;}
    .compare-grid{grid-template-columns:1fr;gap:20px;}
    .compare-vs{padding:6px 0;}
    .surface-strip{grid-template-columns:repeat(2,1fr);}
    .scenario-grid{grid-template-columns:1fr;}
    .scenario-card{border-bottom:1px solid var(--stone);}
}
@media(max-width:768px){
    .sl-section{padding:60px 20px;}
    .surface-strip{grid-template-columns:repeat(2,1fr);}
    .spec-table th,.spec-table td{padding:10px 12px;font-size:12px;}
}