/*=====================================================
Átfogó Képzések — egyedi felülírások

A style.css a design system (a Figma tervekről mérve). Ide olyan szabály
kerül, ami egy konkrét oldalra / állapotra vonatkozó eltérés, ami a
style.css-t szándékosan felülírja, VAGY olyan oldalé, amihez nem készült
terv — ezek a meglévő design system elemeiből épülnek.

Tartalom
 1. Bootstrap semlegesítés
 2. Űrlap visszajelzés (siker / hiba)
 3. Űrlap mezők (label, select, checkbox, radio)
 4. Jelentkezés oldal
 5. Készségfelmérő teszt oldal
 6. Vállalati testreszabott tréning oldal
 7. Keresés oldal
 8. Reszponzív
 9. Kurzus adatlap
10. Slider (Owl) igazítás
11. Blog bejegyzés adatlap + üres listák
12. Blog címkék, aktív szűrő, lista-jelzés
13. Kereső-segítő blokk (kereső, ajánlatok, címkefelhők)
14. Köszönő oldalak (űrlap-beküldés visszaigazolása)
15. Adatvédelmi tájékoztató (jogi szövegoldal)
16. Betűkészletek (önhosztolt @font-face)
17. Térkép alatti tájékoztatás (kapcsolati oldal)
18. „Miért jó velünk tanulni?" — megrendelői tartalmi blokkok
19. Hosszú szövegblokk kinyitása („Mutass többet")
20. Blog oldalsáv mobilon: lenyíló menü
21. Mobil kártyasáv lapozó (pöttyök)
22. Leiratkozó oldal (hírlevél)
=====================================================*/


/*=====================================================
 1. Bootstrap semlegesítés
=====================================================*/
/* Bootstrap alapértelmezések semlegesítése, amiket a design nem használ */
.container,
.container-fluid {
    --bs-gutter-x: 0;
}

button:focus,
a:focus {
    box-shadow: none;
}

/*
 * A Bootstrap reboot `ul, ol { padding-left: 2rem }`-je ERŐSEBB, mint a
 * style.css `* { padding: 0 }` alaprésete (elemszelektor vs. univerzális),
 * ezért a jelölő nélküli listák 32px-cel beljebb kezdődtek. Középre igazított
 * listánál ez láthatóan félrecsúsztatja a tartalmat: a mobil kontakt sáv és a
 * lábléc elérhetőségei 16px-cel jobbra álltak a tengelytől.
 */
ul,
ol {
    padding-left: 0;
}


/*=====================================================
 2. Űrlap visszajelzés (siker / hiba)
=====================================================*/
.form-status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    margin-top: 20px;
    font-size: 15px;
    line-height: 22px;
    border-left: 4px solid;
}

.form-status + .form-status {
    margin-top: 12px;
}

.form-status i {
    font-size: 18px;
    line-height: 22px;
}

.form-status-success {
    background: #E8F5E9;
    border-color: #2E7D32;
    color: #1B5E20;
}

.form-status-error {
    background: #FDECEA;
    border-color: #C62828;
    color: #8E1B14;
}

.form-status ul {
    list-style: disc;
    padding-left: 18px;
    margin-top: 6px;
}

.form-status strong {
    font-weight: 700;
}

/* A hírlevél doboz alatt a visszajelzés a doboz szélességét veszi fel */
.newsletter-area .form-status {
    max-width: 640px;
    margin-inline: auto;
}

.form-note {
    margin-top: 16px;
    font-size: 14px;
    line-height: 21px;
    color: var(--muted-text);
}


/*=====================================================
 3. Űrlap mezők (label, select, checkbox, radio)
=====================================================*/
/*
 * A .contact-form rács (style.css 30.) a Kapcsolat oldalról jön; itt csak
 * kiegészítjük azzal, ami a feliratos mezőkhöz és a jelölőnégyzetekhez kell.
 * A mezőket .field burkolja, hogy a címke a mező fölé kerüljön — a rács
 * gyerekei így a burkolók lesznek, az elrendezés változatlan.
 */
.contact-form .field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.contact-form .field > label,
.contact-form .field > legend,
.contact-form fieldset > legend {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--heading-color);
}

.contact-form .field-optional {
    font-weight: 400;
    color: var(--muted-text);
}

.contact-form select {
    width: 100%;
    background: var(--color-white);
    border: 0;
    padding: 16px 15px;
    font-size: 15px;
    letter-spacing: .4px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23394459' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 38px;
}

.contact-form .is-invalid {
    outline: 2px solid #C62828;
    outline-offset: -2px;
}

.form-checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-checks-inline,
.form-radios {
    display: flex;
    flex-flow: row wrap;
    gap: 10px 22px;
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 21px;
    color: var(--body-text);
    cursor: pointer;
}

.form-check input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--theme-color);
    cursor: pointer;
}

/*
 * Az ÁSZF és az adatkezelési tájékoztató linkje a checkbox FELIRATÁN BELÜL van
 * (l. a `privacy-consent` komponenst) — a látogatónak azt kell tudnia
 * megnyitni, amit elfogad.
 *
 * A design system `a` szabálya viszont `color: inherit` + `text-decoration:
 * none`: a link így betűre ugyanúgy nézett ki, mint a körülötte lévő szöveg,
 * tehát senki nem látta, hogy kattintható. Ezért itt MINDKETTŐT felülírjuk —
 * az aláhúzás önmagában is elég jelzés, a sötétebb szín pedig a body-textnél
 * kiemeli. A hover a globális szabálytól kapja a narancsot.
 *
 * Ez a szabály az összes vendég űrlapra érvényes (jelentkezés, vállalati
 * tréning, készségfelmérő, hírlevélsáv): mindegyik ugyanazt a komponenst
 * teszi ki, tehát mindegyiknél `.form-check` a felirat konténere.
 */
.form-check a {
    color: var(--heading-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.contact-form fieldset {
    border: 0;
    padding: 0;
    min-width: 0;
}

.contact-form fieldset > legend {
    margin-bottom: 10px;
}

/*
 * Fókuszgyűrű az „egybeépített” kereső űrlapokon (mező + gomb hézag nélkül).
 *
 * A design system globális szabálya (style.css → `:focus-visible`) 2 px-rel a
 * fókuszált elem KÖRÉ rajzolja a gyűrűt. Ahol a mező és a gomb hézag nélkül ér
 * össze, ott ez beékelődik a kettő közé: a mezőre kattintva a gomb mellett egy
 * rés és egy lelógó narancs sarok villan fel.
 *
 * Ezért ezeken a mezőkön BEFELÉ rajzoljuk — így a gyűrű a mező szélére simul,
 * és nem lóg bele a gombba. A narancs gombon fehérrel és mélyebben beljebb
 * húzva, mert ott a narancs gyűrű nem látszana. A kettő továbbra is
 * megkülönböztethető, ami billentyűzetes tabolásnál számít.
 *
 * Érintett: a keresőoldal és a 404 közös blokkja (`search-help`, 13. szakasz),
 * valamint a fejléc nagyítójáról nyíló kereső popup.
 */
.search-help-form input:focus-visible,
.popup-search-box input:focus-visible {
    outline-offset: -2px;
}

.search-help-form button:focus-visible,
.popup-search-box button[type="submit"]:focus-visible {
    outline-color: var(--color-white);
    outline-offset: -5px;
}


/*=====================================================
 4. Jelentkezés oldal
=====================================================*/
.apply-area {
    --container-w: 1188px;
    padding-block: 80px 90px;
}

.apply-wrap {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 46px;
    align-items: start;
}

.apply-intro > h2 {
    font-size: 32px;
    line-height: 42px;
    margin-bottom: 18px;
}

.apply-intro > p {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 34px;
}

.apply-steps {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.apply-steps li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.apply-step-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border: 2px solid var(--theme-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-color);
    font-size: 19px;
}

.apply-steps h3 {
    font-size: 17px;
    line-height: 26px;
    margin-bottom: 4px;
}

.apply-steps p {
    font-size: 15px;
    line-height: 23px;
}


/*=====================================================
 5. Készségfelmérő teszt oldal
=====================================================*/
/* NEM .skill-test-area — azt a főoldali CTA sáv foglalja (style.css 17.) */
.skilltest-page-area {
    --container-w: 902px;
    padding-block: 76px 90px;
}

.skill-test-intro {
    text-align: center;
    margin-bottom: 40px;
}

.skill-test-intro h2 {
    font-size: 32px;
    line-height: 42px;
    margin-bottom: 16px;
}

.skill-test-intro p {
    font-size: 16px;
    line-height: 26px;
}

.skill-test-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 30px;
    margin-top: 26px;
}

.skill-test-meta li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    color: var(--heading-color);
}

.skill-test-meta i {
    color: var(--theme-color);
}

/* Kérdések */
.quiz-question {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--theme-color);
    padding: 26px 28px;
    margin-bottom: 20px;
}

.quiz-question legend {
    display: flex;
    align-items: center;
    gap: 12px;
    float: left;
    width: 100%;
    margin-bottom: 12px;
}

.quiz-number {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--theme-color);
}

.quiz-area {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-text);
    background: var(--section-bg);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

.quiz-text {
    font-size: 17px;
    font-weight: 700;
    line-height: 26px;
    color: var(--heading-color);
    margin-bottom: 16px;
}

.quiz-options {
    display: grid;
    gap: 10px;
}

.quiz-option {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 14px;
    background: var(--section-bg);
    font-size: 15px;
    line-height: 23px;
    cursor: pointer;
    transition: var(--transition);
}

.quiz-option:hover {
    background: #FFEDD1;
}

.quiz-option input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 3px;
    accent-color: var(--theme-color);
    cursor: pointer;
}

