/*
 * CraftBook Magazine — Homepage Stylesheet
 * =========================================
 * Styles for all homepage-specific components:
 *   1.  Homepage wrapper
 *   2.  Hero section
 *   3.  Featured Trio section
 *   4.  Feature card (card-feature.php)
 *   5.  Standard card (card-standard.php)
 *   6.  Horizontal card (card-horizontal.php)
 *   7.  Category stream section
 *   8.  Interactive tools strip
 *   9.  Interactive card
 *  10.  Newsletter section
 *  11.  Archive / index page
 *  12.  No results
 *  13.  Dark mode overrides
 *  14.  Responsive breakpoints
 *
 * All values use CSS custom properties from style.css :root.
 * Dark mode colours apply automatically via [data-theme="dark"].
 */

/* ==========================================================================
   1. HOMEPAGE WRAPPER
   ========================================================================== */

.cbm-homepage {
    display:        flex;
    flex-direction: column;
    gap:            0; /* Sections control their own spacing */
}

/* ==========================================================================
   2. HERO SECTION
   ========================================================================== */

.cbm-hero {
    position:    relative;
    overflow:    hidden;
    min-height:  420px;
    display:     flex;
    align-items: flex-end; /* Content anchored to bottom of hero */
    background:  var(--cbm-primary); /* Shown when no image */
}

/* Background image layer */
.cbm-hero__bg {
    position:            absolute;
    inset:               0;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    transform:           scale(1.02); /* Slight oversize to prevent edge gaps on scale */
    transition:          transform 8s ease; /* Subtle Ken Burns on load */
}

.cbm-hero--has-image .cbm-hero__bg {
    transform: scale(1);
}

/* Gradient overlay — ensures text legibility over any image */
.cbm-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to top,
        rgba(10, 18, 35, 0.92) 0%,
        rgba(10, 18, 35, 0.65) 40%,
        rgba(10, 18, 35, 0.25) 70%,
        rgba(10, 18, 35, 0.10) 100%
    );
}

/* Content above overlay */
.cbm-hero__content {
    position:  relative;
    z-index:   1;
    width:     100%;
    padding-top:    var(--cbm-space-12);
    padding-bottom: var(--cbm-space-12);
}

.cbm-hero__inner {
    max-width: 720px; /* Constrain text for readability */
}

/* Eyebrow: Featured label + category badge */
.cbm-hero__eyebrow {
    display:     flex;
    align-items: center;
    gap:         var(--cbm-space-3);
    margin-bottom: var(--cbm-space-4);
    flex-wrap:   wrap;
}

.cbm-hero__featured-label {
    display:        inline-block;
    font-family:    var(--cbm-font-body);
    font-size:      var(--cbm-text-xs);
    font-weight:    var(--cbm-weight-black);
    letter-spacing: var(--cbm-tracking-caps);
    text-transform: uppercase;
    color:          var(--cbm-accent);
    border:         1px solid var(--cbm-accent);
    padding:        var(--cbm-space-1) var(--cbm-space-3);
    border-radius:  var(--cbm-radius-sm);
}

/* Override badge colours inside the hero (always light on dark bg) */
.cbm-hero__eyebrow .cbm-badge {
    background: rgba(255,255,255,0.15);
    color:      #fff;
    border:     1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(4px);
}

/* Title */
.cbm-hero__title {
    font-family:   var(--cbm-font-heading);
    font-size:     clamp(1.75rem, 5vw, 3.2rem);
    font-weight:   var(--cbm-weight-black);
    line-height:   var(--cbm-leading-tight);
    letter-spacing: var(--cbm-tracking-tight);
    color:         #ffffff;
    margin-bottom: var(--cbm-space-4);
}

.cbm-hero__title-link {
    color:           inherit;
    text-decoration: none;
}

.cbm-hero__title-link:hover {
    color:           var(--cbm-accent);
    text-decoration: none;
}

/* Excerpt */
.cbm-hero__excerpt {
    font-size:   var(--cbm-text-md);
    color:       rgba(255,255,255,0.82);
    line-height: var(--cbm-leading-relaxed);
    margin-bottom: var(--cbm-space-6);
    max-width:   600px;
}

