/* ==========================================================
   GÉSZI – KÉPZÉSEINK
   ========================================================== */

.training-hero,
.training-summary,
.training-page {

    --tr-navy: #073650;
    --tr-navy-dark: #052b40;
    --tr-blue: #169fda;
    --tr-blue-light: #eaf7fc;

    --tr-text: #203846;
    --tr-muted: #536976;
    --tr-line: #dce5ea;

    --tr-bg: #f4f7f9;
}


/* ==========================================================
   HERO
   ========================================================== */

.training-hero {

    position: relative;

    overflow: hidden;

    padding: 68px 0 90px;

    background:
        radial-gradient(
            circle at 82% 30%,
            rgba(22,159,218,.34),
            transparent 35%
        ),
        linear-gradient(
            125deg,
            var(--tr-navy-dark),
            var(--tr-navy)
        );

    color: #fff;
}


.training-hero::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -190px;
    bottom: -360px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 50%;
}


.training-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;
}


.training-breadcrumb {

    margin-bottom: 34px;

    color: rgba(255,255,255,.55);

    font-size: 15px;
}


.training-breadcrumb a {

    color: rgba(255,255,255,.85);
}


.training-breadcrumb span {

    padding: 0 8px;
}


.training-eyebrow {

    display: block;

    margin-bottom: 10px;

    color: #67cef3;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.training-hero h1 {

    margin: 0;

    color: #fff !important;

    font-size: clamp(42px, 6vw, 68px);

    font-weight: 300;

    line-height: 1.04;

    letter-spacing: -1.8px;
}


.training-hero h1 strong {

    display: block;

    font-weight: 800;
}


.training-hero p {

    max-width: 700px;

    margin: 21px 0 0;

    color: rgba(255,255,255,.76);

    font-size: 18px;

    line-height: 1.65;
}


.training-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}


/* ==========================================================
   GOMBOK
   ========================================================== */

.training-btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 47px;

    padding: 0 20px;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 800;

    transition: .2s ease;
}


.training-btn:hover {

    transform: translateY(-1px);
}


.training-btn-primary {

    background: var(--tr-blue);

    color: #fff !important;
}


.training-btn-outline {

    background: rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.25);

    color: #fff !important;
}


.training-btn-dark {

    background: var(--tr-navy);

    color: #fff !important;
}


/* ==========================================================
   ÖSSZEFOGLALÓ
   ========================================================== */

.training-summary {

    position: relative;

    z-index: 4;

    margin-top: -31px;
}


.training-summary-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    overflow: hidden;

    background: #fff;

    border-radius: 14px;

    box-shadow:
        0 15px 40px rgba(7,54,80,.14);
}


.training-summary-grid > div {

    padding: 22px 18px;

    border-right:
        1px solid var(--tr-line);

    text-align: center;
}


.training-summary-grid > div:last-child {

    border-right: 0;
}


.training-summary strong {

    display: block;

    color: var(--tr-navy);

    font-size: 19px;

    font-weight: 800;
}


.training-summary span {

    display: block;

    margin-top: 3px;

    color: var(--tr-muted);

    font-size: 14px;
}


/* ==========================================================
   OLDAL
   ========================================================== */

.training-page {

    padding: 70px 0 80px;

    background: var(--tr-bg);
}


.training-intro {

    max-width: 760px;

    margin-bottom: 31px;
}


.training-section-label {

    display: block;

    margin-bottom: 7px;

    color: var(--tr-blue);

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1.4px;
}


.training-intro h2,
.training-section-heading h2,
.training-info h2,
.training-dorm h2 {

    margin: 0 0 10px;

    color: var(--tr-text) !important;

    font-size: 31px;

    font-weight: 800;

    line-height: 1.2;
}


.training-intro p,
.training-section-heading p {

    margin: 0;

    color: var(--tr-muted);

    line-height: 1.65;
}


/* ==========================================================
   KÉPZÉSI KÁRTYÁK
   ========================================================== */

