/* ============================================================
   Vertivine V2 — pages.css (inner pages)
   Same tokens as the locked design system; nothing here may
   override the locked homepage section styles.
   ============================================================ */

/* ---------- breadcrumbs ---------- */
.vv-breadcrumbs{background:var(--cream);border-bottom:1px solid var(--line)}
.vv-breadcrumbs ol{list-style:none;margin:0;padding:12px 24px;max-width:1140px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:.92rem}
.vv-breadcrumbs li{display:flex;align-items:center}
.vv-breadcrumbs li+li::before{content:"/";margin-right:10px;color:var(--muted)}
.vv-breadcrumbs a{color:var(--muted);text-decoration:none}
.vv-breadcrumbs a:hover{color:var(--field-green);text-decoration:underline;text-underline-offset:3px}
.vv-breadcrumbs [aria-current="page"]{color:var(--wine);font-weight:600}

/* ---------- page hero ---------- */
.page-hero{position:relative;background:var(--vine-deep);color:var(--cream);padding:96px 0;overflow:hidden}
.page-hero h1{color:var(--cream);max-width:18ch;font-size:clamp(2.5rem,4.6vw,4rem)}
.page-hero .lede{color:rgba(247,244,236,.92);margin:1.4rem 0 2.1rem;font-size:1.3rem;max-width:56ch}
/* VERA-6540 G1a: svc-tag promise sits on the dark vine-deep hero — base .svc-tag is
   --muted (1.4:1). Cream on vine-deep is ~11:1; .92 alpha matches sibling hero text. */
.page-hero .svc-tag{color:rgba(247,244,236,.92)}
.page-hero .hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.page-hero .hero-vine{position:absolute;right:-40px;top:-30px;width:420px;opacity:.3;pointer-events:none}
@media (max-width:900px){.page-hero .hero-vine{display:none}}
@media (max-width:760px){.page-hero{padding:72px 0}}

/* ---------- generic sections ---------- */
.vv-section{padding:88px 0}
.vv-section--alt{background:var(--cream)}
.vv-section--dark{background:var(--vine-deep);color:var(--cream)}
.vv-section--dark h2,.vv-section--dark h3{color:var(--cream)}
.vv-section--dark .lede{color:rgba(247,244,236,.92)}
.vv-section--green{background:var(--field-green);color:var(--cream)}
.vv-section--green h2,.vv-section--green h3{color:var(--cream)}
@media (max-width:760px){.vv-section{padding:64px 0}}

.section-head{max-width:720px;margin-bottom:3rem}
.section-head .lede{color:var(--muted)}
.vv-section--dark .section-head p,.vv-section--green .section-head p{color:rgba(247,244,236,.92)}

.lede{font-size:1.25rem;color:var(--muted)}
.eyebrow--wine{color:var(--wine)}

/* ---------- prose body ---------- */
.prose{padding:64px 24px;max-width:1140px;margin:0 auto}
.prose>*{max-width:62ch}
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.8rem}
.prose ul,.prose ol{margin:0 0 1.2rem 1.3rem;max-width:62ch}
.prose li{margin-bottom:.4rem}
/* VERA-6540 G1 link-in-text-block: content links are field-green (#2F6B3A) on --ink
   (#333333) body text = 1.97:1. Color alone can never pass 3:1 here — underline is the
   non-color affordance (WCAG 1.4.1 / axe link-in-text-block). */
.prose a:not(.btn):not(.btn-primary):not(.btn-ghost):not(.aud-go),
.article-content a:not(.btn):not(.btn-primary):not(.btn-ghost):not(.aud-go){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose img{border-radius:var(--r-card);margin:1.5rem 0}
/* VERA-6540 G2 side-tab: 3px solid left-border accent is the flagged anti-pattern;
   blockquote keeps its italic/muted treatment without the side tab. */
.prose blockquote{padding-left:1.1rem;color:var(--muted);font-style:italic;margin:1.4rem 0}
@media (max-width:760px){.prose{padding:44px 20px}}

/* ---------- ACF content cards ---------- */
.vv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.vv-cards--two{grid-template-columns:repeat(2,1fr)}
@media (max-width:940px){.vv-cards,.vv-cards--two{grid-template-columns:1fr}}
.vv-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:2.2rem 2rem;display:flex;flex-direction:column;gap:.6rem;box-shadow:0 1px 2px rgba(28,58,36,.05)}
.vv-section--alt .vv-card,.vv-section--green .vv-card,.vv-section--dark .vv-card{background:#fff;color:var(--ink)}
.vv-card h3{color:var(--vine-deep);font-size:1.5rem}
.vv-card p{color:var(--muted);font-size:1.03rem}
.vv-card .svc-kicker{display:block;font-family:var(--sans);font-size:.95rem;font-weight:700;color:var(--wine);margin-bottom:.3rem;letter-spacing:.01em}
.vv-card ul{list-style:none;margin:.4rem 0 0;display:grid;gap:.55rem}
.vv-card ul li{position:relative;padding-left:26px;color:var(--ink);font-size:1.02rem}
.vv-card ul li::before{content:"";position:absolute;left:0;top:.42em;width:15px;height:9px;background:var(--leaf);clip-path:polygon(0 78%,14% 44%,38% 60%,62% 12%,82% 34%,100% 0,100% 100%,0 100%);border-radius:2px}
.vv-section--dark .vv-card ul li,.vv-section--green .vv-card ul li{color:var(--ink)}

/* stat strip (hub proof points) */
.vv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.4rem}
@media (max-width:820px){.vv-stats{grid-template-columns:1fr}}
.vv-stat{background:rgba(247,244,236,.08);border:1px solid var(--line-dark);border-radius:var(--r-card);padding:1.6rem}
.vv-stat .num{font-family:var(--serif);font-size:2.2rem;color:var(--leaf);line-height:1.1}
.vv-stat .lbl{font-size:1rem;color:rgba(247,244,236,.92)}
.vv-section--green .vv-stat .num{color:var(--cream)}
.vv-section:not(.vv-section--dark):not(.vv-section--green) .vv-stat{background:var(--cream);border-color:var(--line)}
.vv-section:not(.vv-section--dark):not(.vv-section--green) .vv-stat .num{color:var(--field-green)}
.vv-section:not(.vv-section--dark):not(.vv-section--green) .vv-stat .lbl{color:var(--muted)}

