/*=====================================================
Project      : Átfogó Képzések — vendégoldal
Description  : Felnőttképzési / e-learning oldal design system
Base         : Bootstrap 5
=======================================================

Table of contents
=======================================================
 1. Fontok
 2. Változók
 3. Alap / reset
 4. Container
 5. Tipográfia + szekciócím
 6. Gombok
 7. Preloader
 8. Scroll top
 9. Header top
10. Navbar
11. Megamenü
12. Kereső popup
13. Hero
14. About
15. Event (hamarosan induló)
16. Kurzus tabok
17. Készségteszt CTA
18. Kurzus kártya slider
19. Videó + feature
20. Dupla CTA
21. Vélemények
22. Blog + események
23. Hírlevél
24. Footer
25. Breadcrumb
26. Hibaoldalak
27. Kártyarácsok
28. Reszponzív
=====================================================*/


/*=====================================================
 1. Fontok
=====================================================*/
/*
 * A betűkészletek ÖNHOSZTOLTAK — a `@font-face` szabályok a custom.css 16.
 * szakaszában vannak, a woff2 fájlok a public/guest-assets/fonts/ alatt.
 *
 * ITT KORÁBBAN három `@import url('https://fonts.googleapis.com/...')` sor
 * állt. NE TEDD VISSZA ŐKET. Egy `@import` minden oldalletöltésnél kérést
 * indít a fonts.googleapis.com és a fonts.gstatic.com felé, tehát a látogató
 * IP-címe a hozzájárulásától FÜGGETLENÜL eljut a Google-höz — azé a látogatóé
 * is, aki a süti-sávon mindent elutasított. Ez az egyetlen ok, amiért ehhez a
 * fájlhoz egyáltalán hozzányúltunk (a repó szabálya szerint a design systemet
 * a custom.css-ből írjuk felül): egy külső fájlból NEM lehet visszavonni egy
 * itt kiadott `@import`-ot, a kérés kivédéséhez a sornak innen kell eltűnnie.
 *
 * Új betűvágat kell? A fájlt töltsd le a fonts/ alá, és a `@font-face`-t a
 * custom.css 16. szakaszába vedd fel — ide semmiképp.
 */


/*=====================================================
 2. Változók
=====================================================*/
:root {
    /* Színek */
    --theme-color: #FDA31B;
    --theme-color-hover: #E8910D;
    --theme-color2: #213A25;
    --theme-color2-hover: #16281A;
    --accent-blue: #29B7EF;
    --accent-red: #FF531A;

    --color-white: #FFFFFF;
    --body-bg: #FFFFFF;
    --section-bg: #F9F7F8;
    --topbar-bg: #F9F7F8;
    --page-mint: #F3F8F9;

    --body-text: #394459;
    --heading-color: #213A25;
    --muted-text: #6C6C6E;
    --border-color: #E5E5E7;
    --dot-inactive: #B3B3B3;

    /* Tipográfia */
    --heading-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --body-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --body-size: 16px;
    --body-line: 26px;
    --h1-size: 36px;
    --h1-line: 44px;
    --h2-size: 38px;
    --h2-line: 48px;

    /* Méretek */
    --container-w: 1256px;
    --header-top-h: 41px;
    --header-nav-h: 83px;
    --logo-w: 198px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-pill: 999px;

    --shadow-card: 0 2px 14px rgba(33, 58, 37, .08);
    --shadow-card-hover: 0 10px 30px rgba(33, 58, 37, .14);

    --transition: all .3s ease;
}


/*=====================================================
 3. Alap / reset
=====================================================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    font-size: var(--body-size);
    line-height: var(--body-line);
    font-weight: 400;
    color: var(--body-text);
    background: var(--body-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--theme-color);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul,
ol {
    list-style: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/*=====================================================
 4. Container
=====================================================*/
.container {
    width: 100%;
    max-width: calc(var(--container-w) + 40px);
    margin-inline: auto;
    padding-inline: 20px;
}

/* Szekciónkénti tervezett tartalomszélességek (1440px-es tervről mérve) */
.about-area       { --container-w: 1276px; }
.course-area      { --container-w: 1136px; }
.skill-test-area  { --container-w: 781px; }
/* A „hamarosan induló” szekció is ezt viszi — ugyanaz a kártyasor van benne. */
.course-slider-area { --container-w: 1200px; }
.cta-area         { --container-w: 1204px; }
.testimonial-area { --container-w: 1037px; }
.blog-area        { --container-w: 1051px; }
.newsletter-area  { --container-w: 1059px; }
.footer-area      { --container-w: 1171px; }
.error-area       { --container-w: 1200px; }


/*=====================================================
 5. Tipográfia + szekciócím
=====================================================*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color: var(--heading-color);
    font-weight: 700;
    line-height: 1.28;
}

h1 { font-size: var(--h1-size); line-height: var(--h1-line); }
h2 { font-size: var(--h2-size); line-height: var(--h2-line); }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }

p {
    margin-bottom: 16px;
}

p:last-child {
    margin-bottom: 0;
}

.site-heading {
    margin-bottom: 44px;
}

.site-heading.text-center {
    text-align: center;
}

.site-heading .site-title-tagline {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--theme-color);
    margin-bottom: 8px;
}

/*
 * A fejléc két kis sora. TAG-ben címsorok (`<h2>` és `<h3>`), mert a megrendelői
 * „Főoldal és menü” dokumentum címsor-hierarchiát ír elő rájuk — a tervrajzon
 * viszont sima, testszínű sorok. Ezért itt semlegesíteni kell azt a két
 * tulajdonságot, amit a `h1..h6` és a `h2` szabály hozna magával: a 700-as
 * vastagságot és a 48px-es sorközt. A többi (méret, szín, blokk-megjelenés)
 * amúgy is felül van írva, tehát a computed style pontosan az marad, ami a
 * korábbi `<span>`-eké volt — a heading-szint SEO-döntés, nem tervmódosítás.
 */
.site-heading .site-subtitle,
.site-heading .site-hook {
    display: block;
    font-size: 15px;
    font-weight: 400;
    line-height: var(--body-line);
    color: var(--body-text);
    margin-bottom: 10px;
}

.site-heading .site-title {
    margin-bottom: 0;
}

.site-heading .site-title.text-theme {
    color: var(--theme-color);
}

.site-heading .site-desc {
    max-width: 1180px;
    margin: 24px auto 0;
    font-size: 18px;
    line-height: 30px;
}

.site-heading.text-center .site-desc {
    text-align: center;
}

/* Szekció függőleges ritmusa */
.py-120 { padding-block: 120px; }
.pt-120 { padding-top: 120px; }
.pb-120 { padding-bottom: 120px; }
.py-90  { padding-block: 90px; }
.py-70  { padding-block: 70px; }

.bg-section { background: var(--section-bg); }
.bg-dark-green { background: var(--theme-color2); }


/*=====================================================
 6. Gombok
=====================================================*/
.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--theme-color);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 15px 26px;
    border-radius: var(--radius-sm);
    text-align: center;
    transition: var(--transition);
}

.theme-btn:hover {
    background: var(--theme-color-hover);
    color: var(--color-white);
}

.theme-btn.btn-pill {
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 16px 30px;
}

.theme-btn.btn-dark {
    background: var(--theme-color2);
}

.theme-btn.btn-dark:hover {
    background: var(--theme-color2-hover);
}

.theme-btn.btn-outline-dark {
    background: transparent;
    border: 1px solid var(--theme-color2);
    color: var(--theme-color2);
}

.theme-btn.btn-outline-dark:hover {
    background: var(--theme-color2);
    color: var(--color-white);
}

/* Szöveges "tovább" link nyíllal */
.link-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--theme-color);
    font-size: 16px;
    font-weight: 500;
}

.link-more:hover {
    color: var(--theme-color-hover);
    gap: 14px;
}

/*
 * Kör alakú slider nyilak — a terven a kártyasoron KÍVÜL ülnek.
 *
 * ALAPBÓL REJTVE vannak: a nyílnak csak akkor van dolga, ha több kártya van,
 * mint amennyi egyszerre kifér. Ez töréspontonként más (a carousel máshány
 * elemet mutat), ezért nem a Blade dönti el, hanem a main.js: a slider
 * dobozára akkor teszi ki a `slider-has-nav` osztályt, amikor a carousel
 * tényleg léptethető. JS nélkül — és a mobil, ujjal görgethető kártyasorban —
 * így nem marad ott halott nyíl.
 */
.slider-nav-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--body-text);
    align-items: center;
    justify-content: center;
    color: var(--body-text);
    background: transparent;
    transition: var(--transition);
    z-index: 2;
}

.slider-has-nav > .slider-nav-btn {
    display: inline-flex;
}

.slider-nav-btn.slider-prev { left: -66px; }
.slider-nav-btn.slider-next { right: -66px; }

.slider-nav-btn:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--color-white);
}


/*=====================================================
 7. Preloader
=====================================================*/
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-spinner {
    width: 54px;
    height: 54px;
    border: 4px solid rgba(253, 163, 27, .25);
    border-top-color: var(--theme-color);
    border-radius: 50%;
    animation: atf-spin 1s linear infinite;
}

@keyframes atf-spin {
    to { transform: rotate(360deg); }
}


/*=====================================================
 8. Scroll top
=====================================================*/
#scroll-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--theme-color);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: var(--transition);
    z-index: 999;
}

#scroll-top.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scroll-top:hover {
    background: var(--theme-color2);
    color: var(--color-white);
}


/*=====================================================
 9. Header top
=====================================================*/
.header {
    position: relative;
    z-index: 100;
}

.header-logo {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--logo-w);
    height: calc(var(--header-top-h) + var(--header-nav-h));
    background: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* Bal alsó szalag-hajtás (14×10px háromszög) */
.header-logo::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 14px;
    height: 10px;
    background: var(--theme-color);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* A rajz magassága a Figma-tervből: 108 px a 198x124-es narancs csempén belül
   (a tervi rajz 125x108, tehát vízszintesen 37-37 px levegő marad).
   A korábbi 102 px a RÉGI, oldalt-alul levágott rajzhoz volt kimérve; a teljes
   v2 lockuphoz a terv szerinti 108 px a helyes érték.
   Az asset 3x felbontású és átlátszó hátterű, ezért a magasságot itt kötjük meg. */
.header-logo img {
    max-height: 108px;
    width: auto;
}

.header-top {
    height: var(--header-top-h);
    background: var(--topbar-bg);
    font-size: 14px;
    color: var(--body-text);
}

.header-top-wrap {
    height: 100%;
    padding-left: calc(var(--logo-w) + 34px);
    padding-right: 73px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-top-contact {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.header-top-contact a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.header-top-contact i {
    color: var(--theme-color);
    font-size: 16px;
}

.header-top-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-top-license {
    white-space: nowrap;
}

.header-top-social {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 20px;
    border-left: 1px solid #D9D9DC;
}

.header-top-social a {
    font-size: 16px;
    color: var(--heading-color);
    line-height: 1;
}

.header-top-social a:hover {
    color: var(--theme-color);
}


/*=====================================================
10. Navbar
=====================================================*/
.main-navigation {
    position: relative;
    background: var(--color-white);
}

.navbar-collapse {
    display: flex;
    align-items: center;
    flex: 1;
}

.main-navigation .nav-wrap {
    height: var(--header-nav-h);
    padding-left: calc(var(--logo-w) + 17px);
    padding-right: 36px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Kategóriák trigger */
.nav-categories-wrap {
    position: relative;
    flex: 0 0 auto;
}

.nav-categories {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--heading-color);
    white-space: nowrap;
}

.nav-categories i {
    font-size: 15px;
}

.nav-categories:hover,
.nav-categories.active {
    color: var(--theme-color);
}

.nav-categories-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 14px);
    width: 260px;
    background: var(--theme-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .16);
    padding: 6px 0;
    z-index: 30;
    display: none;
}

.nav-categories-menu.show {
    display: block;
}

/*
 * A gomb és a lista között 14px rés van. Hoverrel átérve az egér itt egy
 * pillanatra „kilépne” a .nav-categories-wrap-ból és a lista bezárulna —
 * ezért a rést egy láthatatlan sáv hidalja át.
 */
.nav-categories-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

.nav-categories-menu li + li {
    border-top: 1px solid rgba(255, 255, 255, .35);
}

.nav-categories-menu a {
    display: block;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-white);
}

.nav-categories-menu a:hover {
    background: rgba(255, 255, 255, .12);
}

/* Kereső — nyugalmi állapotban csak egy ikon; kattintásra kinyílik, és
   ráúszik a jobbra eső menüpontokra (nem tolja el őket) */
.nav-search {
    position: relative;
    width: 38px;
    height: 35px;
    flex: 0 0 auto;
}

.nav-search input {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 38px;
    height: 35px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    padding: 0 14px 0 44px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: width .3s ease, opacity .2s ease, background-color .2s ease, border-color .2s ease;
}

.nav-search input::placeholder {
    color: #9A9AA1;
}

.nav-search.is-open input {
    width: 280px;
    opacity: 1;
    pointer-events: auto;
    background: rgba(255, 255, 255, .92);
    border-color: var(--border-color);
}

.nav-search button {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 38px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9A9AA1;
    font-size: 14px;
}

.nav-search button:hover {
    color: var(--theme-color);
}

/* Menü */
.navbar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.navbar-nav .nav-link {
    font-size: 16px;
    font-weight: 400;
    color: var(--heading-color);
    white-space: nowrap;
    padding: 6px 0;
}

/*
 * A terven az aktuális menüpont nincs kiemelve — az .active osztály csak a
 * markupban marad meg (aria/JS horog), vizuálisan nem tér el.
 */