.quiz-option:has(input:checked) {
    background: #FFEDD1;
    box-shadow: inset 0 0 0 1px var(--theme-color);
}

.skill-test-form .contact-form-panel {
    margin-top: 34px;
}

/* Eredmény */
.skill-test-result {
    display: flex;
    align-items: center;
    gap: 34px;
    background: var(--theme-color2);
    color: var(--color-white);
    padding: 34px 38px;
    margin-bottom: 26px;
}

.skill-test-score {
    flex: 0 0 auto;
    width: 168px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.skill-test-percent {
    font-family: var(--heading-font);
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: var(--theme-color);
}

.skill-test-verdict h2 {
    color: var(--color-white);
    font-size: 28px;
    margin-bottom: 10px;
}

.skill-test-verdict p {
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 10px;
}

.skill-test-level {
    font-weight: 700;
}

.skill-test-verdict .theme-btn {
    margin-top: 12px;
    margin-right: 18px;
}

.skill-test-verdict .link-more {
    color: var(--color-white);
}

.skill-test-verdict .link-more:hover {
    color: var(--theme-color);
}

.skill-test-review {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    padding: 30px 32px;
    margin-bottom: 50px;
}

.skill-test-review > h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

.review-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--border-color);
}

.review-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.review-mark {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: #FDECEA;
    color: #C62828;
}

.review-row.is-correct .review-mark {
    background: #E8F5E9;
    color: #2E7D32;
}

.review-question {
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 6px;
}

.review-answer {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 2px;
}

.review-explanation {
    font-size: 14px;
    line-height: 21px;
    color: var(--muted-text);
    margin-top: 6px;
}

.skill-test-empty {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    padding: 46px 40px;
    text-align: center;
}

.skill-test-empty h3 {
    font-size: 22px;
    margin-bottom: 12px;
}

.skill-test-empty .theme-btn {
    margin-top: 22px;
}


/*=====================================================
 6. Vállalati testreszabott tréning oldal
=====================================================*/
.corporate-intro-area {
    --container-w: 1188px;
    padding-block: 76px 20px;
}

.corporate-intro {
    max-width: 780px;
    margin-bottom: 46px;
}

.corporate-intro h2 {
    font-size: 32px;
    line-height: 42px;
    margin-bottom: 16px;
}

.corporate-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.corporate-benefit {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    padding: 30px 26px;
    transition: var(--transition);
}

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

.corporate-benefit-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--theme-color);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 20px;
}

.corporate-benefit h3 {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 8px;
}

.corporate-benefit p {
    font-size: 15px;
    line-height: 23px;
}

.corporate-process-area {
    --container-w: 1188px;
    padding-block: 66px 30px;
}

.corporate-process-area > .container > h2 {
    font-size: 32px;
    margin-bottom: 34px;
}

.corporate-process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    counter-reset: step;
}

.corporate-process li {
    position: relative;
    padding-top: 22px;
    border-top: 3px solid var(--theme-color);
}

.corporate-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--theme-color2);
    color: var(--color-white);
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 14px;
}

.corporate-process h3 {
    font-size: 17px;
    line-height: 25px;
    margin-bottom: 6px;
}

.corporate-process p {
    font-size: 15px;
    line-height: 23px;
}

.corporate-form-area {
    --container-w: 860px;
    padding-block: 50px 90px;
}


/*=====================================================
 7. Keresés oldal
=====================================================*/
/*
 * Az oldal KERETE (szürke sáv, keresőmező, címkefelhők, gyorslinkek, főoldal-gomb)
 * a 404-gyel közös blokkból jön — lásd a 13. szakaszt és a `search-help`
 * komponenst. Itt csak az van, ami a találatok saját megjelenése.
 */
.search-results {
    margin-bottom: 44px;
}

.search-message {
    font-size: 17px;
    line-height: 27px;
    margin-bottom: 22px;
}

.search-summary {
    font-size: 15px;
    color: var(--muted-text);
    margin-bottom: 34px;
}

/*
 * A találati csoport maga a közös blokk `.search-help-block`-ja (onnan jön a
 * térköz és a címforma) — itt csak a zárójeles darabszám és az alsó
 * „összes …” link kap saját formát.
 */
.search-group > h2 span {
    font-size: 15px;
    font-weight: 400;
    color: var(--muted-text);
}

.search-group > .link-more {
    margin-top: 20px;
}

/*
 * A találati kártyasor ugyanazt a mintát követi, mint a design system
 * kártyarácsai (style.css 27. szakasz): kevés találatnál az üres sávok
 * kiesnek, a megmaradók középre kerülnek, a kártyaszélesség viszont marad
 * a tele soré.
 */
.search-course-grid {
    display: grid;
    --cols: 3;
    --col-gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols))));
    justify-content: center;
    gap: var(--col-gap);
}

.search-course-card {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    padding: 22px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

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

.search-course-img {
    aspect-ratio: 291 / 181;
    overflow: hidden;
    margin-bottom: 14px;
}

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

/*
 * Az ár + kategória sorra a találati kártya a design system SAJÁT osztályát
 * viszi (`.course-list-meta`, style.css 26. — narancs ár-pirula + szürke
 * kategória), nem egy sajátot. Itt korábban egy `.search-course-meta` állt:
 * ugyanaz a markup, más osztálynév — a `.course-list-meta .course-price`
 * szelektor nem illeszkedett rá, így az ár formázatlan számként ült a
 * kategória mellett, és a kereső találatai másképp néztek ki, mint ugyanaz a
 * képzés a kurzuslistán. Új szabály ide ne kerüljön: a sor kinézete egy
 * helyen, a design systemben lakik.
 */

.search-course-card h3 {
    font-size: 19px;
    line-height: 26px;
    margin-bottom: 10px;
}

.search-course-card p {
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 18px;
}

.search-course-card .theme-btn {
    margin-top: auto;
    align-self: flex-start;
}

.search-post-list li {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    padding: 22px 24px;
}

.search-post-list li + li {
    margin-top: 16px;
}

.search-post-list h3 {
    font-size: 19px;
    line-height: 27px;
    margin-bottom: 6px;
}

.search-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 14px;
    color: var(--muted-text);
    margin-bottom: 10px;
}

.search-post-list p:last-child {
    font-size: 15px;
    line-height: 23px;
}

.search-faq-list dt {
    font-size: 16px;
    font-weight: 700;
    color: var(--heading-color);
    background: #FFEDD1;
    padding: 12px 18px;
}

.search-faq-list dd {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-top: 0;
    padding: 18px;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 23px;
}


