/* ============================================================
   Fejlesztési terület aloldalak (Mozgásfejlesztés, Beszéd,
   Viselkedés, Tanulás BTMN/SNI, Előkészítők) – saját elrendezés
   (gyorsnavigáció, terület-szekciók, szakember mini-kártyák).
   Hero, gombok, toggle, kapcsolat-sáv: lásd css/style.css.
   ============================================================ */

/* ---------- Hero ----------
   Ugyanaz a design, mint a Fejlesztőház oldalé (fotó-háttér + felhő-réteg +
   fehérbe olvadó átmenet: .fh-hero, lásd css/fejlesztohaz.css), csak balra
   zárt szöveggel – ahogy az élő területi aloldalak fejléce. */
.ft-hero {
  text-align: left;
  padding: clamp(104px, 10vw, 136px) 0 clamp(34px, 4vw, 54px);
}
/* Az élőn itt később és halványabban indul a fehér fátyol, mint a szülő oldalon
   (22% → 100%), így a fotó jobban átüt a szöveg mögött. */
.ft-hero::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.29) 22%, var(--white) 100%);
}
.ft-hero .page-hero-actions { justify-content: flex-start; }

.ft-hero-title {
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink);
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  line-height: 1.4;
  margin-bottom: 6px;
}
/* Másodlagos cím-sor (a Tanulás oldalon: "BTMN és SNI…") */
.ft-hero-subhead {
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.4;
  color: rgba(40, 38, 37, 0.8);
  margin-bottom: 8px;
}
.ft-hero-lead {
  max-width: 1040px;
  margin: 0 0 24px;
  color: var(--ink);
  line-height: 2;
  font-size: clamp(0.92rem, 1.05vw, 1rem);
}
.ft-hero-lead p + p { margin-top: 2px; }
.ft-hero-lead strong { font-weight: 700; }

/* ---------- Gyorsnavigáció (ugrás a területekhez) ---------- */
.ft-quicknav { padding: clamp(20px, 3vw, 34px) 0; }
.ft-quicknav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin-inline: auto;
}
.ft-quicknav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  /* Kártyánként állítható pasztell háttér (lásd az oldalak inline --qn-tint
     értékeit, mint a Fejlesztőház területkártyáinál); alapértelmezés: fehér. */
  background: var(--qn-tint, var(--white));
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ft-quicknav-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* 3-3-4 elrendezés (10 elemhez) – 12 oszlopos alapráccsal */
.ft-quicknav-grid--334 { grid-template-columns: repeat(12, 1fr); }
.ft-quicknav-grid--334 .ft-quicknav-item:nth-child(-n+6) { grid-column: span 4; }
.ft-quicknav-grid--334 .ft-quicknav-item:nth-child(n+7) { grid-column: span 3; }

/* 3-4-4 elrendezés (pl. Mozgásfejlesztés oldal, 11 elem) – ugyanaz a 12 oszlopos
   alaprács, csak az első sorban áll 3 kártya, utána soronként 4. */
.ft-quicknav-grid--344 { grid-template-columns: repeat(12, 1fr); }
.ft-quicknav-grid--344 .ft-quicknav-item:nth-child(-n+3) { grid-column: span 4; }
.ft-quicknav-grid--344 .ft-quicknav-item:nth-child(n+4) { grid-column: span 3; }
.ft-quicknav-item svg { flex: none; width: 26px; height: 26px; color: var(--qn-ink, var(--coral)); }
.ft-quicknav-item h4 { font-size: 0.9rem; color: var(--ink); line-height: 1.3; }
.ft-quicknav-item p { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

/* ---------- Terület szekció (bal: leírás, jobb: toggle+szakember) ---------- */
.ft-area { padding: clamp(36px, 5vw, 60px) 0; scroll-margin-top: var(--header-h); border-top: 1px solid var(--hairline); }
.ft-area:nth-child(odd) { background: var(--bg); }
.ft-area-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  max-width: 1180px;
  margin-inline: auto;
  align-items: start;
}
.ft-area-eyebrow {
  display: block;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--coral-dark);
  margin-bottom: 8px;
}
.ft-area-title { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-bottom: 14px; }
.ft-area-sub { font-weight: 400; font-size: clamp(1rem, 1.5vw, 1.18rem); color: var(--ink); margin: 18px 0 8px; }
.ft-area-text ul { margin: 0 0 14px; padding-left: 20px; }
.ft-area-text ul li { margin-bottom: 6px; line-height: 1.6; color: var(--muted); font-size: clamp(0.92rem, 1.05vw, 1rem); }
.ft-area-text p { margin-bottom: 12px; line-height: 1.7; color: var(--muted); }
.ft-area-text p strong,
.ft-area-text ul strong { color: var(--ink); font-weight: 400; }