.navbar-nav .nav-link:hover {
    color: var(--theme-color);
}

/*
 * "Kurzusaink" kiemelése — a menüpont NEM mozdul el sem asztali, sem mobil
 * nézetben, csak a szín pulzál. (Volt egy vízszintesen lebegtető változat is;
 * mobilon a keskeny sorban zavaró volt, ezért mindkét nézetben ez maradt.)
 */
.nav-link-float {
    display: inline-block;
    animation: nav-glow 1.2s ease-in-out infinite alternate;
}

@keyframes nav-glow {
    0%   { color: inherit; }
    100% { color: var(--theme-color); }
}

/* Amíg a mega-menü nyitva van, a szöveg visszaáll a sorba, és sárga marad —
   az animáció csak akkor indul újra, ha a mega-menü bezárul */
.mega-menu-trigger.active .nav-link-float {
    animation: none;
    transform: none;
    color: var(--theme-color);
}

/*
 * Mobil almenük („Kategóriák”, „Kurzusaink”) — asztali nézetben mindhárom
 * elemnek megvan a maga saját megoldása (kategória-gomb a navbarban, megamenü
 * hoverre), ezért itt nem látszanak. A mobil szabályaik: 28. Reszponzív.
 */
.nav-item-mobile,
.nav-sub-row,
.nav-sub-toggle,
.nav-submenu { display: none; }

.nav-right {
    margin-left: 30px;
    flex: 0 0 auto;
}

.nav-right .theme-btn {
    width: 178px;
    height: 48px;
    padding-inline: 12px;
    font-size: 12px;
    letter-spacing: .5px;
    white-space: nowrap;
}

.nav-right .theme-btn i { display: none; }

/* Mobil toggler */
.navbar-toggler,
.nav-search-toggler {
    display: none;
    font-size: 22px;
    color: var(--heading-color);
    line-height: 1;
}

/* Sticky */
.header-sticky {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
    animation: atf-slide-down .35s ease forwards;
}

/*
 * A logó a `.header`-hez van kötve (abszolút), ragadni viszont csak a
 * `.main-navigation` ragad — a kettő görgetéskor szétválna: a logó elgörögne,
 * a menüsor bal szélén pedig ott maradna a NEKI fenntartott üres sáv
 * (`.nav-wrap` padding-left = --logo-w + …). Ezért ragadó állapotban a logót
 * is a képernyőhöz rögzítjük, a sáv magasságára húzva.
 *
 * A szülőre a `:has()` szűr, mert az osztályt a JS a KÉSŐBBI testvérre teszi
 * (main.js 2. szakasz), testvérre visszafelé pedig nem lehet szelektálni.
 */
.header:has(.header-sticky) .header-logo {
    position: fixed;
    height: var(--header-nav-h);
    /* A ragadó sáv 999-e fölé — mindkettő a `.header` z-index: 100-as
       rétegén belül, tehát az oldal többi részéhez képest nem változik. */
    z-index: 1000;
    animation: atf-slide-down .35s ease forwards;
}

/* Ugyanaz a 7px-es levegő a csempén belül, mint a mobil fejlécben
   (72 − 14 = 58px), csak most a sáv magasságából számolva. */
.header:has(.header-sticky) .header-logo img {
    max-height: calc(var(--header-nav-h) - 14px);
}

@keyframes atf-slide-down {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}


/*=====================================================
11. Megamenü
=====================================================*/
.mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--color-white);
    border-top: 4px solid var(--theme-color);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
    padding: 34px 46px 46px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--transition);
    z-index: 120;
}

.mega-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/*
 * Két rácssor: fent a hasábcímek, alattuk a linklisták. A hasáb `display:
 * contents`-szel adja át a gyerekeit a rácsnak, hogy MINDEN lista ugyanott
 * kezdődjön akkor is, ha egy kategória neve (a menü adatból épül — l.
 * App\View\Composers\MegaMenuComposer) két sorba törik. Enélkül a hosszabb
 * nevű hasáb linkjei lecsúsznának a többihez képest.
 */
.mega-menu-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    grid-template-rows: auto 1fr;
    gap: 0 40px;
}

.mega-menu-col {
    display: contents;
}

.mega-menu-col > h5 { grid-row: 1; }
.mega-menu-col > ul { grid-row: 2; }

.mega-menu-col:nth-child(1) > * { grid-column: 1; }
.mega-menu-col:nth-child(2) > * { grid-column: 2; }
.mega-menu-col:nth-child(3) > * { grid-column: 3; }
.mega-menu-col:nth-child(4) > * { grid-column: 4; }

/*
 * A terven az ELSŐ kategória két hasáb széles: a felirata az 1. hasábban áll, a
 * linkjei viszont két alhasábra tördelve töltik ki az 1–2. hasábot, és a
 * következő kategória csak a 3.-ban kezdődik. Ezt a hasábot a
 * MegaMenuComposer::FIRST_CATEGORY_SPAN jelöli meg.
 */
.mega-menu-col-wide:nth-child(1) > * { grid-column: 1 / span 2; }
.mega-menu-col-wide ~ .mega-menu-col:nth-child(2) > * { grid-column: 3; }
.mega-menu-col-wide ~ .mega-menu-col:nth-child(3) > * { grid-column: 4; }

/*
 * A két alhasáb OSZLOPFOLYTONOS, és az ELSŐ telik meg: a lista felülről lefelé
 * tölti az elsőt a terv szerinti hasábonkénti linkszámig, és csak a maradék
 * kerül a másodikba (l. MegaMenuComposer::rows()). Ezért rács:
 *
 *   - a `columns: 2` tördelés FELEZNÉ a listát, tehát mindkét alhasáb
 *     félmagasan érne véget, jóval a szomszéd hasábok alja fölött;
 *   - egy alapértelmezett, SORFOLYTONOS rács felcserélné a képzések sorrendjét
 *     — ezt oldja meg a `grid-auto-flow: column`.
 *
 * A sorok számát a sablon adja át (`--mega-menu-rows`, megamenu.blade.php): a
 * `grid-template-rows` NÉLKÜLI rács egyetlen sorba tenné az összes linket, a
 * CSS pedig magától nem tudja megszámolni őket. A tartalék érték a terv szerinti
 * hasábonkénti linkszám (MegaMenuComposer::ITEMS_PER_COLUMN).
 *
 * `minmax(0, 1fr)`, nem `1fr`: a puszta `1fr` alsó határa a min-content, tehát
 * a két alhasáb SZÉLESEBBRE nőhetne, mint a saját dobozuk — és mivel a doboz
 * nem vág, a második alhasáb a SZOMSZÉD hasáb szövegére futna rá. (A doboz azért
 * lehet szűkebb a tartalmánál, mert a lista két `fr` rácshasábot fog át, az
 * átfogó elem min-content igényét pedig a rács rugalmas sávokra nem osztja
 * szét — l. a 992–1275px sávot a 28. szakaszban.) A nulla alsó határral a két
 * alhasáb mindig elfér, legfeljebb egy hosszú szó lóg bele a 40px-es közbe.
 * A terv szerinti szélességen (1440px) ez semmit nem változtat: ott a két
 * alhasáb amúgy is egyenlő.
 */
.mega-menu-col-wide > ul {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(var(--mega-menu-rows, 8), auto);
    grid-auto-flow: column;
    align-content: start;
    gap: 22px 40px;
}

/*
 * A térközt a rács `gap`-je adja, a margó tehát csak hozzáadódna — ráadásul a
 * MÁSODIK alhasáb első elemét is lejjebb tolná (a `li + li` a DOM-szomszédot
 * nézi, nem az alhasábot), tehát az alhasábok nem egy vonalban kezdődnének.
 *
 * A kettős osztálynév nem véletlen: az általános `.mega-menu-col ul li + li`
 * szabály (l. lentebb) azonos fajsúlyú és KÉSŐBB áll, tehát felülírná ezt.
 */
.mega-menu-col.mega-menu-col-wide > ul li + li {
    margin-top: 0;
}

.mega-menu-col h5 {
    font-size: 17px;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 26px;
}

/*
 * A listák öröklött 2rem behúzása nélkül: a terven a linkek PONTOSAN a hasáb
 * feliratával egy vonalban kezdődnek (megamenü.png kimérve — a felirat és az
 * első link is x=41, a Tantermi hasábban mindkettő x=582, az E-learningben
 * x=823). Jelölő nincs (`list-style: none`), tehát a behúzás nem tart helyet
 * semminek, csak elcsúsztatja a linkeket.
 */
.mega-menu-col ul {
    padding-left: 0;
}

.mega-menu-col ul li + li {
    margin-top: 22px;
}

.mega-menu-col ul a {
    font-size: 16px;
    color: var(--body-text);
}

.mega-menu-col ul a:hover {
    color: var(--theme-color);
}

/*
 * A „Hamarosan" pirulát VISELŐ link — flex doboz, nem folyó szöveg.
 *
 * Folyó szövegként a pirula a sor végére került, tehát hosszú címnél a cím ALÁ,
 * egy saját sorba esett: a hasáb keskeny (a széles hasáb két alhasábra oszlik),
 * a képzésnevek viszont hosszúak. Ott a pirula már a következő képzés sorával
 * csúszott össze, és a lista ritmusa is megbicsaklott.
 *
 * Flexben a cím és a pirula két külön elem: a cím a maradék helyen tördelődik,
 * a pirula pedig `flex: 0 0 auto`-val egészben marad, a cím ELSŐ sorának
 * vonalában (`align-items: baseline`). A pirula így SOHA nem kerülhet külön
 * sorba — se hosszú címnél, se szűk hasábban.
 *
 * `inline-flex`, nem `flex`: a többi menülink inline, tehát a hover-terület
 * náluk a szöveg maga. Blokk-szintű dobozzal a pirulás sorokon a hasáb teljes
 * szélessége reagálna a hoverre, a szomszédjaikon meg nem.
 */
.mega-menu-col ul a.mega-menu-link-soon {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

/*
 * A pirula maga. Az idióma a kurzuskártyák címkéié
 * (`.course-card .course-tags a`): ugyanaz a világos meleg tint, 11px, teljes
 * lekerekítés — csak a szöveg CÍMSZÍNŰ és félkövér, mert ez nem böngészhető
 * címke, hanem állapotjelzés, és a 11px-es szürke a menü halvány hátterén már
 * nem lenne elég kontrasztos.
 *
 * A `white-space: nowrap` a feliratot tartja egy sorban (a `flex: 0 0 auto`
 * miatt a doboz nem is zsugorodhat alá).
 *
 * A színt a link `:hover`-e SZÁNDÉKOSAN nem viszi magával (a szabály az `a`-ra
 * szól, a pirula pedig saját színt kap): a narancs szöveg a narancsos tinten
 * olvashatatlan lenne.
 */
.mega-menu-col ul .mega-menu-soon {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: #FDF3E3;
    color: var(--heading-color);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/*
 * A hasáb záró sora: a kategória gyűjtőoldalára visz, nem egy képzésre. Ezért
 * kiemelt (félkövér, címszín), hogy a fölötte álló képzéslistából kilógjon —
 * a sorköz viszont a listáé marad, hogy a hasáb ritmusa ne törjön meg.
 *
 * A kettős osztálynév kell: az általános `.mega-menu-col ul a` szabály KÉSŐBB
 * áll, tehát azonos fajsúlynál felülírná a színt.
 */
.mega-menu-col ul .mega-menu-all {
    font-weight: 600;
    color: var(--heading-color);
}

.mega-menu-col ul .mega-menu-all:hover {
    color: var(--theme-color);
}

/*
 * A rács négy kategória-hasábra van szabva, de a hasábokat adat tölti ki
 * (App\View\Composers\MegaMenuComposer). Ha kevesebb kategória látszik, az
 * akciódoboz akkor is az ötödik sávban, a jobb szélen marad — enélkül
 * automatikus elhelyezéssel becsúszna egy kategória helyére.
 */
.mega-menu-aside {
    grid-column: 5;
    grid-row: 1 / -1;
    padding-left: 42px;
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 300px;
}

.mega-menu-aside .theme-btn {
    border-radius: var(--radius-pill);
    padding: 20px 26px;
    font-size: 15px;
}

.mega-menu-social {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: auto;
    padding-top: 60px;
}

.mega-menu-social a {
    color: var(--theme-color);
    font-size: 18px;
}


/*=====================================================
12. Kereső popup
=====================================================*/
.popup-search-box {
    position: fixed;
    inset: 0;
    background: rgba(33, 58, 37, .94);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.popup-search-box.show {
    opacity: 1;
    visibility: visible;
}

.popup-search-box form {
    display: flex;
    width: min(90%, 640px);
}

.popup-search-box input {
    flex: 1;
    height: 56px;
    border: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    padding: 0 20px;
}

.popup-search-box button[type="submit"] {
    width: 64px;
    background: var(--theme-color);
    color: var(--color-white);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.popup-search-box .search-close {
    position: absolute;
    top: 32px;
    right: 32px;
    font-size: 26px;
    color: var(--color-white);
}


/*=====================================================
13. Hero
=====================================================*/
/*
 * A hero jobb oldala (fotó + buborék + a mellé tartozó két dekoráció) EGY
 * kompozíció: a buborék farka a modell mutatóujjára mutat. Ezért ezek nem a
 * képernyőhöz, hanem a FOTÓHOZ vannak kötve.
 *
 * `--hero-fig-w` a fotó tényleges szélessége (a terven 700px, keskenyebb
 * ablakon a fele hely), `--hero-u` pedig az ebből adódó „tervpixel”: 1 a
 * tervről mért pixelekhez tartozó szorzó. Minden jobb oldali méret ennek a
 * többszöröse, így az ablak minden szélességén ugyanaz a kép marad.
 *
 * A `cqw` a `.hero-area` szélessége — a `container-type` csak ezért kell.
 */
.hero-area {
    position: relative;
    background: var(--theme-color2);
    min-height: 619px;
    overflow: hidden;
    container-type: inline-size;

    --hero-fig-w: min(700px, 50cqw);
    --hero-u: calc(var(--hero-fig-w) / 700);
    /* A `.container` tényleges szélessége itt, a hero-ban. */
    --hero-container-w: min(var(--container-w) + 40px, 100cqw);
    /*
     * A fotó felső éle. A kép alulra van tapasztva, a magassága pedig a
     * szélességéből jön (700x620-as kivágat) — a benne lévő `100%` miatt ez
     * KIZÁRÓLAG `top`-ban használható, máshol a magasságra hivatkozna.
     */
    --hero-fig-top: calc(100% - var(--hero-fig-w) * 620 / 700);
}

.hero-single {
    position: relative;
    min-height: 619px;
    display: flex;
    align-items: center;
}

.hero-single .container {
    position: relative;
    z-index: 2;
}

/*
 * A szövegoszlop nem érhet a buborék alá. A buborék a fotóhoz van kötve, a
 * fotó pedig keskenyebb ablakon zsugorodik — tehát a szövegoszlopnak is
 * követnie kell, különben a címsor a fehér buborék mögé fut.
 *
 * A képlet a buborék bal élét adja meg a szövegoszlop bal szélétől mérve:
 *   ablak/2 (a fotó bal éle)  +  konténer/2 - 20px (a szövegoszlop bal széle)
 *   - 28 tervpixel (ennyivel lóg ki a buborék a fotóból balra).
 *
 * A terven (1440px) ez 620px-et ad; a leghosszabb címsor 608px, tehát a
 * tördelés ugyanaz marad, mint a tervrajzon.
 */
.hero-content {
    max-width: min(660px, 50cqw + var(--hero-container-w) / 2 - var(--hero-fig-w) - 28 * var(--hero-u) - 20px);
    padding-block: 60px;
}

.hero-content .hero-tagline {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--theme-color);
    margin-bottom: 26px;
}

/*
 * A 2–3. dia címe <h2> (egy oldalon egy <h1> lehet), a hero-ban viszont
 * ugyanaz a szerepe és ugyanaz a mérete, mint az elsőé.
 */
.hero-content h1,
.hero-content h2 {
    color: var(--color-white);
    font-size: var(--h1-size);
    line-height: var(--h1-line);
    margin-bottom: 24px;
}

.hero-content p {
    color: var(--color-white);
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0;
}

.hero-content .theme-btn {
    display: none;
    margin-top: 30px;
}

/* Slider pontok — a pontsort az Owl rajzolja (.owl-dots), lásd main.js */
.hero-dots,
.hero-area .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 36px;
}

.hero-dots button,
.hero-area .owl-dots .owl-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--dot-inactive);
    padding: 0;
    transition: var(--transition);
}

