/* ============================================================
   Alapítvány aloldal – saját elrendezés (alapítványi adatok, 1%,
   adomány, jelentés-fülek, alsó bannerek). Hero, gombok,
   kapcsolat-sáv: lásd css/style.css.
   ============================================================ */

/* ---------- TARTALMI SZAKASZOK (fehér háttér, 1080px sáv) ---------- */
.al-section { background: var(--white); padding: 30px 0 26px; }
.al-section .container { max-width: 1080px; }
.al-section p,
.al-section li,
.al-section div { line-height: 1.6; font-size: clamp(0.9rem, 1.1vw, 1rem); }
.al-section p { padding-bottom: 0.8em; }
.al-section p:last-child { padding-bottom: 0; }

.al-intro h2 { color: var(--sand-dark); font-weight: 600; font-size: clamp(1.35rem, 2.4vw, 1.6rem); line-height: 1.25; padding-bottom: 10px; }
.al-intro { padding-bottom: 26px; }

.al-title { color: var(--sand-dark); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.35rem); padding: 26px 0 10px; }
.al-divider { width: 80px; border: 0; border-top: 2px solid var(--sand); border-radius: 2px; margin: 0 0 33px; }

.al-text h4 { color: var(--teal); font-weight: 600; font-size: 1.1rem; padding: 10px 0; }
.al-adomany h4 { padding-top: 26px; }

/* ---------- ADAT-KÁRTYÁK (alapítványi adatok, bankszámla) ----------
   Az év-kártyák halkabb testvére: ugyanaz a rádiusz/szegély, de tömör
   színcsík csak a bal élen, és tintázott háttér árnyék nélkül – így
   támogató információ marad, nem versenyez a jelentés-kártyákkal. */
.al-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.al-fact {
  --accent: var(--teal);
  padding: 16px 20px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--hairline));
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 6%, var(--white));
}
.al-fact dt {
  font-family: "Baloo Bhai 2", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
  margin-bottom: 6px;
}
.al-fact dd { margin: 0; color: var(--ink); line-height: 1.5; }
.al-fact-num {
  font-family: "Baloo Bhai 2", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.al-fact-num a { color: inherit; }
.al-fact-num a:hover { text-decoration: underline; }
.al-fact-sub { font-size: 0.9rem; padding-top: 2px; }
.al-fact-note { color: var(--muted); font-size: 0.82rem; padding-top: 4px; }
.al-facts .al-fact:nth-child(3n + 1) { --accent: var(--teal); }
.al-facts .al-fact:nth-child(3n + 2) { --accent: var(--green-dark); }
.al-facts .al-fact:nth-child(3n + 3) { --accent: var(--sand-dark); }
.al-donate { margin-bottom: 30px; }
.al-donate .al-fact:nth-child(1) { --accent: var(--green-dark); }
.al-donate .al-fact:nth-child(2) { --accent: #5d8fa8; }

/* ---------- LENYÍLÓK (közös .tb-toggle, saját akcentussal) ---------- */
.al-toggle { margin: 30px 0; border: 1px solid var(--hairline); }
.al-toggle summary { color: color-mix(in srgb, var(--accent) 74%, var(--ink)); }
/* a +/– korong a sáv akcentusát kapja, ink-kel tompítva a fehér jel kedvéért */
.al-toggle summary::after { background: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.al-toggle--egyszazalek { --accent: var(--sand-dark); }
.al-toggle--hatas { --accent: var(--green-dark); }
.al-toggle .tb-toggle-body h3 { color: color-mix(in srgb, var(--accent) 74%, var(--ink)); }
.al-toggle .tb-toggle-body a { color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.al-note { color: var(--muted); font-size: 0.88rem; }

/* Kiemelt adószám-doboz a „hogyan ajánlja fel” panel élén */
.al-taxbox {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, var(--white));
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
}
.al-taxbox-label {
  font-family: "Baloo Bhai 2", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
}
.al-taxbox-num {
  font-family: "Baloo Bhai 2", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

/* Számozott lépések színes körökkel a felsorolás-pontok helyett */
.al-steps { list-style: none; counter-reset: al-step; margin: 0 0 4px; padding: 0; }
.al-steps li {
  position: relative;
  counter-increment: al-step;
  padding: 0 0 10px 40px;
  color: var(--ink);
}
.al-steps li::before {
  content: counter(al-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--white));
  color: color-mix(in srgb, var(--accent) 78%, var(--ink));
  font-family: "Baloo Bhai 2", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

/* Pipás felsorolás az eredmények panelben */
.al-ticks { list-style: none; margin: 0 0 6px; padding: 0; }
.al-ticks li { position: relative; padding: 0 0 8px 30px; color: var(--ink); }
.al-ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}

/* Kiemelt szám (300+ gyermek) */
.al-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 9%, var(--white));
}
.al-stat-num {
  flex: none;
  font-family: "Baloo Bhai 2", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}
.al-stat-text { color: var(--ink); line-height: 1.5; }

.al-egyszazalek a { font-weight: 600; color: var(--green-dark); }
.al-egyszazalek a:hover { text-decoration: underline; }
.al-adomany a { color: var(--green-dark); }
.al-adomany a:hover { text-decoration: underline; }

.al-year { color: var(--coral-dark); text-decoration: underline; font-weight: 700; }
.al-adomany ul { padding: 0 0 1em 1.2em; }
.al-adomany li { padding-bottom: .35em; }
.al-thanks em { display: block; }
.al-thanks em strong { font-weight: 700; }

/* ---------- Impresszum (kp-info-card, lásd css/kozossegi-program.css) ---------- */
.kt-impresszum { max-width: 640px; margin-inline: auto; }
.kt-impresszum p { line-height: 1.7; margin-bottom: 22px; }

/* Fotó az impresszum mellett: kétoszlopos sáv, a kártya függőlegesen
   a képhez igazítva. A sorban a kártya saját szélességkorlátja elmarad. */
.al-impresszum-row {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: center;
  max-width: 980px;
  margin-inline: auto;
}
.al-impresszum-row .kt-impresszum { max-width: none; margin-inline: 0; }
.al-impresszum-photo { margin: 0; }
.al-impresszum-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Az „Adatvédelmi tájékoztató” gomb a lap zöld→türkiz→kék márkagradiensét
   kapja a szürke alap .btn-primary helyett (lásd .al-idopont sáv). A stopok
   ink-kel tompított árnyalatok, hogy a fehér felirat AA kontrasztú maradjon.
   A háttér 200%-os, így hoverre a gradiens elcsúszik – ezt animáljuk. */
.kt-impresszum .btn-primary {
  background-image: linear-gradient(120deg,
    color-mix(in srgb, var(--green) 70%, var(--ink)) 0%,
    color-mix(in srgb, var(--teal) 72%, var(--ink)) 50%,
    color-mix(in srgb, #6da9c1 60%, var(--ink)) 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--teal) 38%, transparent);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-position .45s var(--ease);
}
.kt-impresszum .btn-primary:hover {
  background-position: 100% 0;
  border-color: transparent;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--teal) 50%, transparent);
}

/* ---------- KÖZHASZNÚSÁGI JELENTÉSEK (év-kártyák) ----------
   A korábbi fül-widget helyett kártyarács: minden év egy közvetlen
   PDF-link, saját márkaszínű akcentussal. */
.al-reports { margin: 3rem 0; }
.al-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
}
.al-report-grid li { display: flex; }
.al-report {
  --accent: var(--teal);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 26px 20px 18px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
/* felső akcentuscsík + a jobb felső sarok halvány színfoltja */
.al-report::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--accent);
}
.al-report::after {
  content: "";
  position: absolute;
  top: -46px;
  right: -46px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  transition: transform .35s var(--ease);
}
.al-report:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 22%, transparent);
}
.al-report:hover::after { transform: scale(1.25); }
.al-report:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.al-report-year {
  position: relative;
  font-family: "Baloo Bhai 2", sans-serif;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--accent);
}
.al-report-label {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
  padding-top: 2px;
}
.al-report-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 18px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, var(--white));
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
  font-family: "Baloo Bhai 2", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.al-report-chip::after { content: "↗"; font-size: 0.85rem; letter-spacing: 0; }

