/* ================================================================
   ESCLAT CHILD THEME · donacions.css
   Paleta: blanc (#fff) + blau fosc (#003049) + taronja/terracota
   Tipus: Cabinet Grotesk (display) + Satoshi (body)
   Tots els estils NOMÉS afecten .page-donacions
   ================================================================ */

/* ── VARIABLES ──────────────────────────────────────────────────── */
:root {
  --c-bg:           #ffffff;
  --c-surface:      #f7f5f2;
  --c-surface-2:    #edeae5;
  --c-border:       rgba(0,48,73,.12);
  --c-text:         #1a1a2e;
  --c-muted:        #5a5c72;
  --c-faint:        #a0a2b5;
  --c-primary:      #003049;
  --c-primary-h:    #00243a;
  --c-accent:       #c1440e;
  --c-accent-h:     #a33409;
  --c-blue-light:   #e8f0f4;
  --c-fiscal-bg:    #e8f2f8;
  --c-fiscal-border:#b3cfe0;
  --c-fiscal-text:  #1a3d52;

  --font-display:   'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-body:      'Satoshi', 'Inter', sans-serif;

  --text-xs:   clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:   clamp(.875rem,.8rem + .35vw,1rem);
  --text-base: clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:   clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:   clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:  clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-hero: clamp(2.5rem,.5rem + 6vw,5rem);

  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;
  --s6:1.5rem;--s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;
  --s20:5rem;

  --r-sm:.375rem;--r-md:.5rem;--r-lg:.75rem;--r-xl:1rem;--r-full:9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.09);
  --shadow-lg: 0 12px 36px rgba(0,0,0,.14);

  --ease: cubic-bezier(.16,1,.3,1);
  --dur:180ms;
  --trans: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* ── BASE RESET (scoped) ────────────────────────────────────────── */
.donacio-page *,
.donacio-page *::before,
.donacio-page *::after { box-sizing:border-box; }
.donacio-page { font-family:var(--font-body); color:var(--c-text); background:var(--c-bg); }

/* ── LAYOUT HELPERS ─────────────────────────────────────────────── */
.d-container { max-width:1140px; margin-inline:auto; padding-inline:clamp(var(--s4),4vw,var(--s12)); }
.d-container--narrow { max-width:720px; }
.d-section-header { text-align:center; margin-bottom:var(--s12); }

/* ── TYPOGRAPHY ─────────────────────────────────────────────────── */
.donacio-page h1,
.donacio-page h2,
.donacio-page h3 { font-family:var(--font-display); line-height:1.15; text-wrap:balance; }
.d-label {
  font-size:var(--text-xs); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-accent); margin-bottom:var(--s3);
}
.d-section-title { font-size:var(--text-xl); color:var(--c-primary); margin-bottom:var(--s4); }
.d-section-sub   { font-size:var(--text-base); color:var(--c-muted); max-width:56ch; margin-inline:auto; }

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.d-btn {
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:var(--s4) var(--s8); border-radius:var(--r-full);
  font-family:var(--font-display); font-size:var(--text-sm); font-weight:700;
  letter-spacing:.03em; cursor:pointer; border:none; text-decoration:none;
  transition:var(--trans); min-height:44px;
}
.d-btn--primary { background:var(--c-accent); color:#fff; }
.d-btn--primary:hover, .d-btn--primary:focus-visible { background:var(--c-accent-h); box-shadow:var(--shadow-md); }

/* ── SCROLL REVEAL ───────────────────────────────────────────────── */
.d-reveal { opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.d-reveal.visible { opacity:1; transform:translateY(0); }

/* ── 1 · HERO ────────────────────────────────────────────────────── */
.d-hero {
  position:relative; min-height:min(100svh,680px);
  display:flex; align-items:center; overflow:hidden;
  padding:var(--s20) var(--s8) var(--s16);
}
.d-hero__bg { position:absolute; inset:0; z-index:0; }
.d-hero__img { width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.d-hero__overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(135deg, rgba(0,48,73,.82) 0%, rgba(0,48,73,.5) 60%, rgba(0,48,73,.2) 100%);
}
.d-hero__content {
  position:relative; z-index:2; max-width:820px;
  padding-inline:clamp(var(--s4),5vw,var(--s16));
}
.d-hero__eyebrow {
  font-size:var(--text-xs); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:var(--s4);
}
.d-hero__title {
  font-size:var(--text-hero); font-family:var(--font-display); font-weight:800;
  line-height:1.08; color:#fff; margin-bottom:var(--s5);
}
.d-hero__title em { color:#f4a261; font-style:normal; }
.d-hero__subtitle {
  font-size:var(--text-lg); color:rgba(255,255,255,.9);
  max-width:52ch; margin-bottom:var(--s8); line-height:1.6;
}
.d-hero__cta { font-size:var(--text-base); padding:var(--s5) var(--s10); }

/* ── 2 · STATS ───────────────────────────────────────────────────── */
.d-stats { padding:clamp(var(--s12),8vw,var(--s20)) 0; background:var(--c-surface); }
.d-stats__grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--s6);
}
.d-stat {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--c-bg); padding:var(--s8) var(--s6);
  border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur) var(--ease);
}
.d-stat:hover { box-shadow:var(--shadow-md); }
.d-stat__icon { color:var(--c-primary); margin-bottom:var(--s3); }
.d-stat__num {
  font-family:var(--font-display); font-size:var(--text-2xl); font-weight:800;
  color:var(--c-primary); line-height:1;
}
.d-stat__plus { font-size:var(--text-xl); font-weight:800; color:var(--c-accent); line-height:1; }
.d-stat__label { font-size:var(--text-xs); color:var(--c-muted); margin-top:var(--s2); line-height:1.4; }