/* Footer row: meta + CTA */
.cbm-hero__footer {
    display:     flex;
    align-items: center;
    gap:         var(--cbm-space-6);
    flex-wrap:   wrap;
}

.cbm-hero__meta {
    display:     flex;
    align-items: center;
    gap:         var(--cbm-space-3);
    color:       rgba(255,255,255,0.65);
    font-size:   var(--cbm-text-sm);
}

.cbm-hero__meta-sep {
    opacity: 0.5;
}

.cbm-hero__cta {
    flex-shrink: 0;
}

/* Empty hero placeholder (no posts yet) */
.cbm-hero--empty {
    min-height:      320px;
    justify-content: center;
    align-items:     center;
    background:      var(--cbm-surface-raised);
    border-bottom:   2px solid var(--cbm-border);
}

.cbm-hero__placeholder {
    text-align: center;
}

.cbm-hero__placeholder-text {
    color:    var(--cbm-text-muted);
    font-size: var(--cbm-text-lg);
}

/* ==========================================================================
   3. FEATURED TRIO SECTION
   ========================================================================== */

.cbm-featured-trio {
    background: var(--cbm-bg);
    padding-top:    var(--cbm-space-12);
    padding-bottom: var(--cbm-space-12);
}

.cbm-featured-trio__grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--cbm-grid-gap);
}

/* ==========================================================================
   4. FEATURE CARD
   ========================================================================== */

.cbm-card--feature {
    height: 100%; /* Fill grid cell */
}

.cbm-card--feature .cbm-card__title--feature {
    font-size:   var(--cbm-text-xl);
    line-height: var(--cbm-leading-snug);
}

.cbm-card--feature .cbm-card__excerpt {
    -webkit-line-clamp: 3;
}

/* No-thumbnail placeholder for feature cards */
.cbm-card__image--no-thumb {
    background: var(--cbm-surface-raised);
    border:     1px solid var(--cbm-border);
}

.cbm-card__image-placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    position:        absolute;
    inset:           0;
}

/* ==========================================================================
   5. STANDARD CARD
   ========================================================================== */

.cbm-card--standard {
    height: 100%;
}

.cbm-card--standard .cbm-card__title {
    font-size:   var(--cbm-text-lg);
    line-height: var(--cbm-leading-snug);
}

/* ==========================================================================
   6. HORIZONTAL CARD
   ========================================================================== */

.cbm-card--horizontal {
    display:       flex;
    flex-direction: row;
    align-items:   flex-start;
    gap:           var(--cbm-space-4);
    border-radius: var(--cbm-radius-md);
    padding:       var(--cbm-space-4);
    border:        1px solid var(--cbm-border);
    background:    var(--cbm-surface);
    box-shadow:    var(--cbm-shadow-sm);
    transition:    box-shadow 0.2s ease, transform 0.2s ease;
}

.cbm-card--horizontal:hover {
    box-shadow: var(--cbm-shadow);
    transform:  translateY(-1px);
}

.cbm-card--horizontal__thumb {
    /* Single authoritative width — no inner override needed */
    width:        88px;
    min-width:    88px;
    height:       88px;
    flex-shrink:  0;
    border-radius: var(--cbm-radius);
    overflow:     hidden;
}

/* The img-ratio inherits 100% of the wrapper — no independent width */
.cbm-card--horizontal .cbm-img-ratio--square {
    aspect-ratio: unset;   /* Let the wrapper control dimensions */
    width:        100%;
    height:       100%;
    min-width:    0;       /* Clear any inherited min-width */
}

.cbm-card--horizontal__body {
    flex:     1;
    min-width: 0; /* Prevent text overflow */
    display:  flex;
    flex-direction: column;
    gap:      var(--cbm-space-2);
}