.hero-dots button.active,
.hero-area .owl-dots .owl-dot.active {
    background: var(--accent-blue);
}

/* Jobb oldali kép */
.hero-figure {
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--hero-fig-w);
    z-index: 1;
    pointer-events: none;
}

.hero-figure img {
    width: 100%;
    height: auto;
}

/*
 * Szövegbuborék.
 *
 * A terven (1440px, 700px-es fotó) a buborék bal éle 28px-szel a fotó bal
 * széle ELŐTT, a teteje 63px-szel a fotó teteje ALATT van, a szélessége
 * 224px. Mivel a fotó a jobb szélhez tapad, ugyanezt a jobb széltől
 * visszafelé számoljuk: 224 - 28 = 196 tervpixel a fotó bal szélétől.
 *
 * A doboz belső méretei a `font-size`-ban ülnek: 1em = 100 tervpixel. Így egy
 * darab érték (`--hero-u`) skálázza a szélességet, a keretsugarat, a
 * belsőt és a farkat is — nem tud szétcsúszni egymástól.
 */
.hero-bubble {
    position: absolute;
    right: calc(var(--hero-fig-w) - 196 * var(--hero-u));
    top: calc(var(--hero-fig-top) + 63 * var(--hero-u));
    font-size: calc(100 * var(--hero-u));
    width: 2.24em;
    background: var(--color-white);
    border-radius: .38em .16em .5em .38em / .38em .2em 1.35em .28em;
    padding: .18em .24em;
    text-align: center;
    z-index: 2;
}

.hero-bubble::after {
    content: '';
    position: absolute;
    right: .58em;
    top: 93%;
    width: .8em;
    height: .44em;
    background: var(--color-white);
    clip-path: polygon(-20% 10%, 100% 0%, 108% 110%);
    -webkit-transform: rotate(-16deg) skewY(20deg);
    -moz-transform: rotate(-16deg) skewY(20deg);
    -o-transform: rotate(-16deg) skewY(20deg);
    transform: rotate(-16deg) skewY(20deg);
    border-radius: .06em;
}

.hero-bubble span {
    display: block;
    color: var(--theme-color);
    font-weight: 500;
    line-height: 1.35;
}

.hero-bubble .bubble-line-1 { font-size: .26em; }
.hero-bubble .bubble-line-2 { font-size: .3em; }

/* Dekorációs formák */
.hero-shape {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

/* A bal oldali dekorációk a szövegoszlophoz tartoznak — a bal széltől mérve. */
.hero-shape.shape-diamond-1 { left: 404px;  top: 27px;  width: 34px; }
.hero-shape.shape-diamond-3 { left: 84px;   top: 542px; width: 30px; }
.hero-shape.shape-wave-2    { left: 314px;  top: 512px; width: 176px; }

/*
 * A másik kettő viszont a fotó mellé van tervezve (a rombusz a haja fölé, a
 * hullám a keze mellé), ezért — a buborékhoz hasonlóan — a képhez kötjük.
 * A terven a fotó bal szélétől: rombusz 319px, hullám 360px.
 */
.hero-shape.shape-diamond-2 {
    right: calc(var(--hero-fig-w) - 355 * var(--hero-u));
    top: calc(var(--hero-fig-top) + 119 * var(--hero-u));
    width: calc(36 * var(--hero-u));
}

.hero-shape.shape-wave-1 {
    right: calc(var(--hero-fig-w) - 478 * var(--hero-u));
    top: calc(var(--hero-fig-top) + 237 * var(--hero-u));
    width: calc(118 * var(--hero-u));
}


/*=====================================================
14. About
=====================================================*/
.about-area {
    padding-block: 152px;
}

.about-wrap {
    display: grid;
    grid-template-columns: 536px 1fr;
    gap: 62px;
    align-items: center;
}

/*
 * Grid-elem alapértelmezett minimális mérete a min-content / az aspect-ratióból
 * átvitt méret — enélkül a galéria szétfeszíti az oszlopot kis kijelzőn.
 */
.about-wrap > *,
.cta-wrap > *,
.blog-wrap > *,
.video-feature-list > *,
.footer-wrap > *,
.footer-links > * {
    min-width: 0;
}

/*
 * A képkollázs százalékosan van pozicionálva (a terv px-értékeiből számolva),
 * így kisebb kijelzőn arányosan zsugorodik, nem esik szét.
 */
.about-gallery {
    position: relative;
    width: 100%;
    aspect-ratio: 536 / 453;
}

.about-gallery img {
    position: absolute;
}

/* Alap (2. blokk): fő kép jobbra, a két kicsi balra — 536×453 rácson */
.about-gallery .about-img-main { left: 43.28%; top: 0;      width: 56.72%; }
.about-gallery .about-img-1    { left: 0;      top: 17.22%; width: 39.18%; }
.about-gallery .about-img-2    { left: 13.43%; top: 54.75%; width: 36.94%; z-index: 2; }

/* Tükrözött (1. blokk): szöveg balra, fő kép balra a galérián belül — 538×451 */
.about-mirror .about-wrap {
    grid-template-columns: 1fr 538px;
}

.about-mirror .about-gallery {
    order: 2;
    width: 100%;
    aspect-ratio: 538 / 451;
}

.about-mirror .about-gallery .about-img-main { left: 0;      top: 0;      width: 57.06%; }
.about-mirror .about-gallery .about-img-1    { left: 60.97%; top: 18.63%; width: 39.03%; }
.about-mirror .about-gallery .about-img-2    { left: 49.44%; top: 54.99%; width: 36.99%; z-index: 2; }

.about-content .site-title-tagline {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-color);
    margin-bottom: 10px;
}

.about-content h2 {
    margin-bottom: 26px;
}

.about-content .about-lead {
    font-size: 16px;
    line-height: 27px;
    margin-bottom: 24px;
}

.about-large .about-content .about-lead {
    font-size: 20px;
    line-height: 36px;
}

.about-content .about-text {
    font-size: 16px;
    line-height: 27px;
    margin-bottom: 28px;
}


/*=====================================================
15. Event (hamarosan induló képzések)
=====================================================*/
/*
 * A szekciónak csak a KERETE saját: a fejléc, a térközök és a záró link. A
 * kártyasor a 18. szakasz `.course-slider` / `.course-card` szabályaival megy,
 * mert ugyanaz a komponens rendereli, mint a programozó/marketing sávokat
 * (l. `guest/partials/home/event.blade.php`).
 */
.event-area {
    padding-bottom: 0;
}

.event-area .site-title {
    font-size: 34px;
    line-height: 44px;
}

.event-area .site-heading {
    margin-bottom: 39px;
}

.event-area .event-footer {
    text-align: center;
    margin-top: 40px;
}


/*=====================================================
16. Kurzus tabok
=====================================================*/
.course-area {
    background: var(--section-bg);
    padding-block: 40px;
}

.course-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 42px;
}

.course-head .site-heading {
    margin-bottom: 0;
}

.course-tabs-toggle {
    display: none;
}

/*
 * A hézag azért 50px és nem a terv 24px-e, mert a fülek MÁS modell szerint
 * méreteződnek, mint a Figmában: ott a feliratok fix, ~100px-es oszlopokban
 * ülnek középre zárva, itt viszont a saját szövegükre húzódnak össze (lásd a
 * gomb szabályát alább). Az 50px-es hézag adja vissza ugyanazt a sorszélességet
 * és jobb szélt, ami az oszlopos modellből jött — a feliratok között mért
 * távolság így marad a terv szerinti.
 */
.course-tabs {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

/*
 * A fül két rétegű: a GOMB a kattintható felület, a benne lévő SPAN pedig a
 * feliratra húzódik rá. Erre azért van szükség, mert az aktív fül fehér doboza
 * a FELIRATOT fogja körbe — ha a gomb dobozát fogná, a rövidebb feliratok
 * (`Tantermi képzések` 60px) körül jócskán túlméretes lenne.
 */
.course-tabs button {
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--heading-color);
    text-align: center;
    padding: 8px 0;
    max-width: 100px;
    transition: var(--transition);
}

/*
 * `min-content`: a felirat dobozának szélessége a leghosszabb SZAVA — pont a
 * megtördelt sorok szélessége. (Ezért kell a partialban a nem törhető kötőjel:
 * anélkül a kötőjel is töréspont lenne, és az „E-learning” külön sorba esne.)
 *
 * Ez a gomb belső méretére is visszahat, ezért a gomb a `max-width`-nél
 * keskenyebb lehet — a fülsor ritmusát a fenti `gap` tartja.
 */
.course-tabs button > span {
    position: relative;
    z-index: 0;
    width: min-content;
}

/*
 * Az aktív fül fehér doboza CSAK dekoráció: pszeudoelemként rajzoljuk, a felirat
 * dobozán kívülre nyúlva (a terven mérve 18px oldalt, 9px fent-lent).
 *
 * Ha a paddinget magára a gombra tennénk (ahogy korábban), a fül kattintáskor
 * megnőne, a szűk `max-width` miatt más sorszámra tördelné a saját szövegét, és
 * az egész fülsor odébb ugrana. Így viszont a sor elrendezése független attól,
 * melyik fül aktív.
 *
 * A span `z-index: 0`-val saját rétegkontextust nyit, ezért a `-1` a felirat
 * mögé kerül, de nem esik a szekció háttere mögé.
 */
.course-tabs button.active {
    color: var(--heading-color);
}

.course-tabs button.active > span::before {
    content: '';
    position: absolute;
    inset: -9px -18px;
    z-index: -1;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
}

.course-tabs button:hover {
    color: var(--theme-color);
}

/* Rács: lásd 27. Kártyarácsok */
.course-grid {
    --cols: 4;
    --col-gap: 30px;
    gap: var(--col-gap);
    max-width: 1092px;
    margin-inline: auto;
}

.course-tile {
    position: relative;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: var(--transition);
}

.course-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/*
 * A csempe teljes felülete kattintható: a címlink egy áttetsző ::after-rel
 * lefedi a kártyát (kép + szöveg + gombsáv). Így egyetlen, beszédes nevű link
 * viszi az egész felületet — a „Tudj meg többet +" gomb csak a saját rétegében
 * marad fölötte, hogy a hover-állapota megmaradjon.
 */
.course-tile .course-tile-body h5 a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.course-tile .course-tile-btn {
    position: relative;
    z-index: 2;
}

