/* ==========================================================================
   KB Legal Terms (Conditions générales) — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-legal. Centered 1140px content frame
   containing a centered top header (eyebrow / H1 / intro / last-
   updated stamp) above a two-column legal body on DESKTOP:
     [ sticky section index | section list ]
   Single column on TABLET / MOBILE (index above content).

   No cards, no radius, no shadows, no icons, no serif, no italic.
   Thin Ink-soft dividers between sections, generous vertical
   spacing. Gold owns the eyebrow + the small editorial numbers;
   Ink owns everything else. All values driven by tokens.css.
   Elementor is content-only — all styling lives here.
   ========================================================================== */

.kb-legal {
    position: relative;
    width: 100%;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    /* Section spacing TOP-ONLY (desktop 100 / tablet 80 / mobile 64).
       Bottom is owned by the next section / footer to avoid doubled gaps. */
    padding-top: var(--kb-section-space-desktop);
    padding-bottom: var(--kb-section-space-desktop);
}

/* ==========================================================================
   Inner content frame — 1140px content width, 32px tablet gutter,
   20px mobile gutter.
   ========================================================================== */
.kb-legal__inner {
    width: 100%;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    padding-inline: var(--kb-gutter-desktop);
}

/* ==========================================================================
   Top header — centered editorial block. Reuses the canonical
   .kb-section-eyebrow primitive (Montserrat / Gold / 12px / 500 /
   uppercase / 0.18em) defined in base.css. NO line, NO underline,
   NO ornament.
   ========================================================================== */
.kb-legal__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--kb-space-major) auto;
}

.kb-legal__eyebrow {
    margin: 0 0 var(--kb-space-m) 0;
}

.kb-legal__title {
    margin: 0 0 var(--kb-space-m) 0;
    font-family: var(--kb-font-display);
    font-size: 52px;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--kb-ink);
    font-style: normal;
    text-transform: uppercase;
    text-wrap: balance;
    text-decoration: none;
}

.kb-legal__intro {
    margin: 0 auto;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--kb-ink);
    font-style: normal;
    max-width: 640px;
    text-wrap: pretty;
    white-space: pre-line;
}

/* Last-updated stamp — small editorial mark printed right under the
   intro. Two inline spans separated by a single space. Restrained
   muted color, no italic, no border. */
.kb-legal__stamp {
    margin: var(--kb-space-m) auto 0 auto;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--kb-ink);
    font-style: normal;
    letter-spacing: 0.02em;
    text-align: center;
}

.kb-legal__stamp-label {
    color: var(--kb-ink);
    opacity: 0.72;
    margin-inline-end: 6px;
}

.kb-legal__stamp-value {
    color: var(--kb-gold);
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   Two-column layout — DESKTOP.
   Left column: section index, sticky, narrow (~240px).
   Right column: section list, takes the rest.
   Single source of truth for the column geometry; tablet/mobile
   overrides collapse the index above the content.
   ========================================================================== */
.kb-legal__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    column-gap: 80px;
    row-gap: var(--kb-space-xl);
    align-items: start;
}

/* ==========================================================================
   Section index (left column, sticky on desktop).
   No card, no border, no radius. Just a small editorial list.
   ========================================================================== */
.kb-legal__index {
    position: sticky;
    top: calc(var(--kb-header-height-desktop) + var(--kb-space-m));
    align-self: start;
}

.kb-legal__index-title {
    margin: 0 0 var(--kb-space-m) 0;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--kb-gold);
}

.kb-legal__index-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kb-ink-divider);
}

.kb-legal__index-item {
    border-bottom: 1px solid var(--kb-ink-divider);
}

.kb-legal__index-link {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: baseline;
    gap: var(--kb-space-s);
    padding: 14px 0;
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--kb-ink);
    font-style: normal;
    text-decoration: none;
    transition: color var(--kb-transition-ui), opacity var(--kb-transition-ui);
}

.kb-legal__index-link:hover {
    color: var(--kb-bordeaux);
}

.kb-legal__index-link:focus-visible {
    outline: 2px solid var(--kb-bordeaux);
    outline-offset: 3px;
}

.kb-legal__index-number {
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--kb-gold);
    font-variant-numeric: tabular-nums;
}

