/* ==========================================================================
   MONÈRA CONSULTING — PRIVACY POLICY PAGE
   All tokens resolved from theme.css (:root variables loaded via _Layout).
   Depends on: theme.css → --gold-accent, --heading-font, --body-font,
               --text-dark, --muted-text, --border-light, --bg-icon
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE WRAPPER
   -------------------------------------------------------------------------- */
.privacy-page {
    background : #ffffff;
    padding    : 80px 0 110px;
}

.policy-container {
    max-width : 1140px;
}

/* --------------------------------------------------------------------------
   1. INTRO SECTION
   Single separator: the FIRST policy-item's border-top provides the rule.
   No border-bottom here — that would create a double line.
   -------------------------------------------------------------------------- */
.policy-intro {
    /* Max-width only on body copy, NOT on the section itself.
       The display heading must be free to span the full container width. */
    padding-bottom : 52px;   /* whitespace gap before the policy-item border-top */
    margin-bottom  : 0;
}

/* Large display heading — Cormorant Garamond, luxury editorial */
.policy-main-title {
    font-family    : var(--heading-font);
    font-size      : clamp(52px, 8vw, 88px);
    font-weight    : 600;
    letter-spacing : -2px;
    color          : var(--text-dark);
    line-height    : 1;
    text-transform : uppercase;
    margin-bottom  : 24px;
}

/* Gold divider — short rule + dot */
.policy-divider {
    display       : flex;
    align-items   : center;
    gap           : 8px;
    margin-bottom : 28px;
}

.divider-line {
    display    : block;
    width      : 56px;
    height     : 1.5px;
    background : var(--gold-accent);
}

.divider-dot {
    display       : block;
    width         : 5px;
    height        : 5px;
    border-radius : 50%;
    background    : var(--gold-accent);
}

/* Intro paragraph — narrower than the heading */
.policy-intro-text {
    font-family   : var(--body-font);
    font-size     : 15px;
    font-weight   : 400;
    color         : var(--text-dark);
    line-height   : 1.75;
    max-width     : 560px;
    margin-bottom : 20px;
}

/* "Effective Date: …" */
.policy-effective-date {
    font-family : var(--body-font);
    font-size   : 14px;
    font-weight : 500;
    color       : var(--text-dark);
    margin      : 0;
}

.date-label {
    color        : var(--gold-accent);
    font-weight  : 600;
    margin-right : 4px;
}

/* --------------------------------------------------------------------------
   2. POLICY GRID  (Sections 01 – 12)
   Left column  = items 01–06  (Take 6 in Razor)
   Right column = items 07–12  (Skip 6 in Razor), given extra left padding
   -------------------------------------------------------------------------- */
.policy-section {
    margin-bottom : 44px;
}

/* Right-hand column: editorial left offset mirrors the left column's padding */
.policy-col--right .policy-item {
    padding-left : 48px;
}

/* Individual policy block */
.policy-item {
    display     : flex;
    align-items : flex-start;
    gap         : 20px;
    padding     : 32px 0;
    border-top  : 1px solid var(--border-light);
}

/* --------------------------------------------------------------------------
   ICON WRAPPER — outlined circle, warm fill
   -------------------------------------------------------------------------- */
.policy-icon-wrapper {
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-shrink     : 0;
    width           : 52px;
    height          : 52px;
    min-width       : 52px;
    border-radius   : 50%;
    border          : 1px solid var(--border-light);
    background      : var(--bg-icon);
}

.policy-icon-wrapper i {
    font-size : 20px;
    color     : var(--gold-accent);
    opacity   : 0.9;
}

/* --------------------------------------------------------------------------
   POLICY CONTENT — number, title, description
   -------------------------------------------------------------------------- */
.policy-content {
    flex      : 1;
    min-width : 0;
}