/*
 * A kinyújtott ::after miatt a csempe bármely pontja fölé érve a CÍMLINK kerül
 * :hover-be — a gombsáv fölött viszont nem, mert a gomb testvérelem, és a saját
 * rétegében fölötte van. A globális `a:hover { color: var(--theme-color) }` így
 * oda-vissza villogtatná a címet, ahogy az egér a képről a gombra ér. A cím
 * színe ezért fix marad; a hover-visszajelzést a csempe emelkedése adja.
 */
.course-tile .course-tile-body h5 a:hover {
    color: inherit;
}

.course-tile .course-tile-img {
    aspect-ratio: 251 / 152;
    overflow: hidden;
}

.course-tile .course-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-tile .course-tile-body {
    flex: 1;
    padding: 17px 16px 19px;
}

.course-tile .course-tile-body h5 {
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
    color: var(--heading-color);
    margin: 0;
}

.course-tile .course-tile-btn {
    display: block;
    background: var(--theme-color2);
    color: var(--color-white);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding: 14px 10px;
}

.course-tile .course-tile-btn:hover {
    background: var(--theme-color2-hover);
    color: var(--color-white);
}

.course-area .course-footer {
    text-align: center;
    margin-top: 35px;
}


/*=====================================================
17. Készségteszt CTA
=====================================================*/
.skill-test-area {
    padding-block: 145px 0;
    background: var(--color-white);
}

.skill-test-area .site-heading {
    margin-bottom: 62px;
}

.skill-test-box {
    background: var(--section-bg);
    padding: 48px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.skill-test-box .skill-test-tagline {
    display: block;
    font-size: 17px;
    color: var(--theme-color);
    margin-bottom: 12px;
}

.skill-test-box h4 {
    font-size: 20px;
    line-height: 30px;
    color: var(--body-text);
    max-width: 400px;
    margin: 0;
}

.skill-test-box .theme-btn {
    flex: 0 0 auto;
    padding: 19px 56px;
}

/*
 * Üres programozó kategória: a slider szekció ilyenkor ki sem íródik (lásd a
 * partial @if-jét), így a videó blokk közvetlenül a készségteszt alá kerül.
 * A videó teljes szélességű és nincs saját felső térköze — azt mindig a fölötte
 * álló szekció adja —, ezért a készségteszt veszi át a programozó blokk 221px-es
 * alsó térközét, különben a két blokk összecsúszik.
 */
.skill-test-area:has(+ .video-feature-area) {
    padding-bottom: 221px;
}


/*=====================================================
18. Kurzus kártya slider (programozó / marketing)
=====================================================*/
/*
 * A két kártyás slider szekció a terven kissé eltérő ritmusú, ezért külön
 * értékeket kap (a .docs/design-plans/Főoldal.png-ről mérve).
 */
.programming-area { padding-block: 147px 221px; }
.marketing-area   { padding-block: 139px 0; }

.programming-area .site-heading { margin-bottom: 114px; }
.marketing-area .site-heading   { margin-bottom: 113px; }

/*
 * A vállalati és a tantermi szekció NINCS a terven — a megrendelő kezdőlap-
 * szövegeivel együtt került be, a videós blokk, illetve a vélemények után.
 * A ritmust a szomszédjaiktól veszik át (felső térköz 153px, alsó 0 — a
 * következő szekció adja a térközt, lásd a 17. szakasz megjegyzését).
 */
.corporate-area,
.classroom-area { padding-block: 153px 0; }

/*
 * A cím alatti térköz kisebb, mint a programozó/marketing blokké: ott egy rövid
 * mondat áll a cím alatt, itt 3–5 bekezdésnyi szöveg, amit a 113px elszakítana
 * a kártyáktól.
 */
.corporate-area .site-heading,
.classroom-area .site-heading { margin-bottom: 70px; }

/* Üres kategória: a kártyasor elmarad, így a cím alatti térköz sem kell. */
.corporate-area .site-heading:last-child,
.classroom-area .site-heading:last-child { margin-bottom: 0; }

.course-slider-wrap {
    position: relative;
    max-width: 1035px;
    margin-inline: auto;
}

/* Rács: lásd 27. Kártyarácsok */
.course-slider {
    --cols: 3;
    --col-gap: 75px;
    gap: var(--col-gap);
}

.course-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: var(--transition);
}

.course-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

.course-card .course-card-img {
    aspect-ratio: 295 / 235;
    overflow: hidden;
}

.course-card .course-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-card .course-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 17px 18px 0;
}

/*
 * A címkeblokk mindig két sornyi helyet foglal — ennyi a terven is. Fenntartva
 * akkor is, ha csak egy sornyi címke van: enélkül a kevesebb címkés kártyán a
 * cím 32px-cel feljebb kezdődne, mint a szomszédján, és a sáv „lépcsőzne".
 *
 * Az `align-content: flex-start` azért kell, mert a `min-height` miatt marad
 * szabad hely: alapértelmezésben (`stretch`) a tördelt sor — és vele a pirulák —
 * felnyúlnának a teljes 55px-re.
 */
.course-card .course-tags {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 9px;
    min-height: 55px;
    margin-bottom: 15px;
}

.course-card .course-tags a {
    background: #FDF3E3;
    color: var(--muted-text);
    font-size: 11px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
}

.course-card .course-tags a:hover {
    color: var(--theme-color);
}

.course-card h5 {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    color: var(--heading-color);
    margin-bottom: 7px;
}

.course-card .course-card-text {
    font-size: 12px;
    line-height: 15px;
    color: var(--body-text);
    margin-bottom: 24px;
}

/*
 * A `padding-left` / `margin-bottom` nullázása a Bootstrap `ol, ul` szabályát
 * üti (padding-left: 2rem; margin-bottom: 1rem) — az a `*`-os resetnél
 * erősebb, ezért él. Enélkül az időtartam/ár sor és a záró vonal 32px-cel
 * bentebb kezdődne, mint a cím.
 *
 * A `margin-top: auto` a blokkot a kártya aljára húzza. A sávban a kártyák
 * egyforma magasak, így a záró vonal — és alatta a „Tudj meg többet" — minden
 * kártyán egy vonalba esik, akármilyen hosszú fölötte a cím vagy a leírás.
 */
.course-card .course-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 0;
    margin-top: auto;
    margin-bottom: 0;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--border-color);
}

.course-card .course-meta li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--body-text);
}

.course-card .course-meta i {
    color: var(--theme-color2);
    font-size: 16px;
    width: 18px;
    text-align: center;
}

.course-card .course-card-footer {
    padding: 24px 18px 32px;
}

.course-card .course-card-footer a {
    font-size: 17px;
    color: var(--theme-color);
}


/*=====================================================
19. Videó + feature
=====================================================*/
.video-feature-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 455px;
}

.video-feature-video {
    position: relative;
    overflow: hidden;
}

.video-feature-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * A terven ez NEM tömör korong: 54px-es narancs karika (4px vonal), üres
 * belsővel — a poszter átlátszik rajta —, benne a narancs háromszög.
 * (Mérve a Főoldal.png-ről: külső átmérő 54, vonal 4, háromszög ~10×10 px.)
 */
.video-feature-video .play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 4px solid var(--accent-red);
    background: transparent;
    color: var(--accent-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding-left: 3px;
    transition: var(--transition);
}

.video-feature-video .play-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
    color: var(--accent-red);
}

.video-feature-list {
    background: var(--theme-color2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px 44px;
    align-content: center;
    padding: 76px 26px 76px 44px;
}

/*
 * A terven az ikon a szövegblokk FÜGGŐLEGES KÖZEPÉN áll, nem a tetején.
 * A 14px-es rés a terv méretéből jön (ikon jobb széle 822 → szöveg 837).
 */
.feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

/*
 * Nincs narancs kör: a terv saját ikonrajza áll itt, és maga a rajz narancs
 * (`public/guest-assets/img/feature/*.svg`, mind 59×55-ös viewBoxszal).
 * A fix méret kell: enélkül a flex-sor a szöveg magasságára feszítené.
 */
.feature-item .feature-icon {
    flex: 0 0 auto;
    width: 59px;
    height: 55px;
}

.feature-item .feature-icon img {
    width: 100%;
    height: 100%;
}

.feature-item h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 8px;
}

.feature-item p {
    font-size: 13px;
    line-height: 19px;
    color: var(--color-white);
    margin: 0;
}


/*=====================================================
20. Dupla CTA
=====================================================*/
.cta-area {
    padding-block: 153px 0;
}

.cta-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.cta-card {
    position: relative;
    background: var(--section-bg);
    border-radius: 10px;
    min-height: 320px;
    padding: 75px 40px 75px 38px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*
     * A figura természetes szélessége, és azon belül a tömör (nem áttetsző)
     * tartalom bal széle — lásd a .cta-figure és a .cta-card p szabályt.
     */
    --cta-figure-w: 306;
    --cta-figure-solid: 36;
}

.cta-card-career {
    --cta-figure-w: 332;
    --cta-figure-solid: 96;
}

.cta-card h3 {
    font-size: 26px;
    color: var(--heading-color);
    margin-bottom: 18px;
}

/*
 * A terven a bekezdés 270px széles. Keskenyedő kártyán viszont a figura
 * zsugorodik, a betűméret nem — fix 270px-szel a sorvégek ráfutnának az
 * alakra. A második korlát ezért a kártyához köti a szöveget: pont addig
 * ér, ameddig a figura tömör része kezdődik. 582px-es kártyánál a két érték
 * egybeesik, tehát a terv méretén nem változik semmi.
 */
.cta-card p {
    max-width: min(
        270px,
        calc((582 - var(--cta-figure-w) + var(--cta-figure-solid)) / 582 * 100%)
    );
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 24px;
}

.cta-card .theme-btn {
    align-self: flex-start;
    font-size: 13px;
    padding: 13px 22px;
}

/*
 * A terven a figura természetes méretben, a kártya jobb alsó sarkához igazítva
 * ül — a PNG áttetsző kerete hordozza a pontos pozíciót, ezért a kép nincs
 * körbevágva. 582px széles kártyánál ez pont a natív méret (306, ill. 332px).
 *
 * A százalék azért kell, mert a kártya 1244px alatt már keskenyedik: fix
 * szélességgel a figura pár tíz pixellel odébb ráfutna a bekezdésre.
 */
.cta-card .cta-figure {
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(var(--cta-figure-w) / 582 * 100%);
    max-width: calc(var(--cta-figure-w) * 1px);
    height: auto;
    pointer-events: none;
}


/*=====================================================
21. Vélemények
=====================================================*/
.testimonial-area {
    padding-block: 110px 0;
}

.testimonial-area .site-heading {
    margin-bottom: 74px;
}

/* Rács: lásd 27. Kártyarácsok */
.testimonial-grid {
    --cols: 3;
    --col-gap: 53px;
    gap: var(--col-gap);
}

.testimonial-item {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 59px 22px 22px;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
}

.testimonial-item .testimonial-avatar {
    position: absolute;
    left: 22px;
    top: -32px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: #DCEBFA;
}

.testimonial-item .testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-item .testimonial-text {
    position: relative;
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 18px;
}

.testimonial-item .testimonial-quote {
    position: absolute;
    right: 0;
    bottom: -4px;
    color: #A9E0BE;
    font-size: 16px;
}

/*
 * Ugyanaz az elv, mint az esemény-kártyánál: a különböző hosszúságú idézetek
 * mellett a név + pozíció pár a kártya aljára tapad, így a sorban egy vonalban
 * vannak, és nem a kártya alján gyűlik össze az üres hely.
 */
.testimonial-item .testimonial-name {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 15px;
    margin-top: auto;
}

.testimonial-item .testimonial-role {
    font-size: 14px;
    line-height: 20px;
    color: var(--body-text);
}


/*=====================================================
22. Blog + események
=====================================================*/
.blog-area {
    padding-block: 153px 0;
}

.blog-area .site-heading {
    margin-bottom: 42px;
}

.blog-wrap {
    display: grid;
    grid-template-columns: 1fr 425px;
    gap: 55px;
}