/* ── 3 · GALLERY ─────────────────────────────────────────────────── */
.d-gallery { padding:clamp(var(--s8),5vw,var(--s12)) 0; }
.d-gallery__grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows: auto auto;
  gap:var(--s2);
}
.d-gallery__item img {
  width:100%; height:220px; object-fit:cover;
  border-radius:var(--r-md); display:block;
  transition:transform .4s var(--ease);
}
.d-gallery__item:hover img { transform:scale(1.03); }
.d-gallery__item { overflow:hidden; border-radius:var(--r-md); }
.d-gallery__item--big { grid-column:span 2; grid-row:span 2; }
.d-gallery__item--big img { height:100%; min-height:280px; }

/* ── 4 · CHART ───────────────────────────────────────────────────── */
.d-chart-section { padding:clamp(var(--s12),7vw,var(--s20)) 0; background:var(--c-primary); }
.d-chart-section .d-label { color:#f4a261; }
.d-chart-section .d-section-title { color:#fff; }
.d-chart-section p { color:rgba(255,255,255,.85); }
.d-chart-wrap { display:grid; grid-template-columns:1fr 1fr; gap:var(--s12); align-items:center; }
.d-chart-text { }
.d-chart-photo { border-radius:var(--r-xl); margin-top:var(--s6); width:100%; max-width:480px; }
.d-chart-link { display:inline-block; margin-top:var(--s4); color:#f4a261; font-weight:600; text-decoration:none; font-size:var(--text-sm); }
.d-chart-link:hover { text-decoration:underline; }
.d-bar-chart { display:flex; flex-direction:column; gap:var(--s4); }
.d-chart-subtitle { font-family:var(--font-display); font-weight:700; color:#fff; font-size:var(--text-sm); margin-bottom:var(--s2); }
.d-chart-divider { border:none; border-top:1px solid rgba(255,255,255,.15); margin:var(--s2) 0; }
.d-bar-row { display:flex; flex-direction:column; gap:var(--s1); }
.d-bar-meta { display:flex; justify-content:space-between; font-size:var(--text-xs); color:rgba(255,255,255,.8); }
.d-bar-track { height:10px; background:rgba(255,255,255,.15); border-radius:var(--r-full); overflow:hidden; }
.d-bar-fill { height:100%; width:0; border-radius:var(--r-full); background:#f4a261; transition:width 1.2s var(--ease); }
.d-bar-fill--accent { background:#7fd8e8; }
.d-bar-fill--light  { background:rgba(255,255,255,.45); }
.d-bar-fill--dark   { background:#a8c8d8; }

/* ── 5 · EQUIVALÈNCIES ───────────────────────────────────────────── */
.d-equiv { padding:clamp(var(--s12),7vw,var(--s20)) 0; background:var(--c-bg); }
.d-equiv__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--s6); margin-top:var(--s8); }
.d-equiv__card {
  background:var(--c-surface); border-radius:var(--r-xl);
  padding:var(--s8) var(--s6); border:1px solid var(--c-border);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.d-equiv__card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.d-equiv__amount {
  font-family:var(--font-display); font-size:var(--text-xl); font-weight:800;
  color:var(--c-accent); margin-bottom:var(--s3);
}
.d-equiv__amount span { font-size:var(--text-sm); color:var(--c-muted); font-weight:400; }
.d-equiv__card p { font-size:var(--text-sm); color:var(--c-muted); line-height:1.6; }

/* ── 6 · AVÍS FISCAL ─────────────────────────────────────────────── */
.d-fiscal { padding:clamp(var(--s8),5vw,var(--s12)) 0; }
.d-fiscal__box {
  background:var(--c-fiscal-bg); border:1px solid var(--c-fiscal-border);
  border-radius:var(--r-xl); padding:var(--s8) var(--s10);
  display:flex; gap:var(--s6); align-items:flex-start;
}
.d-fiscal__icon { color:var(--c-primary); flex-shrink:0; margin-top:var(--s1); }
.d-fiscal__content h3 { font-size:var(--text-lg); color:var(--c-fiscal-text); margin-bottom:var(--s2); }
.d-fiscal__content p, .d-fiscal__content li { font-size:var(--text-sm); color:var(--c-fiscal-text); line-height:1.6; }
.d-fiscal__content ul { padding-left:var(--s5); margin-block:var(--s2); }
.d-fiscal__content li { margin-bottom:var(--s1); }
.d-fiscal__content a { color:var(--c-primary); font-weight:600; }

/* ── 7 · FORMULARI ───────────────────────────────────────────────── */
.d-form-section { padding:clamp(var(--s12),7vw,var(--s20)) 0; background:var(--c-surface); }
.d-givewp-placeholder { margin-top:var(--s8); }

/* GiveWP form overrides — primary color */
.d-form-section .give-btn, .d-form-section button[type="submit"] {
  background:var(--c-accent) !important; color:#fff !important;
  border-radius:var(--r-full) !important;
}
.d-form-section .give-btn:hover { background:var(--c-accent-h) !important; }
.d-form-section .give-text-input:focus, .d-form-section select:focus {
  border-color:var(--c-primary) !important; box-shadow:0 0 0 3px rgba(0,48,73,.12) !important;
}

/* Placeholder while GiveWP not installed */
.d-form-notice {
  background:#fff8e1; border:1px solid #f0b030; border-radius:var(--r-lg);
  padding:var(--s6); font-size:var(--text-sm); color:#5a4500;
}
.d-form-notice code { background:rgba(0,0,0,.07); padding:2px 6px; border-radius:4px; }

/* Altres vies */
.d-altways { margin-top:var(--s12); }
.d-altways__title {
  font-family:var(--font-display); font-weight:700; font-size:var(--text-base);
  color:var(--c-muted); text-align:center; margin-bottom:var(--s6);
  padding-top:var(--s8); border-top:1px solid var(--c-border);
}
.d-altways__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--s4); }
.d-altway__card {
  display:flex; flex-direction:column; gap:var(--s2); align-items:center; text-align:center;
  background:var(--c-bg); border:1px solid var(--c-border); border-radius:var(--r-lg);
  padding:var(--s6) var(--s4); font-size:var(--text-xs); color:var(--c-muted);
}
.d-altway__card strong { font-size:var(--text-sm); color:var(--c-text); }
.d-altway__icon { font-size:1.75rem; }
.d-altway__card a { color:var(--c-primary); font-weight:600; text-decoration:none; }
.d-altway__card a:hover { text-decoration:underline; }

/* ── 8 · CONTACTE ────────────────────────────────────────────────── */
.d-contact { padding:clamp(var(--s10),6vw,var(--s16)) 0; background:var(--c-primary); color:#fff; }
.d-contact__inner { text-align:center; }
.d-contact h3 { font-family:var(--font-display); font-size:var(--text-lg); margin-bottom:var(--s8); color:#fff; }
.d-contact__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); text-align:left; font-size:var(--text-sm); line-height:1.8; }
.d-contact a { color:#f4a261; }

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width:900px) {
  .d-chart-wrap { grid-template-columns:1fr; }
  .d-gallery__grid { grid-template-columns:repeat(2,1fr); }
  .d-gallery__item--big { grid-column:span 2; }
  .d-contact__grid { grid-template-columns:1fr; text-align:center; }
}
@media (max-width:600px) {
  .d-hero { min-height:85svh; padding-inline:var(--s4); }
  .d-fiscal__box { flex-direction:column; padding:var(--s6); }
  .d-gallery__grid { grid-template-columns:1fr; }
  .d-gallery__item--big { grid-column:1; grid-row:auto; }
}

/* ── PRINT ───────────────────────────────────────────────────────── */
@media print {
  .d-hero__bg, .d-hero__overlay, .d-gallery { display:none; }
  .d-hero__content { color:var(--c-text); }
}