.training-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.training-card {

    position: relative;

    overflow: hidden;

    background: #fff;

    border:
        1px solid var(--tr-line);

    border-radius: 16px;

    box-shadow:
        0 7px 25px rgba(13,50,70,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.training-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 17px 38px rgba(13,50,70,.12);
}


.training-card-full-link {

    position: absolute;

    z-index: 10;

    inset: 0;
}


.training-card-image {

    position: relative;

    height: 285px;

    overflow: hidden;

    background: var(--tr-navy);
}


.training-card-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}


.training-card:hover
.training-card-image img {

    transform: scale(1.035);
}


.training-card-gradient {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(5,43,64,.03),
            rgba(5,43,64,.08) 45%,
            rgba(5,43,64,.86)
        );
}


.training-card-code {

    position: absolute;

    top: 17px;
    left: 17px;

    padding: 6px 10px;

    background: rgba(255,255,255,.95);

    border-radius: 6px;

    color: var(--tr-navy);

    font-size: 15px;

    font-weight: 900;
}


.training-card-sector {

    position: absolute;

    right: 18px;
    bottom: 17px;
    left: 18px;

    color: #fff;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;
}


.training-card-body {

    display: flex;

    flex-direction: column;

    min-height: 300px;

    padding: 25px;
}


.training-shared-code {

    align-self: flex-start;

    margin-bottom: 10px;

    padding: 5px 8px;

    background: var(--tr-blue-light);

    border-radius: 5px;

    color: #167eab;

    font-size: 13px;

    font-weight: 800;
}


.training-card h3 {

    margin: 0;

    color: var(--tr-text) !important;

    font-size: 22px;

    font-weight: 800;

    line-height: 1.25;
}


.training-card-subtitle {

    margin-top: 5px;

    color: var(--tr-blue);

    font-size: 14px;

    font-weight: 800;
}


.training-card-tagline {

    display: block;

    margin-top: 14px;

    color: var(--tr-navy);

    font-size: 16px;
}


.training-card-body > p {

    margin: 9px 0 0;

    color: var(--tr-muted);

    font-size: 16px;

    line-height: 1.6;
}


.training-card-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 17px;
}


.training-card-tags span {

    padding: 5px 8px;

    background: #f1f5f7;

    border-radius: 5px;

    color: #60747f;

    font-size: 13px;

    font-weight: 700;
}


.training-card-more {

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: auto;

    padding-top: 22px;

    color: var(--tr-navy);

    font-size: 15px;

    font-weight: 800;
}


.training-card-more i {

    color: var(--tr-blue);

    transition: transform .2s ease;
}


.training-card:hover
.training-card-more i {

    transform: translateX(4px);
}


/* ==========================================================
   0103 INFORMÁCIÓ
   ========================================================== */

.training-info {

    display: flex;

    gap: 25px;

    margin-top: 24px;

    padding: 31px;

    background: var(--tr-navy);

    border-radius: 15px;

    color: #fff;
}


.training-info-icon {

    display: flex;

    flex: 0 0 66px;

    align-items: center;
    justify-content: center;

    width: 66px;
    height: 66px;

    background: rgba(255,255,255,.1);

    border-radius: 13px;

    color: #67cef3;

    font-size: 25px;
}


.training-info .training-section-label {

    color: #67cef3;
}


.training-info h2 {

    color: #fff !important;
}


.training-info p {

    max-width: 800px;

    margin: 7px 0 0;

    color: rgba(255,255,255,.73);

    line-height: 1.6;
}


.training-info strong {

    color: #fff;
}


/* ==========================================================
   VÁLASZTÁST SEGÍTŐ
   ========================================================== */

.training-chooser {

    margin-top: 65px;
}


.training-section-heading {

    max-width: 680px;

    margin-bottom: 25px;
}


.training-chooser-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 11px;
}


.training-choice {

    display: grid;

    grid-template-columns:
        48px 1fr auto;

    gap: 14px;

    align-items: center;

    padding: 16px 18px;

    background: #fff;

    border:
        1px solid var(--tr-line);

    border-radius: 11px;

    transition: .2s ease;
}


.training-choice:hover {

    border-color: #bdd9e6;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(13,50,70,.07);
}


.training-choice-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    background: var(--tr-blue-light);

    border-radius: 10px;

    color: var(--tr-blue);

    font-size: 18px;
}


