/* ============================================================
   Minnan in Stone — series hub page (theme v2.4.16)

   Loaded only on is_page_template('template-stone-series.php'), and every
   selector below is scoped to .a16a-ms, so this sheet cannot restyle another
   template even if it were loaded by mistake. Same palette as the collection
   page: charcoal ground #171512, warm off-white text, one antique-gold accent.

   Contrast on #171512: #F2EDE3 ~14:1, #B7AFA0 ~7.9:1, gold #C9A063 ~6.8:1 —
   all clear of the 4.5:1 body-text bar. Button text on gold is #171512 (~6.8:1).

   Every heading level sets an explicit colour: on this dark ground the
   inherited heading colour from the global sheet is unreadable.
   ============================================================ */

body.page-template-template-stone-series {
    background: #171512;
}

.a16a-ms {
    --ms-text: #F2EDE3;
    --ms-muted: #B7AFA0;
    --ms-gold: #C9A063;
    --ms-panel: #201D19;
    --ms-line: rgba(242, 237, 227, .14);
    background: #171512;
    color: var(--ms-text);
    padding-bottom: var(--space-2xl, 48px);
    /*
     * main.a16a-page-container declares `padding: <top> 0 <bottom>` — a
     * 3-value shorthand that zeroes the horizontal padding .container sets.
     * This wrapper carries the page gutter itself, exactly as .a16a-sc does.
     */
    padding-left: var(--space-xl, 32px);
    padding-right: var(--space-xl, 32px);
}

/* ---------- HERO ---------- */

.a16a-ms-hero {
    padding: var(--space-2xl, 48px) 0 var(--space-xl, 32px);
    border-bottom: 1px solid var(--ms-line);
}

.a16a-ms-eyebrow {
    margin: 0 0 var(--space-md, 16px);
    color: var(--ms-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.a16a-ms-title {
    margin: 0 0 var(--space-md, 16px);
    color: var(--ms-text);
    font-size: clamp(2.25rem, 5.5vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -.01em;
}

.a16a-ms-standfirst {
    margin: 0 0 var(--space-md, 16px);
    max-width: 62ch;
    color: var(--ms-muted);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.a16a-ms-progress {
    margin: 0;
    color: var(--ms-gold);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---------- PARTS ---------- */

.a16a-ms-part {
    padding: var(--space-2xl, 48px) 0 0;
}

.a16a-ms-part-head {
    margin: 0 0 var(--space-lg, 24px);
}

.a16a-ms-part-label {
    margin: 0 0 6px;
    color: var(--ms-gold);
    font-size: 1.25rem;
    line-height: 1.25;
}

.a16a-ms-part-note {
    margin: 0;
    color: var(--ms-muted);
    font-size: .9375rem;
    line-height: 1.6;
}

.a16a-ms-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.a16a-ms-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-lg, 24px);
    background: var(--ms-panel);
    border: 1px solid var(--ms-line);
    border-radius: var(--radius-md, 8px);
}

.a16a-ms-card--live {
    border-color: rgba(201, 160, 99, .45);
}

.a16a-ms-card-no {
    display: block;
    margin-bottom: 10px;
    color: var(--ms-gold);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.a16a-ms-card-title {
    margin: 0 0 8px;
    color: var(--ms-text);
    font-size: 1.0625rem;
    line-height: 1.3;
}

.a16a-ms-card-blurb {
    margin: 0 0 var(--space-md, 16px);
    color: var(--ms-muted);
    font-size: .9375rem;
    line-height: 1.6;
    flex: 1 1 auto;
}

.a16a-ms-card-link,
.a16a-ms-card-soon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ms-gold);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
}

.a16a-ms-card-link::after {
    content: "\2192";
    font-size: 15px;
}

.a16a-ms-card-link:hover,
.a16a-ms-card-link:focus-visible {
    text-decoration: underline;
    color: var(--ms-gold);
}

.a16a-ms-card--soon {
    border-style: dashed;
    background: transparent;
}

.a16a-ms-card-soon {
    color: var(--ms-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .75rem;
}

/* ---------- BAND / CTA ---------- */

.a16a-ms-band,
.a16a-ms-cta {
    margin-top: var(--space-2xl, 48px);
    padding: var(--space-2xl, 48px) var(--space-xl, 32px);
    background: var(--ms-panel);
    border: 1px solid var(--ms-line);
    border-radius: var(--radius-md, 8px);
}

.a16a-ms-band h2,
.a16a-ms-cta h2 {
    margin: 0 0 var(--space-md, 16px);
    color: var(--ms-text);
    font-size: 1.5rem;
    line-height: 1.25;
}

.a16a-ms-band p,
.a16a-ms-cta p {
    margin: 0 0 var(--space-lg, 24px);
    max-width: 70ch;
    color: var(--ms-muted);
    font-size: .9375rem;
    line-height: 1.65;
}

.a16a-ms-band-btn {
    min-height: 44px;
}

/* ---------- RESPONSIVE ----------
   Breakpoint ladder set by this component, not by the global sheet: 3 columns
   down to 768px, 2 columns to 640px, 1 column below that. */

@media (max-width: 768px) {
    .a16a-ms-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .a16a-ms {
        padding-left: var(--space-lg, 24px);
        padding-right: var(--space-lg, 24px);
    }

    .a16a-ms-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .a16a-ms-hero {
        padding-top: var(--space-xl, 32px);
    }

    .a16a-ms-band,
    .a16a-ms-cta {
        padding: var(--space-xl, 32px) var(--space-md, 16px);
    }
}