.blog-list {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.blog-item {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 22px;
    align-items: center;
}

.blog-item.blog-item-reverse .blog-thumb {
    order: 2;
}

.blog-item .blog-thumb {
    background: #FBEFF6;
    aspect-ratio: 250 / 205;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.blog-item .blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-item .blog-meta {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 13px;
    color: var(--body-text);
    margin-bottom: 14px;
}

.blog-item .blog-meta span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.blog-item .blog-meta i {
    font-size: 14px;
}

.blog-item h4 {
    font-size: 22px;
    line-height: 30px;
    color: var(--body-text);
    font-weight: 500;
    margin-bottom: 22px;
}

.blog-item .theme-btn {
    font-size: 13px;
    padding: 13px 22px;
}

/* Esemény lista */
.event-list {
    display: flex;
    flex-direction: column;
    gap: 41px;
}

.event-row {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 26px;
    align-items: center;
}

.event-row .date-badge {
    height: 78px;
    background: var(--theme-color);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.event-row:nth-child(even) .date-badge {
    background: var(--theme-color2);
}

.event-row .date-badge .date-month {
    font-size: 14px;
    margin-bottom: 4px;
}

.event-row .date-badge .date-day {
    font-size: 30px;
    font-weight: 500;
}

.event-row .event-row-tagline {
    display: block;
    font-size: 13px;
    color: var(--body-text);
    margin-bottom: 6px;
}

.event-row h5 {
    font-size: 19px;
    line-height: 25px;
    font-weight: 500;
    color: var(--body-text);
    margin: 0;
}


/*=====================================================
23. Hírlevél
=====================================================*/
/*
 * A hírlevél-doboz feletti térköz oldalanként eltér a terven, ezért változó.
 * Az aloldalakon (.page-sub) a szekciók maguk viszik a térközt.
 */
.newsletter-area {
    padding-block: var(--newsletter-gap, 106px) 0;
}

.page-sub { --newsletter-gap: 0; }

.newsletter-box {
    background: var(--theme-color2);
    border-radius: var(--radius-md);
    padding: 54px 55px 54px 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.newsletter-box .newsletter-title {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--color-white);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}

.newsletter-box .newsletter-title i {
    color: var(--theme-color);
    font-size: 32px;
}

/* Az űrlap csak keret a doboz körül — a méreteket a doboz és a sor viszi. */
.newsletter-row {
    display: flex;
    flex: 0 0 auto;
    width: 458px;
    max-width: 100%;
}

.newsletter-row input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 0;
    background: var(--color-white);
    padding: 0 20px;
    font-size: 15px;
}

.newsletter-row input::placeholder {
    color: #9A9AA1;
}

.newsletter-row button {
    width: 110px;
    background: var(--theme-color);
    color: var(--color-white);
    font-size: 15px;
    font-weight: 700;
    transition: var(--transition);
}

.newsletter-row button:hover {
    background: var(--theme-color-hover);
}

/* Az adatkezelési hozzájárulás a doboz alatt, a hibaüzenet sávja felett. */
.newsletter-consent {
    margin-top: 16px;
    font-size: 13px;
    line-height: 19px;
}


/*=====================================================
24. Footer
=====================================================*/
.footer-area {
    background: var(--color-white);
    padding-top: 95px;
}

.footer-wrap {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 55px;
}

.footer-about .footer-logo {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 18px;
}

.footer-about .footer-logo-mark {
    position: relative;
    width: 74px;
    height: 62px;
    background: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-about .footer-logo-mark::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 9px;
    height: 6px;
    background: var(--theme-color);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* A tervbeli lábléc-badge rajza 40 px magas (a fejléc 108 px-éhez képest). */
.footer-about .footer-logo-mark img {
    max-height: 40px;
    width: auto;
}

.footer-about .footer-logo-text {
    font-size: 17px;
    line-height: 22px;
    color: var(--body-text);
}

.footer-about .footer-desc {
    font-size: 16px;
    line-height: 20px;
    color: var(--body-text);
    margin-bottom: 20px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    font-size: 14px;
    line-height: 21px;
    font-weight: 700;
    color: var(--heading-color);
}

.footer-contact i {
    color: var(--theme-color);
    font-size: 18px;
    width: 20px;
    text-align: center;
    flex: 0 0 auto;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-left: 36px;
}

.footer-social a {
    color: var(--theme-color);
    font-size: 18px;
}

.footer-social a:hover {
    color: var(--theme-color-hover);
}

/* Linkoszlopok */
.footer-links {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1.2fr;
    gap: 0 84px;
    padding-top: 26px;
}

.footer-widget h5 {
    position: relative;
    display: inline-block;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 14px;
}

.footer-widget h5::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 60%;
    height: 2px;
    background: var(--theme-color);
}

.footer-widget + .footer-widget-stacked {
    margin-top: 34px;
}

.footer-widget-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-widget-list.footer-widget-list-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 40px;
}

.footer-widget-list a {
    position: relative;
    display: block;
    padding-left: 16px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 700;
    color: var(--heading-color);
}

.footer-widget-list a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background: var(--theme-color);
}

.footer-widget-list a:hover {
    color: var(--theme-color);
}

/*
 * Az oszlop záró sora: a kategória gyűjtőoldalára visz, nem egy képzésre.
 * Ezért kiemelő SZÍNT kap — a megamenü ugyanezt a sort félkövérrel emeli ki
 * (`.mega-menu-all`), itt viszont a képzéslinkek eleve 700-asok, tehát a
 * vastagítás nem látszana meg rajta.
 *
 * A hover fordítva jár, mint a listán: az alapszín már a kiemelő szín, ezért
 * ott a címszín adja a visszajelzést. A `:hover` szabály azonos fajsúlyú az
 * általános `.footer-widget-list a:hover`-rel (0,2,1), tehát KÉSŐBB kell
 * állnia — ez a sorrend nem cserélhető fel.
 */
.footer-widget-list .footer-widget-all {
    color: var(--theme-color);
}

.footer-widget-list .footer-widget-all:hover {
    color: var(--heading-color);
}

/*
 * A kéthasábos oszlopban a záró sor a TELJES szélességet átéri: a rács
 * sorfolytonosan tölt (`grid-auto-flow: row`), tehát enélkül a bal hasáb aljára
 * kerülne, mellette üres cellával — a gyűjtőlink pedig mindkét hasáb képzéseire
 * vonatkozik, nem csak a balra.
 */
.footer-widget-list.footer-widget-list-2col .footer-widget-all {
    grid-column: 1 / -1;
}

.footer-widget-toggle {
    display: none;
}

/* Alsó sáv */
.footer-bottom {
    margin-top: 112px;
    padding-block: 26px 36px;
}

.footer-bottom-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-bottom p {
    font-size: 14px;
    font-weight: 700;
    color: var(--heading-color);
    margin: 0;
}

.footer-bottom-nav {
    display: flex;
    align-items: center;
    gap: 56px;
    margin-right: 69px;
}

.footer-bottom-nav a {
    font-size: 14px;
    font-weight: 700;
    color: var(--heading-color);
}


/*=====================================================
25. Breadcrumb (aloldal fejléc)
=====================================================*/
.breadcrumb-area {
    position: relative;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.breadcrumb-area img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.breadcrumb-area::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(33, 58, 37, .12);
}

.breadcrumb-area .container {
    position: relative;
    z-index: 2;
    text-shadow: 0px 0px 10px var(--heading-color);
}

.breadcrumb-area h1 {
    color: var(--color-white);
    font-size: 44px;
    line-height: 54px;
    margin-bottom: 6px;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-white);
}

.breadcrumb-nav .active {
    color: var(--color-white);
}

/* A menta hátterű aloldalak (Kapcsolat, Blog, Karrier, Miért jó velünk tanulni?) */
.page-mint,
.page-mint .footer-area {
    background: var(--page-mint);
}

/* A „Miért jó velünk tanulni?" oldalon az about blokk szorosabban ül */
.page-about .about-area {
    padding-block: 90px 112px;
}

.page-about .counter-area {
    padding-block: 0 112px;
}


/*=====================================================
28. Kurzusaink aloldal
=====================================================*/
.course-list-area {
    --container-w: 1121px;
    padding-block: 62px 62px;
}

.course-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
    margin-bottom: 66px;
}

/* A szűrők szerveroldalra kötöttek, ezért linkek — a gomb-alak a régi markupé. */
.course-filters button,
.course-filters a {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    color: var(--heading-color);
    transition: var(--transition);
}

.course-filters button.active,
.course-filters button:hover,
.course-filters a.active,
.course-filters a:hover {
    color: var(--theme-color);
}

/*
 * Főkategória-szekciók. A terven minden képzési forma saját listát kap, ezért
 * a lista alatti térköz nem a szekcióterületé, hanem a szekciók KÖZÖTTI hézag.
 */
.course-section + .course-section {
    margin-top: 84px;
}

/* A lapozó- és fülsor-linkek horgonyra visznek — a fix fejléc alá ne csússzon. */
.course-section {
    scroll-margin-top: calc(var(--header-nav-h) + 20px);
}

/*
 * A cím két oldalán vízszintes vonal fut a container széléig. A vonalat a
 * pszeudoelemek adják, a felirat pedig egy `span`-ben ül — így a vonal a
 * SZÖVEGHEZ simul, nem egy fix szélességű oszlophoz, és többsoros címnél sem
 * csúszik el.
 */
.course-section-title {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 32px;
}

.course-section-title::before,
.course-section-title::after {
    content: '';
    flex: 1 1 0;
    height: 1px;
    background: var(--border-color);
}

.course-section-title > span {
    text-align: center;
}

/*
 * Szakterület-fülsor. A `flex: 1 1 auto` miatt a pirulák a feliratuk arányában
 * töltik ki a sort — a terven a sáv a container két széléig ér —, tördeléskor
 * viszont az utolsó sor is rendben marad.
 */
.course-subfilters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 38px;
}

.course-subfilters a {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: var(--heading-color);
    background: var(--color-white);
    border: 1px solid var(--border-color);
    padding: 11px 14px;
    transition: var(--transition);
}

.course-subfilters a:hover {
    border-color: var(--theme-color);
    color: var(--theme-color);
}

.course-subfilters a.active {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--color-white);
}

/* Rács: lásd 27. Kártyarácsok */
.course-list-grid {
    --cols: 3;
    --col-gap: 43px;
    gap: 33px var(--col-gap);
}

.course-list-card {
    background: var(--color-white);
    border: 1px solid #E6E6E8;
    padding: 26px;
    transition: var(--transition);
}

.course-list-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

.course-list-card .course-list-img {
    aspect-ratio: 291 / 181;
    overflow: hidden;
    margin-bottom: 12px;
}

.course-list-card .course-list-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-list-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.course-list-meta .course-price {
    background: var(--theme-color);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 7px 10px;
}

.course-list-meta .course-category {
    font-size: 14px;
    color: var(--body-text);
}

.course-list-card h3 {
    font-size: 21px;
    line-height: 28px;
    margin-bottom: 22px;
}

.course-list-footer {
    display: flex;
    align-items: center;
    gap: 22px;
}

.course-list-footer .course-students,
.course-list-footer .course-duration,
.course-list-footer .course-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--heading-color);
}

.course-list-footer i {
    color: var(--theme-color);
    font-size: 14px;
}

.course-list-footer .course-rating span {
    color: var(--body-text);
    font-weight: 400;
}

.course-list-footer .course-link {
    margin-left: auto;
    width: 44px;
    height: 32px;
    border: 1px solid #D8D8DA;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--heading-color);
}

.course-list-footer .course-link i {
    color: var(--heading-color);
}

.course-list-footer .course-link:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--heading-color);
}

/* Lapozó */
.pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: 66px;
}

.pagination-wrap ul {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    padding: 8px 26px;
}

.pagination-wrap a,
.pagination-wrap span {
    font-size: 16px;
    color: var(--heading-color);
}

.pagination-wrap .active {
    color: var(--theme-color);
}

.pagination-wrap .dot {
    color: var(--theme-color);
    font-size: 10px;
}


/*=====================================================
29. GYIK aloldal
=====================================================*/
.faq-area {
    --container-w: 1188px;
    padding-block: 106px 119px;
}

.faq-group + .faq-group {
    margin-top: 72px;
}

.faq-group > h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #4A4F5C;
    margin-bottom: 22px;
}

.faq-item + .faq-item {
    margin-top: 24px;
}

/* Nyitott elem után a következő közvetlenül csatlakozik — így van a terven */
.faq-item.open + .faq-item {
    margin-top: 0;
}

.faq-item .faq-question {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 12px 20px;
    background: #FFEDD1;
    color: var(--body-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
    transition: var(--transition);
}

.faq-item.open .faq-question,
.faq-item .faq-question:hover {
    background: var(--theme-color);
    color: var(--color-white);
}

.faq-item .faq-answer {
    display: none;
    background: var(--color-white);
    padding: 36px 20px;
    font-size: 15px;
    font-weight: 700;
    line-height: 21px;
    color: var(--body-text);
}

.faq-item.open .faq-answer {
    display: block;
}


/*=====================================================
30. Kapcsolat aloldal
=====================================================*/
.contact-info-area {
    --container-w: 1052px;
    padding-block: 80px 76px;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 43px;
}

.contact-info-card {
    background: #EEEEEE;
    min-height: 150px;
    padding: 30px 26px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.contact-info-card .contact-icon {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border: 2px solid var(--theme-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-color);
    font-size: 22px;
}

.contact-info-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 4px;
}

.contact-info-card p {
    font-size: 16px;
    line-height: 22px;
    color: var(--body-text);
    margin: 0;
}

.contact-main-area {
    --container-w: 1052px;
    padding-bottom: 40px;
}

.contact-main-wrap {
    display: grid;
    grid-template-columns: 438px 1fr;
    gap: 40px;
    align-items: stretch;
}

.contact-map {
    min-height: 630px;
    overflow: hidden;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 630px;
    border: 0;
    display: block;
}

.contact-form-panel {
    background: #EEEEEE;
    padding: 44px 21px;
}

.contact-form-intro {
    padding-inline: 15px;
    margin-bottom: 34px;
}

.contact-form-intro h2 {
    font-size: 34px;
    margin-bottom: 22px;
}

.contact-form-intro p {
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 19px 37px;
}

.contact-form .field-full {
    grid-column: 1 / -1;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    background: var(--color-white);
    border: 0;
    padding: 16px 15px;
    font-size: 15px;
    letter-spacing: .4px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #9A9AA1;
}

.contact-form textarea {
    min-height: 100px;
    resize: vertical;
}

.contact-form button {
    grid-column: 1 / -1;
    background: var(--theme-color);
    color: var(--color-white);
    font-size: 15px;
    font-weight: 700;
    padding: 14px;
    transition: var(--transition);
}

.contact-form button:hover {
    background: var(--theme-color-hover);
}


/*=====================================================
31. Bejegyzéslista + oldalsáv (Blog, Karrier)
=====================================================*/
.post-list-area {
    --container-w: 1188px;
    padding-block: 86px 533px;
}

.post-list-wrap {
    display: grid;
    grid-template-columns: 706px 1fr;
    gap: 62px;
    align-items: start;
}

.post-list {
    display: flex;
    flex-direction: column;
    gap: 63px;
}

.post-card {
    background: var(--color-white);
}

.post-card .post-thumb {
    aspect-ratio: 706 / 432;
    overflow: hidden;
}

.post-card .post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card .post-body {
    padding: 28px 28px 54px;
}

.post-card h2 {
    font-size: 21px;
    line-height: 28px;
    margin-bottom: 10px;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-bottom: 20px;
}

.post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--body-text);
}

