/* ==========================================================================
   For Families — sections.css'in üzerine binen, yalnızca bu bölüme özgü parçalar
   Ortak bileşenler (.sc-band, .sc-cards, .sc-steps, .sc-split, .sc-quote …)
   sections.css'ten gelir; burada yalnızca 3 ek bileşen var.
   ========================================================================== */

/* ---------- 1. fotoğraf zeminli hero -------------------------------------
   .sc-hero geometrisini aynen kullanır, yalnızca görseli ve örtüyü değiştirir.
   (.sc-hero__art, sections.css'te about-hero.webp'i sabit kodluyor.)         */
.fm-hero .sc-hero__art{background-image:url("../img/families-hero.webp")}
.fm-hero .sc-hero__art::after{
  background:linear-gradient(90deg,rgba(14,26,43,.90) 0%,rgba(14,26,43,.72) 38%,rgba(14,26,43,.34) 68%,rgba(14,26,43,.16) 100%)}
.fm-hero{min-height:clamp(320px,25vw,480px)}

/* ---------- 2. görsel + metin bandı -------------------------------------- */
.fm-figure__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(24px,3vw,58px);align-items:center}
.fm-figure__media{margin:0}
.fm-figure__media img{width:100%;height:auto;display:block}

/* --match: görsel, metin sütununun boyunda durur (denetim D3).
   "Why Switzerland" bandında metin sütununda yalnızca eyebrow + başlık vardı;
   yanındaki 1260×1332 görsel 618px'e uzayınca altında 485px ölü boşluk
   kalıyordu. Burada img mutlak konumlanıyor: figure'ün doğal yüksekliği
   kalmıyor, satırın boyunu metin sütunu belirliyor, görsel de o boyu `cover`
   ile dolduruyor. Boşluk hangi genişlikte olursa olsun sıfır — sabit bir
   aspect-ratio vermekten farkı bu: oran ekran genişliğiyle birlikte değişen
   metin yüksekliğine uyuyor.
   object-position, kırpma sırasında binayı ve öndeki grubu çerçevede tutuyor. */
.fm-figure__grid--match{align-items:stretch}
.fm-figure__grid--match .fm-figure__media{position:relative;min-height:0}
.fm-figure__grid--match .fm-figure__media img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center 38%}
.fm-figure__media figcaption{font-family:var(--caslon);font-size:clamp(14px,.88vw,16px);
  line-height:1.4;color:var(--sc-muted);margin-top:10px}
.sc-band--dark .fm-figure__media figcaption{color:#A9B8CD}

/* ---------- 3. yasal kapsam notu -----------------------------------------
   PDF'teki "themes are illustrative", "…confirmed with the relevant providers"
   gibi sorumluluk metinleri. Küçük, soluk, üstünde ince çizgi.               */
.fm-note{font-family:var(--caslon);font-size:clamp(14px,.88vw,16px);line-height:1.45;
  color:var(--sc-muted);margin:clamp(20px,1.8vw,34px) 0 0;padding-top:clamp(12px,1vw,18px);
  border-top:1px solid var(--sc-hair);max-width:92ch}
.sc-band--dark .fm-note{color:#A9B8CD;border-top-color:rgba(255,255,255,.18)}

/* ---------- 4. istatistik üçlüsü (20+ / GLOBAL / K–12) --------------------
   about.php'deki .ab-experience__stats ile aynı ölçüler — iki sayfa tutarlı dursun. */
.fm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.7vw,32px);
  margin-top:clamp(24px,2.2vw,42px);padding-inline-start:clamp(16px,2vw,38px);
  border-inline-start:1px solid var(--sc-rule)}
.fm-stat + .fm-stat{padding-inline-start:clamp(14px,1.6vw,30px);border-inline-start:1px solid var(--sc-rule)}
.fm-stat svg{width:clamp(56px,5.2vw,100px);height:auto;display:block;
  stroke:var(--sc-red);fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  margin:0 0 clamp(12px,1.1vw,21px)}
.fm-stat .num{font-family:var(--isans);font-weight:700;color:var(--sc-red);
  font-size:clamp(30px,3.75vw,72px);line-height:1;display:block;margin:0 0 clamp(6px,.6vw,11px)}
.fm-stat p{font-family:var(--caslon);font-size:clamp(15px,1.09vw,21px);line-height:1.3;
  color:var(--sc-ink);margin:0}