/* ---------- comparison table ---------- */
.vv-table-wrap{overflow-x:auto;margin-top:2.4rem;border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
table.vv-compare{width:100%;border-collapse:collapse;min-width:560px}
.vv-compare th,.vv-compare td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:1.02rem;vertical-align:top}
.vv-compare thead th{background:var(--cream);font-family:var(--sans);font-weight:700;color:var(--vine-deep);font-size:1rem}
.vv-compare tbody th{font-weight:600;color:var(--vine-deep);white-space:nowrap}
.vv-compare tbody tr:last-child td,.vv-compare tbody tr:last-child th{border-bottom:0}
.vv-compare td{color:var(--muted)}
.vv-compare .yes{color:var(--field-green);font-weight:600}
.vv-compare .no{color:var(--wine)}
.vv-compare-note{margin-top:1.2rem;font-size:1rem;color:var(--muted)}

/* ---------- blog index ---------- */
.vv-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.6rem}
@media (max-width:940px){.vv-blog-grid{grid-template-columns:1fr}}
.vv-post-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:1.9rem;display:flex;flex-direction:column;gap:.6rem;text-decoration:none;box-shadow:0 1px 2px rgba(28,58,36,.05)}
.vv-post-card:hover{border-color:var(--field-green);text-decoration:none}
.vv-post-card h2,.vv-post-card h3{font-size:1.45rem;color:var(--vine-deep);margin:0}
.vv-post-card .post-tag{align-self:flex-start;background:var(--cream);border:1px solid var(--line);color:var(--field-green);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;border-radius:999px}
.vv-post-card p{color:var(--muted);margin:0;flex:1}
.vv-post-card .post-meta{font-size:.95rem;color:var(--muted)}
.vv-blog-empty{margin-top:2rem;color:var(--muted)}
.vv-pagination{margin-top:3rem;display:flex;gap:10px;flex-wrap:wrap}
.vv-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none}
.vv-pagination .page-numbers.current{background:var(--field-green);border-color:var(--field-green);color:#fff}
.vv-pagination .page-numbers:hover{border-color:var(--field-green);color:var(--field-green)}

/* ---------- single post ---------- */
.article-header{background:var(--cream);border-bottom:1px solid var(--line);padding:72px 0}
.article-header h1{font-size:clamp(2.2rem,4vw,3.4rem);max-width:20ch}
.article-meta-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:1.1rem;color:var(--muted);font-size:1rem}
.article-tag{display:inline-block;background:var(--cream);border:1px solid var(--line);color:var(--field-green);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;border-radius:999px;margin-bottom:1rem}
.article-body{padding:64px 0}
.article-body .article-content{max-width:760px;margin:0 auto}
.article-content>*{max-width:66ch}
.article-content h2{margin-top:2.2rem}
.article-content ul,.article-content ol{margin:0 0 1.2rem 1.3rem}
.article-content img{border-radius:var(--r-card)}
@media (max-width:760px){.article-header{padding:48px 0}.article-body{padding:44px 0}}

/* ---------- 404 ---------- */
.vv-404{padding:120px 0;text-align:center}
.vv-404 h1{font-size:clamp(3rem,6vw,4.5rem)}
.vv-404 p{color:var(--muted);margin:1rem auto 2rem}
.vv-404 .hero-ctas{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ---------- closing CTA band (inner-page contact slot, canon v6) ---------- */
.vv-cta-band{background:var(--vine-deep);color:var(--cream);padding:88px 0;position:relative;overflow:hidden}
.vv-cta-band h2{color:var(--cream)}
.vv-cta-band .lede{color:rgba(247,244,236,.92)}
.vv-cta-band .hero-ctas{margin-top:2.2rem;display:flex;gap:14px;flex-wrap:wrap}
.vv-cta-band .contact-fine{color:rgba(247,244,236,.92);font-size:1rem;margin-top:1.2rem}
@media (max-width:760px){.vv-cta-band{padding:64px 0}}

/* ---------- shared inner-page hero vine motif ---------- */
.hero-vine-inner{position:absolute;right:-40px;top:-30px;width:420px;opacity:.3;pointer-events:none}
@media (max-width:900px){.hero-vine-inner{display:none}}

/* sticky header offset for anchor jumps */
section[id]{scroll-margin-top:84px}