/* ---------- Szakember blurb kártya (a toggle alatt) ---------- */
.ft-specialist { display: flex; align-items: center; gap: 14px; margin: 16px 0 20px; }
.ft-specialist img { flex: none; width: 56px; height: 56px; object-fit: cover; object-position: top; border-radius: 50%; }
.ft-specialist h4 { font-size: 0.95rem; line-height: 1.3; }
.ft-specialist h4 a { color: var(--green-dark); }
.ft-specialist h4 a:hover { color: var(--sand-dark); }
.ft-specialist p { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }

/* ---------- Ajánlatblokk: leírás + a hozzá tartozó profil ----------
   Egy .ft-offer egyetlen szakember (vagy egy közösen tartott foglalkozás)
   nyitható leírásait és a hozzá tartozó profilkártyá(ka)t fogja össze, így a
   profil mindig közvetlenül a saját leírása alatt áll – nem az összes
   szakemberé egy kupacban a szekció végén. A blokkok közé levegő és egy
   halvány, a szélein elhalványuló választóvonal kerül, hogy látszódjon, hol
   ér véget az egyik ajánlat és hol kezdődik a következő. */
.ft-area-right > .tb-toggle,
.ft-offer > .tb-toggle { margin-bottom: 14px; }
.ft-offer > .ft-specialist { margin: 16px 0 0; }
.ft-offer > .ft-specialist:first-child { margin-top: 0; }
.ft-offer > .tb-toggle:last-child { margin-bottom: 0; }

.ft-area-right > * + .ft-offer,
.ft-area-right > .ft-offer + .ft-subheading {
  position: relative;
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: clamp(26px, 3vw, 40px);
}
.ft-area-right > * + .ft-offer::before,
.ft-area-right > .ft-offer + .ft-subheading::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--hairline) 20%, transparent),
    var(--hairline) 16%,
    var(--hairline) 84%,
    color-mix(in srgb, var(--hairline) 20%, transparent));
}
/* Az alcím (pl. „Matematika”) maga is csoporthatár: a vonal elé kerül, az
   utána következő első blokk tehát már nem kap újabbat. */
.ft-area-right > .ft-subheading + .ft-offer { margin-top: 0; padding-top: 0; }
.ft-area-right > .ft-subheading + .ft-offer::before { content: none; }
/* A záró „Érdekel” gomb lezárja a szekciót – annak csak levegő jár, vonal nem. */
.ft-area-right > .ft-offer + .btn { margin-top: clamp(20px, 2.2vw, 28px); }

.ft-area-right .ft-subheading {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 20px 0 8px;
}
.ft-area-right .ft-subheading:first-child { margin-top: 0; }

/* ---------- Fotómozaik a terület jobb hasábjában ----------
   Azokban a szekciókban, ahol a bal hasáb (felsorolás) jóval hosszabb a
   jobbnál, a galéria pontosan a keletkező üres helyet tölti ki: a hasáb
   flex-oszlop, a mozaik pedig `flex: 1`, így a szekció nem lesz magasabb.
   A képek `object-fit: cover`-rel igazodnak a cellákhoz, ezért álló és
   fekvő fotók vegyesen is egységes ráccsá állnak össze. */
.ft-area-grid--photos { align-items: stretch; }
.ft-area-grid--photos .ft-area-right { display: flex; flex-direction: column; }
.ft-area-grid--photos .ft-area-right > .btn { align-self: flex-start; }

