/* =====================================================================
   ROJ Cafe & Bar — Comprehensive Responsive Layer
   Mobile (≤480) · Tablet (≤768) · Wide tablet (≤1024) · Touch · Print · A11y
   ===================================================================== */

/* === Wide tablet (≤1024px) === */
@media (max-width: 1024px) {
  .container { padding-inline: 16px; }
  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  .hero__title { font-size: clamp(2rem, 7vw, 3.4rem); }
  .modal-card { max-width: 92vw; }
  .split-row { gap: var(--s-5, 24px); }
}

/* === Tablet/Phone (≤768px) === */
@media (max-width: 768px) {
  body { font-size: 0.95rem; }
  .container { padding-inline: 14px; }
  .app-header__inner { flex-wrap: wrap; gap: 8px; padding: 8px 0; }
  .brand__tag { display: none; }
  .nav-actions { gap: 4px; }
  .icon-btn { width: 38px; height: 38px; }
  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .menu-card { padding: 12px; }
  .menu-card__title { font-size: 0.92rem; }
  .menu-card__price { font-size: 1.05rem; }
  .hero { padding: 36px 14px 20px; }
  .hero__title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .cat-strip { gap: 6px; padding: 8px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cat-strip__item { padding: 8px 12px; font-size: 0.78rem; flex-shrink: 0; }
  .drawer { width: 100vw; max-width: 100vw; }
  .modal-card { padding: 18px; max-height: 90vh; overflow-y: auto; }
  .footer__cols, .split-row { grid-template-columns: 1fr; gap: 18px; }
  table { font-size: 0.86rem; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Prevent iOS zoom on focus */
  input, select, textarea, button { font-size: 16px; }
  /* Form fields full width */
  .form-grid { grid-template-columns: 1fr !important; }
  /* Page hero shrink */
  .page-hero { padding: clamp(60px, 12vw, 90px) 14px clamp(40px, 8vw, 60px); }
}

/* === Phone (≤480px) === */
@media (max-width: 480px) {
  .container { padding-inline: 12px; }
  .brand__logo { width: 96px; height: auto; }
  .hero__sun { width: clamp(80px, 24vw, 140px); height: clamp(80px, 24vw, 140px); }
  .hero { padding: 28px 12px 16px; }
  .hero__title { font-size: clamp(1.6rem, 9vw, 2.2rem); line-height: 1.05; }
  .hero__cta { flex-direction: column; gap: 8px; width: 100%; }
  .hero__cta .btn { width: 100%; padding: 14px 20px; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .menu-card { padding: 10px; border-radius: 12px; }
  .menu-card__title { font-size: 0.84rem; line-height: 1.2; }
  .menu-card__price { font-size: 0.95rem; }
  .menu-card__desc { display: none; }
  .filter-row { flex-wrap: wrap; gap: 6px; }
  .filter-row__chip { font-size: 0.74rem; padding: 6px 10px; }
  .modal-card { padding: 14px; border-radius: 16px 16px 0 0; max-width: 100vw; width: 100vw; max-height: 95vh; }
  .modal-overlay { align-items: flex-end; }
  .footer { padding: 20px 12px; font-size: 0.8rem; }
  .ar-button, .install-banner { font-size: 0.86rem; padding: 10px 14px; }
  .page-hero h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .page-section h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
}

/* === Landscape phones === */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: 14px; min-height: auto; }
  .hero__sun { width: 60px; height: 60px; }
  .hero__title { font-size: 1.4rem; }
  .modal-card { max-height: 86vh; }
}

/* === Touch optimization (no hover, coarse pointer) === */
@media (hover: none) and (pointer: coarse) {
  /* Apple HIG 44×44 minimum touch target */
  .icon-btn, .lang-current, .cat-strip__item, .nav-links a, .menu-card,
  button:not(.btn-sm), .filter-row__chip { min-height: 44px; }
  .icon-btn, .lang-current { min-width: 44px; }
  .menu-card:hover { transform: none; }
  .lang-menu button { padding: 12px 16px; }
}

/* === Reduced motion (a11y) === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === High contrast (a11y) === */
@media (prefers-contrast: more) {
  :root { --roj-cream-2: #f8efde; --roj-line-strong: rgba(201,162,90,0.6); }
  .menu-card { border-width: 1px; }
}

/* === Print === */
@media print {
  .app-header, .footer, .install-banner, .ar-button, .drawer, .modal-overlay,
  .lang-switcher, .filter-row, #cookie-banner, .pwa-install { display: none !important; }
  body { background: white; color: black; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); page-break-inside: avoid; }
  .menu-card { border: 1px solid #ccc; break-inside: avoid; box-shadow: none; background: white; color: black; }
  a { text-decoration: underline; color: inherit; }
}

/* === Admin: tablet and below === */
@media (max-width: 980px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-main { padding: 12px; }
  .sidebar { transform: translateX(-100%); transition: transform 240ms; position: fixed; z-index: 100; height: 100vh; }
  .sidebar.open { transform: translateX(0); }
  .hamburger { display: grid; }
  .topbar { flex-wrap: wrap; gap: 6px; }
  .topbar__search { flex: 1 1 100%; order: 99; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .form-grid { grid-template-columns: 1fr !important; }
}

/* === Admin: phone === */
@media (max-width: 540px) {
  .admin-main { padding: 8px; }
  .topbar__profile div { display: none; }
  .topbar__action { width: 36px; height: 36px; }
  .panel { padding: 10px 12px; }
  .panel__title { font-size: 1rem; }
  .row-actions { flex-wrap: wrap; gap: 4px; }
  .row-actions button { padding: 4px 8px; font-size: 0.74rem; }
  table th, table td { padding: 8px 6px; font-size: 0.8rem; }
}

/* === Wide screens (≥1440px) optimization === */
@media (min-width: 1440px) {
  .container { max-width: 1320px; }
  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
}

/* === Ultra-wide (≥1920px) === */
@media (min-width: 1920px) {
  .container { max-width: 1600px; }
  body { font-size: 1.05rem; }
}