/* m-blog.css — phone/tablet parity with the desktop design (blog index and posts).
   Loaded after styles.css/pages.css/blog.css/m-shared.css. Desktop (>=1301px) must stay unchanged:
   every rule below sits inside a phone media query or the 1240-1300 laptop band. */

/* ═══════════ laptop band (1240-1300) ═══════════ */
/* 1920px screens at 150% = 1280 CSS px. The card column is min(1240px, 100% - 48px): below 1288px (about 1305px
   with a classic scrollbar) the 3-up grid is up to 4-5% narrower than the 1240 design and titles wrap a line more
   than at 1440. The card block scales with its column instead, like the data-fit zoom: --u is one design px,
   min(1px, column / 1240), resolved per element against the .bl-wrap container, so a full 1240 column gets the 1440 values.
   Blog posts need nothing here: their 820/720px columns fit, only the side margins narrow. */
@media (min-width:1240px) and (max-width:1300px){
  .bl-wrap{container-type:inline-size;--u:min(1px,100cqw / 1240)}
  .bl-wrap .bl-featured{margin-bottom:calc(40 * var(--u))}
  .bl-wrap .bl-grid{gap:calc(28 * var(--u))}
  .bl-wrap .bl-card{border-radius:calc(20 * var(--u))}
  .bl-wrap .bl-thumb{padding:calc(18 * var(--u))}
  .bl-wrap .bl-cat{font-size:calc(12 * var(--u));padding:calc(7 * var(--u)) calc(12 * var(--u))}
  .bl-wrap .bl-cardbody{gap:calc(10 * var(--u));padding:calc(22 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u))}
  .bl-wrap .bl-cardbody h3{font-size:calc(21 * var(--u));letter-spacing:calc(-.3 * var(--u))}
  .bl-wrap .bl-ex{font-size:calc(15 * var(--u))}
  .bl-wrap .bl-meta{font-size:calc(13 * var(--u));gap:calc(8 * var(--u))}
  /* featured card (image beside text) */
  .bl-wrap .bl-card-feat .bl-thumb{min-height:calc(300 * var(--u))}
  .bl-wrap .bl-card-feat .bl-cardbody{gap:calc(14 * var(--u));padding:calc(44 * var(--u))}
  .bl-wrap .bl-card-feat h3{font-size:calc(30 * var(--u));letter-spacing:calc(-.6 * var(--u))}
  .bl-wrap .bl-card-feat .bl-ex{font-size:calc(17 * var(--u))}
}

@media (max-width:760px){

  /* ── Blog index: featured card ───────────────────────────────────────────
     The card stacks (image over text) on phones — its text must reflow — but the
     cover keeps the desktop framing. Desktop thumb is 644x331 (ratio 1.946), so the
     1672x940 cover fits by width: full width of the art, a sliver cropped top/bottom.
     blog.css forces 16:10 on phones, which crops the sides instead. */
  .bl-card-feat .bl-thumb{aspect-ratio:644/331;min-height:0;padding:14px}
  .bl-thumb{padding:14px}   /* featured and grid pills share one left edge, as on desktop */
  /* Same insets as the grid cards below, so every card's text shares one left edge. */
  .bl-card-feat .bl-cardbody{padding:22px 22px 24px}
  /* Desktop shows the whole excerpt (3 lines); the narrow column needs up to 6. */
  .bl-card-feat .bl-ex{-webkit-line-clamp:6}

  /* ── Blog post: hero ─────────────────────────────────────────────────────
     Desktop frames the cover at full width (the headline art on the left, the
     breach network on the right) with the text column over a navy scrim. A phone
     hero is taller than wide, so "cover" chops it to a narrow centre strip.
     Here the cover is framed at full width across the top of the same navy band,
     and the text column follows below it. The side padding is removed so the title
     column (width calc(100% - 48px)) sits on the article body's left edge. */
  .bl-art-hero{padding:96px 0 56px}
  .bl-art-hero.bl-img{
    padding-top:calc(56.22% + 20px);            /* 940/1672 of the hero width = the image height */
    background-size:100% auto;
    background-position:center top;
    background-color:#0a0d2a;
  }
  /* The scrim covers exactly the image box and fades into the band colour. */
  .bl-art-hero.bl-img::after{
    bottom:auto;height:auto;aspect-ratio:1672/940;
    background:linear-gradient(180deg,rgba(3,4,30,.45) 0,rgba(3,4,30,.6) 72%,#0a0d2a 100%);
  }
  /* "← All articles": 40px tap target; the negative margin keeps the layout unchanged. */
  .bl-back{padding:11px 0;margin:-11px 0}
}

/* narrow phones: "← Back to blog" and "Book a demo" stay on one row, space-between */
@media (max-width:379px){
  .bl-art-foot{gap:8px}
  .bl-art-foot .btn-sec{min-width:148px}
}