.cbm-card__title--sm {
    font-family:   var(--cbm-font-heading);
    font-size:     var(--cbm-text-base);
    font-weight:   var(--cbm-weight-bold);
    line-height:   var(--cbm-leading-snug);
    letter-spacing: var(--cbm-tracking-tight);
    color:         var(--cbm-text-heading);
    margin:        0;
    /* Clamp to 2 lines */
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

.cbm-card__title--sm a {
    color:           inherit;
    text-decoration: none;
}

.cbm-card__title--sm a:hover {
    color: var(--cbm-accent);
}

.cbm-card__meta--sm {
    margin-bottom: 0;
}

.cbm-card--horizontal__footer {
    display:     flex;
    align-items: center;
    gap:         var(--cbm-space-2);
    font-size:   var(--cbm-text-xs);
    color:       var(--cbm-text-muted);
    margin-top:  auto;
}

.cbm-card__date {
    font-size: var(--cbm-text-xs);
    color:     var(--cbm-text-muted);
}

.cbm-card__sep {
    opacity: 0.4;
}

.cbm-card__reading-time {
    font-size: var(--cbm-text-xs);
    color:     var(--cbm-text-muted);
}

/* ==========================================================================
   7. CATEGORY STREAM SECTION
   ========================================================================== */

.cbm-category-stream {
    padding-top:    var(--cbm-space-12);
    padding-bottom: var(--cbm-space-12);
    background:     var(--cbm-bg);
    border-top:     1px solid var(--cbm-border);
}

/* Alternate background for visual rhythm between sections */
.cbm-category-stream:nth-child(even) {
    background: var(--cbm-surface);
}

/* Category-specific accent on section header label */
.cbm-section-header__label--technology { background: var(--cbm-cat-technology); color: #fff; }
.cbm-section-header__label--business   { background: var(--cbm-cat-business);   color: #fff; }
.cbm-section-header__label--creativity { background: var(--cbm-cat-creativity); color: #fff; }
.cbm-section-header__label--society    { background: var(--cbm-cat-society);    color: #fff; }
.cbm-section-header__label--interactive { background: var(--cbm-cat-interactive); color: #fff; }

/* Stream grid: lead (left, large) + secondary stack (right) */
.cbm-stream-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--cbm-grid-gap);
}

.cbm-stream-grid__lead {
    /* Full width on mobile, left column on desktop */
}

.cbm-stream-grid__secondary {
    display:        flex;
    flex-direction: column;
    gap:            var(--cbm-space-3);   /* Consistent gap — no divider rules needed */
    align-items:    stretch;              /* All cards same width */
}

/* Uniform secondary cards — each a self-contained box, separated by gap */
/* No padding-stripping or border overrides that would break thumbnail alignment */
.cbm-stream-grid__secondary .cbm-card--horizontal + .cbm-card--horizontal {
    /* Additional cards use the same styling as the first card.
       The gap on .cbm-stream-grid__secondary provides the visual separation. */
}

/* ==========================================================================
   8. INTERACTIVE TOOLS STRIP
   ========================================================================== */

.cbm-tools-strip {
    background:     var(--cbm-primary);
    padding-top:    var(--cbm-space-16);
    padding-bottom: var(--cbm-space-16);
    position:       relative;
    overflow:       hidden;
}

/* Subtle pattern overlay (CSS-only, no image) */
.cbm-tools-strip::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background-image: radial-gradient(
        circle at 20% 80%,
        rgba(212, 132, 26, 0.12) 0%,
        transparent 50%
    ), radial-gradient(
        circle at 80% 20%,
        rgba(61, 122, 138, 0.10) 0%,
        transparent 50%
    );
    pointer-events: none;
}

.cbm-tools-strip .cbm-section-header {
    border-bottom-color: rgba(255,255,255,0.15);
    margin-bottom: var(--cbm-space-4);
}

.cbm-tools-strip .cbm-section-header__title {
    color: #ffffff;
}

.cbm-tools-strip__intro {
    color:         rgba(255,255,255,0.7);
    font-size:     var(--cbm-text-md);
    margin-bottom: var(--cbm-space-10);
    max-width:     560px;
}

/* Tools grid */
.cbm-tools-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--cbm-space-5);
}

/* ==========================================================================
   9. INTERACTIVE CARD
   ========================================================================== */

.cbm-interactive-card {
    display:        flex;
    flex-direction: column;
    gap:            var(--cbm-space-4);
    padding:        var(--cbm-space-6);
    background:     rgba(255,255,255,0.06);
    border:         1px solid rgba(255,255,255,0.12);
    border-radius:  var(--cbm-radius-lg);
    text-decoration: none;
    color:          #ffffff;
    transition:     background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    position:       relative;
    overflow:       hidden;
    cursor:         pointer;
}

.cbm-interactive-card::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     3px;
    background: var(--cbm-accent);
    opacity:    0;
    transition: opacity 0.2s ease;
}