/*=====================================================
 8. Reszponzív
=====================================================*/
@media (max-width: 1199px) {
    .corporate-benefits,
    .corporate-process {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 991px) {
    .apply-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .skill-test-result {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .skill-test-score {
        width: auto;
        flex-direction: row;
        align-items: baseline;
        gap: 14px;
        text-align: left;
    }
}

@media (max-width: 767px) {
    .apply-area,
    .skilltest-page-area,
    .corporate-intro-area {
        padding-block: 50px 60px;
    }

    .corporate-benefits,
    .corporate-process {
        grid-template-columns: 1fr;
    }

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

    .apply-intro > h2,
    .skill-test-intro h2,
    .corporate-intro h2,
    .corporate-process-area > .container > h2 {
        font-size: 26px;
        line-height: 34px;
    }

    .quiz-question {
        padding: 20px 18px;
    }

    .skill-test-review {
        padding: 22px 18px;
    }

    .skill-test-percent {
        font-size: 40px;
    }

    /*
     * Űrlapok kis kijelzőn: EGY oszlop.
     *
     * A `.contact-form` rácsa két oszlopos (style.css 30.), ami a Kapcsolat
     * oldal ASZTALI tervéből jön. Telefonon ettől kerül egymás mellé a Név és
     * a Telefonszám: 390px-es kijelzőn mezőnként ~150px marad, amiben a beírt
     * telefonszám már nem látszik egyben, a hosszabb feliratok pedig törnek.
     *
     * Érintett minden űrlap, ami ezt a rácsot használja: jelentkezés,
     * kapcsolat, vállalati tréning, készségfelmérő.
     */
    .contact-form {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /*
     * 16px alatti betűméretnél az iOS Safari RÁKÖZELÍT az oldalra, amint a
     * mezőbe kattintanak — utána a látogató kézzel görgethet vissza, és a
     * fejléc is kicsúszik. A tervek 15px-e ezért csak asztali nézetben marad.
     */
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        font-size: 16px;
    }

    /* Ennyiben már két-három sornyi üzenet látszik gépelés közben. */
    .contact-form textarea {
        min-height: 132px;
    }

    /* Teljes szélességű gomb ~51px magasan: kényelmes hüvelykujj-célpont. */
    .contact-form button {
        padding: 16px;
        font-size: 16px;
    }

    /*
     * A bevezető szöveg a terven 15px-cel beljebb kezdődik, mint a mezők (a
     * panel saját 21px-es paddingján FELÜL). Telefonon a panel paddingja
     * 16px-re csökken, ez a 15px viszont maradna: a cím és a leírás láthatóan
     * elcsúszna a mezők bal élétől. Kis kijelzőn egy tengelyre kerülnek.
     */
    .contact-form-intro {
        padding-inline: 0;
    }
}


/*=====================================================
 9. Kurzus adatlap (/kurzusaink/{slug})
=====================================================*/
/*
 * Terv: `.docs/design-plans/kurzus-adatlap/` — öt PNG, fülállapotonként egy.
 * A méretek 1440 px széles kereten, KÉZZEL KIMÉRVE (oszlop-/sorszkennelés,
 * ink-sáv detektálás), nem szemre.
 *
 * A terv rácsa: bal hasáb 757 px, köz 37 px, jobb hasáb 421 px — összesen
 * 1215 px. A tervben ez a blokk NEM a keret közepén ül (bal margó 131 px,
 * jobb 94 px); ez a Figma-keret elcsúszása, mert az oldal minden más eleme —
 * fejléc, hero, lábléc, és a többi aloldal terve is — középre igazít. Itt
 * ezért KÖZÉPRE tesszük, a hasábszélességek viszont a tervéi.
 *
 * A terven a dobozoknak NINCS lekerekítésük és NINCS árnyékuk (az akkordeon
 * elemei az egyetlen kivétel) — ez szándékos eltérés a `--radius-md` /
 * `--shadow-card` alapértelmezéstől, ezért írjuk felül itt.
 */
.course-detail-area {
    --container-w: 1215px;
    padding-block: 126px 90px;
}

.course-detail-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 421px;
    gap: 37px;
    align-items: start;
}

/*
 * A bal hasáb `min-width: 0` nélkül a rács alatt kifeszülne a leghosszabb
 * szerkesztői tartalomhoz (pl. egy hosszú, tördeletlen URL a rich textben).
 */
.course-detail-main {
    min-width: 0;
}

/*-------------------------------------------------
 9/a. Fülsor
-------------------------------------------------*/
/*
 * A sáv maga a szegélyszín, a fülek pedig a fölötte ülő fehér mezők: a 2 px-es
 * `gap` és `padding` így egyszerre adja a külső keretet és a fülek közötti
 * elválasztókat. A terven a sáv 45 px magas, öt fül 149 px-enként.
 */
.course-tabs-bar {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: #EEEEEE;
}

.course-tab {
    flex: 1 1 0;
    min-width: 0;
    height: 41px;
    padding-inline: 6px;
    background: var(--color-white);
    border: 0;
    color: var(--heading-color);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: var(--transition);
}

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

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

/*
 * A lap közvetlenül a fülsor ALATT kezdődik, köz nélkül — a terven a fehér
 * doboz felső éle a sáv alsó élével esik egybe.
 *
 * Az akkordeonos fülek (Tananyag, Karrier lehetőségek) NEM egy dobozban
 * állnak: ott minden blokk külön kártya a lapháttéren, ezért kapnak
 * `is-plain` jelölőt.
 */
.course-tab-panel {
    background: var(--color-white);
    padding: 29px 32px 60px;
}

.course-tab-panel.is-plain {
    background: transparent;
    padding: 0;
}

.course-tab-panel > h2 {
    font-size: 29px;
    line-height: 36px;
    margin-bottom: 17px;
}

.course-tab-panel > h3 {
    font-size: 21px;
    line-height: 30px;
    margin-block: 32px 15px;
}

/*-------------------------------------------------
 9/b. Áttekintés fül
-------------------------------------------------*/
/*
 * A terven a szövegblokk NEM ér ki a doboz jobb széléig: a Figma szövegkerete
 * 648 px széles (a doboz 757, a bal térköz 32). Ez egyben jó sorhossz is —
 * 16 px-en kb. 80 karakter —, ezért nem térközzel, hanem a szövegblokk saját
 * szélességével oldjuk meg: a felsorolások és a statisztika-sor így a teljes
 * szélességet használhatják, ahogy a terven is.
 */
.course-detail-content {
    max-width: 648px;
    font-size: 16px;
    line-height: 24px;
    color: var(--body-text);
}

.course-detail-content p + p {
    margin-top: 16px;
}

.course-detail-content h2,
.course-detail-content h3,
.course-detail-content h4 {
    font-size: 20px;
    line-height: 28px;
    margin-block: 26px 12px;
}

.course-detail-content ul,
.course-detail-content ol {
    padding-left: 22px;
    margin-bottom: 16px;
    list-style: revert;
}

.course-detail-content a {
    color: var(--theme-color);
    text-decoration: underline;
}

/* Statisztika-sor: „20 000 diák végezte el · 4.7 ★ (1200 értékelés) · 260 vélemény” */
.course-stats {
    display: flex;
    /* A Bootstrap reboot `ul { margin-bottom: 1rem }`-je itt 16 px-et lopna. */
    margin-bottom: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 70px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--heading-color);
}

.course-stats-rating {
    display: flex;
    align-items: center;
    gap: 12px;
}

.course-stats-value {
    color: var(--theme-color);
}

.rating-stars {
    display: inline-flex;
    gap: 5px;
    color: var(--theme-color);
    font-size: 15px;
    line-height: 1;
}

.rating-stars .is-empty {
    color: #E5D9C6;
}

/*
 * A „Mit fogsz tanulni velünk?” és a „Követelmények” felsorolása. A jelölő a
 * terven dupla nyílhegy, a szöveg 36 px-cel beljebb kezdődik nála.
 */
.course-check-list {
    margin-bottom: 0;
}

/*
 * Két felsorolás közötti cím („Követelmények”) a terven 3 px-cel lejjebb ül,
 * mint a statisztika-sor utáni első cím. A listára tett alsó margó itt nem
 * segítene: a szomszédos margók összeolvadnak, a nagyobbik (a cím felső
 * margója) nyeli el a kisebbet.
 */
.course-check-list + h3 {
    margin-top: 35px;
}

.course-check-list li {
    position: relative;
    padding-left: 36px;
    margin-bottom: 11px;
    font-size: 16px;
    line-height: 24px;
    color: var(--body-text);
}

.course-check-list li:last-child {
    margin-bottom: 0;
}

.course-check-list i {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--theme-color);
    font-size: 15px;
}

/*-------------------------------------------------
 9/c. Tananyag / Karrier lehetőségek fül (akkordeon)
-------------------------------------------------*/
/*
 * A terven a blokkok külön kártyák, halvány vetett árnyékkal, a lapháttéren.
 * A NYITOTT blokk fejléce szürke, a törzse fehér; a csukottaké fehér.
 */
.course-accordion-item {
    background: var(--color-white);
    box-shadow: 0 2px 6px rgba(33, 58, 37, .06);
}

.course-accordion-item + .course-accordion-item {
    margin-top: 6px;
}

.course-accordion-item.open {
    margin-bottom: 26px;
}

.course-accordion-item.open:last-child {
    margin-bottom: 0;
}

.course-accordion-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    height: 55px;
    padding-inline: 40px 30px;
    background: transparent;
    border: 0;
    color: var(--body-text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.course-accordion-item.open .course-accordion-btn {
    background: #F7F7F7;
}

.course-accordion-btn i {
    flex: 0 0 auto;
    font-size: 15px;
    transition: transform .3s ease;
}

.course-accordion-item.open .course-accordion-btn i {
    transform: rotate(180deg);
}

/*
 * A törzs magassága átmenettel nyílik; csukva 0. A `visibility` azért kell,
 * hogy a becsukott blokk tartalma tabbal se legyen elérhető.
 */
.course-accordion-body {
    overflow: hidden;
    max-height: 0;
    visibility: hidden;
    transition: max-height .35s ease, visibility 0s .35s;
}

.course-accordion-item.open .course-accordion-body {
    max-height: none;
    visibility: visible;
    transition: max-height .35s ease, visibility 0s;
}

.course-accordion-content {
    padding: 26px 40px 30px;
    font-size: 16px;
    line-height: 24px;
    color: var(--body-text);
}

.course-accordion-content p + p {
    margin-top: 16px;
}

.course-accordion-content ul,
.course-accordion-content ol {
    padding-left: 22px;
    margin-bottom: 16px;
    list-style: revert;
}

/*-------------------------------------------------
 9/d. Kinek szól fül
-------------------------------------------------*/
/*
 * A blokk a közös „Mutass többet” komponenst használja (19. szakasz). A
 * terven a kapcsoló a levágott utolsó sor VÉGÉN, narancs szövegként ül —
 * ezért itt nem gomb, hanem a szöveg jobb alsó sarkába úsztatott link.
 */
.course-tab-panel .text-collapse {
    position: relative;
}

.course-tab-panel .text-collapse-btn {
    background: transparent;
    color: var(--theme-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 0;
    border-radius: 0;
    /* A `.course-detail-content a` aláhúzása erre a kapcsolóra nem vonatkozik. */
    text-decoration: none;
}

.course-tab-panel .text-collapse-btn:hover {
    background: transparent;
    color: var(--theme-color-hover);
    text-decoration: underline;
}

.course-tab-panel .text-collapse.is-collapsible.is-collapsed .text-collapse-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 40px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-white) 40px);
}

/*-------------------------------------------------
 9/e. Ti mondtátok fül
-------------------------------------------------*/
/*
 * A véleménylista a terven kicsivel lejjebb kezdődik, mint a többi fül
 * tartalma (nincs fölötte cím, ami a helyét kiadná).
 */
.course-reviews {
    margin-top: 12px;
}

.course-review + .course-review {
    margin-top: 56px;
}

.course-review h3 {
    font-size: 21px;
    line-height: 28px;
    margin-bottom: 13px;
}

.course-review-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--heading-color);
}

.course-review-text {
    /* Ugyanaz a sorhossz-korlát, mint a `.course-detail-content`-nél. */
    max-width: 620px;
    font-size: 16px;
    line-height: 24px;
    color: var(--body-text);
}

/*-------------------------------------------------
 9/f. Oldalsáv
-------------------------------------------------*/
/*
 * A jelentkezés gombja a terven szögletes, teljes szélességű és 45 px magas —
 * a `.theme-btn` alapértelmezett belső térközét és lekerekítését tehát
 * felülírjuk.
 */