/* Évenként váltakozó márkaszín, hogy a rács ne legyen egyhangú. */
.al-report-grid li:nth-child(5n + 1) .al-report { --accent: var(--teal); }
.al-report-grid li:nth-child(5n + 2) .al-report { --accent: var(--green-dark); }
.al-report-grid li:nth-child(5n + 3) .al-report { --accent: var(--sand-dark); }
.al-report-grid li:nth-child(5n + 4) .al-report { --accent: #c96a4f; }
.al-report-grid li:nth-child(5n + 5) .al-report { --accent: #5d8fa8; }

/* ---------- KAPCSOLAT / CTA ---------- */
.al-idopont {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--teal) 100%);
  padding: clamp(48px, 7vw, 90px) 0;
  margin-top: 29px;
  scroll-margin-top: var(--header-h);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}
.al-idopont-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  max-width: 1080px;
}
.al-cta { background: var(--white); border-radius: var(--radius); padding: clamp(36px, 5vw, 64px) clamp(26px, 4vw, 60px); }
.al-cta h2 { font-size: clamp(1.35rem, 2.4vw, 1.55rem); margin-bottom: 14px; }
.al-cta p { color: var(--muted); line-height: 1.8; margin-bottom: 26px; }

/* ---------- ALSÓ BANNEREK (Fejlesztő foglalkozások / Szabadidős) ---------- */
.al-promos { display: grid; grid-template-columns: 1fr 1fr; }
.al-promo { padding: clamp(60px, 8vw, 120px) 80px; background-size: cover; background-position: center; }
.al-promo--fejleszto {
  background-color: color-mix(in srgb, var(--green) 12%, var(--bg));
  padding-left: 10%;
}
.al-promo--szabadido {
  background-color: color-mix(in srgb, var(--coral) 10%, var(--bg));
  padding-right: 10%;
}
.al-promo-inner { max-width: 600px; }
.al-promo h2 {
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  letter-spacing: 0.06em;
  line-height: 1.3;
  padding-bottom: 10px;
}
.al-promo--fejleszto h2 { color: var(--green-dark); }
.al-promo--szabadido h2 { color: var(--coral-dark); }
.al-promo p, .al-promo em { color: var(--muted); line-height: 1.9; }
.al-promo p { padding-bottom: 1em; }
.al-promo .btn { margin-top: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 780px) {
  .al-impresszum-row { grid-template-columns: 1fr; max-width: 460px; }
  .al-impresszum-photo img { aspect-ratio: 3 / 2; object-position: center 25%; }
}
@media (max-width: 980px) {
  .al-idopont-inner { grid-template-columns: 1fr; }
  .al-promos { grid-template-columns: 1fr; }
  .al-promo { padding: 60px 10%; }
}
@media (max-width: 640px) {
  .al-report-grid { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
  .al-report { padding: 22px 16px 16px; }
  .al-report-year { font-size: 1.6rem; }
}