/* Sandbox Africa V8-PUB8B — public layout stabilisation.
 * Loads after PUB8. It fixes responsive shell/grid regressions without
 * changing the underlying information architecture or visual identity.
 */
:root {
    --pub8b-container: 1240px;
    --pub8b-gutter: clamp(1rem, 3vw, 2rem);
    --pub8b-section-y: clamp(2.35rem, 3.4vw, 3.25rem);
    --pub8b-compact-y: clamp(1.8rem, 2.6vw, 2.5rem);
    --pub8b-hero-y: clamp(3.75rem, 5.4vw, 5.25rem);
    --pub8b-gap: clamp(1.1rem, 2.4vw, 2rem);
}

html { overflow-x: clip; }
.sandbox-v8-public { overflow-x: clip; }
.sandbox-v8-public *, .sandbox-v8-public *::before, .sandbox-v8-public *::after { box-sizing: border-box; }
.sandbox-v8-public img,
.sandbox-v8-public svg,
.sandbox-v8-public canvas,
.sandbox-v8-public video { max-width: 100%; }

/* One predictable page width everywhere. */
.sandbox-v8-public .container {
    width: min(calc(100% - (var(--pub8b-gutter) * 2)), var(--pub8b-container));
    max-width: var(--pub8b-container);
    margin-inline: auto;
}

/* Vertical rhythm: ordinary adjacent sections should read as 72–104px gaps,
   not the previous doubled 140–200px dead zones. */
.sandbox-v8-public .section { padding-block: var(--pub8b-section-y) !important; }
.sandbox-v8-public .section-tight,
.sandbox-v8-public .section-compact { padding-block: var(--pub8b-compact-y) !important; }
.sandbox-v8-public .subhero,
.sandbox-v8-public .pub1-hero,
.sandbox-v8-public .pub5-hero,
.sandbox-v8-public .institutional-hero,
.sandbox-v8-public .hero-section,
.sandbox-v8-public .v8-hero {
    min-height: 0 !important;
    height: auto !important;
    padding-block: var(--pub8b-hero-y) !important;
}

/* Hero grids must size to content, not viewport height. */
.sandbox-v8-public .subhero-grid,
.sandbox-v8-public .pub1-hero-grid,
.sandbox-v8-public .pub5-hero-grid,
.sandbox-v8-public .institutional-hero-grid,
.sandbox-v8-public .hero-grid,
.sandbox-v8-public .pub3-opportunity-hero-grid {
    min-height: 0 !important;
    height: auto !important;
    align-items: start !important;
    gap: clamp(1.75rem, 4vw, 4rem) !important;
}
.sandbox-v8-public .subhero-grid,
.sandbox-v8-public .pub1-hero-grid,
.sandbox-v8-public .pub5-hero-grid,
.sandbox-v8-public .institutional-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr) !important;
}
.sandbox-v8-public .subhero-meta,
.sandbox-v8-public .pub1-system-card,
.sandbox-v8-public [class*="hero-proof"],
.sandbox-v8-public [class*="hero-panel"] {
    width: 100%;
    min-width: 0;
    align-self: start;
}

/* Display type remains premium but cannot consume an entire viewport. */
.sandbox-v8-public h1,
.sandbox-v8-public .subhero h1,
.sandbox-v8-public .pub1-hero h1,
.sandbox-v8-public .v8-hero h1,
.sandbox-v8-public [class*="hero"] h1 {
    font-size: clamp(2.6rem, 3.7vw, 3.65rem) !important;
    line-height: 1.01 !important;
    max-width: 19ch !important;
    text-wrap: balance;
}
.sandbox-v8-public .section-head h2,
.sandbox-v8-public [class*="section-head"] h2,
.sandbox-v8-public .cta-panel h2 {
    font-size: clamp(1.8rem, 2.45vw, 2.6rem) !important;
    line-height: 1.08 !important;
    max-width: 28ch !important;
}
.sandbox-v8-public p,
.sandbox-v8-public li,
.sandbox-v8-public dd,
.sandbox-v8-public .lede { overflow-wrap: break-word; }