.course-apply-btn {
    display: flex;
    width: 100%;
    height: 45px;
    padding: 0;
    border-radius: 0;
    font-size: 15px;
}

.course-detail-panel {
    background: var(--color-white);
    border-radius: 0;
    /*
     * A jobb oldali térköz a terven nagyobb a balnál: az értékek és az
     * elválasztó vonalak is 38 px-re állnak meg a doboz szélétől, míg a
     * címek 24 px-re kezdődnek.
     */
    padding: 21px 38px 22px 24px;
}

.course-apply-btn + .course-detail-panel,
.course-detail-panel + .course-detail-panel,
.course-detail-panel + .course-apply-btn {
    margin-top: 26px;
}

/*
 * Az oldalsáv címei a terven NEM a sötétzöld fejléc-színt viselik, hanem a
 * kékesszürke szövegszínt — ugyanazt, mint a bennük álló adatok.
 */
.course-detail-panel h2 {
    color: var(--body-text);
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 19px;
}

/* „Képzés részletei” — ikon + nagybetűs címke + érték */
.course-detail-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 0;
}

.course-detail-list li {
    display: grid;
    grid-template-columns: 22px 1fr;
    column-gap: 22px;
    align-items: center;
}

.course-detail-list i {
    grid-row: span 2;
    color: var(--theme-color);
    font-size: 26px;
    text-align: center;
}

.course-detail-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: var(--body-text);
}

.course-detail-value {
    margin-top: 8px;
    font-size: 16px;
    line-height: 20px;
    color: var(--body-text);
    /* A munkarend több sorból áll — a szerkesztő sortöréseit megtartjuk. */
    white-space: pre-line;
}

.course-detail-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FDF3E3;
    color: var(--theme-color);
    font-size: 14px;
    border-radius: var(--radius-pill);
    padding: 7px 14px;
    margin-top: 24px;
}

/* „Képzés jellemzői” — ikonos sorok, jobbra igazított értékkel */
/*
 * A terven a három doboz alsó térköze eltér (25 / 31 / 38 px). A közös
 * `padding-bottom` a legkisebb; a másik kettőt a benne álló lista saját alsó
 * margója pótolja ki.
 */
.course-feature-list {
    margin-bottom: 6px;
}

.course-feature-list li {
    display: grid;
    /* A terven az ikon a doboz belső szélén ül, a címke 22 px-cel beljebb. */
    grid-template-columns: 22px minmax(0, 1fr) auto;
    column-gap: 0;
    align-items: center;
    /*
     * 54 px tartalom + 2 px elválasztó = 56 px osztásköz a terven. FIX
     * magasság helyett minimum: a terven minden érték egyszavas („Igen”, „35”),
     * a valóságban viszont van „Felnőttképzési tanúsítvány” hosszúságú is. Fix
     * magassággal az kilógna a sorból, így viszont a sor nő meg alatta.
     */
    min-height: 56px;
    padding-block: 6px;
    border-bottom: 2px solid #EBECEE;
}

/* Az utolsó sor alatt nincs elválasztó, tehát 2 px-cel alacsonyabb. */
.course-feature-list li:last-child {
    min-height: 54px;
    border-bottom: 0;
}

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

.course-feature-label,
.course-feature-value {
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    color: var(--body-text);
}

.course-feature-label {
    padding-right: 12px;
}

.course-feature-value {
    text-align: right;
}

/* „Kategóriák” — a terven egymás alatti pirulák */
.course-category-pills {
    display: flex;
    flex-direction: column;
    margin-bottom: 13px;
    align-items: flex-start;
    gap: 16px;
}

.course-category-pills a {
    display: inline-flex;
    align-items: center;
    height: 35px;
    padding-inline: 20px;
    background: var(--theme-color);
    border-radius: var(--radius-pill);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: var(--transition);
}

.course-category-pills a:hover {
    background: var(--theme-color-hover);
    color: var(--color-white);
}

/*-------------------------------------------------
 9/g. Reszponzív
-------------------------------------------------*/
@media (max-width: 1199px) {
    .course-detail-area {
        padding-block: 80px;
    }
}

@media (max-width: 991px) {
    .course-detail-wrap {
        grid-template-columns: 1fr;
        gap: 34px;
    }
}

