/* ==========================================================================
   Fikoraa — responsive adjustments (base styles are fluid; these handle
   structural changes at tablet and phone widths)
   ========================================================================== */

@media (max-width: 1100px) {
  .main-nav ul { gap: var(--sp-4); }
  .header-actions .lang-switch { display: none; }
  .mobile-menu .lang-switch { display: inline-flex; }
}

@media (max-width: 1024px) {
  .menu-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; inset: calc(72px + env(safe-area-inset-top, 0px)) 0 auto 0; z-index: 49;
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
    flex-direction: column; align-items: stretch; gap: var(--sp-4);
    padding: var(--sp-4) var(--gutter) var(--sp-5); max-height: calc(100vh - 72px); overflow-y: auto;
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav ul a { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-base); }
  .main-nav .mobile-menu { display: grid; gap: var(--sp-3); }
  .header-actions .hide-mobile { display: none; }

  .app-layout { grid-template-columns: minmax(0, 1fr); }
  .app-sidebar {
    position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line);
    padding: var(--sp-3) var(--gutter); gap: var(--sp-3);
  }
  .app-sidebar .ws-label, .app-sidebar .side-foot, .app-sidebar .wedding-chip { display: none; }
  .side-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: var(--sp-2); padding-bottom: 4px; }
  .side-nav a { white-space: nowrap; }

  .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; }
  .editor-layout { grid-template-columns: minmax(0, 1fr); }
  .editor-panel { position: static; max-height: none; overflow: visible; }
  .editor-panel .tabs { position: static; margin: 0 0 var(--sp-2); padding: 0; }
  .admin-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-tabs { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
}

@media (min-width: 1025px) {
  .main-nav .mobile-menu { display: none; }
}

@media (max-width: 640px) {
  .site-footer .brand-col { grid-column: auto; }
  .header-actions .btn { padding: 0 1rem; }
  .bar-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bar-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .countdown b { font-size: 2rem; }
  .countdown div { min-width: 46px; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92vh; }
  .hide-sm { display: none !important; }
  .table-stack thead { display: none; }
  .table-stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.75rem; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line); }
  .table-stack td { border: 0; padding: 0.15rem 0; }
  .table-stack td[data-label]::before { content: attr(data-label); display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
  .table-stack td.full { grid-column: 1 / -1; }
  .table-stack td.num { text-align: left; }
}