.post-meta i {
    color: var(--theme-color);
    font-size: 14px;
}

.post-card .post-excerpt {
    position: relative;
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 24px;
    max-height: 75px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.post-card .post-more {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-size: 16px;
    font-weight: 700;
    color: var(--heading-color);
}

.post-card .post-more:hover {
    gap: 24px;
    color: var(--theme-color);
}

/* Oldalsáv */
.post-sidebar {
    display: flex;
    flex-direction: column;
    gap: 46px;
}

.sidebar-widget {
    background: var(--color-white);
    padding: 24px;
}

.sidebar-search {
    position: relative;
}

.sidebar-search input {
    width: 100%;
    height: 56px;
    border: 1px solid #E6E6E8;
    padding: 0 52px 0 20px;
    font-size: 16px;
}

.sidebar-search button {
    position: absolute;
    right: 12px;
    top: 0;
    height: 56px;
    color: var(--heading-color);
    font-size: 18px;
}

.sidebar-widget > h2 {
    position: relative;
    display: inline-block;
    font-size: 21px;
    margin-bottom: 26px;
}

.sidebar-widget > h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: var(--theme-color);
}

.sidebar-recent {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-recent-item {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 18px;
    align-items: start;
}

.sidebar-recent-item img {
    width: 100%;
    aspect-ratio: 74 / 58;
    object-fit: cover;
}

.sidebar-recent-item h3 {
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 6px;
}

.sidebar-recent-item .post-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--body-text);
}

.sidebar-recent-item .post-date i {
    color: var(--theme-color);
}

.sidebar-archive {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sidebar-archive a {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-left: 18px;
    font-size: 16px;
    color: var(--body-text);
}

.sidebar-archive i {
    color: var(--theme-color);
    font-size: 13px;
}

.sidebar-archive a:hover {
    color: var(--theme-color);
}

/* Meta widget — vízszintes elválasztókkal */
.sidebar-meta {
    display: flex;
    flex-direction: column;
}

.sidebar-meta a {
    padding: 14px 0;
    border-top: 1px solid #E6E6E8;
    font-size: 16px;
    color: var(--body-text);
}

.sidebar-meta a:last-child {
    border-bottom: 1px solid #E6E6E8;
}

.sidebar-meta a:hover {
    color: var(--theme-color);
}


/*=====================================================
32. „Miért jó velünk tanulni?" aloldal
=====================================================*/
.counter-area {
    --container-w: 1052px;
    padding-bottom: 112px;
}

.counter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px;
}

.counter-box {
    min-height: 210px;
    background: var(--theme-color2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.counter-box:nth-child(even) {
    background: var(--theme-color);
}

.counter-box .counter-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--theme-color);
}

.counter-box .counter-value span {
    font-size: 22px;
    margin-left: 8px;
}

.counter-box .counter-label {
    font-size: 16px;
    color: var(--theme-color);
}

.counter-box:nth-child(even) .counter-value,
.counter-box:nth-child(even) .counter-label {
    color: var(--theme-color2);
}

/* Oktatói CTA a videó mellett */
.teacher-cta-panel {
    background: var(--theme-color2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 60px 70px 70px;
}

.teacher-cta-panel h2 {
    color: var(--theme-color);
    font-size: 34px;
    margin-bottom: 22px;
}

.teacher-cta-panel h3 {
    color: var(--color-white);
    font-size: 20px;
    margin-bottom: 18px;
}

.teacher-cta-panel p {
    color: var(--color-white);
    font-size: 15px;
    font-weight: 700;
    line-height: 23px;
    margin-bottom: 26px;
}

.teacher-cta-panel .theme-btn {
    align-self: flex-start;
}

/* Történetünk */
.story-area {
    --container-w: 1112px;
    padding-block: 123px 90px;
}

.story-wrap {
    display: grid;
    grid-template-columns: 543px 422px;
    gap: 147px;
    align-items: start;
}

.story-figure {
    position: relative;
}

.story-figure > img {
    width: 457px;
    max-width: 100%;
    aspect-ratio: 457 / 466;
    object-fit: cover;
}

.story-tabs {
    position: absolute;
    right: 0;
    top: 41px;
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.story-tab {
    width: 172px;
    height: 114px;
    background: var(--theme-color2);
    color: var(--theme-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 700;
    transition: var(--transition);
}

.story-tab i {
    font-size: 20px;
}

.story-tab.active {
    background: var(--theme-color);
    color: var(--color-white);
}

.story-content h2 {
    margin-bottom: 15px;
}

.story-content p {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 30px;
}

.story-content img {
    width: 100%;
    aspect-ratio: 422 / 284;
    object-fit: cover;
}

/* Oktatóink */
.teachers-area {
    --container-w: 1129px;
    background: #EEEEEE;
    padding-block: 70px 51px;
}

.teachers-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 42px;
}

.teachers-head .site-heading { margin-bottom: 0; }

.teachers-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;
    color: var(--heading-color);
}

.teachers-nav button:hover { color: var(--theme-color); }

.teachers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.teachers-grid img {
    width: 100%;
    aspect-ratio: 350 / 363;
    object-fit: cover;
}

/* A tudás hatalom + idézetek */
.knowledge-area {
    --container-w: 1120px;
    padding-block: 100px 87px;
}

.knowledge-wrap {
    display: grid;
    grid-template-columns: 375px 1fr;
    gap: 56px;
    align-items: start;
}

.knowledge-content img {
    width: 100%;
    aspect-ratio: 375 / 246;
    object-fit: cover;
    margin-bottom: 26px;
}

.knowledge-content h2 {
    margin-bottom: 18px;
}

.knowledge-content p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 26px;
}

.quote-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.quote-card {
    background: #EEEEEE;
    padding: 46px 38px;
    display: grid;
    grid-template-columns: 1fr 222px;
    gap: 40px;
    align-items: center;
}

.quote-card .quote-text {
    position: relative;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    color: var(--body-text);
    margin: 0;
}

.quote-card .quote-text i {
    color: var(--body-text);
    font-size: 13px;
}

.quote-card .quote-open { margin-right: 8px; }
.quote-card .quote-close { margin-left: 8px; }

.quote-card .quote-name {
    font-size: 15px;
    color: var(--body-text);
    margin: 16px 0 0;
}

.quote-card .quote-role {
    font-size: 13px;
    color: var(--body-text);
    margin: 2px 0 0;
}

.quote-card img {
    width: 100%;
    aspect-ratio: 222 / 143;
    object-fit: cover;
}


/*=====================================================
26. Hibaoldalak
=====================================================*/
/*
 * A 404.png terv egy 1440×1024-es tartalomblokk (fejléc nélkül):
 *   fehér rész 0..825, alatta szürke sáv 825..1024.
 *   cím ink 202..279, ismétlődő „404” számsáv 491..598,
 *   illusztráció 340..825 (a szürke sáv vágja el).
 */
.error-area {
    position: relative;
    background: var(--color-white);
    overflow: hidden;
}

.error-wrapper {
    position: relative;
    height: clamp(520px, calc(412.61px + 28.64vw), 825px);
    text-align: center;
}

.error-title {
    position: relative;
    z-index: 3;
    padding-top: clamp(90px, calc(61.83px + 7.51vw), 170px);
    font-family: 'Barlow Condensed', var(--heading-font);
    font-size: clamp(34px, calc(19.21px + 3.94vw), 76px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: clamp(5px, calc(1.69px + 0.88vw), 14.4px);
    text-transform: uppercase;
    color: #4A4F5C;
    margin-bottom: 0;
}

/* Ismétlődő narancs kódsáv */
.error-code-band {
    position: absolute;
    left: 0;
    right: 0;
    top: clamp(280px, calc(210.63px + 18.5vw), 477px);
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.error-code-band span {
    display: block;
    white-space: nowrap;
    font-family: 'Cherry Bomb One', var(--heading-font);
    font-size: clamp(72px, calc(50.87px + 5.63vw), 132px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: clamp(6px, calc(3.89px + 0.56vw), 12px);
    color: #FDB549;
    -webkit-text-stroke: clamp(2px, calc(1.65px + 0.09vw), 3px) #4A4F5C;
    paint-order: stroke fill;
    text-align: center;
}

.error-figure {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 2;
    width: clamp(560px, calc(416.81px + 38.18vw), 966.67px);
}

.error-figure img {
    width: 100%;
}

/* Alsó szürke sáv — a terven üres; ide kerül a magyarázat és a vissza gomb */
.error-band-bottom {
    min-height: clamp(140px, calc(119.23px + 5.54vw), 199px);
    background: #868B93;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 34px 20px;
    text-align: center;
}

.error-message {
    max-width: 620px;
    margin: 0;
    font-size: 17px;
    line-height: 26px;
    color: var(--color-white);
}

.error-actions .theme-btn {
    background: var(--color-white);
    color: #4A4F5C;
}

.error-actions .theme-btn:hover {
    background: var(--theme-color);
    color: var(--color-white);
}


/*=====================================================
27. Kártyarácsok
=====================================================*/
/*
 * A kártyasorok közös rácsa. Két dolgot állít mindegyik rács magán:
 * `--cols` (hány kártya fér ki egy sorba) és `--col-gap` (mennyi köztük a
 * hely) — töréspontonként csak ez a kettő változik (28. Reszponzív).
 *
 * A sávszélesség NEM `1fr`, hanem a tervről mért képlet:
 * (100% - (n-1) * hézag) / n. Tele sorban ez ugyanaz, mint az `1fr`, viszont
 * az `auto-fit` csak ismert szélességű sávot tud összecsukni — márpedig ez a
 * lényeg: ha KEVESEBB kártya van, mint ahány sáv (pl. egyetlen képzés a
 * szekcióban), az üres sávok kiesnek, a `justify-content: center` pedig
 * középre húzza a megmaradókat. A kártya szélessége közben pontosan annyi
 * marad, amennyi a tele soré lenne.
 *
 * Tele sornál a sávok kitöltik a szélességet, tehát a középre igazítás nem
 * látszik; több sorra törő listánál (kurzuslista) az utolsó, félig teli sor
 * ugyanúgy balra igazodik, mint eddig.
 */
.course-slider,
.course-grid,
.testimonial-grid,
.course-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols))));
    justify-content: center;
}


/*=====================================================
28. Reszponzív
=====================================================*/
@media (max-width: 1400px) {
    :root { --container-w: 1140px; }
}

/* 1400px felett bőven van hely — a kereső ott mindig nyitva maradhat,
   nem kell rákattintani az ikonra */
@media (min-width: 1401px) {
    .nav-search {
        width: 280px;
    }

    .nav-search input {
        width: 280px;
        opacity: 1;
        pointer-events: auto;
        background: rgba(255, 255, 255, .92);
        border-color: var(--border-color);
    }
}

@media (max-width: 1275px) {
    .header-top { font-size: 12px; }
    .header-top-contact {
        gap: 22px;
    }
}

@media (max-width: 1199px) {
    :root {
        --h1-size: 32px;
        --h1-line: 40px;
        --h2-size: 30px;
        --h2-line: 40px;
    }

    .header-top { font-size: 9px; }
    .header-top-contact {
        gap: 13px;
    }

    .navbar-nav { gap: 14px; }
    .navbar-nav .nav-link { font-size: 14px; }
    .nav-right { margin-left: 16px; }
    .nav-right .theme-btn span { display: none; }

    .nav-right .theme-btn {
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 50%;
    }

    .nav-right .theme-btn i { display: inline-block; font-size: 18px; }

    .course-grid { --cols: 3; }
    .course-slider { --col-gap: 34px; }
    .video-feature-list { padding: 50px 34px; gap: 36px 28px; }
    .blog-wrap { grid-template-columns: 1fr 340px; gap: 34px; }
    .about-gallery { min-height: 400px; }
}

/*
 * Megamenü tablet nézetben (992–1275px): az akciódoboz a hasábok ALÁ kerül.
 *
 * A terven csak asztali (megamenü.png, 1394px széles kivágat) és mobil nézet van,
 * köztes nincs — a sáv eddig szabályozatlan volt, az asztali kompozíció viszont
 * ki sem fér ide. A legkisebb szélesség, amin még elfér:
 *
 *   350 (a széles hasáb két alhasábja) + 40 + 186 (E-learning min-content)
 *   + 40 + 173 (Tantermi min-content) + 40 + 300 (akciódoboz) + 92 (panel
 *   padding) ≈ 1220px.
 *
 * Ez alatt a rács a négy `1fr` hasáb közül az ELSŐ KETTŐT zsugorítja el — azokat,
 * amiket a széles hasáb ÁTFOG —, mert az átfogó elem min-content igényét a CSS
 * Grid rugalmas (`fr`) sávokra nem osztja szét, a szomszéd hasábok viszont a
 * saját padlójukon maradnak. 992px-en így ~40px marad ott, ahol ~175px kellene,
 * és a széles lista második alhasábja rárendereli a képzésneveket az „E-learning
 * képzések" hasáb neveire. (A láblécben ugyanezt a hibaosztályt az előzi meg,
 * hogy ott a kéthasábos lista NEM fog át rácshasábot, és a rácselemek
 * `min-width: 0`-t kapnak — l. `.footer-links`.)
 *
 * Nem szűkítéssel oldjuk meg, hanem az akciódoboz kivételével a hasábsorból: a
 * megamenü már a képernyő két széléig ér, tehát nincs honnan helyet nyerni, az
 * akciódoboz viszont a panel harmadát viszi el (300px + 40px hasábköz) két
 * gombért és néhány ikonért, ami egy sorban is elfér. Így a kategória-hasábok
 * elrendezése a TERV szerinti marad — négy hasáb, az elsőben két alhasáb —,
 * csak tágasabb: 992px-en 208px jut hasábonként.
 */