.sc-band--dark .fm-stat p{color:#fff}

/* ---------- 5. üniversite armaları -------------------------------------- */
.fm-crests{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.2vw,42px);
  flex-wrap:wrap;margin:clamp(26px,2.4vw,46px) 0 0;padding:clamp(22px,2vw,38px) 0 0;
  border-top:1px solid var(--sc-hair);list-style:none}
.fm-crests img{height:clamp(38px,4vw,76px);width:auto;object-fit:contain}

/* ---------- 6. "Panache ile Tanışın" süreç paneli --------------------------
   Yalnızca for-families/index.php'nin ilk bandında kullanılıyor. Eski hâli
   sections.css'teki paylaşılan .sc-steps'ti (kırmızı daire + noktalı çizgi) —
   sayfanın hero'dan hemen sonraki ilk içerik bandı için fazla hafif kalıyordu.
   .sc-steps diğer 20+ sayfada kullanılmaya devam ediyor; burada dokunulmadı,
   yalnızca bu sayfaya özgü yeni bir bileşen eklendi. Üç sütun arası ince
   dikey ayraç .sc-split'teki teknikle aynı (denetim tutarlılığı). */
.fm-meet{margin-top:clamp(30px,2.8vw,54px);background:var(--sc-light);
  border:1px solid var(--sc-hair)}
.fm-meet__steps{display:grid;grid-template-columns:repeat(3,1fr)}
.fm-meet__step{padding:clamp(28px,2.6vw,46px) clamp(22px,2.2vw,40px)}
.fm-meet__step + .fm-meet__step{border-inline-start:1px solid var(--sc-hair)}
.fm-meet__num{display:block;font-family:var(--cormorant);font-weight:700;
  font-size:clamp(32px,3.2vw,52px);line-height:1;color:var(--sc-red-text);
  margin:0 0 clamp(10px,1vw,18px)}
.fm-meet__step h3{font-family:var(--isans);font-weight:700;color:var(--sc-ink);
  font-size:clamp(14px,1.04vw,19px);letter-spacing:.06em;text-transform:uppercase;
  line-height:1.25;margin:0 0 8px}
.fm-meet__step p{font-family:var(--caslon);color:var(--sc-muted);
  font-size:clamp(15px,1.04vw,19px);line-height:1.42;margin:0}
.fm-meet__quote{padding:clamp(24px,2.2vw,40px) clamp(22px,2.2vw,40px);
  border-top:1px solid var(--sc-hair);text-align:center}
.fm-meet__quote p{font-family:var(--cormorant);font-weight:700;color:var(--sc-red);
  font-size:clamp(19px,1.85vw,32px);line-height:1.22;margin:0 auto;max-width:46ch;
  text-wrap:balance}

/* ---------- 7. "Bir yazdan fazlası" kapanış cümlesi ------------------------
   Paylaşılan .sc-quote--ink (bkz. sections.css) burada kart ızgarasının
   hemen ardından hiçbir ayraç olmadan havada duruyordu. .sc-quote diğer
   onlarca sayfada değişmeden kullanılmaya devam ediyor; burada yalnızca bu
   bandın kapanışı için küçük bir kırmızı ayraçla "başlangıcı" belirginleşen
   yeni bir örnek eklendi. */
.fm-summer__quote{margin-top:clamp(28px,2.6vw,48px);text-align:center}
.fm-summer__quote::before{content:"";display:block;width:54px;height:2px;
  background:var(--sc-red);margin:0 auto clamp(20px,1.8vw,30px)}
.fm-summer__quote p{font-family:var(--cormorant);font-weight:700;color:var(--sc-ink);
  font-size:clamp(19px,1.85vw,32px);line-height:1.28;margin:0 auto;max-width:46ch;
  text-wrap:balance}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1040px){
  .fm-stats{padding-inline-start:0;border-inline-start:0}
}
@media (max-width:900px){
  .fm-hero{min-height:0}
  .fm-hero .sc-hero__art::after{
    background:linear-gradient(180deg,rgba(14,26,43,.86) 0%,rgba(14,26,43,.70) 55%,rgba(14,26,43,.86) 100%)}
  .fm-figure__grid{grid-template-columns:1fr;gap:24px}
  .fm-figure__media{order:-1}
  /* Tek sütuna düşünce "metin sütununun boyu" diye bir şey kalmaz; görsel
     normal akışa ve kendi en-boy oranına döner, kırpılmaz. */
  .fm-figure__grid--match .fm-figure__media{position:static}
  .fm-figure__grid--match .fm-figure__media img{position:static;height:auto}
  .fm-stats{grid-template-columns:1fr;gap:28px;padding-inline-start:0;border-inline-start:0}
  .fm-stat + .fm-stat{padding-inline-start:0;border-inline-start:0;padding-top:28px;
    border-top:1px solid var(--sc-rule)}
  .fm-meet__steps{grid-template-columns:1fr}
  .fm-meet__step + .fm-meet__step{border-inline-start:0;border-top:1px solid var(--sc-hair)}
}