@media (max-width: 767px) {
    .course-detail-area {
        padding-block: 50px 60px;
    }

    /*
     * Öt fül egymás mellett telefonon olvashatatlan lenne, ezért ott a sáv
     * vízszintesen görgethető — a fülek megtartják az olvasható szélességüket.
     */
    .course-tabs-bar {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .course-tab {
        flex: 0 0 auto;
        padding-inline: 18px;
    }

    .course-tab-panel {
        padding: 24px 20px 40px;
    }

    .course-tab-panel > h2 {
        font-size: 22px;
        line-height: 30px;
    }

    .course-accordion-btn {
        height: auto;
        padding: 16px 20px;
    }

    .course-accordion-content {
        padding: 20px;
    }

    .course-detail-panel {
        padding: 24px 20px 28px;
    }

    .course-feature-list li {
        height: auto;
        padding-block: 14px;
    }
}


/*=====================================================
10. Slider (Owl) igazítás
11. Blog bejegyzés adatlap + üres listák
=====================================================*/
/*
 * Kártyaszélesség: az Owl ugyanazt a képletet használja, mint a CSS rács —
 * `(szélesség - (n-1) * margin) / n` —, ezért ha a main.js `sliderConfigs`
 * `margin` értéke megegyezik a rács `gap`-jével, a kártyák pontosan olyan
 * szélesek maradnak, amilyennek a tervről mértük. Szélesség-korrekcióra tehát
 * nincs szükség; az utolsó kártya utáni margót az `.owl-stage-outer` vágja le.
 *
 * A `margin` értékek töréspontonként: kurzus 34px (992px-től) és 75px
 * (1200px-től), vélemények 53px.
 */

/*
 * Az `.owl-stage-outer` `overflow: hidden`-je levágja a kilógó tartalmat: a
 * kártyák árnyékát és a vélemény-kártya kilógó kör avatarját (top: -32px).
 * Az overflow nem kapcsolható ki: a slider teljes sávja (több ezer pixel)
 * ilyenkor vízszintesen kigörgetné az egész oldalt.
 *
 * Ezért belső margóval adunk függőleges helyet, és ugyanennyi negatív külső
 * margóval vesszük vissza. A `flow-root` azért kell, hogy ez a negatív margó
 * ne olvadjon ki a szekcióból — enélkül a következő szekció csúszna 40px-t
 * feljebb.
 */
.course-slider.owl-carousel,
.testimonial-grid.owl-carousel {
    display: flow-root;
}

.course-slider.owl-carousel .owl-stage-outer,
.testimonial-grid.owl-carousel .owl-stage-outer {
    padding-block: 40px;
    margin-block: -40px;
}

/*
 * Egyforma kártyamagasság a sávban. Az Owl `float: left`-tel sorakoztatja az
 * elemeket, így minden kártya a SAJÁT tartalmi magasságát veszi fel: egy
 * kétsoros cím vagy egy hosszabb leírás mellett a sor alja lépcsős lesz
 * (a rács-változat `align-items: stretch`-e ilyenkor nem él).
 *
 * Flex sávval a kártyák a legmagasabbhoz igazodnak — a magasságot továbbra is
 * a tartalom szabja meg, nincs fix érték, tehát tetszőleges hosszúságú cím és
 * leírás belefér. Az Owl a szélességet inline stílusban számolja; a
 * `flex: 0 0 auto` hagyja érvényben (a flex alapértelmezett zsugorítása
 * elrontaná a kártyaszélességet).
 */
.course-slider.owl-carousel .owl-stage,
.testimonial-grid.owl-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

.course-slider.owl-carousel .owl-item,
.testimonial-grid.owl-carousel .owl-item {
    display: flex;
    flex: 0 0 auto;
}

.course-slider.owl-carousel .owl-item > *,
.testimonial-grid.owl-carousel .owl-item > * {
    width: 100%;
}

/* A vélemény-slider nyilai a többiekkel azonos helyre kerülnek. */
.testimonial-slider-wrap {
    position: relative;
}

/*
 * A „Fedezd fel kurzusainkat" rácsban minden képzés benne van, de a terven
 * 4×2 csempe látszik. Az induló állapotot itt vágjuk le; a fülre kattintás
 * után a main.js veszi át (inline stílussal, ami felülírja ezt).
 * A küszöb a partial `$tileLimit` értéke + 1.
 */
.course-grid[data-tile-limit] > .course-tile:nth-child(n+9) {
    display: none;
}


/*=====================================================
11. Blog bejegyzés adatlap + üres listák
=====================================================*/
/*
 * A listaoldal alsó térköze a tervről 533px — az egy oldalnyi bejegyzéshez
 * mérve helyes, egy hosszú cikk alá viszont indokolatlan.
 */
.post-single-area {
    padding-block: 86px 100px;
}

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

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

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

.post-single .post-body {
    padding: 28px 28px 40px;
}

.post-single .post-meta a {
    color: var(--body-text);
}

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

.post-single .post-lead {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 22px;
}

.post-content {
    font-size: 16px;
    line-height: 26px;
    color: var(--body-text);
}

.post-content h2,
.post-content h3,
.post-content h4 {
    font-size: 20px;
    line-height: 28px;
    margin-block: 26px 12px;
}

.post-content ul,
.post-content ol {
    padding-left: 22px;
    margin-bottom: 16px;
    list-style: revert;
}

.post-content a {
    color: var(--theme-color);
    text-decoration: underline;
}

.post-content img {
    max-width: 100%;
    height: auto;
}

.post-tags {
    margin-top: 34px;
}

.post-tags h2 {
    font-size: 18px;
    margin-bottom: 12px;
}

.post-single .post-more {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
    font-size: 16px;
    font-weight: 700;
    color: var(--heading-color);
}

.post-single .post-more:hover {
    color: var(--theme-color);
}

/* Kapcsolódó bejegyzések */
.post-related {
    border-top: 1px solid var(--border-color);
    padding: 30px 28px 34px;
}

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

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

.post-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.post-related-item img {
    width: 100%;
    aspect-ratio: 210 / 130;
    object-fit: cover;
    margin-bottom: 12px;
}

.post-related-item h3 {
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 6px;
}

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

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

/* Üres lista (nincs találat az adott szűrőre) */
.list-empty {
    background: var(--color-white);
    border-left: 4px solid var(--theme-color);
    padding: 22px 24px;
    font-size: 16px;
    line-height: 25px;
    color: var(--body-text);
}

.course-list-area .list-empty {
    text-align: center;
    border-left: 0;
    border-top: 4px solid var(--theme-color);
}

@media (max-width: 767px) {
    .post-single-area {
        padding-block: 50px 60px;
    }

    .post-related-grid {
        grid-template-columns: 1fr;
    }
}


/*=====================================================
12. Blog címkék, aktív szűrő, lista-jelzés
=====================================================*/
/*
 * Ehhez a három elemhez nincs terv: a címkefelhő a kurzuskártya címkéinek
 * (`.course-card .course-tags a`) pirula-formáját veszi át — ezért kell saját
 * szabály, a style.css-é a kártyára van szűkítve.
 */
.sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.sidebar-tags a {
    background: #FDF3E3;
    color: var(--muted-text);
    font-size: 12px;
    line-height: 1;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
}

.sidebar-tags a:hover,
.sidebar-tags a.active {
    background: var(--theme-color);
    color: var(--color-white);
}

/* Az oldalsávban épp nyitott kategória. */
.sidebar-archive a.active {
    color: var(--theme-color);
    font-weight: 700;
}

/*
 * Magyarázó sor a lista fölött (pl. „írj be legalább 2 karaktert"). A
 * `.list-empty`-vel azonos doboz, csak visszafogottabb kerettel — az nem
 * hiba, csak tájékoztatás.
 */
.list-notice {
    background: var(--color-white);
    border-left: 4px solid var(--border-color);
    padding: 18px 24px;
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 24px;
    color: var(--body-text);
}


/*=====================================================
13. Kereső-segítő blokk (kereső, ajánlatok, címkefelhők)
=====================================================*/
/*
 * KÉT oldal használja, ugyanígy — lásd a `search-help` komponenst:
 *   • a 404-en a szürke sáv alatt (a 404.png terv ott véget ér, tehát a
 *     tervezett kompozíciót — cím + kódsáv + illusztráció + szürke sáv —
 *     ez a blokk nem érinti),
 *   • a keresőoldalon (/kereses) a találatok körül; ott a `.search-results`
 *     kerül a mező és a felhők közé (7. szakasz).
 *
 * Egyikhez sincs Figma terv: a design system elemeiből épül. A pirulák a blog
 * oldalsávi címkefelhőjével (`.sidebar-tags`) azonos formájúak — itt viszont
 * gyakoriság szerint méretezettek (`tag-w1` … `tag-w5`), mert ez egy valódi
 * címkefelhő.
 */

/*
 * A blokk BEJÁRATA: a 404 főcíme („Megtaláltál”) alatti ugrólink, ami a lenti
 * keresőmezőhöz görget. Azért itt van és nem a style.css hibaoldal-szakaszában,
 * mert ez is terv nélküli elem — a 404.png a szürke sávval véget ér —, és mert
 * a célja ez a blokk.
 *
 * A `position: relative` + `z-index` NEM dekoráció: az illusztráció
 * (`.error-figure`, z-index 2) átlátszó felső sávja ráfekszik erre a sorra, és
 * enélkül elnyelné a kattintást.
 */
.error-jump {
    position: relative;
    z-index: 3;
    /* `inline-block`, nem `inline-flex`: így a nyíl a szöveg folyamában marad
       (két sorba töréskor az utolsó szó mellett), és a `margin-top` is él. */
    display: inline-block;
    margin-top: 20px;
    /* Kis kijelzőn a mondat majdnem teljes szélességű: enélkül az aláhúzás a
       viewport széléig érne, és elválasztó vonalnak látszana. Ha nem fér ki,
       a szöveg két sorba törik — a nyíl marad a sor közepén. */
    padding-inline: 20px;
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    color: #4A4F5C;
}

/* Az aláhúzás a szövegen ül, nem a linken — a nyílon nem akarjuk. */
.error-jump span {
    text-decoration: underline;
    text-decoration-color: var(--theme-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

/* Az `inline-block` itt is kell: az aláhúzás nem öröklődik át rajta. */
.error-jump i {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    color: var(--theme-color);
    transition: var(--transition);
}

.error-jump:hover {
    color: var(--theme-color-hover);
}

.error-jump:hover span {
    text-decoration-color: var(--theme-color-hover);
}

/* A nyíl elmozdul lefelé — megmutatja, hogy a link görget, nem oldalt vált. */
.error-jump:hover i {
    color: var(--theme-color-hover);
    transform: translateY(3px);
}

.search-help {
    --container-w: 1200px;
    background: var(--section-bg);
    padding-block: 70px 90px;
}

.search-help h2 {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 18px;
}

/* Kereső — a 404-en a hibás címből, a keresőoldalon a `?q=`-ból előtöltve */
.search-help-box {
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
}

.search-help-box > p {
    font-size: 16px;
    line-height: 26px;
    color: var(--muted-text);
    margin-bottom: 22px;
}

.search-help-form {
    display: flex;
    box-shadow: var(--shadow-card);
}

.search-help-form input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--color-white);
    border: 0;
    padding: 19px 22px;
    font-size: 16px;
    /*
     * A 404 főcíme alóli `.error-jump` EBBE a mezőbe ugrik (`#error-search-input`),
     * és a böngésző a fókuszt is ideteszi — a fix fejléc alá tehát ne csússzon.
     * Ugyanaz a képlet, mint a kurzus-szekciók horgonyainál (style.css 26.).
     */
    scroll-margin-top: calc(var(--header-nav-h) + 20px);
}

.search-help-form button {
    flex: 0 0 auto;
    background: var(--theme-color);
    color: var(--color-white);
    font-size: 15px;
    font-weight: 700;
    padding-inline: 38px;
    transition: var(--transition);
}

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

/* A fókuszgyűrű a 3. szakaszban van — közös a kereső popup mezőjével. */

.search-help-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 14px;
    line-height: 22px;
    color: var(--muted-text);
}

.search-help-hint i {
    color: var(--theme-color);
}

.search-help-block {
    margin-bottom: 44px;
}

.search-help-block:last-child {
    margin-bottom: 0;
}

/* „Talán ezt kerested" — konkrét találatok a hibás cím alapján */
.search-suggestions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.search-suggestions a {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--theme-color);
    padding: 16px 20px;
    transition: var(--transition);
}

.search-suggestions a:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

.search-suggestion-type {
    flex: 0 0 auto;
    background: #FDF3E3;
    color: var(--muted-text);
    font-size: 12px;
    line-height: 1;
    padding: 7px 12px;
    border-radius: var(--radius-pill);
}

.search-suggestion-title {
    flex: 1 1 auto;
    font-family: var(--heading-font);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--heading-color);
}

.search-suggestions a i {
    flex: 0 0 auto;
    color: var(--theme-color);
    font-size: 13px;
}

.search-suggestions a:hover .search-suggestion-title {
    color: var(--theme-color);
}

/* Címkefelhő */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.tag-cloud a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--color-white);
    border: 1px solid var(--border-color);
    color: var(--body-text);
    line-height: 1;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    transition: var(--transition);
}

.tag-cloud a:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--color-white);
}

.tag-cloud a span {
    background: #FDF3E3;
    color: var(--muted-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    transition: var(--transition);
}

.tag-cloud a:hover span {
    background: rgba(255, 255, 255, .3);
    color: var(--color-white);
}

/* Méretfokozatok: minél népszerűbb az elem, annál nagyobb a pirula */
.tag-cloud a.tag-w1 { font-size: 13px; }
.tag-cloud a.tag-w2 { font-size: 14px; }
.tag-cloud a.tag-w3 { font-size: 15px; font-weight: 500; }
.tag-cloud a.tag-w4 { font-size: 17px; font-weight: 600; padding: 12px 18px; }
.tag-cloud a.tag-w5 { font-size: 19px; font-weight: 700; padding: 13px 20px; }

/* Gyorslinkek a fő oldalakra */
.search-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
}

.search-quick-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--body-text);
}

.search-quick-links a i {
    color: var(--theme-color);
    font-size: 12px;
}

.search-quick-links a:hover {
    color: var(--theme-color);
}

/*
 * „Vissza a főoldalra” — a blokk legvégén áll (a 404 szürke sávjában nem),
 * mert a főoldal a legáltalánosabb kiút: a konkrét ajánlatok és találatok
 * fölött elvinné róluk a figyelmet. A többi hibakódnál marad a szürke sávban.
 */