.training-choice strong {

    display: block;

    color: var(--tr-text);

    font-size: 16px;
}


.training-choice div > span {

    display: block;

    margin-top: 2px;

    color: var(--tr-muted);

    font-size: 13px;
}


.training-choice > i {

    color: var(--tr-blue);
}


/* ==========================================================
   KOLLÉGIUM
   ========================================================== */

.training-dorm {

    display: grid;

    grid-template-columns:
        1fr 190px;

    gap: 35px;

    align-items: center;

    margin-top: 60px;

    padding: 34px;

    background: #fff;

    border:
        1px solid var(--tr-line);

    border-radius: 15px;
}


.training-dorm p {

    max-width: 700px;

    margin: 0;

    color: var(--tr-muted);

    line-height: 1.6;
}


.training-text-link {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 16px;

    color: var(--tr-blue) !important;

    font-size: 15px;

    font-weight: 800;
}


.training-dorm-stat {

    padding: 23px;

    background: var(--tr-blue-light);

    border-radius: 11px;

    text-align: center;
}


.training-dorm-stat strong {

    display: block;

    color: var(--tr-navy);

    font-size: 38px;

    line-height: 1;
}


.training-dorm-stat span {

    display: block;

    margin-top: 4px;

    color: var(--tr-text);

    font-weight: 800;
}


.training-dorm-stat small {

    display: block;

    margin-top: 3px;

    color: var(--tr-muted);
}


/* ==========================================================
   CTA
   ========================================================== */

.training-cta {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin-top: 25px;

    padding: 36px;

    background:
        linear-gradient(
            120deg,
            var(--tr-navy-dark),
            var(--tr-navy)
        );

    border-radius: 16px;

    color: #fff;
}


.training-cta > div:first-child > span {

    color: #67cef3;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.training-cta h2 {

    margin: 5px 0 7px;

    color: #fff !important;

    font-size: 26px;

    font-weight: 800;
}


.training-cta p {

    max-width: 620px;

    margin: 0;

    color: rgba(255,255,255,.70);

    font-size: 16px;

    line-height: 1.6;
}


.training-cta-actions {

    display: flex;

    flex: 0 0 auto;

    gap: 8px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 991px) {

    .training-card-image {

        height: 240px;
    }


    .training-chooser-grid {

        grid-template-columns: 1fr;
    }


    .training-cta {

        align-items: flex-start;

        flex-direction: column;
    }

}


/* ==========================================================
   MOBIL
   ========================================================== */

@media (max-width: 767px) {

    .training-hero {

        padding: 44px 0 70px;
    }


    .training-hero h1 {

        font-size: 40px;
    }


    .training-hero p {

        font-size: 17px;
    }


    .training-hero-actions {

        flex-direction: column;
    }


    .training-btn {

        width: 100%;
    }


    .training-summary-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .training-summary-grid > div {

        border-bottom:
            1px solid var(--tr-line);
    }


    .training-summary-grid > div:nth-child(2) {

        border-right: 0;
    }


    .training-summary-grid > div:nth-last-child(-n+2) {

        border-bottom: 0;
    }


    .training-page {

        padding-top: 52px;
    }


    .training-grid {

        grid-template-columns: 1fr;
    }


    .training-card-image {

        height: 230px;
    }


    .training-card-body {

        min-height: 0;
    }


    .training-info {

        flex-direction: column;

        padding: 25px 21px;
    }


    .training-chooser {

        margin-top: 48px;
    }


    .training-choice {

        grid-template-columns:
            43px 1fr auto;

        padding: 14px;
    }


    .training-choice-icon {

        width: 43px;
        height: 43px;
    }


    .training-dorm {

        grid-template-columns: 1fr;

        padding: 27px 22px;
    }


    .training-cta {

        padding: 28px 22px;
    }


    .training-cta-actions {

        flex-direction: column;

        width: 100%;
    }

}

/* Képzési kártyák egységes tipográfiája */
.training-card,
.training-card h3,
.training-card p,
.training-card span,
.training-card strong,
.training-card a,
.training-card small {
    font-family: 'Inter', Arial, sans-serif;
}