/* ==========================================================================
   Humaira Syed — responsive.css
   Mobile-first refinements. Load AFTER style.css.
   ========================================================================== */

/* ---------- Large tablets / small laptops ---------- */
@media (max-width: 1024px) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .routing { grid-template-columns: repeat(3,1fr); }
}

/* ---------- Tablet ---------- */
@media (max-width: 880px) {
  :root { --section-y: clamp(3rem, 2rem + 4vw, 4.5rem); }

  /* Nav collapses to hamburger */
  .nav__menu { display: none; }
  .nav__actions .btn--primary { display: none; }
  .nav__toggle { display: inline-flex; }

  /* Heroes stack, copy above image */
  .hero__grid, .hero--page .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero__media { order: 2; max-width: 460px; margin-inline: auto; height: auto !important; max-height: none !important; }
  .hero__sub { max-width: none; }
  .hero__media img {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
  }
  .hero__media--portrait-contain img {
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    max-height: none !important;
  }
  .hero__media--qlt-banner {
    max-width: 100%;
    justify-self: center;
  }
  .hero__media--qlt-banner .qlt-hero-banner {
    max-width: 100%;
    margin-top: 32px;
  }
  .hero__media--qlt-banner .qlt-hero-banner img {
    width: 100%;
    max-width: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 18px;
  }

  /* Splits stack */
  .split, .split--reverse { grid-template-columns: 1fr; gap: 2rem; }
  .split--reverse .split__media { order: 0; }
  .split__media { max-width: 520px; margin-inline:auto; height: auto !important; max-height: none !important; }
  .split__media img {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  /* Grids */
  .grid--4 { grid-template-columns: repeat(2,1fr); }
  .grid--3 { grid-template-columns: repeat(2,1fr); }

  /* FROM -> TO becomes vertical with rotated arrow */
  .fromto { grid-template-columns: 1fr; }
  .fromto__arrow { transform: rotate(90deg); padding: .3rem 0; }

  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }

  /* Sticky mobile CTA appears */
  .sticky-cta { display: block; }
  body { padding-bottom: 0; }
  .whatsapp-fab { bottom: 150px; }
  .to-top { bottom: 82px; }

  .checklist.cols-2 { grid-template-columns: 1fr; }
}

/* ---------- Phone ---------- */
@media (max-width: 560px) {
  :root { --radius: 16px; --radius-lg: 22px; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .routing { grid-template-columns: 1fr 1fr; }
  .quiz-options { grid-template-columns: repeat(5, minmax(38px, 1fr)); }
  .quiz-score-grid { grid-template-columns: 1fr; }

  .btn-row { width: 100%; }
  .btn-row .btn { width: 100%; }
  .hero .btn-row .btn { width: 100%; }

  .nav__logo img { height: 36px; }
  .hero__media .badge, .split__media .badge { position: static; margin-top: 1rem; max-width: none; }

  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__brand img { max-width: 145px; }
  .pathstep { grid-template-columns: 1fr; }
  .pathstep__node { margin-bottom: .4rem; }
  .pathway--connected .pathstep:not(:last-child)::after { display:none; }

  .credbar__inner { gap:.5rem 1rem; }
  .pullquote { font-size: clamp(1.5rem, 5vw, 2rem); }

  /* No horizontal scroll safeguard */
  .hero__media .blob { display:none; }
}

/* ---------- Very small ---------- */
@media (max-width: 380px) {
  .footer__top { grid-template-columns: 1fr; }
}