/* Header: six product destinations + one compact audience switcher.
   Never permit the action button to collapse into vertical letters. */
.sandbox-v8-public .header { position: relative; z-index: 90; }
.sandbox-v8-public .header .header-inner {
    display: flex;
    align-items: center;
    gap: clamp(.65rem, 1.5vw, 1.2rem) !important;
    min-width: 0;
}
.sandbox-v8-public .header .brand { flex: 0 0 auto; min-width: 0; }
.sandbox-v8-public .header .brand-logo { width: clamp(108px, 9vw, 142px); height: auto; }
.sandbox-v8-public .desktop-nav {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    gap: clamp(.45rem, 1vw, .9rem) !important;
}
.sandbox-v8-public .desktop-nav .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: clamp(.72rem, .76vw, .82rem) !important;
}
.sandbox-v8-public .header-paths { display: none !important; }
.sandbox-v8-public .header-audience-menu { position: relative; flex: 0 0 auto; }
.sandbox-v8-public .header-audience-menu summary {
    list-style: none;
    cursor: pointer;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding-inline: .7rem;
    color: rgba(241,230,212,.8);
    font-size: .78rem;
    border-left: 1px solid rgba(95,163,158,.2);
}
.sandbox-v8-public .header-audience-menu summary::-webkit-details-marker { display: none; }
.sandbox-v8-public .header-audience-menu summary::after { content: "⌄"; color: #D9A056; font-size: .8rem; }
.sandbox-v8-public .header-audience-menu[open] summary,
.sandbox-v8-public .header-audience-menu summary:hover { color: #F1E6D4; }
.sandbox-v8-public .header-audience-panel {
    position: absolute;
    top: calc(100% + .6rem);
    right: 0;
    width: min(360px, calc(100vw - 2rem));
    padding: .55rem;
    border: 1px solid rgba(95,163,158,.24);
    border-radius: 16px;
    background: rgba(6,25,28,.98);
    box-shadow: 0 22px 60px rgba(0,0,0,.32);
}
.sandbox-v8-public .header-audience-panel a {
    display: grid;
    gap: .2rem;
    padding: .78rem .85rem;
    border-radius: 11px;
    text-decoration: none;
    color: #F1E6D4;
}
.sandbox-v8-public .header-audience-panel a:hover,
.sandbox-v8-public .header-audience-panel a:focus-visible { background: rgba(95,163,158,.1); }
.sandbox-v8-public .header-audience-panel span { font-size: .83rem; font-weight: 700; }
.sandbox-v8-public .header-audience-panel small { color: rgba(241,230,212,.62); font-size: .72rem; line-height: 1.35; }
.sandbox-v8-public .header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: .55rem; margin-left: 0 !important; }
.sandbox-v8-public .header-actions .button,
.sandbox-v8-public .header-enter-button {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    width: auto !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}
.sandbox-v8-public .menu-btn { flex: 0 0 auto; }

/* Shared grids: desktop -> tablet -> mobile. */
.sandbox-v8-public :is(
    .pub1-engine-grid,.pub1-review-grid,.pub1-opportunity-grid,.pub1-product-grid,
    .pub5-outcome-grid,.pub5-opportunity-grid,.pub8-journey-grid,.pub8-ecosystem-grid,
    .v8-program-grid,.v8d-editorial-grid,.v8-studio-grid,.studio-grid,.sa-sector-grid,
    .pub3-pathway-grid,.pub3-feature-grid,.pub2-method-grid,.v8-plan-grid
) { gap: var(--pub8b-gap) !important; }

/* Cards should grow from their content, not carry old fixed/min viewport heights. */
.sandbox-v8-public :is(
    .v8-program-card,.competition-card,.pub1-engine-card,.pub1-review-card,.pub1-opportunity-card,
    .pub1-product-card,.pub5-opportunity-card,.pub8-journey,.pub8-ecosystem-card,
    .v8d-editorial-card,.card
) { min-height: 0 !important; height: auto; }

/* Directory controls remain usable before full mobile collapse. */
.sandbox-v8-public .v8-directory-filter { min-width: 0; }
.sandbox-v8-public .v8-filter-main.four,
.sandbox-v8-public .v8-filter-main,
.sandbox-v8-public .pub2-filter-grid {
    gap: .85rem !important;
}
.sandbox-v8-public .v8-directory-filter :is(input, select, textarea) { min-width: 0; width: 100%; }

/* Programme cards: useful 2x2 facts instead of four microscopic columns. */
.sandbox-v8-public .v8-program-facts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: .65rem !important;
}
.sandbox-v8-public .v8-program-facts > * { min-width: 0; }
.sandbox-v8-public .v8-program-card h2 { text-wrap: balance; overflow-wrap: anywhere; }

