/* ==========================================================
   LAYER 5 · RESPONSIVE LAYOUT
   Base styles (other files) = mobile, < 768px.
   ≥ 768px  tablet: 2-column grids
   ≥ 1024px desktop: full type scale, wider spacing
   ========================================================== */

/* Custom elements are inline by default */
site-logo, site-footer { display: block; }

/* ---------- Phones only (< 768px) ---------- */
@media (max-width: 767px) {
  /* Leave room under the footer text for the floating Call / WhatsApp buttons */
  .subfooter { padding-bottom: 170px; }
  /* Text-heavy infographics: use the full screen width so their small print stays readable */
  .infographic { margin-inline: calc(-1 * var(--gutter)); }
  .container--roadmap { max-width: none; }
  /* Step pictures: centred above their text instead of stranded on the left */
  .illus-card { width: min(280px, 82%); margin-inline: auto; }
  /* Impact numbers: one line each, so all four cards line up */
  .impact-card__text strong { font-size: 1.05rem; white-space: nowrap; }
}

/* Smallest phones (< 375px): cards are ~115px wide, so numbers may wrap instead of being cut off */
@media (max-width: 374px) {
  .impact-card__text strong { white-space: normal; font-size: 1rem; }
  .impact-card__text { padding-inline: 6px; }
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  :root {
    --fs-hero: 2.2rem;   /* 35px on the 980 canvas */
    --fs-h2: 1.625rem;   /* 26px */
    --fs-display: 2.1rem;
    --section-y: 48px;
    --section-y-tight: 32px;
  }

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

  /* Hero: text left, image right, image anchored to the bottom edge.
     Reference (980 canvas): hero ≈ 450px tall, wide 355×70 logo badge,
     text starts ~30px under the badge, small square-cornered button. */
  .hero__inner { position: relative; grid-template-columns: 1fr 1fr; align-items: end; min-height: 364px; padding-top: 30px; }
  /* Text spans the row but keeps clear of the 270px photo (+24px gap) on the right */
  .hero__text  { position: relative; z-index: 1; grid-column: 1 / -1; align-self: start; text-align: left; padding-right: 294px; padding-bottom: 96px; }
  /* Photo anchored bottom-right; its knee graphic overlaps the text column a little, as in the reference */
  .hero__media { position: absolute; right: var(--gutter); bottom: 0; width: 270px; margin: 0; }
  .logo-badge img { width: 190px; }
  .hero__brand .logo-badge,
  .site-footer .logo-badge { display: flex; justify-content: center; min-width: 355px; padding: 7px 24px; }
  .hero__brand .logo-badge img,
  .site-footer .logo-badge img { width: auto; height: 56px; }   /* badge total ≈ 70px tall */

  /* Journey heading is wider than the 431px blocks in the reference: let it overhang */
  .container--journey > .section-title { margin-inline: -80px; }

  /* Steps: illustration card at reference width (282px at 1366) */
  .illus-card { width: 202px; }

  /* Branches get their own full-width row; mobile number and social sit side by side below */
  .footer__cols { grid-template-columns: 1fr 1fr; align-items: start; max-width: 760px; margin-inline: auto; }
  .footer__col--branches { grid-column: 1 / -1; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  :root {
    --fs-display: 2.3rem;
    --section-y: 64px;
    --section-y-tight: 40px;
  }
  /* Content is zoomed ×1.05–1.6 here, so a 40px button renders 42–64px tall */
  .btn { min-height: 42px; padding: 0 var(--space-5); font-size: 0.9375rem; }   /* ≥ 44px after zoom at every desktop width */

  /* Sticky contact: labelled pills only where there is room beside the content */
  .sticky-contact__btn { width: auto; min-width: 150px; padding: 0 22px 0 16px; }
  .sticky-contact__btn span { display: inline; }
}

/* ---------- Fix 1 · desktop proportional scale ----------
   page-scale ≈ viewport width / 980 (the reference's design canvas), capped at 1.6.
   Stepped because CSS `zoom` needs a plain number. */
@media (min-width: 1024px) { :root { --page-scale: 1.05; } }
@media (min-width: 1152px) { :root { --page-scale: 1.18; } }
@media (min-width: 1280px) { :root { --page-scale: 1.3; } }
@media (min-width: 1366px) { :root { --page-scale: 1.394; } }
@media (min-width: 1440px) { :root { --page-scale: 1.47; } }
@media (min-width: 1600px) { :root { --page-scale: 1.6; } }