/* =====================================================
   ГИМНАЗИАЛЕН ЕТАП
   Страница: pages/gimnazia.html
===================================================== */

:root {
    --gim-purple: #5b3fa0;
    --gim-purple-dark: #43307c;
    --gim-purple-light: #ece5f9;

    --gim-background: #f7f5fb;
    --gim-surface: #ffffff;
    --gim-border: #e2dcf0;

    --gim-text: #241b3d;
    --gim-text-soft: #6b6480;

    --gim-gold: #d99a3f;

    --gim-shadow:
        0 18px 48px rgba(36, 27, 61, 0.12);

    --gim-shadow-hover:
        0 26px 60px rgba(36, 27, 61, 0.17);

    --gim-radius-small: 12px;
    --gim-radius-medium: 20px;
    --gim-radius-large: 30px;
}


/* =====================================================
   ОСНОВНИ НАСТРОЙКИ
===================================================== */

body {
    background: var(--gim-background);
}

main {
    overflow: hidden;
}


/* =====================================================
   HERO СЕКЦИЯ
===================================================== */

.stage-page-hero {
    padding:
        clamp(70px, 9vw, 125px)
        0;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(140, 110, 210, 0.28),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 18%,
            rgba(255, 255, 255, 0.8),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #f1ecfb,
            #ddd0f1
        );
}

.stage-page-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.95fr);

    align-items: center;
    gap: clamp(45px, 8vw, 110px);
}

.stage-page-hero-content {
    position: relative;
    z-index: 2;
}

.stage-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 25px;

    color: var(--gim-purple-dark);
    text-decoration: none;

    font-size: 0.9rem;
    font-weight: 800;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}

.stage-back-link:hover {
    color: var(--gim-purple);
    transform: translateX(-4px);
}

.stage-page-hero h1 {
    max-width: 760px;
    margin: 0;

    color: var(--gim-text);

    font-size: clamp(3rem, 6vw, 6.2rem);
    line-height: 0.96;
    letter-spacing: -0.06em;
}

.stage-page-description {
    max-width: 700px;
    margin: 26px 0 0;

    color: var(--gim-text-soft);

    font-size: clamp(1.04rem, 1.4vw, 1.24rem);
    line-height: 1.7;
}