@media (min-width: 992px) and (max-width: 1275px) {

    /*
     * A magasságkorlát nem esztétika: a sáv tipikus eszköze a fekvő tablet
     * (1024×768), ahol a fejléc alatt ~640px marad, a lenyíló viszont ~830px
     * magas. A fejléc ragad, tehát a panel alja a LAP görgetésével sem jönne
     * elő — a legalsó képzésekhez és a gombokhoz a panel saját görgetése kell.
     */
    .mega-menu {
        padding: 32px 32px 40px;
        max-height: calc(100vh - var(--header-top-h) - var(--header-nav-h));
        overflow-y: auto;
    }

    /*
     * Négy hasáb, ÖTÖDIK sáv NÉLKÜL: a sávot törölni kell, nem elég kiüríteni —
     * egy üres sáv `gap`-je is elvinne 32px-et a panel jobb széléről.
     */
    .mega-menu-inner {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 0 32px;
    }

    .mega-menu-col-wide > ul {
        gap: 22px 32px;
    }

    /*
     * Az akciódoboz teljes szélességű ZÁRÓ SOR a hasábok alatt. A `grid-row` is
     * kell, nem csak a `grid-column`: az asztali `1 / -1` a feliratok sorától a
     * listák aljáig érne, tehát a doboz a hasábok MELLETT maradna.
     *
     * Az elválasztó vonal a bal oldalról a tetejére kerül — ugyanaz a szerep,
     * elforgatva. A sorköz margóból jön, mert a rács `row-gap`-je 0, és azt a
     * hasábok feliratsora is megkapná.
     */
    .mega-menu-aside {
        grid-column: 1 / -1;
        grid-row: 3;
        flex-direction: row;
        align-items: center;
        min-width: 0;
        margin-top: 26px;
        padding: 22px 0 0;
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }

    .mega-menu-aside .theme-btn {
        padding: 16px 24px;
    }

    /*
     * A közösségi ikonok a sor JOBB végére. Az asztali `margin-top: auto` az
     * oszlopirányú dobozban tolta őket az aljára; sorirányban a `margin-left`
     * csinálja ugyanezt, a 60px-es felső térköz pedig itt már csak elrontaná a
     * függőleges igazítást.
     */
    .mega-menu-social {
        margin-top: 0;
        margin-left: auto;
        padding-top: 0;
    }
}

@media (max-width: 991px) {
    :root {
        --header-nav-h: 72px;
        --logo-w: 128px;
    }

    .header-top { display: none; }

    .header-logo { height: var(--header-nav-h); }
    .header-logo img { max-height: 58px; }

    .main-navigation .nav-wrap {
        padding-left: calc(var(--logo-w) + 16px);
        padding-right: 20px;
        justify-content: flex-end;
        gap: 22px;
    }

    .nav-categories-wrap,
    .nav-search { display: none; }

    .navbar-toggler,
    .nav-search-toggler { display: inline-flex; }

    .navbar-collapse {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--color-white);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
        padding: 12px 20px 24px;
        display: none;
        /*
         * Kinyitott almenükkel a panel magasabb lehet a képernyőnél. Abszolút
         * pozicionált, tehát az OLDAL nem görget hozzá (rövid aloldalon a
         * vége elérhetetlen maradna) — ezért maga a panel görget.
         * A dvh a mobil böngészők eltűnő címsorát is figyelembe veszi; ahol
         * nincs, ott a fölötte álló vh-s sor marad érvényben.
         */
        max-height: calc(100vh - var(--header-nav-h));
        max-height: calc(100dvh - var(--header-nav-h));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .navbar-collapse.show { display: block; }

    .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
    }

    .navbar-nav .nav-link {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color);
    }

    /*
     * Almenüs sorok („Kategóriák”, „Kurzusaink”). A sor rugalmas sáv: balra a
     * felirat, jobbra a „+” nyitógomb, alattuk teljes szélességben a lenyíló
     * lista. Az alsó keret a SORRA került (nem a linkre), hogy a nyitógomb is
     * a teljes sormagasságot kapja, és a keret alatta végigfusson.
     */
    .nav-item-mobile { display: block; }

    .nav-item-sub {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        border-bottom: 1px solid var(--border-color);
    }

    .nav-item-sub > .nav-link {
        flex: 1 1 auto;
        border-bottom: 0;
    }

    /* A „Kurzusaink” feliratába épített dekorációs „+” helyett itt a sor
       szélén álló GOMB jelzi a lenyílót — a kettő egymás mellett zavaró. */
    .nav-item-sub .nav-link-plus { display: none; }

    /*
     * A „Kategóriák”-nak nincs saját oldala, ezért ott az EGÉSZ sor a gomb:
     * balra a felirat, jobbra a „+”.
     *
     * A szelektor SZÁNDÉKOSAN kéttagú: ez az elem a `.nav-sub-toggle`
     * osztályt is viseli (közös JS-horog), az pedig alább — azonos fajsúllyal,
     * de későbbi sorban — 44px-re szűkítené és jobbra zárná a tartalmát.
     */
    .nav-item-sub > .nav-sub-row {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 0;
        font-size: 14px;
        line-height: 26px;
        color: var(--heading-color);
        text-align: left;
    }

    /* A „Kurzusaink” sorában viszont csak a „+” a gomb: a felirat link marad,
       és a kurzuslistára visz (a megrendelő kérése szerint mindkettő működik). */
    .nav-sub-toggle {
        display: flex;
        flex: 0 0 44px;
        align-items: center;
        justify-content: flex-end;
        color: var(--heading-color);
        font-size: 14px;
    }

    .nav-sub-row:hover,
    .nav-sub-toggle:hover { color: var(--theme-color); }

    .nav-sub-row i,
    .nav-sub-toggle i { transition: var(--transition); }

    /* Nyitott állapotban a „+” ×-re fordul. */
    .nav-item.open > .nav-sub-row i,
    .nav-item.open > .nav-sub-toggle i { transform: rotate(45deg); }

    .nav-submenu { flex: 0 0 100%; }

    .nav-item.open > .nav-submenu { display: block; }

    .nav-submenu a {
        display: block;
        padding: 9px 0 9px 16px;
        font-size: 14px;
        color: var(--body-text);
    }

    .nav-submenu li:last-child a { padding-bottom: 16px; }

    .nav-right {
        margin: 18px 0 0;
    }

    .nav-right .theme-btn {
        width: 100%;
        height: auto;
        padding: 16px 30px;
        border-radius: var(--radius-pill);
    }

    .nav-right .theme-btn span { display: inline; }

    /*
     * A megamenü mobilon a „Kurzusaink” sor alatt nyíló akkordeon — ugyanaz a
     * markup, csak az asztali lebegő doboz tulajdonságait vesszük ki belőle.
     * (A `.show` osztályt asztalon a hover teszi rá; mobilon a nyitást a
     * menüpont `.open` osztálya dönti el — lásd main.js 4/b.)
     */
    .mega-menu {
        position: static;
        flex: 0 0 100%;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        border-top: 0;
        box-shadow: none;
        padding: 0 0 8px;
        transition: none;
    }

    .nav-item.open > .mega-menu { display: block; }

    .mega-menu-inner { display: block; }

    .mega-menu-col { display: block; }

    .mega-menu-col h5 {
        margin: 0;
        padding: 10px 0 2px 16px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--muted-text);
    }

    /* Egy hasáb: a terv kéthasábos rácsa és a 22px-es sorköz itt nem fér. */
    .mega-menu-col-wide > ul { display: block; }

    .mega-menu-col ul li + li { margin-top: 0; }

    .mega-menu-col ul a {
        display: block;
        padding: 9px 0 9px 16px;
        font-size: 14px;
    }

    /*
     * A pirulás link asztalon `inline-flex` (l. a 11. szakaszt), itt viszont
     * `flex` kell: mobilon a sorok teljes szélességű, bőven párnázott
     * koppintási felületek — inline dobozzal ez az EGY sor keskenyebb célpont
     * lenne a szomszédjainál.
     */
    .mega-menu-col ul a.mega-menu-link-soon { display: flex; }

    .mega-menu-aside {
        display: flex;
        min-width: 0;
        padding: 14px 0 0 16px;
        border-left: 0;
        gap: 12px;
    }

    .mega-menu-aside .theme-btn {
        padding: 13px 22px;
        font-size: 13px;
    }

    /* A közösségi ikonok a láblécben úgyis ott vannak — itt csak hosszabbá
       tennék a lenyílót. */
    .mega-menu-social { display: none; }

    /* Hero */
    .hero-area,
    .hero-single { min-height: auto; }

    .hero-single {
        flex-direction: column;
        padding-top: 70px;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
        padding-block: 0 20px;
    }

    .hero-content .theme-btn {
        display: inline-flex;
        border-radius: var(--radius-pill);
        text-transform: uppercase;
        letter-spacing: .6px;
        padding: 16px 30px;
    }

    .hero-dots,
    .hero-area .owl-dots {
        justify-content: center;
        margin-top: 34px;
    }

    .hero-figure {
        position: relative;
        width: 100%;
        max-width: 100%;
        margin-top: 40px;
    }

    .hero-figure img { margin-inline: auto; }

    /*
     * Mobilon a fotó teljes szélességű és a szöveg fölé kerül — itt a buborék
     * már nem a képhez arányosodik, hanem fix méretű (`font-size: 100px`
     * => 1em = 100px, azaz a tervről mért pixelek változatlanul érvényesek).
     */
    .hero-bubble {
        left: auto;
        right: 8%;
        top: 37%;
        bottom: auto;
        transform: none;
        font-size: 100px;
        width: min(300px, 62%);
        border-radius: 16px 38px 38px 50px / 20px 38px 28px 135px;
    }

    /* Itt a buborék az ujjtól JOBBRA áll, ezért a farok balra mutat. */
    .hero-bubble::after {
        left: 52px;
        top: 88%;
        -webkit-transform: scale(-1, -1);
        -moz-transform: scale(-1, -1);
        -o-transform: scale(-1, -1);
        transform: rotate(24deg) skewY(-28deg) scale(-1, 1);
    }

    .hero-bubble .bubble-line-1 {
        font-size: 34px;
    }

    .hero-bubble .bubble-line-2 {
        font-size: 40px;
    }

    /* A fotóhoz kötött két forma is fix méretű lesz, mint a buborék. */
    .hero-shape.shape-diamond-1 { left: 24px; top: 24px; }
    .hero-shape.shape-diamond-2 { right: 12%; left: auto; top: 88px; width: 36px; }
    .hero-shape.shape-diamond-3 { left: 40px; top: auto; bottom: 300px; }
    .hero-shape.shape-wave-1 { right: 20px; left: auto; top: 30px; width: 118px; }
    .hero-shape.shape-wave-2 { left: 0; top: auto; bottom: 340px; }

    /* Mobil kontakt sáv a hero alatt */
    .mobile-contact-bar {
        display: block;
        background: var(--section-bg);
        padding: 18px 20px;
        text-align: center;
    }

    .mobile-contact-bar ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 22px;
    }

    .mobile-contact-bar a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
    }

    .mobile-contact-bar i { color: var(--theme-color); }

    /* Szekciók függőleges ritmusa mobilon */
    .about-area,
    .cta-area,
    .course-area,
    .skill-test-area,
    .programming-area,
    .marketing-area,
    .corporate-area,
    .classroom-area,
    .testimonial-area,
    .blog-area,
    .newsletter-area { padding-block: 60px 0; }

    /*
     * A szekciócím és a tartalma közötti térköz mobilon EGYSÉGESEN 40px. Az
     * asztali értékek (114px a programozó, 113px a marketing, 74px a vélemények,
     * 62px a készségteszt fölött) az 1440px-es terv arányai — a keskeny
     * kijelzőn a cím elszakadna alóluk a tartalomtól.
     */
    .skill-test-area .site-heading,
    .programming-area .site-heading,
    .marketing-area .site-heading,
    .corporate-area .site-heading,
    .classroom-area .site-heading,
    .testimonial-area .site-heading { margin-bottom: 40px; }

    /*
     * A videós sáv teljes szélességű, háttértől háttérig érő blokk: felső
     * térközt nem tud adni magának, ezért a ritmus 60px-ét az ELŐTTE álló
     * szekció adja. Hogy melyik ez, az a tartalomtól függ: üres programozó
     * kategóriánál (lásd 17.) a készségteszt sáv marad előtte.
     */
    .skill-test-area:has(+ .video-feature-area),
    .programming-area:has(+ .video-feature-area) { padding-bottom: 60px; }

    .event-area { padding-block: 60px 0; }

    .footer-area { padding-top: 60px; }

    .about-wrap,
    .about-mirror .about-wrap { grid-template-columns: 1fr; gap: 40px; }

    /*
     * Az 1199px-es töréspont 400px-es min-height-ja itt már ÜRES SÁVOT hagyna:
     * teljes szélességben a galéria aránya (538/451) 281px-et ad, a kollázs
     * pedig eddig tart — a maradék ~80px vakon tolta el a szöveget a képektől.
     */
    .about-gallery { min-height: 0; }

    .about-mirror .about-gallery { order: 0; }

    .about-content { text-align: center; }
    .about-content .theme-btn { margin-inline: auto; }

    .course-head { flex-direction: column; align-items: flex-start; }

    .course-grid { --cols: 2; }

    /*
     * A terven mobilon a kártyasorok vízszintesen görgethetők, a szomszédos
     * kártyák beleslógnak a képbe. JS nélkül, scroll-snappel oldjuk meg.
     */
    .course-slider {
        display: flex;
        /*
         * Kevés kártyánál középen, tele sorban a sor elejétől — a `safe`
         * pontosan ezt jelenti (túlcsordulásnál visszavált `start`-ra, hogy a
         * legelső kártya elérhető maradjon). Ha a böngésző nem ismeri, az
         * egész deklaráció kiesik, és marad az előtte álló `flex-start`.
         */
        justify-content: flex-start;
        justify-content: safe center;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 20px;
        padding-inline: 20px;
        margin-inline: -20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .course-slider::-webkit-scrollbar { display: none; }

    .course-slider { gap: 34px; }
    .course-slider > * { flex: 0 0 268px; scroll-snap-align: center; }

    /* Tabsor helyett „Kategóriák” nyitógomb */
    .course-tabs-wrap { width: 100%; text-align: center; }

    .course-tabs-toggle {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: var(--heading-color);
    }

    .course-tabs-toggle i { font-size: 16px; }

    .course-tabs {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        margin-top: 18px;
    }

    .course-tabs.show { display: flex; }
    /*
     * Az oszlopos nézetben nincs mihez igazodni: a felirat egy sorba fér ki,
     * ezért a `min-content` (ami a leghosszabb SZÓRA húzná össze, tehát fölösleges
     * sortörést okozna) itt nem kell.
     */
    .course-tabs button { max-width: none; }
    .course-tabs button > span { width: auto; }

    .course-head { align-items: center; text-align: center; }
    .course-head .site-heading { width: 100%; text-align: center; }

    .skill-test-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .skill-test-box h4 { max-width: 100%; }

    /* A terven mobilon a cím a bevezető sor ELÉ kerül */
    .event-area .site-heading { display: flex; flex-direction: column; }
    .event-area .site-title-tagline { order: 1; }
    .event-area .site-title { order: 2; margin-bottom: 12px; }
    .event-area .site-subtitle { order: 3; margin-bottom: 0; }
    /*
     * A H3 a H2 után marad, tehát mobilon ő zárja a fejlécet. A két sor közét
     * ezért ő adja felülről — így a H2 `margin-bottom: 0`-ja akkor is helyes,
     * ha egy szekció csak alcímet kap, H3-at nem.
     */
    .event-area .site-hook { order: 4; margin-top: 10px; margin-bottom: 0; }

    .video-feature-area { grid-template-columns: 1fr; }
    .video-feature-video { min-height: 260px; }

    .cta-wrap { grid-template-columns: 1fr; }

    .testimonial-grid { --cols: 1; --col-gap: 60px; }

    .blog-wrap { grid-template-columns: 1fr; }
    .blog-item { grid-template-columns: 1fr; text-align: center; }
    /*
     * Ugyanaz a törhető meta sor, mint a bejegyzéslistán (lásd `.post-meta`):
     * hosszabb szerzőnév mellé a dátum kis kijelzőn már nem fér oda.
     */
    .blog-item .blog-meta { justify-content: center; flex-wrap: wrap; row-gap: 6px; }
    .blog-item.blog-item-reverse .blog-thumb { order: 2; }
    .blog-item .theme-btn { margin-inline: auto; }

    .newsletter-box {
        flex-direction: column;
        align-items: flex-start;
        border-radius: 0;
        margin-inline: -20px;
        padding: 40px 30px;
    }

    .newsletter-row { width: 100%; }

    /* Footer */
    .footer-wrap { grid-template-columns: 1fr; }

    .footer-about {
        text-align: center;
    }

    .footer-about .footer-logo { justify-content: center; }
    .footer-contact li { justify-content: center; }
    .footer-social { justify-content: center; padding-left: 0; }

    .footer-links {
        grid-template-columns: 1fr;
        gap: 0;
        border-top: 1px solid var(--border-color);
        margin-top: 30px;
        padding-top: 30px;
    }

    .footer-widget { padding-block: 12px; }

    .footer-widget h5 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 0;
        cursor: pointer;
    }

    .footer-widget h5::after { width: 42%; }

    .footer-widget-toggle {
        display: inline-block;
        color: var(--heading-color);
        font-size: 14px;
        transition: var(--transition);
    }

    .footer-widget.open .footer-widget-toggle { transform: rotate(180deg); }

    .footer-widget-list,
    .footer-widget-list.footer-widget-list-2col {
        display: none;
        grid-template-columns: 1fr;
        padding-top: 18px;
    }

    .footer-widget.open .footer-widget-list { display: flex; flex-direction: column; }

    .footer-widget + .footer-widget-stacked { margin-top: 0; }

    .footer-bottom { margin-top: 30px; }

    .footer-bottom-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .footer-bottom-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        padding-left: 56px;
    }

    /*
     * Aloldalak. Ezekhez nincs mobil terv (csak a főoldalhoz), ezért a
     * desktop elrendezés arányait tartjuk meg egy oszlopban.
     */
    .breadcrumb-area { height: 300px; }
    .breadcrumb-area h1 { font-size: 34px; line-height: 42px; }

    .course-list-area { padding-block: 48px; }
    .course-filters { gap: 20px; margin-bottom: 40px; }
    .course-filters button,
    .course-filters a { font-size: 14px; }
    .course-list-grid { --cols: 2; --col-gap: 24px; gap: var(--col-gap); }

    .course-section + .course-section { margin-top: 56px; }
    .course-section-title { gap: 16px; font-size: 22px; line-height: 30px; margin-bottom: 24px; }
    /*
     * A szakterület-sáv mobilon a terv szerint EGY SORBAN álló, függőleges
     * feliratú fülcsíkká alakul (a kétoszlopos pirularács helyett): a hét fül
     * így fél képernyő helyett egy sávnyi helyet foglal, és a lista rögtön a
     * szekciócím alatt kezdődik.
     *
     * A felirat alulról fölfelé fut. Erre a `writing-mode: vertical-rl` +
     * `rotate(180deg)` páros kell: az egy tulajdonságos `sideways-lr` ma csak
     * a Firefoxban működik.
     *
     * A fülek MAGASSÁGÁT nem a `min-height` szabja meg véglegesen: függőleges
     * írásirányban a szöveg hossza a magasságba számít, tehát egy hosszabb
     * szakterületnév megnöveli a dobozt — a `stretch` miatt pedig vele nő a
     * többi fül is. A 194px csak az alsó korlát — ennyi jött ki a mobil
     * tervről (a csík magassága a tartalomszélesség 0,55-szöröse).
     */
    .course-subfilters { flex-wrap: nowrap; gap: 0; margin-bottom: 40px; }

    .course-subfilters a {
        /* Egyenlő oszlopok: a felirat hossza nem torzíthatja a csíkot. */
        flex: 1 1 0;
        /* A terven a fülek között ugyanolyan 1px vonal fut, mint a csík
           szélén — a szomszédos kereteket tehát egymásra kell csúsztatni,
           különben belül dupla vastag lenne. */
        margin-left: -1px;
        min-height: 194px;
        padding: 14px 6px;
        font-size: 14px;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }

    .course-subfilters a:first-child { margin-left: 0; }

    .faq-area { padding-block: 60px; }
    .faq-group + .faq-group { margin-top: 48px; }
    .faq-item .faq-answer { padding: 20px; }

    .contact-info-area { padding-block: 50px 40px; }
    .contact-info-grid { grid-template-columns: 1fr; gap: 24px; }
    .contact-main-wrap { grid-template-columns: 1fr; gap: 24px; }
    .contact-map,
    .contact-map iframe { min-height: 320px; }
    .contact-form-panel { padding: 30px 16px; }
    .contact-form-intro h2 { font-size: 28px; }

    .post-list-area { padding-block: 50px 60px; }
    .post-list-wrap { grid-template-columns: 1fr; gap: 40px; }
    .post-list { gap: 40px; }
    .post-card .post-body { padding: 22px 20px 30px; }

    /*
     * A meta sor (dátum, szerző, kategória) egy oszlopban már nem fér ki. A
     * `nowrap` miatt mind a három elem ÖSSZENYOMÓDOTT, és a szövegük az ikon
     * mellett 3-4 sorba tördelődött („2026." / „augusztus" / „16."). Tördelhető
     * sorral az elemek egyben maradnak, és egymás alá csúsznak.
     */
    .post-meta { flex-wrap: wrap; gap: 8px 20px; }

    .counter-area { padding-bottom: 60px; }
    .counter-grid { grid-template-columns: 1fr; gap: 24px; }
    .counter-box { min-height: 150px; }

    .teacher-cta-panel { padding: 44px 24px; }
    .teacher-cta-panel h2 { font-size: 28px; }

    .story-area { padding-block: 60px; }
    .story-wrap { grid-template-columns: 1fr; gap: 40px; }
    .story-figure > img { width: 100%; }
    .story-tabs { position: static; flex-direction: row; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
    .story-tab { width: 140px; height: 96px; }

    .teachers-area { padding-block: 50px; }
    .teachers-head { flex-direction: column; align-items: flex-start; gap: 18px; }
    .teachers-grid { grid-template-columns: 1fr; gap: 24px; }

    .knowledge-area { padding-block: 60px; }
    .knowledge-wrap { grid-template-columns: 1fr; gap: 40px; }
    .quote-card { grid-template-columns: 1fr; gap: 24px; padding: 30px 24px; }

}

