/* ============================================================
   Outfits Directory  ·  od- namespace
   URLs: /outfits/styles  ·  /outfits/occasions
   ============================================================ */

/* ── Page shell (matches pf-page) ──────────────────────────────────────── */
.od-page {
    min-height: 100vh;
    background: var(--color-black);
    --od-grid-gap: clamp(0.5rem, 1vw, 0.875rem);
}

/* ── Masthead ───────────────────────────────────────────────────────────── */
.od-masthead {
    background: var(--color-black);
    color: var(--color-white);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.od-masthead__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.od-masthead__stage {
    padding: 1.05rem 0 1.2rem;
}
.od-masthead__eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.od-masthead__title {
    font-family: var(--font-heading);
    font-size: clamp(1.65rem, 3.2vw, 2.35rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.3rem;
    color: var(--color-white);
}
.od-masthead__sub {
    margin: 0;
    color: rgba(255,255,255,0.45);
    font-size: 0.88rem;
    line-height: 1.55;
    max-width: 56ch;
}

/* ── Content wrap (matches pf-wrap) ────────────────────────────────────── */
.od-wrap {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 1.5rem var(--od-grid-gap) 6rem;
}

/* ── Card grid overrides ───────────────────────────────────────────────── */
/* Double-class to beat homepage .fs / .oc specificity */
section.od-directory.fs,
section.od-directory.oc {
    padding-block: 0;
    background: transparent;
}
section.od-directory.fs::before,
section.od-directory.oc::before { display: none; }
section.od-directory .fs__inner,
section.od-directory .oc__inner { max-width: none; padding: 0; }

/* Homepage locks to 2 rows; directory pages need unlimited rows. */
section.od-directory .fs__grid,
section.od-directory .oc__grid { grid-template-rows: auto; }

.od-empty {
    text-align: center;
    color: rgba(255,255,255,0.48);
    padding: 4rem 1.5rem;
}
.od-empty p { margin: 0; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .od-masthead__inner { padding-inline: 1rem; }
    .od-masthead__stage { padding: 0.95rem 0 1.1rem; }
    .od-masthead__eyebrow { margin-bottom: 0.55rem; }
    .od-masthead__title { font-size: clamp(1.45rem, 6vw, 1.9rem); }
    .od-masthead__sub { font-size: 0.83rem; }
}