/* "01." eyebrow */
.policy-number {
    display        : block;
    font-family    : var(--body-font);
    font-size      : 11px;
    font-weight    : 600;
    letter-spacing : 0.18em;
    color          : var(--muted-text);
    text-transform : uppercase;
    margin-bottom  : 3px;
}

/* Section title */
.policy-title {
    font-family    : var(--body-font);
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : 0.1em;
    color          : var(--text-dark);
    text-transform : uppercase;
    line-height    : 1.45;
    margin-bottom  : 10px;
}

/* Body copy */
.policy-desc {
    font-family : var(--body-font);
    font-size   : 13px;
    font-weight : 400;
    color       : var(--muted-text);
    line-height : 1.7;
    margin      : 0;
}

.policy-desc--wide {
    max-width : 780px;
}

/* --------------------------------------------------------------------------
   3. BOTTOM CARDS  (Sections 13 & 14)
   -------------------------------------------------------------------------- */
.policy-bottom-row {
    margin-bottom : 32px;
}

.policy-card {
    border        : 1px solid var(--border-light);
    border-radius : 12px;
    padding       : 4px 28px;
    height        : 100%;
}

/* Cards strip the top-border that every .policy-item inherits */
.policy-item--card {
    border-top  : none;
    padding-top : 28px;
}

/* Contact detail list (card 14) */
.policy-contact-list {
    list-style : none;
    padding    : 0;
    margin     : 10px 0 0;
}

.policy-contact-list li {
    display       : flex;
    align-items   : center;
    gap           : 10px;
    font-family   : var(--body-font);
    font-size     : 13px;
    color         : var(--text-dark);
    margin-bottom : 8px;
}

.policy-contact-list li:last-child {
    margin-bottom : 0;
}

.policy-contact-list i {
    font-size   : 14px;
    color       : var(--gold-accent);
    width       : 16px;
    flex-shrink : 0;
}

.contact-label {
    font-weight : 600;
    min-width   : 58px;
    color       : var(--text-dark);
}

.contact-value {
    color           : var(--muted-text);
    text-decoration : none;
    transition      : color 0.2s ease;
}

.contact-value:hover {
    color : var(--gold-accent);
}

/* --------------------------------------------------------------------------
   4. CONSENT SECTION  (Section 15)
   -------------------------------------------------------------------------- */
.consent-box {
    border        : 1px solid var(--border-light);
    border-radius : 12px;
    padding       : 36px 40px;
}

.consent-inner {
    display     : flex;
    align-items : flex-start;
    gap         : 20px;
}

.consent-icon {
    width     : 56px;
    height    : 56px;
    min-width : 56px;
}

.consent-icon i {
    font-size : 22px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Tablet  (≤ 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .policy-main-title {
        letter-spacing : -1.5px;
    }

    .policy-col--right .policy-item {
        padding-left : 32px;
    }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Mobile  (< 768px → single column)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .privacy-page {
        padding : 52px 0 72px;
    }

    .policy-intro {
        padding-bottom : 40px;
    }

    /* Single column — remove right-column offset */
    .policy-col--right .policy-item {
        padding-left : 0;
    }

    .policy-item {
        padding : 28px 0;
        gap     : 16px;
    }

    .policy-card {
        padding : 4px 20px;
    }

    .consent-box {
        padding : 28px 24px;
    }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Small mobile  (< 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    .privacy-page {
        padding : 40px 0 60px;
    }

    .policy-main-title {
        letter-spacing : -1px;
        margin-bottom  : 20px;
    }

    .policy-icon-wrapper {
        width     : 44px;
        height    : 44px;
        min-width : 44px;
    }

    .policy-icon-wrapper i {
        font-size : 17px;
    }

    .policy-item {
        gap     : 14px;
        padding : 22px 0;
    }

    .policy-contact-list li {
        flex-wrap : wrap;
        gap       : 6px;
    }

    .consent-box {
        padding : 24px 18px;
    }

    .consent-inner {
        gap : 14px;
    }
}