.search-help-back {
    margin-top: 50px;
    padding-top: 34px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

@media (max-width: 767px) {
    /* A főcím és az illusztráció közötti sáv itt szűk — a link is kisebb. */
    .error-jump {
        margin-top: 16px;
        font-size: 15px;
        line-height: 24px;
    }

    .search-help {
        padding-block: 50px 60px;
    }

    .search-help h2 {
        font-size: 21px;
    }

    .search-help-box {
        margin-bottom: 40px;
    }

    .search-help-form {
        flex-direction: column;
    }

    .search-help-form button {
        padding: 15px 22px;
    }

    .search-suggestions {
        grid-template-columns: 1fr;
    }

    .search-quick-links {
        gap: 8px 20px;
    }

    .search-help-back {
        margin-top: 36px;
        padding-top: 26px;
    }

    /* Mobilon a legnagyobb fokozat is elfér egy sorban */
    .tag-cloud a.tag-w4 { font-size: 15px; padding: 10px 16px; }
    .tag-cloud a.tag-w5 { font-size: 16px; padding: 11px 17px; }
}


/*=====================================================
14. Köszönő oldalak (űrlap-beküldés visszaigazolása)
=====================================================*/
/*
 * A `/jelentkezes/koszonjuk`, `/kapcsolat/koszonjuk` és
 * `/vallalati-testreszabott-trening/koszonjuk` közös panelje
 * (components/thank-you.blade.php). Nem készült hozzá terv, ezért a meglévő
 * elemekből épül: a doboz a `.skill-test-empty` fehér panelje, a pipa a
 * `.form-status-success` színeivel.
 */
.thank-you-area {
    --container-w: 1188px;
    padding-block: 76px 96px;
}

.thank-you-panel {
    max-width: 720px;
    margin-inline: auto;
    background: var(--color-white);
    border: 1px solid var(--border-color);
    padding: 52px 40px;
    text-align: center;
}

.thank-you-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: #E8F5E9;
    color: #2E7D32;
    font-size: 26px;
}

.thank-you-panel h2 {
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 14px;
}

.thank-you-panel p {
    color: var(--muted-text);
    margin-bottom: 0;
}

/* A gombsor: elsődleges gomb + szöveges link, mobilon egymás alatt */
.thank-you-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 28px;
    margin-top: 30px;
}

@media (max-width: 575px) {
    .thank-you-area {
        padding-block: 46px 62px;
    }

    .thank-you-panel {
        padding: 38px 22px;
    }

    .thank-you-panel h2 {
        font-size: 24px;
        line-height: 32px;
    }
}


/*=====================================================
15. Adatvédelmi tájékoztató (jogi szövegoldal)
=====================================================*/
/*
 * Az `/adatvedelmi-tajekoztato` tisztán szöveges oldal, tervrajz nélkül.
 *
 * A TIPOGRÁFIÁT nem itt találjuk ki: a nézet a `.post-content` osztályt is
 * ráteszi a dokumentumra (11. szakasz), ami a blogbejegyzés törzsszövegét adja
 * — 16/26px, listák, narancs linkek. Az alábbi szabályok CSAK azt írják le,
 * amiben egy tízszakaszos jogi szöveg eltér egy cikktől: olvasható sorhossz,
 * erősebb szakaszcím-hierarchia, címke–érték párok, sütitáblázat.
 *
 * A `.legal-doc h2` / `h3` ugyanolyan specifikusságú, mint a `.post-content h2`
 * (egy osztály + egy elem), tehát a SORREND dönt — ezért kell ennek a blokknak
 * a fájl végén állnia. Ha valaha előrébb kerül, a szabályok némán hatástalanná
 * válnak.
 */

/*
 * A szűkebb szövegoszlopot a KONTÉNER adja, nem a dokumentum `max-width`-je —
 * ugyanaz a fogás, mint a köszönő oldalaknál (14.). Így a szöveg a lapon
 * középen marad, nem ragad az 1256px-es rács bal szélére. 840px ≈ 95 karakter
 * soronként; az alap konténerszélességen ez ~180 lenne, ami jogi szövegnél a
 * leggyorsabb út ahhoz, hogy a látogató bele se kezdjen.
 */
.legal-area {
    --container-w: 840px;
    padding-block: 86px 100px;
}

/* Bevezető bekezdés — a `.post-lead` mérete (11.), de a jogi oldal nem cikk. */
.legal-doc .legal-lead {
    font-size: 18px;
    line-height: 28px;
    color: var(--heading-color);
    margin-bottom: 14px;
}

/* „Hatályos: …” — a fejrész zárósora, vonallal elválasztva a törzstől. */
.legal-doc .legal-meta {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
    color: var(--muted-text);
}

/*
 * Szakaszcímek. A `.post-content` mind a három szintet 20px-re állítja: egy
 * cikkben ez elég, egy tíz fejezetes dokumentumban viszont eltűnik a tagolás.
 * A narancs aláhúzás nem új díszítés — a `.post-related > h2` pontosan ilyen
 * (11.), csak ott egy blokk címe, itt a fejezeteké.
 */
.legal-doc h2 {
    position: relative;
    display: inline-block;
    font-size: 24px;
    line-height: 32px;
    margin-block: 46px 18px;
}

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

.legal-doc h3 {
    font-size: 18px;
    line-height: 26px;
    margin-block: 26px 10px;
}

/*
 * Egy-egy adatkezelés doboza (kapcsolati üzenet, jelentkezés, …). A hat blokk
 * összefüggő szövegfolyamként olvashatatlan lenne; a halvány háttér és a
 * narancs bal él — a `.list-empty` (11.) jelzésmódja — teszi átfutható
 * listává. A törzs fehér, ezért NEM fehér panel, hanem `--section-bg`.
 */
.legal-purpose {
    background: var(--section-bg);
    border-left: 3px solid var(--theme-color);
    padding: 22px 26px 6px;
    margin-block: 18px;
}

.legal-purpose h3:first-child {
    margin-top: 0;
}

/*
 * Címke–érték párok: az adatkezelő adatai, az adatkezelések négy sora (adat /
 * cél / jogalap / megőrzés) és az érintetti jogok. Két hasáb, mert a bal
 * oldali címkeoszlop teszi átfuthatóvá — mobilon egymás alá kerül.
 */
.legal-dl {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 10px 24px;
    margin-block: 0 22px;
}

.legal-dl dt {
    font-weight: 700;
    color: var(--heading-color);
}

.legal-dl dd {
    margin: 0;
}

/*
 * Sütitáblázat. Négy oszlop nem fér ki telefonon, a tördelésük pedig
 * olvashatatlan lenne, ezért a táblázat SAJÁT, vízszintesen görgethető
 * burkolót kap: a lap maga sosem csúszik el oldalra.
 *
 * A burkoló `tabindex="0"`-t kap a nézetben (WCAG 2.1.1: egérrel görgethető
 * területnek billentyűzettel is elérhetőnek kell lennie), ezért kell neki
 * látható fókuszgyűrű is.
 */
.legal-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-block: 20px 26px;
}

.legal-table-wrap:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 3px;
}

.legal-table {
    width: 100%;
    /* Ez alatt a négy oszlop szavanként törne — inkább görgessen. */
    min-width: 620px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 23px;
}

