/* ============================================================
   Táborok 2026 aloldal – saját elrendezés (tábor-kártyák).
   Hero, gombok, kapcsolat-sáv: lásd css/style.css.
   ============================================================ */

/* ---------- TÁBOR-RÁCS (poszterek elöl, részletek lenyílóban) ---------- */
.tb-section { padding: clamp(24px, 3vw, 40px) 0 clamp(30px, 4vw, 48px); }

.tb-camp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px 28px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

/* Az egész kártya (poszter + lenyíló) EGY közös, kerekített/árnyékolt egység */
.tb-camp {
  scroll-margin-top: var(--header-h);
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.tb-camp:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

.tb-camp-media img { width: 100%; height: auto; display: block; }

/* Cím + dátum sáv + nyíl: mindig látható, erre kattintva nyílik le a részletes panel */
.tb-camp-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  background: var(--white);
  border-top: 1px solid var(--hairline);
  border-left: 5px solid var(--camp);
  user-select: none;
}
.tb-camp-summary::-webkit-details-marker { display: none; }

.tb-camp-summary-text { flex: 1; min-width: 0; }
.tb-camp-summary-date {
  display: block;
  margin-top: 3px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
}

.tb-camp-arrow {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--camp);
  position: relative;
}
.tb-camp-arrow::after {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform .3s var(--ease);
}
.tb-camp-panel[open] .tb-camp-arrow::after { transform: translate(-50%, -30%) rotate(-135deg); }

.tb-camp-body {
  background-color: var(--camp);
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 30px) clamp(26px, 3.5vw, 34px);
  color: var(--white);
  font-size: 0.95rem;
  line-height: 1.5;
}
.tb-camp-panel[open] .tb-camp-body { animation: tb-panel-in .35s var(--ease); }
@keyframes tb-panel-in {
  from { opacity: 0; transform: translateY(-8px); }
}

.tb-camp--01 { --camp: #d68400; }
.tb-camp--02 { --camp: #7ca067; }
.tb-camp--03 { --camp: #376877; }
.tb-camp--04 { --camp: #c46f50; }
.tb-camp--05 { --camp: #418c31; }
.tb-camp--06 { --camp: #5f5ba5; }
.tb-camp--07 { --camp: #3b9d9d; }
.tb-camp--08 { --camp: #003863; }
.tb-camp--09 { --camp: #ff7355; }

.tb-camp-date h4 {
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  line-height: 1.25;
}
.tb-camp-date p {
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.tb-camp-date { margin-bottom: 14px; }
.tb-camp-title {
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--ink);
}
.tb-camp-title small { display: block; font-size: 0.72em; font-weight: 700; margin-top: 2px; color: var(--muted); }
.tb-camp-info p { margin-bottom: 10px; }
.tb-camp-info ul { margin: 0 0 12px; padding-left: 22px; }
.tb-camp-info li { margin-bottom: 4px; }
.tb-camp-info a { color: var(--white); font-weight: 700; text-decoration: underline; }

/* Érdekel gomb (sötét áttetsző pill, balra igazítva) */
.tb-btn-erdekel {
  display: inline-block;
  font-family: "Baloo Bhai 2", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--white);
  background-color: rgba(44, 40, 37, 0.45);
  padding: 12px 32px;
  border-radius: var(--radius-pill);
  margin: 6px 0 18px;
  transition: background-color .3s var(--ease);
}
.tb-btn-erdekel:hover { background-color: rgba(44, 40, 37, 0.8); }

/* "Mi várható?" lenyíló: az egységes .tb-toggle komponens a css/style.css-ben él,
   ez az oldal csak a tábor-kártya saját elrendezését tartalmazza. */

/* ---------- Foglalkozásvezetők ---------- */
.tb-leaders-label {
  font-weight: 700;
  margin: 4px 0 2px;
}
.tb-leader {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.tb-leader img {
  flex: none;
  width: 46px;
  height: 46px;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
}
.tb-leader h4 { font-size: 0.95rem; line-height: 1.3; color: var(--white); }
.tb-leader h4 a { color: var(--white); }
.tb-leader h4 a:hover { text-decoration: underline; }
.tb-leader p { font-size: 0.78rem; color: rgba(255,255,255,0.85); line-height: 1.45; }

/* ---------- Megjegyzés sor ---------- */
.tb-note {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}