/* Competition records maintain a readable content/meta proportion. */
.sandbox-v8-public .v8-competition-card {
    display: grid !important;
    grid-template-columns: minmax(0,1.2fr) minmax(285px,.8fr) !important;
    align-items: stretch;
}
.sandbox-v8-public .competition-copy,
.sandbox-v8-public .competition-side { min-width: 0; }

/* Marketplace qualification panel must never create a viewport-height hero. */
.sandbox-v8-public .pub4-marketplace-hero,
.sandbox-v8-public .pub4-marketplace-hero .subhero-grid { min-height: 0 !important; }
.sandbox-v8-public .pub8-qualification { min-width: 0; }

/* Footer remains information-dense without turning into microtype. */
.sandbox-v8-public .pub1-footer-intro {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(300px,.8fr);
    gap: 2rem;
    align-items: end;
}
.sandbox-v8-public .pub1-footer-grid,
.sandbox-v8-public .footer-grid { gap: clamp(1.5rem,3vw,3rem) !important; }
.sandbox-v8-public .footer-links a { line-height: 1.55; }

/* Tablet: this is where the screenshots were failing most severely. */
@media (max-width: 1180px) {
    .sandbox-v8-public .desktop-nav,
    .sandbox-v8-public .header-audience-menu,
    .sandbox-v8-public .header-account-link { display: none !important; }
    .sandbox-v8-public .header .header-inner { justify-content: space-between; }
    .sandbox-v8-public .header-actions { margin-left: auto !important; }
    .sandbox-v8-public .menu-btn { display: inline-flex !important; align-items: center; justify-content: center; }

    .sandbox-v8-public :is(
        .pub1-engine-grid,.pub1-review-grid,.pub1-opportunity-grid,.pub1-product-grid,
        .pub5-outcome-grid,.pub5-opportunity-grid,.pub8-journey-grid,.pub8-ecosystem-grid,
        .v8-program-grid,.v8d-editorial-grid,.v8-studio-grid,.studio-grid,.sa-sector-grid,
        .pub3-pathway-grid,.pub3-feature-grid,.pub2-method-grid,.v8-plan-grid
    ) { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

    .sandbox-v8-public .v8-filter-main.four { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 960px) {
    .sandbox-v8-public .subhero-grid,
    .sandbox-v8-public .pub1-hero-grid,
    .sandbox-v8-public .pub5-hero-grid,
    .sandbox-v8-public .institutional-hero-grid,
    .sandbox-v8-public .hero-grid,
    .sandbox-v8-public .pub3-opportunity-hero-grid,
    .sandbox-v8-public .pub1-two-column,
    .sandbox-v8-public .pub5-two-col,
    .sandbox-v8-public .pub1-final-grid,
    .sandbox-v8-public .pub4-marketplace-cta,
    .sandbox-v8-public .pub8-decision-grid,
    .sandbox-v8-public .institutional-content-grid,
    .sandbox-v8-public .contact-grid {
        grid-template-columns: 1fr !important;
    }
    .sandbox-v8-public .subhero-meta {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: .7rem;
    }
    .sandbox-v8-public .v8-competition-card { grid-template-columns: 1fr !important; }
    .sandbox-v8-public .competition-side { border-left: 0 !important; border-top: 1px solid rgba(95,163,158,.18); }
    .sandbox-v8-public .pub1-footer-intro { grid-template-columns: 1fr; align-items: start; }
    .sandbox-v8-public .pub1-footer-statement { text-align: left !important; }
    .sandbox-v8-public .pub1-footer-grid,
    .sandbox-v8-public .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 700px) {
    :root {
        --pub8b-gutter: 1rem;
        --pub8b-section-y: clamp(1.8rem, 8vw, 2.35rem);
        --pub8b-compact-y: clamp(1.35rem, 6vw, 1.85rem);
        --pub8b-hero-y: clamp(2.6rem, 10vw, 3.5rem);
    }
    .sandbox-v8-public .header-enter-button { display: none !important; }
    .sandbox-v8-public .brand-logo { width: 112px !important; }

    .sandbox-v8-public h1,
    .sandbox-v8-public .subhero h1,
    .sandbox-v8-public .pub1-hero h1,
    .sandbox-v8-public .v8-hero h1,
    .sandbox-v8-public [class*="hero"] h1 {
        font-size: clamp(2rem, 10vw, 2.55rem) !important;
        line-height: 1.03 !important;
        max-width: 100% !important;
        letter-spacing: -.035em !important;
    }
    .sandbox-v8-public .section-head h2,
    .sandbox-v8-public [class*="section-head"] h2,
    .sandbox-v8-public .cta-panel h2 {
        font-size: clamp(1.55rem, 7.5vw, 2.05rem) !important;
        max-width: 100% !important;
    }

    .sandbox-v8-public :is(
        .pub1-engine-grid,.pub1-review-grid,.pub1-opportunity-grid,.pub1-product-grid,
        .pub5-outcome-grid,.pub5-opportunity-grid,.pub8-journey-grid,.pub8-ecosystem-grid,
        .v8-program-grid,.v8d-editorial-grid,.v8-studio-grid,.studio-grid,.sa-sector-grid,
        .pub3-pathway-grid,.pub3-feature-grid,.pub2-method-grid,.v8-plan-grid,
        .v8-three-step,.pub5-process-track,.pub8-qualification
    ) { grid-template-columns: 1fr !important; }

    .sandbox-v8-public .v8-filter-main.four,
    .sandbox-v8-public .v8-filter-main,
    .sandbox-v8-public .pub2-filter-grid,
    .sandbox-v8-public .subhero-meta { grid-template-columns: 1fr !important; }
    .sandbox-v8-public .v8-program-facts { grid-template-columns: 1fr !important; }
    .sandbox-v8-public .v8-filter-actions,
    .sandbox-v8-public .actions,
    .sandbox-v8-public .cta-actions,
    .sandbox-v8-public .v8-card-footer,
    .sandbox-v8-public .pub4-card-actions {
        align-items: stretch !important;
        flex-wrap: wrap !important;
    }
    .sandbox-v8-public .actions .button,
    .sandbox-v8-public .cta-actions .button { width: 100%; justify-content: center; }
    .sandbox-v8-public .pub1-footer-grid,
    .sandbox-v8-public .footer-grid { grid-template-columns: 1fr !important; }
    .sandbox-v8-public .pub1-footer-bottom,
    .sandbox-v8-public .footer-bottom { align-items: flex-start !important; gap: 1rem; flex-direction: column; }
}

@media (max-width: 430px) {
    .sandbox-v8-public .container { width: min(calc(100% - 1.5rem), var(--pub8b-container)); }
    .sandbox-v8-public .pub8-grid-surface,
    .sandbox-v8-public .v8-directory-filter,
    .sandbox-v8-public .cta-panel { border-radius: 16px !important; }
    .sandbox-v8-public .pub8-audience-shell,
    .sandbox-v8-public .pub8-decision { padding: .9rem !important; }
    .sandbox-v8-public .pub8-path,
    .sandbox-v8-public .v8-program-card,
    .sandbox-v8-public .competition-copy,
    .sandbox-v8-public .competition-side { padding: 1rem !important; }
    .sandbox-v8-public .breadcrumb { font-size: .72rem; overflow-wrap: anywhere; }
}

/* Secondary public modules inherit the same responsive system. */
.sandbox-v8-public :is(
    .capital-problem-grid,.capital-trust-grid,.capital-offer-grid,.capital-interest-grid,.capital-gateway-grid,
    .institutional-route-grid,.institutional-journey-grid,.institutional-info-grid,.macq-responsibility-grid,
    .pub2-evidence-grid,.pub2-provenance-grid,.pub2-review-grid,.pub3-opportunity-grid,
    .pub4-commercial-grid,.pub4-company-product-grid,.pub4-market-grid,.pub4-pilot-grid,.pub4-provenance-grid,
    .v8-readiness-grid,.v8-review-evidence-grid,.v8-review-fact-grid,.v8-taxonomy-grid,
    .v8e-card-grid,.v8e-compliance-grid,.v8e-post-grid,.v8g-product-grid,.v8g-stage-grid
) { gap: var(--pub8b-gap) !important; }

.sandbox-v8-public .v8d-pathway {
    display: grid !important;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 0 !important;
}
.sandbox-v8-public .v8d-pathway-step { min-width: 0; }
.sandbox-v8-public .pub5-proof-strip,
.sandbox-v8-public .v8d-metric-grid { gap: .85rem !important; }

@media (max-width: 1180px) {
    .sandbox-v8-public :is(
        .capital-problem-grid,.capital-trust-grid,.capital-offer-grid,.capital-interest-grid,.capital-gateway-grid,
        .institutional-route-grid,.institutional-journey-grid,.institutional-info-grid,.macq-responsibility-grid,
        .pub2-evidence-grid,.pub2-provenance-grid,.pub2-review-grid,.pub3-opportunity-grid,
        .pub4-commercial-grid,.pub4-company-product-grid,.pub4-market-grid,.pub4-pilot-grid,.pub4-provenance-grid,
        .v8-readiness-grid,.v8-review-evidence-grid,.v8-review-fact-grid,.v8-taxonomy-grid,
        .v8e-card-grid,.v8e-compliance-grid,.v8e-post-grid,.v8g-product-grid,.v8g-stage-grid
    ) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .sandbox-v8-public .v8d-pathway { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 960px) {
    .sandbox-v8-public :is(
        .capital-command-grid,.capital-hero,.pub2-review-detail-grid,.pub2-submit-grid,
        .pub4-company-grid,.pub4-product-detail-grid,.v8-detail-grid,.v8e-content-grid,.v8e-form-grid,
        .form-grid,.grid-cols-2
    ) { grid-template-columns: 1fr !important; }
    .sandbox-v8-public .pub5-proof-strip,
    .sandbox-v8-public .v8d-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 700px) {
    .sandbox-v8-public :is(
        .capital-problem-grid,.capital-trust-grid,.capital-offer-grid,.capital-interest-grid,.capital-gateway-grid,
        .institutional-route-grid,.institutional-journey-grid,.institutional-info-grid,.macq-responsibility-grid,
        .pub2-evidence-grid,.pub2-provenance-grid,.pub2-review-grid,.pub3-opportunity-grid,
        .pub4-commercial-grid,.pub4-company-product-grid,.pub4-market-grid,.pub4-pilot-grid,.pub4-provenance-grid,
        .v8-readiness-grid,.v8-review-evidence-grid,.v8-review-fact-grid,.v8-taxonomy-grid,
        .v8e-card-grid,.v8e-compliance-grid,.v8e-post-grid,.v8g-product-grid,.v8g-stage-grid
    ) { grid-template-columns: 1fr !important; }
    .sandbox-v8-public .v8d-pathway { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 430px) {
    .sandbox-v8-public .v8d-pathway,
    .sandbox-v8-public .pub5-proof-strip,
    .sandbox-v8-public .v8d-metric-grid { grid-template-columns: 1fr !important; }
}