/* ============================================================
   True Vine Baptist Church — shared styles
   Used by all inner pages. Mirrors the homepage design system.
   ============================================================ */
:root{
  --blue:#1c3f8f; --blue-700:#16306e; --blue-900:#0e2148;
  --grape:#6e3d94; --grape-light:#9c6cc0;
  --gold:#d6a23e; --gold-light:#ecd09a;
  --leaf:#6f9266;
  --cream:#faf5ec; --cream-2:#f4ecdc; --paper:#ffffff;
  --ink:#23252e; --muted:#6b6d78; --line:#e7ddc9;
  --shadow:0 18px 50px -22px rgba(14,33,72,.35);
  --shadow-sm:0 8px 24px -14px rgba(14,33,72,.28);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html{overflow-x:hidden;}body{font-family:'Mulish',system-ui,sans-serif; color:var(--ink); background:var(--cream); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3,h4{font-family:'Spectral',Georgia,serif; line-height:1.08; font-weight:600; letter-spacing:-.01em;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
.eyebrow{font-family:'Mulish'; font-weight:700; font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--grape);}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:'Mulish'; font-weight:700; font-size:15px; padding:14px 26px; border-radius:999px; cursor:pointer; border:1.5px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold); color:var(--blue-900); box-shadow:0 12px 28px -12px rgba(214,162,62,.7);}
.btn-gold:hover{background:#e3b257;}
.btn-blue{background:var(--blue); color:#fff;}
.btn-blue:hover{background:var(--blue-700);}
.btn-ghost{background:transparent; color:var(--blue); border-color:rgba(28,63,143,.35);}
.btn-ghost:hover{background:var(--blue); color:#fff; border-color:var(--blue);}
.btn-light{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(4px);}
.btn-light:hover{background:#fff; color:var(--blue-900);}

.emblem{display:block;}

/* announcement bar */
.topbar{background:var(--blue-900); color:#e9eaf2; font-size:13px;}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; min-height:42px; gap:18px;}
.topbar .tb-info{display:flex; align-items:center; gap:22px; font-weight:600; letter-spacing:.01em;}
.topbar .tb-info span{display:inline-flex; align-items:center; gap:8px;}
.topbar .tb-info .dot{color:var(--gold);}
.topbar .tb-social{display:flex; align-items:center; gap:14px;}
.topbar .tb-social a{opacity:.82; transition:opacity .15s, color .15s;}
.topbar .tb-social a:hover{opacity:1; color:var(--gold);}
@media(max-width:780px){.topbar .tb-info span.hide-sm{display:none;}}

/* header */
header.nav{position:sticky; top:0; z-index:50; background:rgba(250,245,236,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
header.nav .wrap{display:flex; align-items:center; justify-content:space-between; min-height:78px; gap:20px;}
.brand{display:flex; align-items:center; gap:13px;}
.brand .lock{display:flex; flex-direction:column; line-height:1;}
.brand .lock .l1{font-family:'Spectral'; font-weight:700; font-size:20px; color:var(--blue-900); letter-spacing:.005em;}
.brand .lock .l2{font-family:'Mulish'; font-weight:700; font-size:10.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--grape); margin-top:3px;}
nav.menu{display:flex; align-items:center; gap:20px;}
nav.menu a{font-family:'Mulish'; font-weight:600; font-size:13.5px; color:#3a3c46; position:relative; padding:4px 0;}
nav.menu a::after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--gold); transition:width .2s ease;}
nav.menu a:hover{color:var(--blue);}
nav.menu a:hover::after{width:100%;}
nav.menu a.active{color:var(--blue);}
nav.menu a.active::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:14px;}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px;}
.burger span{width:24px; height:2px; background:var(--blue-900); border-radius:2px;}
@media(max-width:1100px){nav.menu{display:none;} .nav-cta .btn-ghost{display:none;} .nav-cta .btn-gold{display:none;} .burger{display:flex;}}

/* page hero (inner pages) */
.page-hero{position:relative; background:linear-gradient(135deg,var(--blue-900),var(--blue) 78%); color:#fff; overflow:hidden; padding:78px 0 86px;}
.page-hero::before{content:""; position:absolute; right:-90px; top:-90px; width:380px; height:380px; border-radius:50%; border:1px solid rgba(255,255,255,.10);}
.page-hero::after{content:""; position:absolute; right:20px; top:20px; width:250px; height:250px; border-radius:50%; border:1px solid rgba(255,255,255,.07);}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero .eyebrow{color:var(--gold-light);}
.page-hero h1{font-size:clamp(40px,5.5vw,64px); font-weight:700; color:#fff; margin:14px 0 14px; letter-spacing:-.02em; text-wrap:balance; max-width:760px;}
.page-hero h1 em{font-style:italic; color:var(--gold-light); font-weight:600;}
.page-hero p{font-size:18px; color:#d8ddec; font-weight:500; max-width:560px;}
.crumbs{display:flex; gap:8px; align-items:center; font-size:13px; font-weight:600; color:#aab2cc; margin-bottom:6px;}
.crumbs a:hover{color:#fff;} .crumbs .sep{opacity:.5;}

/* section scaffolding */
section{padding:96px 0;}
.section-head{max-width:680px; margin-bottom:52px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(30px,4vw,46px); color:var(--blue-900); margin:14px 0 14px;}
.section-head p{font-size:17px; color:var(--muted); font-weight:500;}
.bg-paper{background:var(--paper);}
.bg-cream{background:var(--cream);}
.bg-cream2{background:var(--cream-2);}

/* vine divider */
.vine-divider{display:flex; align-items:center; justify-content:center; gap:14px; color:var(--gold);}
.vine-divider .ln{height:1px; width:60px; background:linear-gradient(90deg,transparent,var(--gold));}
.vine-divider .ln.r{background:linear-gradient(90deg,var(--gold),transparent);}

/* split (image + copy) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.split.lean-l{grid-template-columns:1.05fr .95fr;}
.split.lean-r{grid-template-columns:.95fr 1.05fr;}
.split .copy h2{font-size:clamp(28px,3.6vw,42px); color:var(--blue-900); margin:14px 0 18px;}
.split .copy p{color:#454751; font-size:16.5px; margin-bottom:16px;}
.split .copy .sig{font-family:'Spectral'; font-style:italic; font-size:18px; color:var(--grape); margin-top:8px;}
.split .media{position:relative;}
.split .media .tv-slot{width:100%; height:460px; border-radius:20px; box-shadow:var(--shadow);}
.split .media .badge{position:absolute; left:-22px; bottom:34px; background:var(--gold); color:var(--blue-900); padding:18px 22px; border-radius:16px; box-shadow:var(--shadow-sm); max-width:210px;}
.split .media .badge .bn{font-family:'Spectral'; font-weight:800; font-size:24px; line-height:1;}
.split .media .badge .bl{font-family:'Mulish'; font-weight:700; font-size:12px; letter-spacing:.04em; margin-top:6px;}
@media(max-width:880px){.split,.split.lean-l,.split.lean-r{grid-template-columns:1fr; gap:44px;} .split .media .badge{left:14px;}}

/* generic cards grid */
.cards{display:grid; gap:26px;}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.cards.c2{grid-template-columns:repeat(2,1fr);}
.card{background:var(--cream); border:1px solid var(--line); border-radius:18px; padding:34px 30px; transition:transform .2s ease, box-shadow .2s ease;}
.bg-cream .card{background:var(--paper);}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm);}
.card .c-ic{width:56px; height:56px; border-radius:15px; display:grid; place-items:center; margin-bottom:18px; background:rgba(28,63,143,.10); color:var(--blue);}
.card .c-ic.grape{background:rgba(110,61,148,.12); color:var(--grape);}
.card .c-ic.gold{background:rgba(214,162,62,.16); color:#b9882c;}
.card h3{font-size:22px; color:var(--blue-900); margin-bottom:10px;}
.card p{color:var(--muted); font-size:15.5px; font-weight:500;}
@media(max-width:880px){.cards.c3,.cards.c2{grid-template-columns:1fr;}}

/* scripture callout */
.callout{background:linear-gradient(135deg,#3a2257,var(--grape) 92%); color:#fff; border-radius:24px; padding:64px 56px; text-align:center; position:relative; overflow:hidden;}
.callout::before{content:"\201C"; position:absolute; left:32px; top:0; font-family:'Spectral'; font-size:160px; color:rgba(255,255,255,.10); line-height:1;}
.callout .verse{font-family:'Spectral'; font-style:italic; font-weight:500; font-size:clamp(24px,3vw,34px); color:#fff; max-width:820px; margin:0 auto; line-height:1.3;}
.callout .ref{font-family:'Mulish'; font-weight:800; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light); margin-top:22px;}

/* cta band */
.cta-band{background:linear-gradient(135deg,var(--blue-900),var(--blue) 70%); color:#fff; text-align:center; position:relative; overflow:hidden;}
.cta-band::before{content:""; position:absolute; left:-70px; bottom:-70px; width:300px; height:300px; border-radius:50%; border:1px solid rgba(255,255,255,.10);}
.cta-band h2{font-size:clamp(30px,4vw,48px); color:#fff; margin-bottom:14px;}
.cta-band p{color:#d8ddec; font-size:17px; font-weight:500; max-width:520px; margin:0 auto 28px;}
.cta-band .actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; z-index:2;}

/* footer */
footer.site{background:var(--blue-900); color:#c8cee0; padding:64px 0 30px;}
footer.site .top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:42px; border-bottom:1px solid rgba(255,255,255,.12);}
footer.site .brand .lock .l1{color:#fff;}
footer.site .brand .lock .l2{color:var(--gold-light);}
footer.site .f-tag{font-family:'Spectral'; font-style:italic; font-size:16px; color:#aab2cc; margin-top:18px; max-width:280px;}
footer.site h5{font-family:'Mulish'; font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-light); margin-bottom:18px;}
footer.site ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
footer.site ul a{font-size:14.5px; color:#c8cee0; font-weight:500;}
footer.site ul a:hover{color:#fff;}
footer.site .f-social{display:flex; gap:12px; margin-top:6px;}
footer.site .f-social a{width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:background .15s;}
footer.site .f-social a:hover{background:var(--gold); color:var(--blue-900);}
footer.site .copy{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; font-size:13px; color:#8a93b0;}
@media(max-width:880px){footer.site .top{grid-template-columns:1fr 1fr;}}


/* ============================================================
   MOBILE OPTIMISATION — comprehensive responsive rules
   ============================================================ */

/* Tighter wrap padding on small screens */
@media(max-width:640px){
  .wrap{padding:0 18px;}
}

/* Newsletter 2-col grid → single col */
@media(max-width:700px){
  .nl-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
}

/* Footer — single column at small screens */
@media(max-width:600px){
  footer.site .top{grid-template-columns:1fr;}
}

/* Page hero — tighter padding on mobile */
@media(max-width:640px){
  .page-hero{padding:40px 0 48px !important;}
  .page-hero h1{font-size:clamp(30px,8vw,44px);}
  .page-hero p{font-size:16px;}
}

/* Section head — tighter on mobile */
@media(max-width:640px){
  .section-head{margin-bottom:32px;}
  .section-head h2{font-size:clamp(24px,7vw,36px);}
}

/* CTA band actions — stack on mobile */
@media(max-width:640px){
  .cta-band .actions{flex-direction:column; align-items:center;}
  .cta-band .actions .btn{width:100%; max-width:320px; justify-content:center;}
}

/* Callout — smaller text on mobile */
@media(max-width:640px){
  .callout{padding:40px 24px;}
  .callout .verse{font-size:clamp(18px,5vw,24px);}
}

/* Split layouts — already at 880px but ensure no overflow */
@media(max-width:640px){
  .split .media image-slot,
  .split .media .tv-slot{height:280px !important;}
  .split .media .badge{display:none;}
}

/* Cards — single col on very small */
@media(max-width:480px){
  .cards.c3,.cards.c2{grid-template-columns:1fr;}
  .card{padding:24px 20px;}
}

/* Buttons — full width on mobile in certain contexts */
@media(max-width:480px){
  .hero .actions{flex-direction:column;}
  .hero .actions .btn{width:100%; justify-content:center;}
}

/* Topbar — hide address, keep social tight */
@media(max-width:480px){
  .topbar .tb-social{gap:8px;}
}

/* Section padding — tighter on mobile */
@media(max-width:640px){
  section{padding:56px 0;}
}

/* Hotline strip on Resources */
@media(max-width:400px){
  .hotline-strip{grid-template-columns:1fr;}
}

/* Resource cards */
@media(max-width:480px){
  .res-card{padding:22px 18px;}
  .hotline-card .hc-num{font-size:18px;}
}

/* Newsletter card form on mobile */
@media(max-width:700px){
  .nl-grid > div:last-child{
    border-radius:16px;
    padding:24px 20px !important;
  }
}

/* Sermon list rows on mobile */
@media(max-width:480px){
  .sermon-row{gap:12px;}
  .sr-title{font-size:15px;}
}

/* Series grid cards */
@media(max-width:480px){
  .series-card .sc-body{padding:16px 16px 18px;}
  .series-card h3{font-size:17px;}
}

/* Give page */
@media(max-width:640px){
  .cashtag{font-size:20px; padding:10px 16px;}
}

/* Visit page map */
@media(max-width:640px){
  .map{min-height:240px !important;}
}