.stage-page-actions {
    margin-top: 34px;

    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


/* =====================================================
   HERO ИЛЮСТРАЦИЯ
===================================================== */

.stage-page-visual {
    min-height: 400px;

    display: grid;
    place-items: center;
}

.upper-stage-illustration {
    position: relative;

    width: min(430px, 90vw);
    aspect-ratio: 1 / 1;

    display: grid;
    place-items: center;

    border: 14px solid rgba(255, 255, 255, 0.92);
    border-radius: 42px;

    background:
        linear-gradient(
            145deg,
            #8a6fca,
            #b9a6e2
        );

    box-shadow: var(--gim-shadow);

    transform: rotate(-2deg);
}

.upper-stage-illustration span {
    position: absolute;

    display: grid;
    place-items: center;

    width: 92px;
    height: 92px;

    border: 3px solid rgba(255, 255, 255, 0.55);
    border-radius: 24px;

    background: rgba(255, 255, 255, 0.14);
    color: white;

    font-size: 2.1rem;
    font-weight: 900;

    backdrop-filter: blur(4px);
}

.upper-shape-one {
    left: 12%;
    top: 14%;
    transform: rotate(-6deg);
}

.upper-shape-two {
    right: 12%;
    top: 30%;
    transform: rotate(5deg);
}

.upper-shape-three {
    left: 30%;
    bottom: 14%;
    transform: rotate(-3deg);
}


/* =====================================================
   СЕКЦИИ ПО КЛАСОВЕ
===================================================== */

.grade-resources-section {
    padding: 95px 0;
}

.grade-resources-highlight {
    background:
        linear-gradient(
            180deg,
            #f4f1fa,
            #edE7f7
        );
}

.grade-section-heading {
    margin-bottom: 38px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
}

.grade-section-heading h2 {
    margin: 0;

    color: var(--gim-text);

    font-size: clamp(2.3rem, 4.5vw, 4.4rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.grade-resource-count {
    padding: 9px 14px;

    border: 1px solid var(--gim-border);
    border-radius: 999px;

    background: white;
    color: var(--gim-purple-dark);

    font-size: 0.82rem;
    font-weight: 900;
}


/* =====================================================
   КАРТИ С РЕСУРСИ
===================================================== */

.stage-resource-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.stage-resource-card {
    overflow: hidden;

    border: 1px solid var(--gim-border);
    border-radius: 24px;

    background: var(--gim-surface);

    box-shadow:
        0 14px 34px rgba(36, 27, 61, 0.09);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.stage-resource-card:hover {
    transform: translateY(-7px);

    border-color: rgba(91, 63, 160, 0.35);

    box-shadow: var(--gim-shadow-hover);
}

.stage-resource-image {
    position: relative;

    min-height: 200px;

    display: block;
    overflow: hidden;

    text-decoration: none;
}

.stage-resource-grade {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 5;

    padding: 7px 12px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.92);
    color: var(--gim-text);

    font-size: 0.78rem;
    font-weight: 900;
}

.interactive-resource-badge,
.download-resource-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;

    padding: 7px 11px;

    border-radius: 999px;

    font-size: 0.74rem;
    font-weight: 900;
}

.interactive-resource-badge {
    background: var(--gim-purple);
    color: white;
}

.download-resource-badge {
    background: rgba(255, 255, 255, 0.88);
    color: var(--gim-text);
}

.risk-resource-image {
    background:
        radial-gradient(circle at 25% 30%, rgba(217, 154, 63, 0.55), transparent 45%),
        radial-gradient(circle at 75% 65%, rgba(91, 63, 160, 0.6), transparent 45%),
        linear-gradient(135deg, #2c1f4d 0%, #43307c 100%);
}

.stage-resource-content {
    padding: 24px;
}

.stage-resource-content h3 {
    margin:
        6px
        0
        0;

    color: var(--gim-text);

    font-size: 1.45rem;
    letter-spacing: -0.025em;
}

.stage-resource-content .resource-description {
    min-height: 78px;
}

.resource-tags {
    margin-top: 20px;

    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.resource-tags span {
    padding: 6px 9px;

    border-radius: 999px;

    background: var(--gim-purple-light);
    color: var(--gim-purple-dark);

    font-size: 0.72rem;
    font-weight: 800;
}

.stage-resource-footer {
    margin-top: 24px;
    padding-top: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border-top: 1px solid var(--gim-border);
}

.resource-access,
.resource-price {
    color: var(--gim-text);
    font-weight: 900;
}

.resource-open-link {
    color: var(--gim-purple);
    text-decoration: none;
    font-weight: 900;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.resource-open-link:hover {
    color: var(--gim-purple-dark);
    transform: translateX(4px);
}


/* =====================================================
   ЗАБЕЛЕЖКА ЗА УЧЕБНИ ДАННИ
===================================================== */

.gim-data-note {
    max-width: 900px;
    margin: 0 0 34px;
    padding: 14px 18px;

    border: 1px solid #f0dfae;
    border-radius: var(--gim-radius-small);

    background: #fbf1e0;
    color: #6e4d0e;

    font-size: 0.88rem;
    line-height: 1.6;
}


/* =====================================================
   ПРЕДСТОЯЩИ КЛАСОВЕ
===================================================== */

.coming-grades-section {
    padding: 70px 0 100px;
}

.coming-grades-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;
}

.coming-grade-card {
    padding: 24px;

    border: 1px dashed rgba(91, 63, 160, 0.35);
    border-radius: var(--gim-radius-medium);

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

    text-align: center;
}

.coming-grade-card strong {
    display: block;
    margin-bottom: 6px;

    color: var(--gim-text);

    font-size: 1.3rem;
}

.coming-grade-card span {
    color: var(--gim-text-soft);
    font-size: 0.84rem;
}


/* =====================================================
   АДАПТАЦИЯ ЗА ТАБЛЕТ
===================================================== */

@media (max-width: 1050px) {

    .stage-page-hero-grid {
        grid-template-columns: 1fr;
    }

    .stage-page-visual {
        min-height: 320px;
    }

    .stage-resource-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .coming-grades-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =====================================================
   АДАПТАЦИЯ ЗА ТЕЛЕФОН
===================================================== */

@media (max-width: 720px) {

    .stage-page-hero {
        padding: 60px 0;
    }

    .grade-section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .stage-resource-grid {
        grid-template-columns: 1fr;
    }

    .coming-grades-grid {
        grid-template-columns: 1fr;
    }

}