/* ============================================================
   Responsive refinements.
   Base styles are mobile (320px+); these are progressive add-ons.
   ============================================================ */

/* ---- Very small phones (iPhone SE and below) ---- */
@media (max-width: 359px) {
  :root { --s-4: 14px; --fs-base: .875rem; }
  .stat__value { font-size: var(--fs-lg); }
  .stat--hero .stat__value { font-size: var(--fs-2xl); }
  .bottom-nav__item { font-size: 9px; }
  .btn { padding-inline: var(--s-4); }
}

/* ---- Large phones ---- */
@media (min-width: 430px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Tablet ---- */
@media (min-width: 768px) {
  /* Dashboard: all four summary cards in one row */
  .summary-grid { grid-template-columns: repeat(4, 1fr); }
  .summary-grid > .stat--wide { grid-column: auto; }
  .summary-grid > .stat--hero { grid-column: span 2; }

  .grid-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }

  .group-hero { padding: var(--s-6); }
  .group-hero__figures { grid-template-columns: repeat(4, 1fr); }

  .hero__cta { grid-auto-flow: column; justify-content: start; }
  .hero__note { text-align: left; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .stat-row { max-width: 460px; }
}

/* ---- Desktop ---- */
@media (min-width: 1024px) {
  .summary-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
  .summary-grid > .stat--hero { grid-column: auto; }
  .stat { padding: var(--s-5); }
  .stat__value { font-size: var(--fs-2xl); }

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

  /* Dashboard two-column: groups beside the activity rail */
  .dash-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: var(--s-6); align-items: start; }
  /* The left rail is narrower than a full page, so cap it at two columns. */
  .dash-split .grid-cards { grid-template-columns: repeat(2, 1fr); }

  .landing__nav, .landing__main { padding-inline: var(--s-7); }
  .landing__main {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--s-8);
    padding-block: var(--s-9);
  }
  .landing__main .feature-grid { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .mock { width: 320px; }
}

/* ---- Large desktop ---- */
@media (min-width: 1440px) {
  .grid-cards { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
}

/* ---- Landscape phones: shorter chrome, taller sheets ---- */
@media (max-height: 480px) and (orientation: landscape) {
  .sheet { max-height: 96dvh; }
  .bottom-nav { height: calc(56px + var(--safe-b)); }
}

/* ---- Print ---- */
@media print {
  .topbar, .bottom-nav, .sidebar, .fab, .modal-scrim { display: none !important; }
  .app-main { padding: 0; }
}