/*=====================================================
Á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. 404 — segítő blokk (kereső, ajánlatok, címkefelhők)
=====================================================*/


/*=====================================================
 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;
}


/*=====================================================
 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;
}

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

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


/*=====================================================
 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
=====================================================*/
.search-area {
    --container-w: 1052px;
    padding-block: 70px 90px;
}

.search-page-form {
    display: flex;
    gap: 0;
    margin-bottom: 40px;
    box-shadow: var(--shadow-card);
}

.search-page-form input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--color-white);
    border: 0;
    padding: 19px 22px;
    font-size: 16px;
}

.search-page-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-page-form button:hover {
    background: var(--theme-color-hover);
}

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

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

.search-group {
    margin-bottom: 52px;
}

.search-group > h2 {
    font-size: 24px;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--theme-color);
}

.search-group > h2 span {
    font-size: 15px;
    font-weight: 400;
    color: var(--muted-text);
}

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

.search-course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.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;
}

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

.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 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@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,
    .search-area {
        padding-block: 50px 60px;
    }

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

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

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

    .search-page-form button {
        padding-block: 15px;
    }

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

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

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


/*=====================================================
 9. Kurzus adatlap (/kurzusaink/{slug})
=====================================================*/
.course-detail-area {
    --container-w: 1200px;
    padding-block: 70px 90px;
}

.course-detail-wrap {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 46px;
    align-items: start;
}

.course-detail-main h2 {
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 18px;
}

.course-detail-img {
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.course-detail-img img {
    width: 100%;
    height: auto;
    display: block;
}

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

.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;
}

.course-detail-tags {
    margin-top: 34px;
}

.course-detail-tags h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

/* Jobb oldali adatpanel */
.course-detail-panel {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 26px 24px;
}

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

.course-detail-panel h2 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 16px;
}

.course-detail-facts {
    display: flex;
    flex-direction: column;
}

.course-detail-facts li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-block: 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
    line-height: 22px;
}

.course-detail-facts li:last-child {
    border-bottom: 0;
}

.course-detail-facts .fact-label {
    color: var(--muted-text);
    flex: 0 0 auto;
}

.course-detail-facts .fact-value {
    color: var(--heading-color);
    font-weight: 600;
    text-align: right;
}

.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: 16px;
}

.course-detail-panel .theme-btn {
    display: block;
    text-align: center;
    margin-top: 20px;
}

.course-detail-dates {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.course-detail-dates li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--body-text);
}

.course-detail-dates i {
    color: var(--accent-blue);
}

.course-detail-start-text {
    font-size: 15px;
    line-height: 23px;
    color: var(--body-text);
}

.course-detail-start-text + .course-detail-dates {
    margin-top: 14px;
}

/* Hasonló képzések */
.course-detail-related {
    margin-top: 70px;
}

.course-detail-related h2 {
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 26px;
}

.course-detail-related .course-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
}

.course-detail-related .course-tile {
    box-shadow: var(--shadow-card);
}

.course-detail-footer {
    margin-top: 40px;
    text-align: center;
}

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

    .course-detail-related .course-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .course-detail-main h2,
    .course-detail-related h2 {
        font-size: 22px;
        line-height: 30px;
    }

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


/*=====================================================
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: event 26px, 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.
 */
.event-slider.owl-carousel,
.course-slider.owl-carousel,
.testimonial-grid.owl-carousel {
    display: flow-root;
}

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

/* 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 span`) pirula-formáját veszi át, de linkként —
 * 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. 404 — segítő blokk (kereső, ajánlatok, címkefelhők)
=====================================================*/
/*
 * A 404.png terv a szürke sávval véget ér — ez a blokk AZ ALATT kezdődik, tehát
 * a tervezett kompozíciót (cím + kódsáv + illusztráció + szürke sáv) nem érinti.
 *
 * A design system elemeiből épül: a keresőmező a keresőoldaléval
 * (`.search-page-form`), 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ő.
 */
.error-help {
    --container-w: 1200px;
    background: var(--section-bg);
    padding-block: 70px 90px;
}

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

/* Kereső — a hibás címből előtöltve */
.error-help-search {
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
}

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

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

.error-help-search input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--color-white);
    border: 0;
    padding: 19px 22px;
    font-size: 16px;
}

.error-help-search 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);
}

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

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

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

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

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

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

.error-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);
}

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

.error-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);
}

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

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

.error-suggestions a:hover .error-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 */
.error-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
}

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

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

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

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

@media (max-width: 767px) {
    .error-help {
        padding-block: 50px 60px;
    }

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

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

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

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

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

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

    .error-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; }
}