/* "Yolculuğa hazır" bandı (bkz. for-families/summer-programmes.php) düz koyu
   zeminde duruyordu. Bant içerik dolu — başlık, iki sütunlu liste ve dipnot —
   bu yüzden .sc-report-band'deki gibi ayrı bir nesne değil, tam genişlikte bir
   doku gerekiyordu. Sitenin koyu bant imzası olan skyline burada konuyla da
   örtüşüyor (varış noktaları / yolculuk), ama .sc-quote-band--skyline'ın
   simetrik kurgusu metnin arkasını da kaplıyordu: dipnot dağ silsilesinin
   üstünde kalıyor ve kontrast düşüyordu.
   Bu yüzden yatay bir maske eklendi — görsel solda (metnin olduğu yerde) tamamen
   sönük, sağa doğru (bandın boş kalan yarısı) açılıyor. Dikey maske de üstten
   sönümlüyor. background-size:cover, .sc-quote-band--skyline'daki 100% 100%
   esnetmesinin aksine oranı bozmuyor. */
.fm-journey-band{position:relative;overflow:hidden}
.fm-journey-band > .sc-wrap{position:relative;z-index:1}
.fm-journey-band::before{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;
  height:clamp(180px,23vw,340px);opacity:.62;
  background:url("../img/skyline.webp") center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 58%),
                     linear-gradient(90deg,rgba(0,0,0,0) 16%,#000 62%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 58%),
             linear-gradient(90deg,rgba(0,0,0,0) 16%,#000 62%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* ≤900: iki sütun tek sütuna iniyor, metin bandın tamamını kaplıyor; görsel
   yalnızca alt şeritte kalsın diye yataydaki maske kaldırılıp yükseklik
   düşürüldü. */
@media (max-width:900px){
  .fm-journey-band::before{height:clamp(120px,26vw,200px);opacity:.5;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 62%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 62%)}
}

/* "Experience & Expertise" bandı (bkz. for-families/ib-ap-tutoring.php) düz koyu
   zeminde duruyordu; başlığın ve giriş cümlesinin sağındaki yarı boştu.
   Bandın ortadaki istatistiği zaten "GLOBAL — akademik ve kurumsal bakış", alt
   bölümde de dünyanın önde gelen üniversitelerinin armaları var; dolayısıyla
   dünya haritası burada konuyla birebir örtüşüyor.
   Görsel (about-audience-bg.webp) krem tonlu, koyu bant üstüne doğrudan
   konulamıyor — açık bir dikdörtgen gibi duruyor. mix-blend-mode:soft-light ile
   harita, lacivert zeminin kendi tonunda hafif bir kabartmaya dönüşüyor:
   kıtalar taban renginde kalıyor, denizler bir tık açılıyor. Yatay maske
   görseli metnin olduğu sol yarıdan tamamen çekiyor. */
.fm-exp-band{position:relative;overflow:hidden}
.fm-exp-band > .sc-wrap{position:relative;z-index:1}
.fm-exp-band::before{content:"";position:absolute;inset:0;z-index:0;
  background:url("../img/about-audience-bg.webp") center center/cover no-repeat;
  mix-blend-mode:soft-light;opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 20%,#000 62%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 20%,#000 62%)}
/* ≤900: .fm-stats tek sütuna iniyor, metin bandın tamamına yayılıyor; yatay
   maske anlamını yitiriyor. Harita tüm bandı kaplıyor ama daha soluk. */
@media (max-width:900px){
  .fm-exp-band::before{opacity:.4;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 4%,#000 34%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,0) 4%,#000 34%)}
}