/*
 * Collections page (/collections/{slug}) — EB curated product collections.
 *
 * The product cards reuse the shared `.catalog-card` styles from catalog.css
 * (loaded alongside this file). This file owns the collection page chrome:
 * the tinted header band, intro copy, the products section heading, the about
 * block — and a scoped card treatment (surface, lift, image well) that makes the
 * grid read as a curated set rather than a bare category listing.
 * Brand accents use var(--brand-*) tokens — never hardcode hex.
 *
 * Contrast (2026-09-03): the header band is a brand tint at 7% over white,
 * which composites to #ffeef9 at its darkest. Measured against THAT, not white:
 * body ink #212529 = 14.3:1, intro #444 = 8.7:1, eyebrow --brand-accent-text
 * (#c00c7f) = 5.2:1. Card meta uses #6b6b75 (the PDP's --pdp-ink-3) = 5.2:1 on
 * white, replacing catalog.css's #888 / #999 which sit below 4.5:1.
 */

.collection-page {
    /* Jesse, 2026-09-03: the header band is a light blue off #00a7e1 (the EB
       Slinky blue), not the brand pink. Page-scoped token, EB-only stylesheet. */
    --collection-accent-rgb: 0, 167, 225;
    max-width: 1280px;
}

/* =================================================================
   HEADER BAND
   A soft brand tint carries the title, so the intro is no longer a
   headline floating in white. Gradient fades toward the grid below
   so the band and the products read as one composition.
   ================================================================= */
.collection-page__header {
    position: relative;
    margin-bottom: 2.25rem;
    padding: 2.75rem 2rem 2.5rem;
    text-align: center;
    border-radius: 14px;
    background:
        linear-gradient(
            180deg,
            rgba(var(--collection-accent-rgb), 0.09) 0%,
            rgba(var(--collection-accent-rgb), 0.02) 100%
        );
}

/* Hairline accent along the top edge — the homepage's short underline,
   turned into the band's own edge. Decorative, so it needs no contrast. */
.collection-page__header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: rgb(var(--collection-accent-rgb));
}

.collection-page__eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* AA brand text token — --brand-primary is accent-only, never text. */
    color: var(--brand-accent-text);
}

.collection-page__title {
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
    margin: 0;
}

.collection-page__intro {
    max-width: 62ch;
    margin: 1.25rem auto 0;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #444;
}

/* =================================================================
   PRODUCTS SECTION HEADING
   Matches the PDP cross-sell heading weight, with the homepage's
   short accent underline. Left-aligned to sit on the grid's edge.
   ================================================================= */
.collection-page__products-heading {
    display: inline-block;
    margin: 0 0 1.5rem;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    line-height: 1.2;
}

.collection-page__products-heading::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 0.5rem;
    border-radius: 2px;
    /* Brand pink, on purpose (Jesse, 2026-09-03): the band is blue, the section
       accent stays the house underline. */
    background: var(--brand-primary);
}

/* Inherit the catalog grid layout; this alias keeps the collection markup
   self-documenting while reusing catalog.css's responsive column rules. */
.collection-page__grid {
    margin-top: 0;
    gap: 1.75rem 1.5rem;
}

/* =================================================================
   CARD SURFACE (scoped to this page)
   catalog.css draws the card as bare image + text; here each card gets
   a soft-bordered surface, a consistent image well, and a lift on
   hover / focus-within so keyboard users get the same cue as the mouse.
   ================================================================= */
