.training-materials-hero {

    min-height: 55vh;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color: var(--white);

}

.training-materials-hero .hero-content {

    max-width: 900px;

}

.training-materials-hero .hero-tag {

    display: inline-block;

    padding: 10px 18px;

    margin-bottom: 25px;

    background: rgba(255, 255, 255, 0.15);

    border: 1px solid rgba(255, 255, 255, 0.25);

    color: var(--white);

}

.training-materials-hero h1 {

    color: var(--white);

}

.training-materials-hero p {

    max-width: 850px;

    color: rgba(255, 255, 255, 0.95);

}

.training-materials-section {

    background:
        radial-gradient(circle at 8% 5%, rgba(0, 119, 182, 0.08), transparent 25rem),
        linear-gradient(180deg, #f6fbff 0%, #eef6fb 100%);

}

.training-materials-grid {

    display: grid;

    gap: 46px;

}

.material-group {

    --material-accent: var(--primary);
    --material-accent-rgb: 0, 91, 150;

    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding: clamp(24px, 4vw, 36px);

    border: 3px solid rgba(15, 23, 42, 0.92);

    border-radius: 28px;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 248, 252, 0.94));

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(var(--material-accent-rgb), 0.08);

    transition:
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.36s cubic-bezier(0.22, 1, 0.36, 1);

}

.material-group:nth-child(2) {

    --material-accent: var(--secondary);
    --material-accent-rgb: 0, 119, 182;

}

.material-group:nth-child(3) {

    --material-accent: var(--accent);
    --material-accent-rgb: 0, 166, 166;

}

.material-group::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            135deg,
            rgba(var(--material-accent-rgb), 0.14),
            transparent 36%,
            rgba(255, 255, 255, 0.78) 62%,
            rgba(var(--material-accent-rgb), 0.08)
        );

    opacity: 0;

    transform: scale(0.98);

    transition:
        opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);

}

.material-group:hover {

    transform: translateY(-6px) scale(1.01);

    border-color: rgba(var(--material-accent-rgb), 0.92);

    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.13),
        0 0 0 5px rgba(var(--material-accent-rgb), 0.1);

}

.material-group:hover::before {

    opacity: 1;

    transform: scale(1);

}

.material-group-heading {

    margin-bottom: 24px;

    padding-bottom: 18px;

    border-bottom: 2px solid rgba(0, 91, 150, 0.14);

    text-align: center;

}

.material-group-heading h2 {

    margin: 0;

    color: #0f172a;

    font-size: clamp(1.45rem, 2.5vw, 2.1rem);

    font-weight: 900;

    line-height: 1.22;

}

.material-card {

    display: grid;

    grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.14fr);

    gap: 28px;

    align-items: start;

    overflow: hidden;

    border: 2px solid rgba(15, 23, 42, 0.9);

    border-radius: 22px;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 253, 0.96));

    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.09);

}

.material-preview {

    width: 100%;

    min-height: 520px;

    max-height: none;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 18px;

    overflow: hidden;

    border-right: 2px solid rgba(15, 23, 42, 0.14);

    background:
        linear-gradient(180deg, rgba(232, 242, 248, 0.98), rgba(248, 252, 255, 0.98)),
        #e8f2f8;

}

.material-preview-image {

    width: 100%;

    height: 100%;

    max-height: 760px;

    min-height: 0;

    display: block;

    object-fit: contain;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(15, 23, 42, 0.08);

    transition:
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.36s cubic-bezier(0.22, 1, 0.36, 1);


}

.material-group:hover .material-preview-image {

    transform: scale(1.018);

    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.18),
        0 0 0 2px rgba(var(--material-accent-rgb), 0.18);

}

.material-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: clamp(24px, 4vw, 36px) clamp(22px, 4vw, 38px) clamp(24px, 4vw, 36px) 0;

}

.material-kicker {

    display: inline-flex;

    width: fit-content;

    margin-bottom: 14px;

    padding: 8px 14px;

    border-radius: 999px;

    background: rgba(0, 119, 182, 0.09);

    color: var(--primary);

    font-size: 0.78rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}

.material-content h3 {

    margin-bottom: 18px;

    color: #0f172a;

    font-size: clamp(1.55rem, 2.5vw, 2.2rem);

    font-weight: 900;

    line-height: 1.2;

}

.material-content p {

    margin-bottom: 14px;

    color: #111827;

    text-align: justify;

    font-size: 1rem;

    font-weight: 650;

    line-height: 1.72;

}

.material-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 16px;

}

.material-btn {

    min-width: 164px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 20px;

    border-radius: 15px;

    font-size: 0.95rem;

    font-weight: 800;

    box-shadow: 0 12px 24px rgba(0, 91, 150, 0.14);

}

.material-actions .view-btn {

    border: 1px solid rgba(0, 91, 150, 0.18);

}

.material-actions .download-btn {

    background: linear-gradient(135deg, #0077b6 0%, #005b96 52%, #004a79 100%);

}

@media (max-width: 991px) {

    .material-card {

        grid-template-columns: 1fr;

    }

    .material-preview {

        min-height: 440px;

        max-height: none;

        border-right: 0;

        border-bottom: 2px solid rgba(15, 23, 42, 0.14);

    }

    .material-content {

        padding: 24px;

    }

}

@media (max-width: 576px) {

    .material-group {

        padding: 20px;

        border-radius: 24px;

    }

    .material-actions {

        flex-direction: column;

    }

    .material-btn {

        width: 100%;

    }

    .material-preview {

        min-height: 380px;

        padding: 12px;

    }

}

@media (prefers-reduced-motion: reduce) {

    .material-group,
    .material-group::before,
    .material-preview-image {

        transition: none !important;

    }

    .material-group:hover,
    .material-group:hover .material-preview-image {

        transform: none;

    }

}