/* /css/blog-desktop.css
   ─────────────────────────────────────────────────────────────────────
   Desktop layout overrides for ALL /blog/* pages.

   Mobile design philosophy: every blog HTML is hand-tuned for a 480px
   column (mobile-first, see CLAUDE.md). On a desktop browser this looks
   absurdly narrow — a 1920px screen shows 480px of content + 1440px of
   void. This stylesheet opens up the column on screens ≥ 768px without
   touching the inline mobile CSS.

   ── Centering note (2026-05-06 fix) ──
   The inline CSS sets `body { max-width:480px; margin:0 auto }` which
   should auto-center, BUT some browsers + the `position: sticky` nav
   inside body can occasionally render off-center on first paint at
   non-mobile widths. Belt-and-suspenders: this stylesheet repeats
   `margin: 0 auto` with `!important` and adds explicit `left/right`
   margin auto so the column is *unambiguously* centered no matter what
   the inline CSS says.

   ── Width philosophy ──
   The blog runs lots of tables, KPI grids, and comparison charts that
   benefit from a wider column than pure prose. Tier sizes:
     • ≥768px (tablet): 880px
     • ≥1024px (laptop): 1024px
     • ≥1440px (desktop / 4K): 1100px (capped — beyond this, line
       length hurts readability even for analytical content)
   ─────────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    body {
        max-width: 880px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 16px;
        padding-left: 0;
        padding-right: 0;
    }

    /* Hero — bigger padding + larger headline */
    .hero {
        padding: 48px 36px 36px;
    }
    .hero h1 {
        font-size: 32px;
        line-height: 1.25;
        letter-spacing: -0.025em;
    }
    .hero .sub {
        font-size: 15px;
        line-height: 1.7;
    }
    .hero .meta {
        font-size: 12px;
        margin-top: 20px;
    }

    /* Section headers */
    .sec-head {
        padding: 0 28px;
    }
    .sec-head h2 {
        font-size: 24px;
    }
    .sec-head .lede {
        font-size: 14.5px;
        line-height: 1.7;
    }

    /* All "card-like" boxes that use `margin: 0 16px` in mobile inline.
       Bumped to 28px for a more relaxed gutter at this column width. */
    .card,
    .tbl,
    .toc,
    .tldr,
    .deal-flow,
    .score-box,
    .kpi-row,
    .h2h,
    .dtree,
    .tip,
    .warning-box,
    .cta {
        margin-left: 28px;
        margin-right: 28px;
    }

    /* Card internals — bigger text + more padding */
    .card {
        padding: 22px 24px;
    }
    .card p,
    .tldr li {
        font-size: 14px;
        line-height: 1.78;
    }
    .card p + p {
        margin-top: 10px;
    }
    .card h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    /* Tables — readable cells, more breathing room */
    .tbl table {
        font-size: 13.5px;
    }
    .tbl thead th {
        padding: 12px 12px;
        font-size: 11.5px;
    }
    .tbl td {
        padding: 12px 12px;
        line-height: 1.55;
    }

    /* TOC */
    .toc {
        padding: 16px 22px;
    }
    .toc h3 {
        font-size: 12px;
    }
    .toc li {
        font-size: 13.5px;
        padding: 7px 0;
    }

    /* TLDR */
    .tldr {
        padding: 22px 24px;
    }
    .tldr h3 {
        font-size: 16px;
    }
    .tldr li {
        font-size: 14px;
        padding: 7px 0 7px 22px;
    }

    /* Deal-flow / score-box / kpi-row internals */
    .deal-flow {
        padding: 20px;
    }
    .deal-flow .step .title {
        font-size: 14px;
    }
    .deal-flow .step .desc {
        font-size: 13px;
        line-height: 1.65;
    }
    .score-box {
        padding: 20px;
    }
    .score-box .row {
        font-size: 13px;
    }
    .kpi-row {
        gap: 10px;
    }
    .kpi {
        padding: 16px 12px;
    }
    .kpi .v {
        font-size: 22px;
    }

    /* Tip / warning / CTA */
    .tip,
    .warning-box {
        padding: 14px 20px;
        font-size: 13.5px;
        line-height: 1.7;
    }
    .cta {
        padding: 24px 28px;
    }
    .cta h3 {
        font-size: 16px;
    }
    .cta p {
        font-size: 13.5px;
    }

    /* Footer */
    footer .disc {
        font-size: 11.5px;
        line-height: 1.7;
    }

    /* Sticky nav — make it visually anchored to the centered body */
    .site-nav {
        padding: 14px 24px;
    }
    .site-nav .brand {
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    body {
        max-width: 1024px !important;
        font-size: 17px;
    }

    .hero {
        padding: 56px 44px 40px;
    }
    .hero h1 {
        font-size: 36px;
    }
    .hero .sub {
        font-size: 15.5px;
    }

    .sec-head {
        padding: 0 32px;
    }
    .sec-head h2 {
        font-size: 26px;
    }
    .sec-head .lede {
        font-size: 15px;
    }

    .card,
    .tbl,
    .toc,
    .tldr,
    .deal-flow,
    .score-box,
    .kpi-row,
    .h2h,
    .dtree,
    .tip,
    .warning-box,
    .cta {
        margin-left: 32px;
        margin-right: 32px;
    }

    .card p,
    .tldr li {
        font-size: 14.5px;
        line-height: 1.8;
    }

    .tbl table {
        font-size: 14px;
    }
}

@media (min-width: 1440px) {
    body {
        max-width: 1100px !important;
        font-size: 17.5px;
    }

    .hero h1 {
        font-size: 38px;
    }
    .sec-head h2 {
        font-size: 28px;
    }
}