/* ==========================================================================
   Saveurs et Table — Page Cookies
   Culinary Carousel Design System
   ========================================================================== */

.cookies-page {
    background-color: var(--color-ivory);
    color: var(--color-text);
}

.cookies-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-gutter-desktop);
}

.cookies-container--narrow {
    max-width: 800px;
}

.cookies-hero {
    padding-block: var(--space-7) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.cookies-hero .overline {
    margin-block-end: var(--space-2);
}

.cookies-hero h1 {
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
    color: var(--color-text-heading);
    margin-block-end: var(--space-4);
}

.cookies-date-box {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-azure);
    border-radius: var(--radius-medium);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    color: var(--color-text);
    box-shadow: none;
}

.cookies-date-label {
    font-weight: var(--weight-body-semibold);
    color: var(--color-text-heading);
}

.cookies-date-box time {
    font-weight: var(--weight-body-medium);
    color: var(--color-primary);
}

.cookies-section {
    padding-block: var(--space-7);
}

.cookies-section + .cookies-section {
    border-top: 1px solid var(--color-border);
}

.cookies-section h2 {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text-heading);
    margin-block-end: var(--space-5);
}

.cookies-copy-block {
    margin-block-end: var(--space-5);
}

.cookies-copy-block:last-child {
    margin-block-end: 0;
}

.cookies-copy-block h3 {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    color: var(--color-text-heading);
    margin-block-end: var(--space-3);
}

.cookies-copy-block p {
    margin-block-end: var(--space-3);
    line-height: var(--leading-body);
    text-wrap: pretty;
}

.cookies-copy-block p:last-child {
    margin-block-end: 0;
}

.cookies-copy-block--70 {
    max-width: 70ch;
    margin-inline: auto;
    text-align: left;
}

.cookies-copy-block--75 {
    max-width: 75ch;
    margin-inline: auto;
    text-align: left;
}

.cookies-list {
    list-style-type: disc;
    padding-inline-start: var(--space-4);
    margin-block-end: var(--space-3);
}

.cookies-list:last-child {
    margin-block-end: 0;
}

.cookies-list li {
    margin-block-end: var(--space-1);
    line-height: var(--leading-body);
}

.cookies-list li:last-child {
    margin-block-end: 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .cookies-container {
        padding-inline: var(--container-gutter-tablet);
    }

    .cookies-hero {
        padding-block: var(--space-6) var(--space-5);
    }

    .cookies-section {
        padding-block: var(--space-6);
    }
}

@media (max-width: 768px) {
    .cookies-container {
        padding-inline: var(--container-gutter-mobile);
    }

    .cookies-hero {
        padding-block: var(--space-5) var(--space-4);
    }

    .cookies-section {
        padding-block: var(--space-5);
    }

    .cookies-copy-block--70,
    .cookies-copy-block--75 {
        max-width: 100%;
        margin-inline: 0;
    }
}

@media (max-width: 480px) {
    .cookies-container {
        padding-inline: var(--container-gutter-mobile);
    }

    .cookies-hero {
        padding-block: var(--space-4) var(--space-3);
    }

    .cookies-section {
        padding-block: var(--space-4);
    }

    .cookies-date-box {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
        padding: var(--space-2) var(--space-3);
    }

    .cookies-copy-block--70,
    .cookies-copy-block--75 {
        max-width: 100%;
        margin-inline: 0;
    }
}