/* ==========================================================================
   responsive.css — Breakpoints
   Moreno Home Conciergeries

   Estratégia: mobile-first. O ficheiro só contém ajustes ACIMA do mobile,
   exceto o bloco de ecrãs muito estreitos (320px) no fim.

   Referência de breakpoints
     xs   < 480px   telemóvel pequeno (iPhone SE, 320–479)
     sm  >= 480px   telemóvel grande
     md  >= 768px   tablet vertical
     lg  >= 1024px  tablet horizontal / notebook → sidebar substitui bottom-nav
     xl  >= 1280px  desktop
   ========================================================================== */

/* ---------- >= 480px — telemóvel grande ---------------------------------- */
@media (min-width: 480px) {
  .content { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .service-hero { margin-left: calc(var(--sp-5) * -1); margin-right: calc(var(--sp-5) * -1); }
  .action-bar { margin-left: calc(var(--sp-5) * -1); margin-right: calc(var(--sp-5) * -1); padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .brand-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- >= 768px — tablet ------------------------------------------- */
@media (min-width: 768px) {
  :root { --content-max: 900px; }

  .content {
    padding: var(--sp-8) var(--sp-6)
             calc(var(--bottomnav-h) + var(--safe-bottom) + var(--sp-10));
  }

  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
  .service-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .service-hero {
    margin: 0 0 var(--sp-6);
    border-radius: var(--r-lg);
    max-height: 300px;
  }

  .hero__body { padding: var(--sp-8) var(--sp-8); }
  .hero__title { font-size: var(--fs-2xl); }

  .field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .modal { align-items: center; padding: var(--sp-6); }
  .modal__panel { border-radius: var(--r-xl); max-height: 84dvh; }
  .modal__grabber { display: none; }

  .action-bar {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    background: none;
    position: static;
  }
  .action-bar .btn { flex: 0 1 260px; }
  .action-bar--full .btn { flex: 1 1 auto; }

  .brand-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }

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

/* ---------- >= 1024px — sidebar assume a navegação ----------------------- */
@media (min-width: 1024px) {
  :root { --content-max: 1120px; }

  .sidebar { display: flex; }
  .bottom-nav { display: none; }

  /* Sem bottom-nav, o espaço inferior deixa de ser necessário */
  .content { padding-bottom: var(--sp-12); }
  .action-bar { bottom: auto; }
  .composer { bottom: 0; }
  .toast-stack { left: auto; right: var(--sp-6); transform: none; bottom: var(--sp-6); }
  .offline-bar { bottom: var(--sp-6); }

  /* Em desktop a barra superior fica clara e discreta */
  .topbar {
    background: var(--surface);
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  .topbar__title { text-align: left; }
  .topbar .icon-btn:hover { background: var(--surface-2); }
  .topbar .brand { display: none; }
  .topbar__menu { display: none; }
  .topbar__title--desktop { display: block; }

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

  .split {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }
  .split__aside { position: sticky; top: calc(var(--topbar-h) + var(--sp-6)); }
}

/* ---------- >= 1280px — desktop amplo ------------------------------------ */
@media (min-width: 1280px) {
  :root { --content-max: 1240px; --sidebar-w: 280px; }
  .service-hero { max-height: 340px; }
}

/* ---------- < 480px — telemóveis estreitos (até 320px) ------------------- */
@media (max-width: 479px) {
  :root { --fs-2xl: 1.625rem; --fs-3xl: 2rem; }

  .content { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .service-hero { margin-left: calc(var(--sp-3) * -1); margin-right: calc(var(--sp-3) * -1); }
  .action-bar { margin-left: calc(var(--sp-3) * -1); margin-right: calc(var(--sp-3) * -1); padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .service-grid { gap: var(--sp-2); }
  .service-card__body { padding: var(--sp-3); }
  .bottom-nav__item { font-size: 9px; }
}

@media (max-width: 359px) {
  /* 320px: mantém tudo utilizável, sem cortes horizontais */
  .service-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .brand-strip { grid-template-columns: 1fr; }
  .btn { padding: 0 var(--sp-3); }
}

/* ---------- Ecrãs muito baixos (teclado aberto em landscape) ------------- */
@media (max-height: 460px) and (orientation: landscape) {
  .bottom-nav { position: static; }
  .content { padding-bottom: var(--sp-6); }
  .service-hero { max-height: 160px; }
}