.cbm-interactive-card:hover {
    background:   rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
    transform:    translateY(-3px);
    box-shadow:   0 8px 24px rgba(0,0,0,0.25);
    text-decoration: none;
    color:        #ffffff;
}

.cbm-interactive-card:hover::before {
    opacity: 1;
}

/* Category-coloured top border on hover */
.cbm-interactive-card--technology:hover::before { background: var(--cbm-cat-technology); }
.cbm-interactive-card--business:hover::before   { background: var(--cbm-cat-business); }
.cbm-interactive-card--creativity:hover::before { background: var(--cbm-cat-creativity); }
.cbm-interactive-card--society:hover::before    { background: var(--cbm-cat-society); }
.cbm-interactive-card--interactive:hover::before { background: var(--cbm-cat-interactive); }

/* Card header: icon + badge */
.cbm-interactive-card__header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             var(--cbm-space-3);
}

.cbm-interactive-card__icon {
    width:  48px;
    height: 48px;
    flex-shrink: 0;
    color:  var(--cbm-accent);
    opacity: 0.9;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cbm-interactive-card__icon svg {
    width:  100%;
    height: 100%;
}

.cbm-interactive-card:hover .cbm-interactive-card__icon {
    opacity:   1;
    transform: scale(1.1);
}

.cbm-interactive-card__badge {
    display:        inline-block;
    font-family:    var(--cbm-font-body);
    font-size:      var(--cbm-text-xs);
    font-weight:    var(--cbm-weight-black);
    letter-spacing: var(--cbm-tracking-caps);
    text-transform: uppercase;
    padding:        var(--cbm-space-1) var(--cbm-space-3);
    border-radius:  var(--cbm-radius-pill);
    white-space:    nowrap;
    background:     rgba(255,255,255,0.12);
    color:          rgba(255,255,255,0.85);
}

/* Badge colour variants */
.cbm-interactive-card__badge--technology { background: rgba(27, 79, 114, 0.6); }
.cbm-interactive-card__badge--business   { background: rgba(29, 106, 58, 0.6); }
.cbm-interactive-card__badge--creativity { background: rgba(123, 63, 158, 0.6); }
.cbm-interactive-card__badge--society    { background: rgba(158, 58, 47, 0.6); }
.cbm-interactive-card__badge--interactive { background: rgba(61, 122, 138, 0.6); }

/* Card body */
.cbm-interactive-card__body {
    flex: 1;
}

.cbm-interactive-card__title {
    font-family:   var(--cbm-font-heading);
    font-size:     var(--cbm-text-lg);
    font-weight:   var(--cbm-weight-bold);
    color:         #ffffff;
    margin-bottom: var(--cbm-space-2);
    letter-spacing: var(--cbm-tracking-tight);
}

.cbm-interactive-card__desc {
    font-size:   var(--cbm-text-sm);
    color:       rgba(255,255,255,0.65);
    line-height: var(--cbm-leading-relaxed);
    margin:      0;
}

/* Card footer CTA */
.cbm-interactive-card__footer {
    margin-top: auto;
}

.cbm-interactive-card__cta {
    display:     inline-flex;
    align-items: center;
    gap:         var(--cbm-space-2);
    font-size:   var(--cbm-text-sm);
    font-weight: var(--cbm-weight-semibold);
    color:       var(--cbm-accent);
    transition:  gap 0.15s ease;
}

.cbm-interactive-card:hover .cbm-interactive-card__cta {
    gap: var(--cbm-space-3);
}

/* ==========================================================================
   10. NEWSLETTER SECTION
   ========================================================================== */

.cbm-newsletter {
    background:     var(--cbm-primary);
    padding:        var(--cbm-space-16) var(--cbm-container-pad-x);
}

.cbm-newsletter__inner {
    max-width:  600px;
    margin:     0 auto;
    text-align: center;
    display:    flex;
    flex-direction: column;
    align-items: center;
    gap:        var(--cbm-space-5);
}

.cbm-newsletter__eyebrow {
    font-family:    var(--cbm-font-body);
    font-size:      var(--cbm-text-xs);
    font-weight:    var(--cbm-weight-black);
    letter-spacing: var(--cbm-tracking-caps);
    text-transform: uppercase;
    color:          var(--cbm-accent);
    margin:         0;
}

.cbm-newsletter__heading {
    font-family:   var(--cbm-font-heading);
    font-size:     clamp(1.75rem, 4vw, 2.44rem);
    font-weight:   var(--cbm-weight-bold);
    color:         #ffffff;
    line-height:   var(--cbm-leading-snug);
    margin:        0;
}

.cbm-newsletter__desc {
    font-size:   var(--cbm-text-md);
    color:       rgba(255,255,255,0.75);
    line-height: var(--cbm-leading-relaxed);
    max-width:   480px;
    margin:      0;
}

/* Embed container */
.cbm-newsletter__embed {
    width: 100%;
}

/* Placeholder form */
.cbm-newsletter__form-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cbm-space-4);
}

