/* =========================================================
   Meralli LLC — responsive.css
   Loaded last. Breakpoints: 1180 / 1024 / 900 / 720 / 520 / 400
   ========================================================= */

/* ---------- <= 1180px ---------- */
@media (max-width: 1180px) {
  :root { --gutter: 22px; }

  .hero__badge--tl { left: 0; }
  .hero__badge--br { right: 0; }

  .nav__link { padding: 10px 11px; font-size: 0.9rem; }
  .header__inner { gap: 18px; }
}

/* ---------- <= 1024px : tablet / mobile navigation ---------- */
@media (max-width: 1024px) {
  :root { --header-h: 68px; }

  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header__actions .btn--cta { display: none; }

  .topbar__list li:not(:first-child) { display: none; }

  /* Hero stacks */
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .hero__text { max-width: none; }
  .hero__media .photo { max-width: 520px; margin-inline: auto; }

  /* Grids collapse */
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .step::before { display: none; }

  /* Footer */
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 28px;
  }
  .footer__brand { grid-column: 1 / -1; }
  .footer__about { max-width: 480px; }

  /* Legal pages */
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal__toc {
    position: static;
    order: -1;
  }
  .legal__toc ol {
    columns: 2;
    column-gap: 28px;
  }
  .legal__toc li { break-inside: avoid; }
}

/* ---------- <= 900px ---------- */
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .contact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .contact__grid .info-card { order: 2; }

  .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  /* Lighter background photo for the CTA band on narrow screens */
  .cta-band {
    background-image:
      radial-gradient(620px 380px at 82% 18%, rgba(132, 204, 22, 0.22), transparent 62%),
      linear-gradient(115deg, rgba(14, 46, 36, 0.97) 0%, rgba(7, 26, 20, 0.90) 58%, rgba(7, 26, 20, 0.70) 100%),
      url("../img/loading-dock-1000.jpg");
  }

  .stats { margin-top: -32px; }
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- <= 720px : phone ---------- */
@media (max-width: 720px) {
  :root { --gutter: 18px; }

  .action-bar { display: flex; }
  .to-top { bottom: 78px; right: 16px; }

  .topbar { display: none; }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }

  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }

  .hero { padding-block: 44px 60px; }
  .hero__cta { gap: 12px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__badge { display: none; }
  .hero__media .photo { max-width: 460px; }
  .hero__points { gap: 10px 18px; }

  .card { padding: 26px 22px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }

  .footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    /* clear the fixed action bar with the footer's own dark background */
    padding-bottom: calc(22px + 56px + env(safe-area-inset-bottom));
  }

  .legal__toc ol { columns: 1; }

  .accordion summary { padding: 18px 18px; font-size: 0.98rem; }
  .accordion__body { padding: 0 18px 20px; }

  .info-card { padding: 26px 22px; }
  .callout { flex-direction: column; gap: 14px; }
}

/* ---------- <= 520px ---------- */
@media (max-width: 520px) {
  .stats { margin-top: -26px; }
  .stats__grid { grid-template-columns: minmax(0, 1fr); }
  .stat { padding: 22px 18px; text-align: left; display: flex; align-items: baseline; gap: 14px; }
  .stat__value { font-size: 1.7rem; }
  .stat__label { margin-top: 0; }

  .btn { width: 100%; }
  .btn--inline { width: auto; }
  .hero__points li { font-size: 0.87rem; }

  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { width: 100%; }

  .action-bar a { font-size: 0.84rem; padding: 14px 6px; }
  .status-page__actions .btn { width: 100%; }
}

/* ---------- <= 400px ---------- */
@media (max-width: 400px) {
  .brand img { height: 32px; }
  .feature { flex-direction: column; gap: 14px; }
  .action-bar a span { display: none; }
  .action-bar a { gap: 0; }
  .action-bar a::after { content: attr(data-short); font-size: 0.84rem; }
}

/* ---------- Landscape phones: shorten hero ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-block: 36px 48px; }
  .mobile-nav { padding-top: calc(var(--header-h) + 12px); }
  .mobile-nav__link { padding: 11px 4px; font-size: 1.05rem; }
}

/* ---------- Large screens ---------- */
@media (min-width: 1480px) {
  :root { --container: 1280px; }
}

/* ---------- Print ---------- */
@media print {
  .topbar,
  .header,
  .mobile-nav,
  .action-bar,
  .to-top,
  .cta-band,
  .hero__media,
  .footer__legal,
  .socials { display: none !important; }

  body { color: #000; background: #fff; padding-bottom: 0; }
  .page-hero,
  .hero { background: #fff !important; color: #000; }
  .page-hero h1,
  .hero h1 { color: #000; }
  .legal { grid-template-columns: minmax(0, 1fr); padding-block: 0; }
  .legal__toc { display: none; }
  .legal__body { max-width: none; }
  a { color: #000; text-decoration: underline; }
  .section { padding-block: 18px; page-break-inside: avoid; }
}