/* ===========================================================================
   /styles/{slug} detail page — Mono redesign (2026-06-19)
   Brings the individual style pages in line with the Mono GetIllustrations
   design system (docs/design-system/mono-getillustrations.md), matching the
   already-Mono /styles hub. Scoped to .std so the hub + other pages are
   untouched. Uses the :root --mono-* tokens from mono-getillustrations.css.

   Layout = illustration-pack pattern: a STICKY LEFT RAIL (title, description,
   showcase image between the description and the stat pills, stats, CTA) that
   stays fixed while the reader scrolls, beside a SCROLLING RIGHT BODY (the
   About heading, tab nav, the active tab's article and the Pro Tips).
   =========================================================================== */

.std { color: var(--mono-gray-700, #374151); }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.std-crumb { font-size: 0.8125rem; color: var(--mono-gray-500, #6b7280); margin-bottom: 1.75rem; }
.std-crumb a { color: var(--mono-gray-500, #6b7280); text-decoration: none; }
.std-crumb a:hover { color: var(--mono-ink, #111827); }
.std-crumb span { margin: 0 7px; color: var(--mono-gray-300, #d1d5db); }

/* ═══════════ Detail: sticky LEFT rail + scrolling RIGHT body ═══════════ */
.std-detail { padding: 1.75rem 0 0; }
.std-detail__grid {
    display: grid;
    grid-template-columns: 700px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

/* LEFT rail — fixed while the article scrolls */
.std-detail__rail {
    position: sticky;
    top: 84px;
    align-self: start;
    display: flex;
    flex-direction: column;
}
.std-detail__h1 {
    font-family: var(--mono-font-display, inherit);
    font-weight: 800; font-size: clamp(1.9rem, 3.2vw, 2.85rem);
    line-height: 1.05; letter-spacing: -0.035em;
    /* margin-top 0: the rail is a flex column (margins don't collapse), so the
       eyebrow's 12px margin-bottom alone matches the right column's collapsed
       gap and keeps the left H1 + right H2 on the same baseline. */
    color: var(--mono-ink, #111827); margin: 0 0 16px;
}
.std-detail__sub { font-size: 1.0625rem; line-height: 1.6; color: var(--mono-gray-600, #4b5563); margin: 0 0 22px; }
.std-detail__slides {
    position: relative;
    border-radius: 18px; overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--mono-gray-200, #e5e7eb);
    margin: 2px 0 24px;            /* sits between the description and the stat pills */
}
.std-detail__slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    opacity: 0; transition: opacity 1.2s ease;
}
.std-detail__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .std-detail__slide { transition: none; }
}
.std-detail__rail .std-cta-row { margin-top: 4px; }

/* RIGHT body — the scrolling article column */
.std-detail__body { min-width: 0; }
.std-detail__body > .mono-eyebrow { display: block; }

/* Stat pills + CTA (shared by the rail) */
.std-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.std-stat { border: 1px solid var(--mono-gray-200, #e5e7eb); border-radius: 14px; padding: 12px 18px; }
.std-stat__value { display: block; font-family: var(--mono-font-display, inherit); font-weight: 800; font-size: 1.3rem; color: var(--mono-ink, #111827); line-height: 1.1; letter-spacing: -0.02em; }
.std-stat__label { display: block; font-size: 0.8125rem; color: var(--mono-gray-500, #6b7280); margin-top: 2px; }
.std-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* About heading inside the body */
.std-about__title {
    font-family: var(--mono-font-display, inherit);
    font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    letter-spacing: -0.03em; line-height: 1.05;
    color: var(--mono-ink, #111827); margin: 12px 0 24px;
}

/* Horizontal tab nav */
.std-about__tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--mono-gray-200, #e5e7eb); margin-bottom: 28px; }
.std-about__tab {
    background: none; border: 0; border-bottom: 2px solid transparent;
    padding: 11px 2px; margin-right: 28px;
    font-family: var(--mono-font-display, inherit); font-weight: 700; font-size: 1rem;
    color: var(--mono-gray-500, #6b7280); cursor: pointer;
    transition: color .15s, border-color .15s;
}
.std-about__tab:hover { color: var(--mono-ink, #111827); }
.std-about__tab.active { color: var(--mono-ink, #111827); border-bottom-color: var(--mono-lime, #ccea4a); }

/* Article panels */
.std-about__panel { display: none; }
.std-about__panel.active { display: block; animation: stdFade .25s ease; }
@keyframes stdFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.std-about__panel h2 { font-family: var(--mono-font-display, inherit); font-weight: 800; font-size: clamp(1.45rem, 2.2vw, 1.85rem); letter-spacing: -0.025em; color: var(--mono-ink, #111827); margin: 0 0 20px; line-height: 1.12; }
.std-about__panel p { font-size: 1.0625rem; line-height: 1.75; color: var(--mono-gray-600, #4b5563); margin: 0 0 16px; }
.std-about__panel .sty-tab-list { list-style: none; padding: 0; margin: 0; }
.std-about__panel .sty-tab-list li { position: relative; padding-left: 24px; margin-bottom: 16px; font-size: 1.0625rem; line-height: 1.7; color: var(--mono-gray-600, #4b5563); }
.std-about__panel .sty-tab-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border-radius: 999px; background: var(--mono-lime, #ccea4a); }
.std-about__panel strong { color: var(--mono-ink, #111827); font-weight: 700; }
.std-about__panel .sty-content-body { font-size: 1.0625rem; line-height: 1.75; color: var(--mono-gray-600, #4b5563); }

/* Pro Tips — bottom of the scrolling body; amber cards (collections cream) */
.std-about__tips { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--mono-gray-200, #e5e7eb); }
.std-about__tips h3 { font-family: var(--mono-font-display, inherit); font-weight: 800; font-size: 1.15rem; color: var(--mono-ink, #111827); margin: 0 0 18px; letter-spacing: -0.015em; }
.std-about__tips .sty-tips-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.std-about__tips .sty-tips-list li {
    position: relative;
    background: #fef9ec;
    border: 1px solid #f1e6c9;
    border-radius: 14px;
    padding: 18px 18px 18px 46px;
    font-size: 0.9rem; line-height: 1.55; color: var(--mono-gray-600, #4b5563);
}
.std-about__tips .sty-tips-list li::before {
    content: '✓';
    position: absolute; left: 16px; top: 17px;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    background: #f59e0b; color: #fff;
    border-radius: 50%;
    font-size: 0.7rem; font-weight: 800; line-height: 1;
}
.std-about__tips .sty-tips-list li strong { display: block; color: var(--mono-ink, #111827); margin-bottom: 5px; }

/* Fallback content block for styles without a curated _StyleSeo partial */
.std .sty-content-body { font-size: 1.0625rem; line-height: 1.75; color: var(--mono-gray-600, #4b5563); max-width: 75ch; }
.std .sty-content-body h2 { font-family: var(--mono-font-display, inherit); font-weight: 800; letter-spacing: -0.025em; color: var(--mono-ink, #111827); }

/* ── Section head with trailing count (pack grid below) ─────────────────── */
.std-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.std-head .mono-eyebrow { display: block; }
.std-head h2 { margin: 6px 0 0; }
.std-count { font-size: 0.9375rem; color: var(--mono-gray-500, #6b7280); font-weight: 700; white-space: nowrap; }
.std-subhead { font-weight: 800; font-size: 1.15rem; color: var(--mono-ink, #111827); margin: 2.5rem 0 1rem; letter-spacing: -0.02em; }

/* ── Promo panels (3-up) ────────────────────────────────────────────────── */
.std-promo__card { border-radius: 20px; padding: 30px; display: flex; flex-direction: column; height: 100%; }
.std-promo__card h3 { font-family: var(--mono-font-display, inherit); font-weight: 800; font-size: 1.3rem; margin: 0 0 12px; letter-spacing: -0.02em; }
.std-promo__card p { font-size: 0.9375rem; line-height: 1.55; margin: 0 0 18px; flex: 1 1 auto; }
.std-promo__card a { font-weight: 700; text-decoration: none; font-size: 0.9375rem; }
.std-promo__card a:hover { text-decoration: underline; }
.std-promo__card--dark { background: var(--mono-ink, #111827); color: #fff; }
.std-promo__card--dark p { color: rgba(255, 255, 255, 0.72); }
.std-promo__card--dark a { color: var(--mono-lime, #ccea4a); }
.std-promo__card--lime { background: var(--mono-lime, #ccea4a); color: var(--mono-ink, #111827); }
.std-promo__card--lime p { color: var(--mono-lime-ink, #4d5e0f); }
.std-promo__card--lime a { color: var(--mono-ink, #111827); }

/* ── Bottom CTA — dark statement panel ──────────────────────────────────── */
.std-final { background: var(--mono-ink, #111827); color: #fff; border-radius: 28px; padding: 56px 40px; text-align: center; }
.std-final h2 { font-family: var(--mono-font-display, inherit); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.03em; margin: 0 0 12px; color: #fff; }
.std-final p { color: rgba(255, 255, 255, 0.72); font-size: 1.0625rem; margin: 0 0 26px; }
.std-final .std-cta-row { justify-content: center; }

/* ── Pack grid (reuses __PackV2 .new-set-card cards) ────────────────────── */
.std-pack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.std-pack-grid--icons { margin-top: 1.25rem; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1320px) {
    .std-detail__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); gap: 56px; }
}
@media (max-width: 1200px) {
    .std-about__tips .sty-tips-list { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) { .std-pack-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) {
    .std-detail__grid { grid-template-columns: 1fr; gap: 32px; }
    .std-detail__rail { position: static; }
    .std-detail__slides { max-width: 640px; }
}
@media (max-width: 720px) {
    .std-pack-grid { grid-template-columns: repeat(2, 1fr); }
    .std-final { padding: 40px 24px; }
}
@media (max-width: 480px) { .std-pack-grid { grid-template-columns: 1fr; } }