.cbm-newsletter__form {
    display:       flex;
    width:         100%;
    max-width:     460px;
    gap:           var(--cbm-space-2);
    background:    rgba(255,255,255,0.08);
    border:        2px solid rgba(255,255,255,0.2);
    border-radius: var(--cbm-radius);
    padding:       var(--cbm-space-1);
    transition:    border-color 0.2s ease;
}

.cbm-newsletter__form:focus-within {
    border-color: var(--cbm-accent);
}

.cbm-newsletter__input {
    flex:         1;
    padding:      var(--cbm-space-3) var(--cbm-space-4);
    font-family:  var(--cbm-font-body);
    font-size:    var(--cbm-text-base);
    color:        #ffffff;
    background:   transparent;
    border:       none;
    outline:      none;
    min-width:    0;
}

.cbm-newsletter__input::placeholder {
    color: rgba(255,255,255,0.4);
}

.cbm-newsletter__submit {
    flex-shrink: 0;
}

.cbm-newsletter__privacy {
    font-size: var(--cbm-text-xs);
    color:     rgba(255,255,255,0.45);
    margin:    0;
    max-width: 400px;
}

/* Admin-only connect note */
.cbm-newsletter__admin-note {
    display:        block;
    margin-top:     var(--cbm-space-2);
    color:          rgba(255,200,100,0.8);
    font-size:      var(--cbm-text-xs);
    font-style:     italic;
    border:         1px dashed rgba(255,200,100,0.4);
    padding:        var(--cbm-space-2) var(--cbm-space-3);
    border-radius:  var(--cbm-radius-sm);
}

/* ==========================================================================
   11. ARCHIVE / INDEX PAGE
   ========================================================================== */

.cbm-archive-page {
    padding-top:    var(--cbm-space-12);
    padding-bottom: var(--cbm-space-16);
}

.cbm-archive-header {
    margin-bottom: var(--cbm-space-10);
    padding-bottom: var(--cbm-space-8);
    border-bottom: 2px solid var(--cbm-border);
}

.cbm-archive-header__title {
    font-family:   var(--cbm-font-heading);
    font-size:     var(--cbm-text-3xl);
    font-weight:   var(--cbm-weight-bold);
    color:         var(--cbm-text-heading);
    margin-bottom: var(--cbm-space-3);
}

.cbm-archive-header__badge {
    margin-bottom: var(--cbm-space-4);
}

.cbm-archive-header__desc {
    font-size:   var(--cbm-text-md);
    color:       var(--cbm-text-muted);
    max-width:   600px;
    line-height: var(--cbm-leading-relaxed);
}

.cbm-archive-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--cbm-grid-gap);
}

/* ==========================================================================
   12. NO RESULTS
   ========================================================================== */