.legal-table th,
.legal-table td {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.legal-table thead th {
    background: var(--theme-color2);
    color: var(--color-white);
    font-weight: 700;
}

.legal-table code {
    font-size: 13px;
    color: var(--heading-color);
    word-break: break-word;
}

/*
 * A kitöltetlen jogi adatok helyőrzője (`[KITÖLTENDŐ: …]`).
 *
 * SZÁNDÉKOSAN kirívó. Egy jogi dokumentumban a néma hiány rosszabb, mint a
 * feltűnő: így az élesítés előtti utolsó átolvasáson is szemet szúr, és
 * nyomtatásban sem tűnik el (a `border` a háttérnyomtatás nélkül is látszik).
 * Ha minden helyőrző kitöltésre került, ez a szabály felesleggé válik — de
 * maradhat, mert egy későbbi bővítés újra hozhat kitöltendő pontot.
 */
.legal-todo {
    background: #FFF3CD;
    color: #664D03;
    border: 1px dashed #E0A800;
    padding: 1px 6px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .legal-dl {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .legal-dl dd {
        margin-bottom: 14px;
    }
}

@media (max-width: 575px) {
    .legal-area {
        padding-block: 46px 62px;
    }

    .legal-doc h2 {
        font-size: 21px;
        line-height: 29px;
        margin-block: 36px 16px;
    }

    .legal-purpose {
        padding: 18px 18px 4px;
    }
}


/*=====================================================
 16. Betűkészletek (önhosztolt @font-face)
=====================================================*/
/*
 * A három betűkészlet KORÁBBAN a style.css tetején három
 * `@import url('https://fonts.googleapis.com/...')` sorral érkezett. Az a
 * megoldás MINDEN oldalletöltésnél kérést indított a fonts.googleapis.com
 * (CSS) és a fonts.gstatic.com (woff2) felé, tehát a látogató IP-címe és
 * böngésző-azonosítója a hozzájárulásától FÜGGETLENÜL eljutott a Google-höz —
 * beleértve azt a látogatót is, aki a süti-sávon mindent elutasított. Ezt a
 * tényt az adatvédelmi tájékoztatónk kénytelen volt kimondani.
 *
 * Most a fájlokat magunk szolgáljuk ki a public/guest-assets/fonts/ alól, így
 * betűtípus miatt egyetlen külső kérés sem indul. A `@font-face` blokkok
 * SZÁNDÉKOSAN itt, a custom.css végén állnak: a repó szabálya szerint a
 * style.css-be nem írunk, és a CSS-ben a `@font-face` — az `@import`-tal
 * ellentétben — nem kötött a fájl elejéhez, a böngésző a teljes CSSOM
 * összeállítása után párosítja a betűket.
 *
 * Amit egy `@font-face` NEM csinál: nem tölt le semmit előre. A böngésző csak
 * akkor kéri le a fájlt, ha az adott oldalon tényleg megjelenik olyan
 * karakter, amire illeszkedik — ezért olcsó itt deklarálni a Barlow Condensedet
 * és a Cherry Bomb One-t is, amiket kizárólag a 404-es hibaoldal kódsávja
 * használ (style.css „26. Hibaoldal”).
 *
 * Vágatok: mindegyik betűkészletből a `latin` ÉS a `latin-ext` állomány kell.
 * A magyar szövegnek a latin-ext a létfontosságú: az „ő” (U+0151) és az „ű”
 * (U+0171) NEM fér bele a latin tartományba. Ha a latin-ext kimaradna, a
 * böngésző ezt a két betűt egy tartalék betűkészletből rajzolná ki — a szó
 * közepén látszana a váltás.
 *
 * A `font-display: swap` a Google eredeti beállítását tartja meg: a szöveg
 * azonnal olvasható a rendszerbetűvel, és a saját betűre cserél, amint megjött.
 *
 * A Figtree VÁLTOZÓ (variable) betűkészlet: egyetlen fájl fedi le a 300–900
 * vastagságot, ezért a `font-weight: 300 900` tartomány. A designban használt
 * 400/500/600/700/800 vastagság mind ebből az egy fájlból jön.
 *
 * Dőlt vágat SZÁNDÉKOSAN nincs: a kódbázisban egyetlen `font-style: italic`
 * sincs, tehát a dőlt fájlok letöltése tiszta pazarlás lenne. Ha valaha dőlt
 * szöveg kerül a designba, a hozzá tartozó fájlokat is le kell tölteni —
 * enélkül a böngésző MŰDŐLTET rajzol (a felállót döntve el), ami észrevehetően
 * csúnyább.
 */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/figtree-variable-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/figtree-variable-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/barlow-condensed-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/barlow-condensed-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cherry Bomb One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/cherry-bomb-one-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Cherry Bomb One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/cherry-bomb-one-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*=====================================================
 17. Térkép alatti tájékoztatás (kapcsolati oldal)
=====================================================*/
/*
 * A kapcsolati oldal Google-térképe AZONNAL betölt. Korábban hozzájárulás-kapu
 * állt előtte — egy helyőrző doboz „Térkép betöltése” gombbal, amiből csak
 * kattintásra lett iframe. Ezt a megrendelő döntése alapján leszedtük, és a
 * helyén ennyi maradt: a térkép ALATT egy apró betűs sor arról, hogy a Google
 * mit kap meg, benne az adatkezelési tájékoztató linkjével.
 *
 * A SOR A TÉRKÉP DOBOZÁN BELÜLRE KERÜL, nem alá. A `.contact-main-wrap` rács
 * bal hasábja a mért terv szerint 630 px magas (mobilon 320 px — style.css 30.
 * szakasz); ha a sor a dobozon kívülre kerülne, a saját magasságával
 * megnyújtaná a hasábot, és elcsúszna a rács. Így viszont a doboz mérete
 * VÁLTOZATLAN: a sor az iframe-től veszi el a helyet.
 */
.contact-map {
    display: flex;
    flex-direction: column;
}

/*
 * A style.css az iframe-et `height: 100%` + `min-height: 630px`-tel a doboz
 * TELJES magasságára feszíti — ott az iframe volt a doboz egyetlen gyereke.
 * Most a sor is mellette van, ezért mindkettőt fel kell oldani: enélkül a
 * kettő együtt túlnőne a rácson.
 */
.contact-map iframe {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.contact-map-note {
    flex: 0 0 auto;
    margin: 0;
    padding-top: 10px;
    font-size: 12px;
    line-height: 18px;
    color: var(--muted-text);
}

.contact-map-note a {
    color: var(--heading-color);
    text-decoration: underline;
}

.contact-map-note a:hover {
    color: var(--theme-color);
}

/*
 * 992 px alatt viszont NEM a térképből vágunk. A rács ott egyhasábos (a térkép
 * és az űrlap egymás alatt van), tehát a sor magassága senkitől nem vesz el
 * helyet — a mért 320 px-es térkép megmaradhat teljes egészében, a sor pedig
 * alá kerül. Enélkül a legkeskenyebb nézetben a sor öt sorra tördelődik, és a
 * 320-ból 238 px maradna a térképnek.
 */
@media (max-width: 991px) {
    .contact-map {
        min-height: 0;
    }

    .contact-map iframe {
        min-height: 320px;
    }
}


/*=====================================================
18. „Miért jó velünk tanulni?" — megrendelői tartalmi blokkok
=====================================================*/
/*
 * Az oldalnak VAN Figma terve (.docs/design-plans/„Miért jó velünk tanulni_ -
 * aloldal.png"), és a tervről mért szekciók a style.css 32. szakaszában
 * maradtak, érintetlenül. Az itteni négy blokk a megrendelő utólag küldött
 * szövegéhez készült, tervlap NÉLKÜL — ezért van a custom.css-ben:
 *
 *   .about-intro-area  — üdvözlő szöveg + „Amiben jók vagyunk" (4 kártya)
 *   .philosophy-area   — „Filozófiánk" + kedvezmény-kiemelés
 *   .about-faq-area    — GYIK-kivonat (a /gyik akkordeon stílusát használja)
 *   .about-next-area   — „Hogyan tovább?" (Karrier / Blog / Kapcsolat)
 *
 * A design system elemeiből épülnek: `--container-w`, `.theme-btn`,
 * `.site-heading`, `.faq-item` és a `.corporate-benefit`-ből ismerős
 * kártyaforma (fehér lap, 1px keret, emelkedő hover).
 *
 * TÉRKÖZ: az oldal minden szekciója SAJÁT `padding-block`-ot visz (nem a
 * következő szekció adja, mint a főoldalon), ezért egy blokk kiesése itt nem
 * csúsztatja össze a szomszédait. A tervről mért értékekhez nem nyúlunk: az
 * `.about-intro-area` alul 0-t hagy, a mögötte álló `.page-about .about-area`
 * pedig hozza a saját 90px-ét (style.css) — a két szekció köze így pontosan
 * annyi, mint a morzsamenü és az about blokk köze volt.
 */
.about-intro-area {
    --container-w: 1121px;
    padding-block: 90px 0;
}

.about-intro-lead {
    max-width: 880px;
    font-size: 18px;
    line-height: 30px;
    margin-bottom: 46px;
}

.about-intro-title {
    font-size: 32px;
    line-height: 42px;
    margin-bottom: 30px;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.about-intro-card {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    padding: 30px 26px;
    transition: var(--transition);
}

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

.about-intro-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--theme-color);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 20px;
}

.about-intro-card p {
    font-size: 15px;
    line-height: 23px;
}

/* Filozófiánk — a korábbi alapítói bemutatkozás helyén, azonos formában */
.philosophy-area {
    --container-w: 1112px;
    padding-block: 0 90px;
}

.philosophy-panel {
    background: var(--color-white);
    border-left: 6px solid var(--theme-color);
    padding: 56px 60px;
}

.philosophy-panel .site-heading {
    margin-bottom: 30px;
}

/*
 * A `.site-desc` gyári 18px/30px-e egyetlen bevezető mondatra készült; ez a
 * panel viszont csaknem teljes szélességű, ott a 18px-es sorok túl hosszúra
 * nyúlnának, ezért a szövegtörzs méretén marad — ugyanazon a 16px-en, mint
 * az alatta lévő kiemelés. A `max-width` a design system közepre igazított
 * beállítását semlegesíti: ez a panel balra zárt.
 */
.philosophy-panel .site-desc {
    max-width: 100%;
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 26px;
}

.philosophy-highlight {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--theme-color2);
    color: var(--color-white);
    padding: 22px 26px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 30px;
}

.philosophy-highlight i {
    flex: 0 0 auto;
    font-size: 26px;
    color: var(--theme-color);
}

/* GYIK-kivonat — az akkordeon stílusa a style.css 29. szakaszából jön */
.about-faq-area {
    --container-w: 1112px;
    padding-block: 0 90px;
}

.about-faq-area .site-heading {
    margin-bottom: 30px;
}

.about-faq-all {
    margin-top: 34px;
}

/* „Hogyan tovább?" */
.about-next-area {
    --container-w: 1121px;
    padding-block: 0 100px;
}

.about-next-area .site-heading {
    margin-bottom: 38px;
}

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

.about-next-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--border-color);
    padding: 36px 30px;
    transition: var(--transition);
}

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

.about-next-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--theme-color2);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 22px;
}

.about-next-card h3 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 12px;
}

.about-next-card p {
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 22px;
}

/*
 * A link a kártya ALJÁRA kerül (`margin-top: auto`), hogy a három — eltérő
 * hosszúságú — szöveg alatt egy vonalban álljon.
 */
.about-next-link {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--theme-color2);
    transition: var(--transition);
}

.about-next-link i {
    font-size: 13px;
    transition: var(--transition);
}

.about-next-link:hover {
    color: var(--theme-color);
}

.about-next-link:hover i {
    transform: translateX(4px);
}

@media (max-width: 1199px) {
    .about-intro-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .about-next-grid {
        grid-template-columns: 1fr;
    }

    .philosophy-panel {
        padding: 40px 32px;
    }
}

@media (max-width: 767px) {
    .about-intro-area {
        padding-block: 50px 0;
    }

    .about-intro-grid {
        grid-template-columns: 1fr;
    }

    .about-intro-lead {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 34px;
    }

    .about-intro-title {
        font-size: 26px;
        line-height: 34px;
    }

    .philosophy-area,
    .about-faq-area {
        padding-block: 0 60px;
    }

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

    .philosophy-panel {
        padding: 32px 20px;
    }

    .philosophy-highlight {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px;
    }
}


