/* ═══════════════════════════════════════════════════════════════════════
   Editorial shared styles
   Used by: articles/article_list.html, pages/landing.html
   Load this file *before* any page-specific editorial CSS.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    --mag-ink:      var(--tw-stone-900);
    --mag-ink-mute: var(--tw-stone-500);
    --mag-rule:     var(--tw-stone-200);
    --mag-cream:    var(--tw-stone-50);
    --mag-accent:   var(--tw-orange-800);
}

/* ── Eyebrow label ── */
.mag-eyebrow {
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mag-accent);
}

/* ── Section rule divider ── */
.section-rule {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
}
.section-rule::before,
.section-rule::after {
    content: '';
    height: 1px;
    background: var(--mag-rule);
}

/* ── 12-column bento grid ── */
.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1px;
    background: var(--mag-rule);
    border-top: 1px solid var(--mag-rule);
    border-bottom: 1px solid var(--mag-rule);
}
.bento > * { background: var(--bs-body-bg); }

.b-12 { grid-column: span 12; }
.b-8  { grid-column: span 8; }
.b-6  { grid-column: span 6; }
.b-4  { grid-column: span 4; }
.b-3  { grid-column: span 3; }

/* ── Art cards ── */
.art-card {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.art-card:hover { color: inherit; }
.art-card:hover .art-title { opacity: 0.75; }

.art-card-img {
    width: 100%;
    object-fit: cover;
    display: block;
}

/* ── Dark accent card ── */
.art-card--dark { background: var(--mag-ink) !important; }
.art-card--dark .art-title   { color: var(--tw-stone-100); }
.art-card--dark .art-body    { color: var(--tw-stone-400); }
.art-card--dark .mag-eyebrow { color: var(--tw-orange-400); }
.art-card--dark .art-link {
    color: var(--tw-orange-400);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
}
.art-card--dark .art-link:hover { text-decoration: underline; }

/* Wide card variant */
.bento .art-card--wide { background: var(--tw-stone-100) !important; }

/* ── Bento image variants ── */

/*
 * Featured card: image sits beside text (horizontal flex).
 * Width is constrained so the square never dominates the card.
 */
.art-card--img-side {
    flex-direction: row;
    align-items: flex-start;
}
.bento-feature-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    width: 45%;
    max-width: 340px;
    min-width: 180px;
}
@media (max-width: 767px) {
    .art-card--img-side { flex-direction: column; }
    .bento-feature-img  { width: 100%; max-width: 100%; min-width: unset; }
}

/*
 * Narrow cards (b-4 dark accent, b-4 medium): image at top, full-width square.
 * No max-height — the 1:1 constraint is the source of truth.
 */
.bento-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.bento-thumb {
    width: 160px;
    height: 160px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

/* ── Typography ── */
.mag-headline { font-family: 'Playfair Display', serif; }

.art-title {
    font-family: 'Playfair Display', serif;
    color: var(--mag-ink);
    text-decoration: none;
}

.mag-body {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--mag-ink-mute);
}

.art-body-dark {
    color: var(--tw-stone-400);
    font-size: .82rem;
    line-height: 1.7;
}

.art-mini-story {
    font-size: .78rem;
    color: var(--mag-accent);
    font-style: italic;
    line-height: 1.6;
}

.art-title-sm { font-size: 1rem; line-height: 1.4; }
.art-body-sm  { font-size: .8rem; }

/* ── Section pill (filter nav + card CTA) ── */
.section-pill {
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .3rem .9rem;
    border: 1px solid var(--mag-rule);
    background: transparent;
    color: var(--mag-ink-mute);
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
/* Activate on: direct hover, .active class, or parent card hover */
.section-pill:hover,
.section-pill.active,
.art-card:hover .section-pill {
    background: var(--mag-ink);
    border-color: var(--mag-ink);
    color: var(--mag-cream);
}

/* ── Pull quote ── */
.pull-quote {
    border-left: 3px solid var(--mag-accent);
    padding-left: 1.25rem;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--mag-ink);
    margin: 0;
}
.pull-quote footer {
    font-style: normal;
    font-size: .75rem;
    font-weight: 600;
    color: var(--mag-ink-mute);
    margin-top: .5rem;
    display: block;
}

/* ── Text clamp utilities ── */
.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Responsive bento collapses ── */
@media (max-width: 767px) {
    .b-12, .b-8, .b-6, .b-4, .b-3 { grid-column: span 12; }
    .bento-thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }
    .art-card--img-side { flex-direction: column; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .b-8  { grid-column: span 8; }
    .b-6  { grid-column: span 6; }
    .b-4  { grid-column: span 4; }
    .b-3  { grid-column: span 6; }
    .b-12 { grid-column: span 12; }
}