/* ============================================================
   COMPONENTS — znovupoužitelné komponenty design systému
   Tlačítka · Badge · Karty · Statistiky · Darování · Formuláře
   · Alerty · Hero
   ============================================================ */

/* — Tlačítka (pill, přátelská) — */
.btn{font-family:var(--font-body);font-weight:600;font-size:var(--text-base);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;transition:.18s ease;display:inline-flex;align-items:center;gap:var(--sp-2)}
.btn-primary{background:var(--red-500);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--red-600);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--red-600);border-color:var(--red-200)}
.btn-secondary:hover{background:var(--red-50);border-color:var(--red-400)}
.btn-ghost{background:var(--cream);color:var(--ink)}
.btn-ghost:hover{background:var(--line)}
.btn-gold{background:var(--gold-500);color:#fff}
.btn-gold:hover{background:var(--gold-600);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-1px)}

/* — Badge / štítky — */
.badge{font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;padding:4px 12px;border-radius:var(--r-pill)}
.badge-red{background:var(--red-50);color:var(--red-700)}
.badge-neutral{background:var(--cream);color:var(--ink-soft)}
.badge-success{background:var(--success-bg);color:var(--success)}

/* — Karty (projekty, příběhy, aktuality) — */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-5)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s ease}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.card .thumb{height:150px;background:linear-gradient(135deg,var(--red-400),var(--red-700));position:relative}
.card .thumb::after{content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E")}
.card .body{padding:var(--sp-5)}
.card h4{margin:var(--sp-2) 0;line-height:1.2}
.card p{color:var(--ink-soft);font-size:var(--text-sm)}

/* — Statistiky dopadu — */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-5)}
.stat{padding:var(--sp-5);border-left:3px solid var(--red-500);background:var(--surface);border-radius:0 var(--r-md) var(--r-md) 0}
.stat .num{font-family:var(--font-display);font-weight:600;font-size:var(--text-4xl);color:var(--red-600);line-height:1}
.stat .lbl{color:var(--ink-soft);font-size:var(--text-sm);margin-top:var(--sp-2)}

/* — Dárcovský widget — */
.donate{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--sp-6);box-shadow:var(--shadow-md);max-width:420px}
.donate h4{margin-bottom:var(--sp-2);font-size:var(--text-2xl)}
.donate .amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin:var(--sp-4) 0}
.amount{padding:var(--sp-3);border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  font-weight:600;cursor:pointer;text-align:center;transition:.15s;font-family:var(--font-body)}
.amount:hover{border-color:var(--red-300)}
.amount.active{background:var(--red-500);color:#fff;border-color:var(--red-500)}

/* — Formulářová pole — */
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--sp-2)}
.field input{width:100%;padding:var(--sp-3) var(--sp-4);border:1.5px solid var(--line);
  border-radius:var(--r-md);font-family:var(--font-body);font-size:var(--text-base);background:var(--paper);transition:.15s}
.field input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--red-50)}