.cbm-no-results {
    text-align:  center;
    padding:     var(--cbm-space-16) 0;
}

.cbm-no-results__text {
    font-size:     var(--cbm-text-lg);
    color:         var(--cbm-text-muted);
    margin-bottom: var(--cbm-space-8);
}

/* ==========================================================================
   13. DARK MODE OVERRIDES
   ========================================================================== */

[data-theme="dark"] .cbm-hero__overlay {
    background: linear-gradient(
        to top,
        rgba(5, 10, 20, 0.95) 0%,
        rgba(5, 10, 20, 0.75) 40%,
        rgba(5, 10, 20, 0.35) 70%,
        rgba(5, 10, 20, 0.15) 100%
    );
}

[data-theme="dark"] .cbm-featured-trio {
    background: var(--cbm-bg);
}

[data-theme="dark"] .cbm-category-stream {
    background: var(--cbm-bg);
    border-top-color: var(--cbm-border);
}

[data-theme="dark"] .cbm-category-stream:nth-child(even) {
    background: var(--cbm-surface);
}

[data-theme="dark"] .cbm-card--horizontal {
    background:   var(--cbm-surface);
    border-color: var(--cbm-border);
}

[data-theme="dark"] .cbm-stream-grid__secondary .cbm-card--horizontal + .cbm-card--horizontal {
    border-top-color: var(--cbm-border);
}

[data-theme="dark"] .cbm-tools-strip {
    background: var(--cbm-masthead-bg);
}

[data-theme="dark"] .cbm-interactive-card {
    background:   rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .cbm-interactive-card:hover {
    background:   rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
}

[data-theme="dark"] .cbm-newsletter {
    background: var(--cbm-masthead-bg);
}

[data-theme="dark"] .cbm-hero--empty {
    background:   var(--cbm-surface);
    border-color: var(--cbm-border);
}

/* ==========================================================================
   14. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ── Small mobile: 0–479px — already base styles above ───────────────────── */

/* ── Mobile+: 480px ─────────────────────────────────────────────────────── */
@media (min-width: 480px) {

    .cbm-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Tablet: 768px ──────────────────────────────────────────────────────── */
@media (min-width: 768px) {

    .cbm-hero {
        min-height: 520px;
    }

    .cbm-featured-trio__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Third feature card spans full width on tablet */
    .cbm-featured-trio__grid > :nth-child(3) {
        grid-column: 1 / -1;
    }
    /* Landscape on tablet: third card is a horizontal layout */
    .cbm-featured-trio__grid > :nth-child(3) .cbm-card--feature {
        flex-direction: row;
    }
    .cbm-featured-trio__grid > :nth-child(3) .cbm-card__image {
        width: 50%;
        flex-shrink: 0;
    }

    .cbm-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cbm-tools-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Desktop: 1024px ────────────────────────────────────────────────────── */
@media (min-width: 1024px) {

    .cbm-hero {
        min-height: 600px;
    }

    .cbm-hero__title {
        font-size: clamp(2.2rem, 3.5vw, 3.2rem);
    }

    .cbm-featured-trio__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Reset the tablet third-card override */
    .cbm-featured-trio__grid > :nth-child(3) {
        grid-column: auto;
    }

    .cbm-featured-trio__grid > :nth-child(3) .cbm-card--feature {
        flex-direction: column;
    }

    .cbm-featured-trio__grid > :nth-child(3) .cbm-card__image {
        width: auto;
    }

    /* Stream grid: 3/5 lead + 2/5 secondary */
    .cbm-stream-grid {
        grid-template-columns: 3fr 2fr;
        align-items: start;
    }

    .cbm-archive-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cbm-tools-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Wide desktop: 1200px ───────────────────────────────────────────────── */
@media (min-width: 1200px) {

    .cbm-hero {
        min-height: 640px;
    }

    .cbm-tools-grid {
        grid-template-columns: repeat(6, 1fr); /* All 6 tools in one row */
    }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cbm-hero__bg {
        transition: none;
    }

    .cbm-interactive-card,
    .cbm-card--horizontal,
    .cbm-card {
        transition: none;
    }
}