/* =========================================
   ELARA HERBAL — BEFORE & AFTER RESULTS PAGE
   Loaded only on the Before After template.
   Reuses theme tokens (--cr, --g, --au, --dk, --bd, --br, --be, --wh, --mx).
   ========================================= */

.baf-page{background:var(--wh);font-family:'Jost',sans-serif;}

/* ---- hero ---- */
.baf-hero{background:var(--cr);padding:72px 32px 60px;text-align:center;position:relative;overflow:hidden;}
.baf-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 80% 20%,rgba(194,146,46,.06) 0%,transparent 70%);pointer-events:none;}
.baf-hero-inner{max-width:760px;margin:0 auto;position:relative;}
.baf-eyebrow{font-size:12px;font-weight:700;letter-spacing:2.5px;color:var(--au);margin-bottom:14px;}
.baf-h1{font-family:'Playfair Display',serif;font-size:44px;font-weight:700;color:var(--dk);margin:0 0 16px;line-height:1.1;}
.baf-sub{font-size:16px;color:var(--bd);line-height:1.8;margin:0 auto;max-width:600px;}

/* ---- results wrapper: generous vertical rhythm so cards breathe ---- */
.baf-results{padding:90px 32px;}
.baf-results-inner{max-width:var(--mx);margin:0 auto;display:flex;flex-direction:column;gap:64px;}

/* ---- single client card ---- */
.baf-card{display:grid;grid-template-columns:1.55fr 1fr;gap:0;background:var(--wh);border:1px solid var(--br);border-radius:22px;overflow:hidden;box-shadow:0 10px 44px rgba(46,42,34,.07);transition:transform .35s ease,box-shadow .35s ease;}
.baf-card:hover{transform:translateY(-4px);box-shadow:0 18px 56px rgba(46,42,34,.11);}

/* media (the before/after image) */
.baf-card-media{position:relative;background:var(--be);display:flex;align-items:center;justify-content:center;padding:26px;}
.baf-card-img{width:100%;height:auto;display:block;border-radius:12px;}
.baf-card-label{display:none;}

/* info panel (heading + checklist) */
.baf-card-info{padding:44px 44px;display:flex;flex-direction:column;justify-content:center;}
.baf-card-icon{width:58px;height:58px;border-radius:50%;background:var(--cr);display:flex;align-items:center;justify-content:center;margin-bottom:22px;}
.baf-card-icon i{font-size:24px;color:var(--au);}
.baf-card-heading{font-family:'Playfair Display',serif;font-size:25px;font-weight:700;color:var(--dk);margin:0 0 18px;line-height:1.25;}
.baf-card-divider{width:54px;height:3px;background:var(--au);border-radius:3px;margin-bottom:24px;}
.baf-card-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
.baf-card-points li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;color:var(--bd);line-height:1.5;}
.baf-card-points li i{color:var(--g);font-size:13px;margin-top:4px;flex-shrink:0;}

/* ---- CTA ---- */
.baf-cta{background:linear-gradient(135deg,var(--be) 0%,#EDE3CA 100%);padding:80px 32px;text-align:center;}
.baf-cta-inner{max-width:640px;margin:0 auto;}
.baf-cta-h2{font-family:'Playfair Display',serif;font-size:32px;font-weight:700;color:var(--dk);margin:0 0 16px;}
.baf-cta-desc{font-size:16px;color:var(--bd);line-height:1.8;margin:0 0 30px;}
.baf-cta-btn{display:inline-flex;align-items:center;gap:10px;background:var(--g);color:var(--wh)!important;padding:16px 38px;border-radius:8px;font-size:15px;font-weight:600;letter-spacing:.5px;text-decoration:none;box-shadow:0 8px 26px rgba(58,74,44,.24);transition:background .25s ease,transform .2s ease;}
.baf-cta-btn:hover{background:var(--gd);transform:translateY(-2px);}
.baf-disclaimer{font-size:12.5px;font-style:italic;color:#9A8E7C;margin:26px 0 0;}

/* ---- generic future section helper (matches theme) ---- */
.baf-section{padding:80px 32px;}
.baf-section-inner{max-width:var(--mx);margin:0 auto;}
.baf-section-title{font-family:'Playfair Display',serif;font-size:30px;font-weight:700;color:var(--dk);text-align:center;margin:0 0 20px;}
.baf-section-text{font-size:16px;color:var(--bd);line-height:1.8;text-align:center;max-width:680px;margin:0 auto;}

/* ---- responsive ---- */
@media(max-width:900px){
  .baf-results{padding:64px 24px;}
  .baf-results-inner{gap:48px;}
  .baf-card{grid-template-columns:1fr;}
  .baf-card-media{padding:22px;}
  .baf-card-info{padding:34px 30px 40px;}
}
@media(max-width:600px){
  .baf-hero{padding:54px 22px 44px;}
  .baf-h1{font-size:32px;}
  .baf-sub{font-size:15px;}
  .baf-results{padding:48px 18px;}
  .baf-results-inner{gap:36px;}
  .baf-card-heading{font-size:22px;}
  .baf-card-info{padding:28px 22px 34px;}
  .baf-cta{padding:60px 22px;}
  .baf-cta-h2{font-size:26px;}
}