/* — Alerty — */
.alert{display:flex;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-md);font-size:var(--text-sm);margin-bottom:var(--sp-3)}
.alert-red{background:var(--red-50);color:var(--red-800);border:1px solid var(--red-100)}
.alert-success{background:var(--success-bg);color:var(--success);border:1px solid #cfe3d6}

/* — Hero — */
.hero{background:linear-gradient(160deg,var(--charcoal),var(--charcoal-deep));color:#EAF6FB;
  border-radius:var(--r-xl);padding:var(--sp-8) var(--sp-7);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");pointer-events:none}
.hero .kicker{color:var(--red-200)}.hero .kicker::before{background:var(--red-300)}
.hero h2{color:#fff;font-size:var(--text-4xl);line-height:1.1;margin:var(--sp-3) 0;max-width:16ch;position:relative}
.hero p{max-width:46ch;opacity:.85;margin-bottom:var(--sp-5);position:relative}
.hero .btn-primary{background:var(--red-500);color:#fff}
.hero .btn-primary:hover{background:var(--red-600)}

/* ============================================================
   AFRIKA — komponenty specifické pro charitu se zaměřením na Afriku
   ============================================================ */

/* — Badge: zlatý + štítek lokality — */
.badge-gold{background:var(--gold-50);color:var(--gold-600)}
.tag-loc{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:600;
  color:var(--ink-soft);background:var(--cream);padding:4px 10px;border-radius:var(--r-pill)}
.tag-loc::before{content:"📍";font-size:.85em}

/* — Ukazatel postupu sbírky — */
.progress{margin:var(--sp-3) 0}
.progress .meta{display:flex;justify-content:space-between;font-size:var(--text-sm);margin-bottom:6px}
.progress .meta b{font-family:var(--font-display);color:var(--red-600)}
.progress .track{height:10px;background:var(--cream);border-radius:var(--r-pill);overflow:hidden}
.progress .fill{height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--gold-500),var(--red-500))}

/* — Karta sponzorství na dálku — */
.sponsor{display:flex;gap:var(--sp-4);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow-sm);align-items:center}
.sponsor .ava{flex:0 0 72px;height:72px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--gold-300),var(--red-400))}
.sponsor h4{margin-bottom:2px}
.sponsor .sub{font-size:var(--text-sm);color:var(--muted)}
.sponsor .cta{margin-left:auto}

/* — Citace / příběh z terénu — */
.quote{position:relative;background:var(--cream);border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-7);border-left:4px solid var(--gold-500)}
.quote::before{content:"\201C";position:absolute;left:14px;top:0;font-family:var(--font-display);
  font-size:4rem;color:var(--gold-500);line-height:1;opacity:.6}
.quote p{font-family:var(--font-display);font-size:var(--text-xl);font-style:italic;
  line-height:1.4;color:var(--ink);margin-bottom:var(--sp-3)}
.quote cite{font-style:normal;font-size:var(--text-sm);color:var(--muted);font-weight:600}

/* — Pruh transparentnosti / partneři — */
.trust-strip{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:center;justify-content:center;
  padding:var(--sp-5);background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-lg)}
.trust-strip .item{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--ink-soft)}
.trust-strip .item b{font-family:var(--font-display);font-size:var(--text-lg);color:var(--gold-600)}

/* ============================================================
   ARCHIV & OBSAH — pro web řazený po letech, plný fotek a textu
   ============================================================ */

/* — Navigace po letech (archiv projektů) — */
.year-nav{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.year-nav a{padding:6px 14px;border-radius:var(--r-pill);border:1.5px solid var(--line);
  font-weight:600;font-size:var(--text-sm);color:var(--ink-soft);text-decoration:none;
  font-variant-numeric:tabular-nums;transition:.15s}
.year-nav a:hover{border-color:var(--red-300);color:var(--red-600)}
.year-nav a.active{background:var(--red-500);color:#fff;border-color:var(--red-500)}

/* — Fotogalerie (mřížka náhledů) — */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.gallery .ph{aspect-ratio:1;border-radius:var(--r-sm);cursor:pointer;transition:.2s;
  background:linear-gradient(135deg,var(--gold-300),var(--red-500));position:relative;overflow:hidden}
.gallery .ph:nth-child(3n){background:linear-gradient(135deg,var(--red-400),var(--red-700))}
.gallery .ph:nth-child(4n){background:linear-gradient(135deg,var(--gold-500),var(--gold-300))}
.gallery .ph::after{content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.1'/%3E%3C/svg%3E")}
.gallery .ph:hover{transform:scale(1.04);box-shadow:var(--shadow-md);z-index:1}

/* — Dlouhý text / článek (zpráva z projektu) — */
.article{max-width:68ch}
.article .lead{font-size:var(--text-lg);color:var(--ink);margin-bottom:var(--sp-4)}
.article p{margin-bottom:var(--sp-4);color:var(--ink-soft)}
.article h3{margin:var(--sp-6) 0 var(--sp-2)}
.article > .lead:first-child::first-letter{font-family:var(--font-display);font-weight:600;
  font-size:3.4em;float:left;line-height:.78;padding:8px 12px 0 0;color:var(--red-500)}
.article .meta-line{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
  margin-bottom:var(--sp-5);padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}