.kb-legal__index-label {
    display: block;
    text-wrap: pretty;
}

/* ==========================================================================
   Content column (right column on desktop).
   Each section is a small editorial block separated by a thin
   Ink-soft divider. Generous vertical spacing.
   ========================================================================== */
.kb-legal__content {
    min-width: 0;
}

.kb-legal__section {
    padding-block: var(--kb-space-xl);
    border-bottom: 1px solid var(--kb-ink-divider);
}

.kb-legal__section:first-of-type {
    padding-top: 0;
}

.kb-legal__section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.kb-legal__section-header {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: baseline;
    column-gap: var(--kb-space-m);
    margin: 0 0 var(--kb-space-m) 0;
}

.kb-legal__section-number {
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.06em;
    color: var(--kb-gold);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

.kb-legal__section-title {
    margin: 0;
    font-family: var(--kb-font-display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--kb-ink);
    font-style: normal;
    text-wrap: balance;
}

.kb-legal__section-body {
    margin: 0 0 0 64px; /* aligns with section title (number col + gap) */
    max-width: 720px;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--kb-ink);
    font-style: normal;
    text-wrap: pretty;
    white-space: pre-line;
}

/* ==========================================================================
   Tablet (≤ 1199px)
   - Section spacing 80 / 80 (top / bottom).
   - 32px gutter.
   - Layout collapses to single column; index sits above the
     content, no longer sticky.
   - Title 44px.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-legal {
        padding-top: var(--kb-section-space-tablet);
        padding-bottom: var(--kb-section-space-tablet);
    }

    .kb-legal__inner {
        padding-inline: var(--kb-gutter-tablet);
    }

    .kb-legal__title {
        font-size: 44px;
    }

    .kb-legal__layout {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: var(--kb-space-xl);
    }

    .kb-legal__index {
        position: static;
        top: auto;
        max-width: 720px;
    }
}

/* ==========================================================================
   Mobile (≤ 767px)
   - Section spacing 64 / 64.
   - 20px gutter.
   - Header left-aligned.
   - Section header collapses to a stacked layout: number above,
     title on its own line.
   - Section body removes the 64px left offset so the copy uses
     the full content width.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-legal {
        padding-top: var(--kb-section-space-mobile);
        padding-bottom: var(--kb-section-space-mobile);
    }

    .kb-legal__inner {
        padding-inline: var(--kb-gutter-mobile);
    }

    .kb-legal__header {
        text-align: left;
        max-width: none;
        margin-bottom: var(--kb-space-xl);
    }

    .kb-legal__title {
        font-size: 32px;
        line-height: 1.1;
    }

    .kb-legal__intro {
        max-width: none;
        font-size: 15px;
    }

    .kb-legal__stamp {
        text-align: left;
    }

    .kb-legal__index-link {
        grid-template-columns: 28px 1fr;
        gap: 12px;
        padding: 12px 0;
        font-size: 13px;
    }

    .kb-legal__section {
        padding-block: var(--kb-space-l);
    }

    .kb-legal__section-header {
        grid-template-columns: 1fr;
        row-gap: 8px;
        margin-bottom: var(--kb-space-s);
    }

    .kb-legal__section-title {
        font-size: 19px;
        line-height: 1.3;
    }

    .kb-legal__section-body {
        margin-left: 0;
        font-size: 14px;
        line-height: 1.75;
    }
}

/* ==========================================================================
   Tablet (768 – 1024px) — semantic refinement.
   Title 40px to keep the same calm mid-range tone used on every
   other page that uses the .kb-faq-acc / .kb-* section primitives.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .kb-legal__title {
        font-size: 40px;
    }
}

/* ==========================================================================
   Reduced motion — let the content simply be visible. The global
   rule in base.css already collapses reveal transitions, so this
   block is a no-op safety net scoped to the local element.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .kb-legal__index-link {
        transition: none;
    }
}

/* Legal page escape: remove top/bottom padding of Elementor wrapper.
   Same pattern as the FAQ / About / Services page-scoped overrides
   in base.css. This selector only matches when the .kb-legal widget
   is wrapped inside an Elementor .e-con container. */
.e-con:has(.kb-legal) > .e-con-inner {
    padding-block: 0;
}