/* ============================================================
   global-reach.css (v2)
   Coverage-proof components for global-reach/ and
   web-agency-hosting/. Loads after ha-generic.css, which supplies
   .page-hero, .content-section, .feature-list and .page-cta.
   Design tokens come from critical.css / styles.css :root only.
   ============================================================ */

/* ---------- Section wrapper ----------
   NOT .content-section-inner: that is a two-column `1fr 1fr` grid meant for a
   text block paired with a .visual-block, and it flips with direction: rtl on
   even sections. These pages are single-column prose, tables and card grids,
   so they need a plain block container. A `1fr` track would also take a
   min-content floor from the card grids and overflow narrow phones. */
.reach-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.reach-inner h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 1rem 0 1.25rem;
    overflow-wrap: break-word;
}

.reach-inner > .section-label { margin-bottom: 1rem; }

.reach-subhead {
    margin: 2rem 0 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: break-word;
}

.reach-lede {
    max-width: 68ch;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    overflow-wrap: break-word;
}

.reach-note {
    max-width: 76ch;
    margin-top: 1.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

.reach-note strong { color: var(--text-secondary); }

/* ---------- Economic-bloc coverage cards ---------- */
.bloc-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* minmax(0,…) floor: the track must never take a min-content
       floor from the card contents, or it outgrows the viewport. */
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 1.25rem;
}

.bloc-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: 1.5rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
}

.bloc-count {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-gold);
}

.bloc-total {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.bloc-name {
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: break-word;
}

.bloc-note {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ---------- Continent cards ---------- */
.cont-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 1rem;
}

.cont-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 1.25rem 1rem;
    text-align: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
}

.cont-count {
    font-family: 'Space Mono', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-gold);
    line-height: 1;
}

.cont-name {
    font-size: 0.9rem;
    color: var(--text-secondary);
    overflow-wrap: break-word;
}

/* ---------- Datacenter footprint scale ----------
   The footprint is the headline claim of the "Where We Deploy" section,
   so it gets the visual weight: one lead card for the 700+ figure and
   three supporting figures. The four instant-provisioning regions that
   used to occupy a three-column table sit below as .fp-chips, which is
   deliberately the lightest component in the section. */
.fp-scale {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    /* minmax(0,…) on every track: no track may take a min-content
       floor from the card text, or it outgrows the viewport. */
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.fp-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 1.75rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
}

.fp-card-lead {
    background: var(--accent-gold-dim);
    border-color: var(--accent-gold-glow);
}

/* The lead card is the tallest in the row, so the supporting figures
   centre in their stretched track instead of stranding empty space. */
.fp-scale > .fp-card:not(.fp-card-lead) { justify-content: center; }

.fp-count {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-gold);
}

.fp-card-lead .fp-count { font-size: clamp(2.5rem, 6vw, 3.5rem); }

.fp-name {
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: break-word;
}

.fp-card-lead .fp-name { font-size: 1.1rem; }

.fp-note {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    overflow-wrap: break-word;
}

/* ---------- Footprint by region ---------- */
.fp-regions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1.25rem;
}

.fp-region {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 1.5rem 1.25rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
}

.fp-region-name {
    font-weight: 700;
    color: var(--text-primary);
    overflow-wrap: break-word;
}

.fp-region-list {
    margin: 0;
    flex: 1 1 auto;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-secondary);
    overflow-wrap: break-word;
}

.fp-region-link {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent-gold);
    text-decoration: none;
    overflow-wrap: break-word;
}

.fp-region-link:hover { text-decoration: underline; }

/* ---------- Instant-provisioning regions (secondary) ---------- */
.reach-instant-lede {
    max-width: 76ch;
    margin: 0 0 1.25rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

.fp-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.fp-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    overflow-wrap: break-word;
}

.fp-chip-code {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--accent-gold);
}

.fp-chip-note {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ---------- Prose bullet list ----------
   NOT .feature-item from ha-generic.css: that is `display: flex` built for a
   .feature-icon + .feature-text pair. Given inline content, every <strong> and
   <a> becomes its own flex item in a non-wrapping row, which overflows narrow
   viewports and reads as a row of fragments rather than a sentence. */
.reach-points {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 76ch;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reach-point {
    position: relative;
    min-width: 0;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    line-height: 1.7;
    overflow-wrap: break-word;
}

.reach-point::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-gold);
}

.reach-point strong { color: var(--text-primary); }
.reach-point a { color: var(--accent-blue); }

/* ---------- Tables ---------- */
.reach-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.reach-table th,
.reach-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    overflow-wrap: break-word;
}

.reach-table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.reach-table td { color: var(--text-secondary); }
.reach-table td strong { color: var(--text-primary); }

/* .table-scroll matches blog.css: the table keeps its natural size
   and scrolls inside its own box at every width. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Country list ---------- */
.country-list ol {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 4 190px;
    column-gap: 1.5rem;
}

.country-list li {
    padding: 0.35rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    break-inside: avoid;
    overflow-wrap: break-word;
}

.cl-code {
    display: inline-block;
    min-width: 2.25rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: var(--accent-gold);
}

/* ---------- FAQ ---------- */
.reach-faq {
    max-width: 76ch;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.reach-faq h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: var(--text-primary);
    overflow-wrap: break-word;
}

.reach-faq p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
    overflow-wrap: break-word;
}

.reach-faq a { color: var(--accent-blue); }

/* ---------- Mobile / tablet performance (≤1024px) ----------
   Defense-in-depth. The universal `*` kill in critical.css already
   covers these; this block documents the category's own selectors,
   per the four-layer rule in CLAUDE.md. */
@media (max-width: 1024px) {
    .bloc-card,
    .cont-card,
    .fp-card,
    .fp-region,
    .fp-chip,
    .reach-point,
    .reach-faq {
        animation: none !important;
        transition: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        will-change: auto !important;
    }

    .bloc-card:hover,
    .cont-card:hover,
    .fp-card:hover,
    .fp-region:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Heavy below-fold section: skip rendering until scrolled to. */
    .country-list {
        content-visibility: auto;
        contain-intrinsic-size: 1px 1600px;
    }
}

@media (max-width: 768px) {
    .country-list ol { columns: 2 150px; }
    .bloc-count { font-size: 1.75rem; }
    /* The 1.5fr lead track plus three 1fr tracks is too tight below this,
       so the lead card takes a full row and the rest pair up. */
    .fp-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fp-card-lead { grid-column: 1 / -1; }
    .fp-count { font-size: 1.75rem; }
}

@media (max-width: 480px) {
    .country-list ol { columns: 1; }
    .reach-lede { font-size: 1rem; }
    .fp-scale { grid-template-columns: minmax(0, 1fr); }
    .fp-card { padding: 1.35rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bloc-card,
    .cont-card,
    .fp-card,
    .fp-region,
    .reach-faq {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}