.collection-page .catalog-card {
    padding: 0.75rem 0.75rem 1rem;
    border: 1px solid #e4e4ea;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.collection-page .catalog-card:hover,
.collection-page .catalog-card:focus-within {
    border-color: #d3d3dc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.08);
}

.collection-page .catalog-card__image {
    border-radius: 8px;
    /* The PDP's product stage: a barely-there vertical fade instead of a
       flat #f8f8f8, so every well matches whatever the photo's edge is. */
    background: linear-gradient(180deg, #fcfcfe 0%, #f0f0f5 100%);
}

/* Give the badges a whisper of depth so "New" / "15% off" hold their edge
   over light product photography. Fill/ink pair is unchanged (AA). */
.collection-page .catalog-card__flag {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Lift catalog.css's card meta to AA. Both values were below 4.5:1 on white. */
.collection-page .catalog-card__description {
    color: #6b6b75;
}

.collection-page .catalog-card__price--original {
    color: #6b6b75;
}

.collection-page__empty {
    text-align: center;
    font-size: 1.125rem;
    color: #666;
    padding: 3rem 0;
}

/* =================================================================
   ABOUT BLOCK
   Sits between the header and the grid (moved above the products on
   2026-09-01). Authored HTML; the one live example opens with an <h2>.
   ================================================================= */
.collection-page__about {
    max-width: 820px;
    margin: 0 auto 2.5rem;
    padding: 0 1rem;
    text-align: center;
}

.collection-page__about-body {
    line-height: 1.7;
    color: #444;
}

.collection-page__about-body h2,
.collection-page__about-body h3 {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}

.collection-page__about-body > :last-child {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .collection-page__header {
        padding: 2.25rem 1.5rem 2rem;
    }
}

@media (max-width: 575.98px) {
    .collection-page__header {
        margin-bottom: 1.75rem;
        padding: 1.75rem 1.25rem 1.5rem;
        border-radius: 10px;
        text-align: left;
    }

    .collection-page__header::before {
        left: 1.25rem;
        transform: none;
        width: 64px;
    }

    .collection-page__intro {
        margin-left: 0;
        text-align: left;
    }

    .collection-page__products-heading {
        font-size: 1.25rem;
    }

    .collection-page .catalog-card {
        padding: 0.5rem 0.5rem 0.75rem;
        border-radius: 10px;
    }

    .collection-page__about {
        text-align: left;
        padding: 0;
    }
}

/* =================================================================
   ENDED PROMOTION NOTICE
   The collection's end date has passed: the URL still answers, but
   the products are replaced by a short notice and the social row.
   Mirrors the contest-ended page's treatment (same shared partial).
   ================================================================= */
.collection-page__ended {
    text-align: center;
    padding: 3rem 0 4rem;
}

.collection-page__ended .collection-page__empty {
    padding-bottom: 1rem;
}

.collection-page__ended-message {
    margin: 0 auto 2.5rem;
    max-width: 32rem;
}

.collection-page__ended-cta {
    margin: 0;
}

.collection-page__ended-social {
    margin-bottom: 1rem;
}

.collection-page__ended-social-heading {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    /* Was --brand-primary (3.3:1 on white). The AA text token instead. */
    color: var(--brand-accent-text);
    margin-top: 0;
    margin-bottom: 1rem;
}

.collection-page__ended-social-row {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    /* Rendered as a semantic <ul>; strip default list chrome. */
    list-style: none;
    margin: 0;
    padding: 0;
}

.collection-page__ended-social-item {
    display: flex;
}

.collection-page__ended-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid #ddd;
    border-radius: 50%;
    color: #333;
    font-size: 1.125rem;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.collection-page__ended-social-link:hover,
.collection-page__ended-social-link:focus-visible {
    color: var(--brand-on-primary);
    background-color: var(--brand-primary-fill);
    border-color: var(--brand-primary-fill);
}

.collection-page__ended-social-link:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
}

/* Legacy header artwork (collection-headers media), above the header band. The
   picture is the desktop 2560×720 or the mobile 960×1080 by viewport; when the
   artwork carries the title (hide_header) the text band is visually hidden and
   the h1 stays for assistive tech. */
.collection-page__hero {
    margin: 0 0 1.75rem;
    border-radius: 14px;
    overflow: hidden;
    background: #f2f2f5;
}

.collection-page__hero-image,
.collection-page__hero-image img {
    display: block;
    width: 100%;
    height: auto;
}

.collection-page__hero + .collection-page__header.visually-hidden + .collection-page__about,
.collection-page__hero + .collection-page__header.visually-hidden + .collection-page__products-heading {
    margin-top: 0;
}