@media (max-width: 767px) {
    :root {
        --h1-size: 28px;
        --h1-line: 38px;
        --h2-size: 26px;
        --h2-line: 34px;
    }

    .course-grid { --cols: 1; }

    /*
     * Kis kijelzőn a kártyasorok ujjal görgethetők (nincs carousel), ezért a
     * nyilaknak nem csak dolguk nincs, de helyük sem.
     */
    .course-slider-wrap .slider-nav-btn { display: none; }

    .skill-test-box { padding: 32px 24px; }

    .video-feature-list {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 44px 24px;
    }

    .cta-card {
        min-height: auto;
        padding: 40px 24px 0;
        text-align: center;
        align-items: center;
    }

    /* A mobil terven mért figuraszélességek (a kártya alá, középre). */
    .cta-card .cta-figure {
        position: static;
        width: 256px;
        max-width: 100%;
        margin: 30px auto 0;
    }

    .cta-card-career .cta-figure { width: 291px; }

    .cta-card p { max-width: 100%; }
    .cta-card .theme-btn { align-self: center; }

    .event-row { grid-template-columns: 86px 1fr; gap: 18px; }

    /* Aloldalak kis kijelzőn */
    .course-list-grid { --cols: 1; }
    .course-list-card { padding: 18px; }
    .course-list-footer { gap: 14px; }
    .story-tabs { justify-content: center; }

    /*
     * Lapozó kis kijelzőn.
     *
     * A terv szöveg-linkjei ujjal alig találhatók el: 16px betű, nulla belső
     * tér — a „2" kattintófelülete így ~9×24px. Ezért itt minden lapozó-link
     * legalább 44×44px-es dobozt kap (WCAG 2.2 „Target Size (Minimum)"), ennyi
     * kell ahhoz, hogy hüvelykujjal ne a szomszéd oldalszámra ugorjunk.
     *
     * A pont-elválasztók emiatt kimaradnak: a nagyobb dobozok maguktól
     * elválnak egymástól, a pontok viszont sortöréskor sor elejére kerülnének.
     * A sáv ugyanis TÖRHET — sok oldalnál (blog) egy sorba már nem férne ki.
     *
     * A NYÍL-LINKEK IS KIESNEK. Ugyanoda visznek, mint az „Előző" / „Következő"
     * felirat (egy `li`-vel arrébb), 44px-esen viszont már nem fér ki mind:
     * a nyíl egyedül maradt a második soron. A felirat marad, mert az mondja
     * meg, MERRE lépsz — a nyíl csak ismételte.
     */
    .pagination-wrap { margin-top: 40px; }

    .pagination-wrap ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        padding: 4px 8px;
        max-width: 100%;
    }

    .pagination-wrap .dot,
    .pagination-wrap .page-arrow { display: none; }

    .pagination-wrap li a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding-inline: 8px;
    }

    .hero-bubble {
        left: auto;
        right: 13%;
        top: 43%;
        bottom: auto;
        transform: none;
        width: min(230px, 62%);
        border-radius: 16px 38px 38px 50px / 20px 38px 28px 135px;
    }

    .hero-bubble .bubble-line-1 {
        font-size: 26px;
    }

    .hero-bubble .bubble-line-2 {
        font-size: 30px;
    }
}

@media (max-width: 600px) {
    .hero-bubble {
        left: auto;
        right: 9%;
        top: 54%;
        bottom: auto;
        transform: none;
        width: min(180px, 62%);
        border-radius: 16px 38px 38px 50px / 20px 38px 28px 135px;
    }

    .hero-bubble .bubble-line-1 {
        font-size: 20px;
    }

    .hero-bubble .bubble-line-2 {
        font-size: 24px;
    }
}

@media (max-width: 400px) {
    .hero-bubble {
        right: 6%;
        top: auto;
        bottom: 27%;
        width: min(170px, 62%);
        padding: 12px 20px;
    }
}

/* Mobil: a kontakt sáv csak kis kijelzőn látszik */
@media (min-width: 992px) {
    .mobile-contact-bar { display: none; }
}