/* ====== /minus-hype ======
   Redesigned 2026-09-17 on the site's system (no Figma frame). Loads after
   home.css for the .hero pattern. Newest post featured wide; the rest in a
   grid, 2-up at 768, 3-up at 1024. */

/* ── Hero: the shared pattern + two brand glows drifting on the ground ── */
.mh-hero {
    isolation: isolate;
    overflow: hidden;
    min-height: 0;
    padding-block: var(--space-15);
    background: var(--c-primary-dark);   /* shorthand: .hero in home.css carries Home's poster image */
}
/* Backdrop: the same 334px photo, blurred past the point where its size shows,
   under a purple tint that keeps the copy legible and the ground on-brand.  */
.mh-hero::before {
    content: ''; position: absolute; inset: -12%; z-index: -2;
    background: url('../../images/minus-hype/hero-bg.webp') center / cover no-repeat;
    filter: blur(40px) saturate(1.2);
    opacity: .45;
    /* Not animated: a blurred layer larger than the screen re-blurs every frame
       when it moves, and phones dropped out visibly (flicker, 2026-09-17). The
       Ken Burns drift lives on the photo only.                                */
}
.mh-hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(21, 0, 27, .35) 0%, rgba(21, 0, 27, .65) 60%, rgba(21, 0, 27, 1) 100%);
}
.mh-hero__inner { gap: var(--space-8); }
.mh-hero__copy { display: flex; flex-direction: column; gap: var(--space-2); }
.mh-hero__photo {
    position: relative;
    width: 100%; max-width: 560px;
    aspect-ratio: 334 / 205;
    border: 1px solid rgba(171, 235, 240, .16);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.mh-hero__photo img { width: 100%; height: 100%; object-fit: cover; animation: mh-drift 40s ease-in-out infinite alternate; will-change: transform; }
.mh-hero__photo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--gloss-edge); pointer-events: none; }
@keyframes mh-drift {
    from { transform: scale(1)    translate(0, 0); }
    to   { transform: scale(1.08) translate(-2%, 1.5%); }
}
.mh-hero__intro { margin-top: var(--space-4); max-width: 700px; font-size: var(--t-h4); line-height: var(--lh-heading); font-weight: var(--fw-regular); color: var(--c-text-muted); }

/* ── Posts ──────────────────────────────────────────────────────────── */
.mh-posts { background: linear-gradient(180deg, var(--primary-900) 0%, var(--primary-800) 100%); }

/* Shared card surface, featured and grid alike */
.mh-featured, .mh-card {
    display: flex; flex-direction: column;
    height: 100%;
    border: 1px solid rgba(171, 235, 240, .16);
    border-radius: var(--radius-card);
    background: var(--gloss-sheen), var(--c-bg-raised);
    box-shadow: var(--gloss-edge), 0 16px 40px rgba(0, 0, 0, .35);
    overflow: hidden;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease, box-shadow .25s ease;
}
.mh-featured:hover, .mh-card:hover { border-color: var(--c-accent-band); transform: translateY(-3px); color: inherit; box-shadow: var(--gloss-edge), 0 24px 48px rgba(0, 0, 0, .4), var(--gloss-glow); }

/* Media: the image, a bottom fade into the card colour so seven different
   art styles read as one set, and a slow scale on hover.                  */
.mh-featured__media, .mh-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.mh-featured__media img, .mh-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mh-featured__media::after, .mh-card__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(21, 0, 27, 0) 55%, rgba(21, 0, 27, .85) 100%);
}
.mh-featured:hover img, .mh-card:hover img { transform: scale(1.05); }

.mh-featured__body, .mh-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); flex: 1; }
.mh-card__date {
    display: flex; align-items: center; gap: var(--space-3);
    font-family: var(--font-secondary);
    font-size: var(--t-p3);
    letter-spacing: var(--ls-cta);
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.mh-featured__tag { padding: 2px 8px; border-radius: 4px; background: rgba(171, 235, 240, .12); color: var(--c-accent-cyan); }
.mh-featured__title { font-size: var(--t-h3); line-height: var(--lh-heading); font-weight: var(--fw-medium); }
.mh-featured__excerpt { font-size: var(--t-p1); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Even rows: titles two lines, excerpts three, then the link pinned to the bottom. */
.mh-card__title   { font-size: var(--t-h5); line-height: var(--lh-heading); font-weight: var(--fw-medium); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mh-card__excerpt { font-size: var(--t-p3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mh-card__more {
    margin-top: auto;
    padding-top: var(--space-3);
    font-family: var(--font-secondary);
    font-size: var(--t-p3);
    letter-spacing: var(--ls-cta);
    text-transform: uppercase;
    color: var(--c-accent-cyan);
}

.mh-grid { display: grid; gap: var(--space-8); margin-top: var(--space-10); }

/* ── Tiers ─────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .mh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .mh-hero { min-height: 420px; }
    .mh-hero__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-10); }
    .mh-hero__copy { flex: 1 1 0; }
    .mh-hero__photo { flex: 0 0 44%; }

    .mh-hero { min-height: 420px; padding-block: var(--space-15); }
    .mh-featured { flex-direction: row; }
    .mh-featured__media { flex: 0 0 56%; aspect-ratio: auto; }
    .mh-featured__media::after { background: linear-gradient(90deg, rgba(21, 0, 27, 0) 70%, rgba(21, 0, 27, .85) 100%); }
    .mh-featured__body { justify-content: center; padding: var(--space-10); }
    .mh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}