/* =========================================================
   ECAMEC
   Legal pages
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.legal-page {
    padding-top: 86px;

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


/* =========================================================
   INTRO
========================================================= */

.legal-page__intro {
    padding:
        72px
        0
        48px;
}

.legal-page__back {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 44px;

    color: var(--text-secondary);

    font-size: 13px;
    font-weight: 500;

    transition:
        gap var(--transition-fast),
        color var(--transition-fast);
}

.legal-page__back:hover {
    gap: 13px;

    color: var(--color-orange);
}

.legal-page__title {
    margin-bottom: 18px;

    font-size: clamp(62px, 9vw, 120px);
    font-weight: 600;
    line-height: 0.92;

    letter-spacing: -0.06em;
}

.legal-page__updated {
    margin: 0;

    color: var(--text-muted);

    font-size: 13px;
}


/* =========================================================
   CONTENT
========================================================= */

.legal-page__content {
    padding-bottom: 100px;
}


/* =========================================================
   CARDS
========================================================= */

.legal-card {
    padding: 36px;

    background: var(--bg-secondary);

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


/* =========================================================
   INTRO CARD
========================================================= */

.legal-card--intro {
    margin-bottom: 18px;

    padding: 32px 36px;

    background: #d7d8d9;

    border: 1px solid rgba(255, 255, 255, 0.18);
}

.legal-card__intro-label {
    display: block;

    margin-bottom: 14px;

    color: var(--color-orange) !important;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-card--intro p {
    width: 100%;
    max-width: none;

    margin: 0;

    color: #30383a !important;

    font-size: clamp(20px, 1.7vw, 25px);
    font-weight: 600;
    line-height: 1.45;

    letter-spacing: -0.025em;
}

.legal-card--intro strong {
    color: #30383a !important;
}


/* =========================================================
   GRID
========================================================= */

.legal-grid {
    display: grid;
    grid-template-columns:
        minmax(220px, 0.32fr)
        minmax(0, 1fr);

    gap: 18px;
}


/* =========================================================
   INDEX
========================================================= */

.legal-index {
    align-self: start;

    position: sticky;
    top: 110px;

    padding: 30px;

    background: var(--bg-secondary);

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

.legal-index span {
    display: block;

    margin-bottom: 54px;

    color: var(--color-orange);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-index p {
    margin: 0;

    color: var(--text-secondary);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   SECTIONS
========================================================= */

.legal-sections {
    display: grid;

    gap: 18px;
}

.legal-card__number {
    display: block;

    margin-bottom: 20px;

    color: var(--color-orange);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.10em;
}

.legal-card h2 {
    margin-bottom: 24px;

    font-size: clamp(25px, 2.4vw, 36px);
}

.legal-card p {
    margin-bottom: 18px;

    color: var(--text-secondary);

    font-size: 16px;
    line-height: 1.8;
}

.legal-card p:last-child {
    margin-bottom: 0;
}

.legal-card strong {
    color: var(--color-white);
}

.legal-card a {
    color: var(--color-orange);

    transition: opacity var(--transition-fast);
}

.legal-card a:hover {
    opacity: 0.75;
}


/* =========================================================
   NOTE
========================================================= */

.legal-note {
    margin-top: 28px;

    padding: 24px;

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

    border-left: 3px solid var(--color-orange);
    border-radius: 0 14px 14px 0;
}

.legal-note > strong {
    display: block;

    margin-bottom: 12px;

    color: var(--color-orange);

    font-size: 13px;

    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.legal-note p {
    margin-bottom: 12px;
}

.legal-note p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 920px) {

    .legal-page {
        padding-top: 76px;
    }

    .legal-page__intro {
        padding-top: 54px;
    }

    .legal-grid {
        grid-template-columns: 1fr;
    }

    .legal-index {
        position: static;
    }

    .legal-index span {
        margin-bottom: 24px;
    }

}


@media (max-width: 640px) {

    .legal-page__intro {
        padding:
            40px
            0
            32px;
    }

    .legal-page__title {
        font-size: clamp(54px, 17vw, 82px);
    }

    .legal-page__content {
        padding-bottom: 64px;
    }

    .legal-card,
    .legal-card--intro,
    .legal-index {
        padding: 22px;

        border-radius: 18px;
    }

    .legal-card--intro p {
        font-size: 21px;
    }

    .legal-sections {
        gap: 12px;
    }

    .legal-card p {
        font-size: 15px;
        line-height: 1.75;
    }

}