/* Strona zbiorcza „Języki" (przebudowa 15.09.2026, decyzja KG: nowy layout wzorem
   dorosli.html/dzieci.html - właściciel odrzucił wersję w starym layoucie).
   Mechanizm HERO na pełną szerokość ekranu z tekstem NA zdjęciu jest już wspólny
   dla wszystkich stron w /assets/nowe/styles.css (sekcja „14.09.2026 - TEKST HERO
   LEŻY NA ZDJĘCIU"), więc tu tylko dopasowania specyficzne dla tej strony:
   proporcje własnego zdjęcia (welcome-rozne_jezyki.webp, 1600x900), mniejszy/szerszy
   nagłówek (długi tytuł „Sześć języków, jedna sprawdzona metoda") i jasna mgiełka
   pod tekstem - wzorzec 1:1 z .hero-preschool (te same kolorowe napisy w lewym
   górnym rogu zdjęcia, ten sam problem czytelności). */

/* Kolory języków - w nagłówku serwisu (.ec-naglowek, megamenu) są zdefiniowane jako
   zmienne CSS scope'owane do .ec-naglowek i NIE są widoczne w treści strony, więc
   te same wartości (1:1 z assets/css/naglowek.css) powtarzamy tu dla treści strony. */
body[data-page=jezyki]{--lang-en:#C9412B;--lang-de:#2A4A6B;--lang-es:#E0A92E;--lang-fr:#2C5DAF;--lang-it:#6B8E4E;--lang-ru:#B0182B}

/* ===== HERO ===== */
.hero-jezyki .hero-default{max-width:min(760px,42vw)}
.hero-jezyki h1{font-size:clamp(2.3rem,3.6vw,4.1rem);line-height:1.13;margin-bottom:20px}
.hero-jezyki .hero-action{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero-jezyki .hero-action .button{min-width:220px}

@media(min-width:701px){
  /* Zdjęcie ma własne proporcje 1600x900 (16:9) - inne niż domyślne 2000/938 we wzorcu,
     więc bez tej korekty górna/dolna część kadru zostałaby ucięta. */
  .hero-jezyki .hero-photo img{aspect-ratio:1600/900;object-position:50% 50%}

  /* Mgiełka pod tekstem (decyzja KG 14.09, zastosowana tu tak samo jak u przedszkolaków):
     zdjęcie ma gęsto rozrzucone kolorowe napisy również w lewym górnym rogu, gdzie leży
     blok tekstu hero - bez rozjaśnienia tekst by się w nich gubił. Biel, nie szarość,
     wygasa promieniście we wszystkie strony (głównie w prawo i w dół), więc nie tworzy
     twardej krawędzi ani „przybrudzenia" - zdjęcie pod spodem zostaje rozpoznawalne.
     ZERO przyciemnień - tekst zostaje ciemny na jasnym tle, zgodnie z zakazem KG. */
  .hero-jezyki{overflow:clip}
  .hero-jezyki .hero-content{position:relative;isolation:isolate}
  .hero-jezyki .hero-content::before{
    content:"";position:absolute;top:-28px;left:0;right:0;height:calc(100% + 290px);
    z-index:0;pointer-events:none;
    background:radial-gradient(66% 48% at 3% 38%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.86) 42%,rgba(255,255,255,.64) 62%,rgba(255,255,255,.3) 80%,rgba(255,255,255,0) 100%)
  }
  .hero-jezyki .hero-default{position:relative;z-index:1}
}

@media(max-width:700px){
  .hero-jezyki h1{font-size:2.35rem;line-height:1.1}
  .hero-jezyki .hero-action .button{width:100%;min-width:0}
}

/* ===== Sekcja „Nasze 6 języków" =====
   Reużycie .course-section / .course-grid / .course-card (jak na dzieci.html), tylko
   3 kolumny zamiast 4 (sześć kafli zamiast czterech) i pasek koloru języka jako JEDYNY
   akcent - nigdy tło całej karty (zakaz KG, kolory kursów = akcent). */
body[data-page=jezyki] .course-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.lang-card{position:relative}
.lang-accent{display:block;width:38px;height:5px;border-radius:3px;margin-bottom:18px}
.lang-card .course-description{min-height:108px}
.lang-card .text-link{margin-top:auto;padding-top:8px}

@media(max-width:1200px){
  body[data-page=jezyki] .course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  body[data-page=jezyki] .course-grid{grid-template-columns:1fr}
  .lang-card .course-description{min-height:0}
}