/* ==========================================================================
   DRN Foundation — demo skins
   Each demo reuses the same page structure and only changes treatment, so a
   client can switch the whole site in one click without losing content.
   ========================================================================== */

/* ==========================================================================
   1. HOPE — warm orange, photo-led, soft rounded cards
   ========================================================================== */
.demo-hope{background:var(--drn-surface)}
.demo-hope .drn-cause{border-radius:18px}
.demo-hope .drn-cause-media{height:230px}
.demo-hope .drn-cause-tag{border-radius:999px}
.demo-hope .drn-event{border-radius:18px}
.demo-hope .drn-hero .drn-kicker{background:rgba(255,255,255,.16)}
.demo-hope .section-soft{background:var(--drn-surface-2)}
.demo-hope .drn-stat{border-radius:18px}
.demo-hope .site-footer{background:#1C1917}
.demo-hope .footer-wave{display:block}

/* ==========================================================================
   2. CLEAN — white, teal, thin rules, institutional
   ========================================================================== */
.demo-clean{background:#fff}
.demo-clean h1,.demo-clean h2,.demo-clean h3{font-weight:700;letter-spacing:-.025em}
.demo-clean .drn-cause{
  border-radius:4px;border-top:3px solid var(--drn-primary);
  box-shadow:none;background:#fff
}
.demo-clean .drn-cause:hover{box-shadow:0 20px 44px rgba(15,23,42,.08)}
.demo-clean .drn-cause-media{height:190px}
.demo-clean .drn-cause-tag{
  border-radius:0;background:#fff;color:var(--drn-primary);
  border:1px solid var(--drn-primary);font-weight:700;letter-spacing:.1em
}
.demo-clean .drn-bar{height:4px;border-radius:0}
.demo-clean .drn-bar i{border-radius:0}
.demo-clean .drn-event{border-radius:4px;border-left:3px solid var(--drn-primary);box-shadow:none;background:#fff}
.demo-clean .drn-event-date{border-radius:2px}
.demo-clean .drn-kicker{border-radius:2px;background:rgba(13,148,136,.85);letter-spacing:.2em}
.demo-clean .drn-stat{border-radius:4px;background:#F8FAFC;border:1px solid var(--drn-line)}
.demo-clean .section-ink{background:#0F172A}
.demo-clean .drn-dots button{border-radius:0;height:2px;width:30px}
.demo-clean .drn-nav button{border-radius:3px}
.demo-clean .drn-donate-form{border-radius:4px;box-shadow:0 24px 60px rgba(15,23,42,.08)}
.demo-clean .drn-donate-side{border-radius:4px}
.demo-clean .drn-team-card{border-radius:4px;border-top:3px solid var(--drn-primary)}
.demo-clean .drn-post{border-radius:4px}
.demo-clean .drn-faq-item{border-radius:4px}
.demo-clean .site-footer{background:#0F172A}

/* ==========================================================================
   3. BOLD — dark indigo, oversized type, high contrast
   ========================================================================== */
.demo-bold{background:#fff}
.demo-bold h1{font-weight:700;letter-spacing:-.035em;line-height:1.02}
.demo-bold h2{font-weight:700;letter-spacing:-.03em}
.demo-bold .site-header{background:#fff;border-bottom:2px solid var(--drn-ink)}
.demo-bold .nav a{font-weight:600;text-transform:uppercase;font-size:.78rem;letter-spacing:.09em}
.demo-bold .drn-hero{background:#1E1B4B}
.demo-bold .drn-slide .veil{background:linear-gradient(100deg,rgba(30,27,75,.95) 0%,rgba(30,27,75,.8) 45%,rgba(30,27,75,.28) 100%)}
.demo-bold .drn-copy h1{font-size:clamp(2.2rem,4.8vw,4.4rem);font-weight:700}
.demo-bold .drn-kicker{background:var(--drn-primary);border-radius:2px;color:#fff}
.demo-bold .drn-cause{border-radius:6px;border:2px solid var(--drn-ink);box-shadow:6px 6px 0 var(--drn-primary)}
.demo-bold .drn-cause:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--drn-primary)}
.demo-bold .drn-cause-tag{border-radius:2px;background:var(--drn-ink);color:#fff}
.demo-bold .drn-bar{height:10px;border-radius:2px;background:var(--drn-line)}
.demo-bold .drn-bar i{border-radius:2px;background:var(--drn-primary)}
.demo-bold .drn-btn{border-radius:4px;font-weight:700}
.demo-bold .drn-event{border-radius:6px;border:2px solid var(--drn-ink)}
.demo-bold .drn-event-date{border-radius:4px;background:var(--drn-ink)}
.demo-bold .drn-stat{background:#F5F3FF;border:2px solid var(--drn-ink);border-radius:6px}
.demo-bold .drn-stat b{color:var(--drn-primary);font-size:2.8rem}
.demo-bold .section-ink{background:#1E1B4B}
.demo-bold .section-soft{background:#F5F3FF}
.demo-bold .drn-team-card{border-radius:6px;border:2px solid var(--drn-ink)}
.demo-bold .drn-team-avatar{border-radius:6px;background:var(--drn-ink)}
.demo-bold .drn-post{border-radius:6px;border:2px solid var(--drn-ink)}
.demo-bold .site-footer{background:#1E1B4B}
.demo-bold .drn-faq-item{border-radius:6px;border:2px solid var(--drn-ink)}
.demo-bold .drn-faq-item[open]{border-color:var(--drn-primary)}

/* ==========================================================================
   4. EARTH — cream paper, serif, documentary
   ========================================================================== */
.demo-earth{background:var(--drn-surface)}
.demo-earth h1,.demo-earth h2,.demo-earth h3{font-weight:600;letter-spacing:0;font-family:"Playfair Display",Georgia,serif}
.demo-earth h1{font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:1.1}
.demo-earth .nav a{font-family:"Lora",Georgia,serif;font-size:.92rem;text-transform:none;letter-spacing:0}
.demo-earth .drn-btn{font-family:"Lora",Georgia,serif;border-radius:2px;letter-spacing:0}
.demo-earth .drn-cause{border-radius:2px;border:1px solid var(--drn-line);background:var(--drn-surface)}
.demo-earth .drn-cause-media{height:215px}
.demo-earth .drn-cause-tag{
  border-radius:0;background:var(--drn-accent);color:#fff;letter-spacing:.14em;font-family:"Lora",serif
}
.demo-earth .drn-bar{height:5px;border-radius:0;background:#EDE7DA}
.demo-earth .drn-bar i{border-radius:0;background:var(--drn-accent)}
.demo-earth .drn-cause-meta{font-family:"Lora",serif;font-size:.8rem}
.demo-earth .drn-kicker{border-radius:0;background:rgba(180,83,9,.9);font-family:"Lora",serif;letter-spacing:.18em}
.demo-earth .drn-slide .veil{background:linear-gradient(100deg,rgba(41,37,36,.93) 0%,rgba(41,37,36,.7) 45%,rgba(41,37,36,.2) 100%)}
.demo-earth .drn-event{border-radius:2px;border:1px solid var(--drn-line);background:var(--drn-surface)}
.demo-earth .drn-event-date{border-radius:0;background:var(--drn-accent)}
.demo-earth .drn-stat{border-radius:2px;background:#F5F1E6;border:1px solid var(--drn-line)}
.demo-earth .drn-stat b{color:var(--drn-accent);font-family:"Playfair Display",serif}
.demo-earth .section-ink{background:#292524}
.demo-earth .section-soft{background:var(--drn-surface-2)}
.demo-earth .drn-team-card{border-radius:2px;border:1px solid var(--drn-line)}
.demo-earth .drn-team-avatar{border-radius:0;background:var(--drn-accent);font-family:"Playfair Display",serif}
.demo-earth .drn-post{border-radius:2px}
.demo-earth .drn-faq-item{border-radius:2px}
.demo-earth .drn-faq-item summary{font-family:"Lora",Georgia,serif;font-weight:600}
.demo-earth .site-footer{background:#292524}
.demo-earth .drn-donate-form{border-radius:2px}
.demo-earth .drn-donate-side{border-radius:2px}

/* ==========================================================================
   Shared layout helpers used by the Elementor builders
   ========================================================================== */
.drn-split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.drn-split-rev{grid-template-columns:.95fr 1.05fr}
.drn-split img{border-radius:var(--drn-radius)}
.demo-clean .drn-split img,.demo-earth .drn-split img{border-radius:2px}

.drn-figure-stack{display:grid;gap:14px}
.drn-figure-stack img{height:250px;object-fit:cover;border-radius:var(--drn-radius)}
.drn-figure-stack img:first-child{height:290px}

.drn-head{max-width:760px;margin:0 auto 40px;text-align:center}
.drn-head p{color:var(--drn-soft)}

.drn-cta{
  background:var(--drn-primary);color:var(--drn-on-primary);border-radius:calc(var(--drn-radius) + 6px);
  padding:48px 44px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap
}
.drn-cta h2{color:var(--drn-on-primary);margin:0 0 6px;font-size:clamp(1.4rem,2.4vw,2rem)}
.drn-cta p{margin:0;opacity:.92;max-width:52ch}
.drn-cta .drn-btn-primary{background:#fff;color:var(--drn-primary)}
.drn-cta .drn-btn-primary:hover{background:rgba(255,255,255,.9);color:var(--drn-primary)}

.drn-quote{
  border-left:3px solid var(--drn-primary);padding:6px 0 6px 24px;
  font-family:var(--drn-head);font-size:1.24rem;line-height:1.5;color:var(--drn-ink);margin:26px 0;
  font-weight:600
}
.demo-earth .drn-quote{font-family:"Playfair Display",serif;font-style:italic;font-weight:500}

@media (max-width:980px){
  .drn-split,.drn-split-rev{grid-template-columns:1fr;gap:32px}
  .drn-cta{padding:34px 26px}
}
@media (max-width:720px){
  .drn-figure-stack img,.drn-figure-stack img:first-child{height:220px}
}