/*=====================================================
19. Hosszú szövegblokk kinyitása („Mutass többet")
=====================================================*/
/*
 * A megrendelői szövegblokkok (főoldali `about-area` kétszer, ugyanez a
 * „Miért jó velünk tanulni?" oldalon, az oktatói CTA és „A tudás hatalom")
 * hosszabbak, mint amennyi a terven elfért. Alapból csak az ELSŐ bekezdés
 * olvasható, alatta egyetlen elhalványodó sor jelzi a folytatást; a blokk
 * saját „Mutass többet" gombja nyitja ki és zárja vissza a maradékot.
 *
 * A méreteket a `main.js` (7/d.) számolja, mert sortól függnek: a kinyitatlan
 * magasság az első bekezdés alja + `--collapse-peek` sor, az elhalványodás
 * pedig ennek az utolsó `--collapse-fade` képpontján fut végig. A JS csak
 * akkor kapcsolja be az egészet (`is-collapsible`), ha a szöveg tényleg
 * hosszabb — egybekezdéses blokknál tehát semmi nem változik.
 *
 * Az elhalványodás MASZK, nem a háttér színére futó átfedő réteg: a blokkok
 * három különböző hátteret kaptak (fehér főoldal, `page-mint` aloldal, sötét
 * oktatói panel), és a maszk mindegyik fölött magától jó.
 */
.text-collapse-body {
    overflow: hidden;
}

.text-collapse.is-collapsible .text-collapse-body {
    transition: max-height .45s ease;
}

.text-collapse.is-collapsible.is-collapsed .text-collapse-body {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--collapse-fade, 54px)), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - var(--collapse-fade, 54px)), transparent 100%);
}

/*
 * A gomb kapcsolóként is link marad a jelölésben (JS nélkül a `href`-je
 * viszi tovább a látogatót), ezért a szövegkurzort kézre kell váltani.
 */
.text-collapse.is-collapsible .text-collapse-btn {
    cursor: pointer;
}

/*
 * Szekciócím alatti szövegnél (vállalati tréningek, tantermi képzések) a gomb
 * magától kapja a térközét: a `.site-desc` ALSÓ margója 0, a bekezdésközt a
 * következő bekezdés felső margója adja — a legutolsó alatt tehát nem maradna
 * semmi. A 30px a bekezdésköz (24px) és a szekció ritmusa között ül.
 */
.site-heading .text-collapse-btn {
    margin-top: 30px;
}

@media (prefers-reduced-motion: reduce) {
    .text-collapse.is-collapsible .text-collapse-body {
        transition: none;
    }
}


/*=====================================================
20. Blog oldalsáv mobilon: lenyíló menü
=====================================================*/
/*
 * Az aloldalakhoz nincs mobil terv, ezért a `.post-list-wrap` egy oszlopra
 * esik szét — és ott az oldalsáv hat doboza a bejegyzések ALÁ, a lapozó mögé
 * került, ahová a látogató nem görget le. A kereső, a kategóriák és a címkék
 * így gyakorlatilag elérhetetlenek voltak.
 *
 * Mobilon (≤991px) ezért az egész oldalsáv EGY lenyíló menü a lista fölött —
 * a bejegyzésoldalon is, ahol ugyanez a partial fut. Desktopon semmi nem
 * változik: a gomb rejtve marad, a panel nyitva.
 *
 * A panel azért kapja meg a style.css oldalsávjának oszlop-elrendezését, mert
 * a widgetek eggyel beljebb kerültek; az `aside` flexboxának így egyetlen
 * látható gyereke marad, tehát a 46px-es térköz nem lép működésbe.
 */
.post-sidebar-panel {
    display: flex;
    flex-direction: column;
    gap: 46px;
}

/* Script nélkül (és desktopon) nincs mit kinyitni — a gomb sem kell. */
.post-sidebar-toggle {
    display: none;
}

@media (max-width: 991px) {
    /*
     * Az `is-collapsible`-t a main.js (8/b.) teszi ki. Amíg nincs ott, a panel
     * nyitva marad: script nélkül a látogató a lista fölött, kifejtve kapja az
     * oldalsávot — kevésbé elegáns, de működik.
     */
    .post-sidebar {
        order: -1;
        gap: 0;
    }

    .post-sidebar.is-collapsible .post-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        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);
    }

    /* A GYIK kérdéssávjának nyitott állapota — ugyanaz a kapcsoló-formanyelv. */
    .post-sidebar.is-collapsible.open .post-sidebar-toggle,
    .post-sidebar.is-collapsible .post-sidebar-toggle:hover {
        background: var(--theme-color);
        color: var(--color-white);
    }

    .post-sidebar-toggle i {
        font-size: 14px;
        transition: var(--transition);
    }

    .post-sidebar.open .post-sidebar-toggle i {
        transform: rotate(180deg);
    }

    .post-sidebar.is-collapsible .post-sidebar-panel {
        display: none;
    }

    /*
     * Kinyitva a dobozok szorosabban ülnek, mint a terv 46px-es desktop
     * ritmusa: itt egyetlen menü tartalmaként olvassuk őket, nem különálló
     * oldalsáv-elemekként.
     */
    .post-sidebar.is-collapsible.open .post-sidebar-panel {
        display: flex;
        gap: 24px;
        padding-top: 24px;
    }
}


/*=====================================================
21. Mobil kártyasáv lapozó (pöttyök)
=====================================================*/
/*
 * A kártyasorokhoz mobilon nem készült lapozó a terven: ott a sáv ujjal
 * húzható, és a jelzés az, hogy a szomszédos kártya beleslóg a képbe (l.
 * style.css „Reszponzív”, `.course-slider`). Ez érintésre működik is —
 * EGÉRREL és BILLENTYŰZETTEL viszont semmi nem mozgatta: a görgetősáv rejtve
 * van (`scrollbar-width: none`), nyíl pedig csak a carousel mellé kerül ki,
 * ami 992px alatt nem fut. Keskeny asztali ablakban így a harmadik kártyától
 * kezdve elérhetetlen volt a sor.
 *
 * Ezért kap a sáv egy pöttysort. Terv nincs hozzá, ezért a MEGLÉVŐ pöttysor
 * formanyelvét viszi tovább: a hero slideré (style.css „Slider pontok”) —
 * 16px-es kör, szürkén `--dot-inactive`, aktívan `--accent-blue`.
 *
 * ALAPBÓL REJTVE van — a `has-dots` osztályt a main.js teszi ki, és csak akkor,
 * ha a sáv tényleg túlcsordul („Mobil kártyasáv lapozó”). Asztali nézetben (ott
 * rács vagy carousel van) sosem látszik, JS nélkül pedig nem marad ott halott
 * pöttysor — ugyanaz a szabály, mint a nyilaknál.
 */
.slider-dots {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    /*
     * A hero pöttyei 24px-re ülnek egymástól; ott 3-4 dia van, itt viszont
     * KILENC kártya is lehet (`HomePage::SECTION_SLIDER_LIMIT`), és annyi ekkora
     * hézaggal már nem férne ki egy telefonra. A gomb ezért 24×24-es — ennyi a
     * WCAG 2.2 2.5.8 „Target Size (Minimum)” mérete —, a hézag pedig 2px: kilenc
     * pötty így 232px, ami a legkeskenyebb telefonra is kifér egy sorban.
     */
    gap: 2px;
    /* A 24px-es doboz felül-alul 4-4px üres helyet ad a 16px-es pötty körül. */
    margin-top: 14px;
}

.slider-dots.has-dots {
    display: flex;
}

.slider-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
}

/*
 * A LÁTHATÓ pötty a gomb belsejében ül: a gombnak akkorának kell lennie, hogy
 * ujjal is eltalálható legyen, a rajznak viszont a hero pöttyeivel egyezőnek.
 *
 * A tétlen pötty kisebb is, nem csak halványabb: a kettő közti különbséget így
 * nem egyedül a szín hordozza (WCAG 1.4.1 „Use of Color”) — ez a hero
 * pöttysorához képest a plusz.
 */
.slider-dot::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--dot-inactive);
    transition: var(--transition);
}

.slider-dot[aria-current]::before {
    width: 16px;
    height: 16px;
    background: var(--accent-blue);
}


/*=====================================================
22. Leiratkozó oldal (hírlevél)
=====================================================*/
/*
 * A `/hirlevel-leiratkozas` oldal. Tervet ehhez sem kaptunk — ugyanaz a
 * helyzet, mint a köszönő oldalaknál (14.), és ugyanaz a megoldás: a meglévő
 * design system elemeiből épül, új formanyelv nélkül.
 *
 *   - a doboz a Kapcsolat űrlapjának szürke panelje (`.contact-form-panel`,
 *     style.css 30.),
 *   - a függőleges térköz a köszönő oldalaké (14.),
 *   - a konténer keskenyebb: egyetlen mező és egy gomb az 1256px-es rácson
 *     elveszne.
 *
 * A `.contact-form` rácsa két oszlopos; ez az űrlap EGY mezős, ezért az input
 * `field-full` osztállyal a teljes sort elfoglalja (a gomb amúgy is).
 */
.newsletter-unsubscribe-area {
    --container-w: 720px;
    padding-block: 76px 96px;
}

/*
 * Az űrlap alatti tájékoztatás: mi marad meg a leiratkozás után. A méret a
 * `.legal-meta`-é (15.) — apró betűs, de nem elbújtatott.
 */
.newsletter-unsubscribe-note {
    margin: 22px 0 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--muted-text);
}

.newsletter-unsubscribe-note a {
    color: var(--theme-color);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .newsletter-unsubscribe-area {
        padding-block: 50px 60px;
    }
}