.ft-gallery {
  flex: 1 1 auto;
  min-height: clamp(230px, 21vw, 310px);
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1.15fr 1fr;
  gap: 10px;
}
.ft-gallery-item {
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.ft-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform .35s var(--ease);
}
.ft-gallery-item:hover img { transform: scale(1.06); }

/* Felső sor: egy széles fekvő + egy álló kép; alsó sor: három egyenlő cella. */
.ft-gallery-item:nth-child(1) { grid-column: span 4; }
.ft-gallery-item:nth-child(2) { grid-column: span 2; }
.ft-gallery-item:nth-child(n+3) { grid-column: span 2; }

/* ---------- Fotósáv a két hasáb alatt ----------
   A mozaik helyett a galéria a rács harmadik elemeként a teljes szélességet
   átfogja, és a képek egyetlen vízszintes sorban, egyenlő cellákban állnak.
   Az `auto-flow: column` miatt a sor tetszőleges képszámmal működik. */
.ft-gallery--row {
  grid-column: 1 / -1;
  flex: none;
  min-height: 0;
  margin-top: clamp(26px, 3.2vw, 44px);
  grid-template-columns: none;
  grid-template-rows: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(10px, 1.1vw, 16px);
}
.ft-gallery--row .ft-gallery-item:nth-child(n) { grid-column: auto; aspect-ratio: 4 / 3; }

/* Kevés (vagy kisebb felbontású) fotónál a sáv szűkebb: a képek nem
   nagyítódnak fel a rács teljes szélességére, hanem középre zárva,
   visszafogottabb méretben állnak. A hasábok és a sáv közti távolságot itt
   már a rács sorköze adja, ezért a saját felső margó elmarad. */
.ft-gallery--compact { max-width: 620px; margin-inline: auto; margin-top: 0; }

/* Kísérőfotó a bal hasábban: ahol a kép csak illusztrál, nem kap teljes
   szélességű sávot, hanem a felsorolás alatt marad a szöveg oszlopában – a
   hasáb teljes szélességét kitöltve, így a jobb hasáb kártyái mellé kerül. */
.ft-gallery--inline {
  grid-column: auto;
  margin: 10px 0 0;
}

/* Egyetlen fotó fekvő sávként: a visszafogott sávnál szélesebb, de jóval
   alacsonyabb – a szekció végét lezárja, nem uralja. */
.ft-gallery--band { max-width: 900px; margin-inline: auto; margin-top: 0; }
.ft-gallery--band .ft-gallery-item:nth-child(n) { aspect-ratio: 8 / 3; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ft-quicknav-grid { grid-template-columns: 1fr 1fr; }
  /* A 12 oszlopos elrendezések itt visszaállnak egy kártya/oszlop ritmusra. A
     `:nth-child(n)` csak azért kell, hogy a felülírás azonos súlyú legyen a fenti
     span-szabályokkal (…:nth-child(-n+3)) – ugyanaz a fogás, mint a .ft-gallery--row-nál. */
  .ft-quicknav-grid--334 .ft-quicknav-item:nth-child(n),
  .ft-quicknav-grid--344 .ft-quicknav-item:nth-child(n) { grid-column: span 1; }
  .ft-area-grid { grid-template-columns: 1fr; }
  /* Egyhasábos nézetben nincs kitöltendő üres hely, ezért a mozaik saját
     arányt kap a nyújtózás helyett. */
  .ft-gallery { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
  /* A teljes szélességű fotósáv egy sorban marad, a cellák saját arányukat tartják. */
  .ft-gallery--row { aspect-ratio: auto; }
}
@media (max-width: 560px) {
  .ft-quicknav-grid { grid-template-columns: 1fr; }
  .ft-gallery {
    aspect-ratio: auto;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 36vw;
  }
  .ft-gallery-item:nth-child(1) { grid-column: span 2; }
  .ft-gallery-item:nth-child(n+2) { grid-column: span 1; }
  /* Telefonon az egysoros sáv is kéthasábosra tördelődik. */
  .ft-gallery--row {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
  }
  .ft-gallery--row .ft-gallery-item:nth-child(n) { aspect-ratio: auto; }
  .ft-gallery--row .ft-gallery-item:nth-child(n):last-child { grid-column: span 2; }
}