/*
 * responsive.css — Quasi
 * Importar DESPRÉS de style.css
 * Breakpoints: tablet ≤ 768px · mòbil ≤ 480px
 */

/* ═══════════════════════════════════════
   TABLET  (≤ 768px)
═══════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV ── */
  .quasi-nav {
    padding: 0 16px;
    gap: 8px;
  }

  .nav-center {
    gap: 10px;
  }

  .mode-btn {
    font-size: 14px;
    padding: 4px 4px;
  }

  /* ── TAULER: 5 columnes → 3 ── */
  .tauler {
    gap: 16px;
    padding: 80px 16px 24px;
  }

  /* Amaga les columnes 4 i 5 (col3, col4) */
  #col3, #col4 {
    display: none;
  }

  /* ── CREAR POST: costat a costat → apilat ── */
  .crear-page {
    flex-direction: column;
    align-items: center;
    padding: 80px 16px 40px;
    gap: 16px;
  }

  .crear-bloc-esquerra,
  .crear-bloc-dreta {
    width: 100%;
    max-width: 600px;
  }

  /* ── IMATGE.PHP: costat a costat → apilat ── */
  .imatge-layout {
    flex-direction: column;
    height: auto;
  }

  .imatge-esquerra {
    width: 100%;
    height: auto;
    overflow-y: visible;
  }

  .imatge-dreta {
    width: 100%;
    height: auto;
    overflow-y: visible;
  }

  /* Relacionades: 3 columnes → 2 */
  .imatge-relacionades {
    padding: 16px 16px 24px;
    gap: 12px;
  }

  .imatge-relacionades .columna:last-child {
    display: none;
  }

  /* ── PERFIL: costat a costat → apilat ── */
  .perfil-page {
    flex-direction: column;
    padding: 80px 16px 40px;
    gap: 16px;
  }

  .perfil-esquerra {
    width: 100%;
  }

  .perfil-avatar,
  .perfil-avatar-placeholder {
    aspect-ratio: 3/2;
    max-height: 280px;
  }

  .perfil-dreta {
    width: 100%;
    min-height: auto;
  }

  .perfil-menu {
    padding: 16px 16px 24px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .perfil-menu-btn {
    font-size: 13px;
  }

  .perfil-seccio {
    padding: 0 16px 24px;
  }

  /* Perfil grid: 4 columnes → 3 */
  .perfil-grid .columna:last-child {
    display: none;
  }

  /* ── EDITAR PERFIL: costat a costat → apilat ── */
  .editar-page {
    flex-direction: column !important;
    align-items: center !important;
    padding: 80px 16px 40px !important;
    gap: 16px !important;
  }

  .editar-bloc-esquerra,
  .editar-bloc-dreta {
    width: 100% !important;
    max-width: 600px !important;
  }

  /* ── CERCA DROPDOWN ── */
  .cerca-dropdown {
    padding: 16px 16px 40px;
  }

  .cerca-categories {
    gap: 6px;
  }
}


/* ═══════════════════════════════════════
   MÒBIL  (≤ 480px)
═══════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── NAV ── */
  .quasi-nav {
    padding: 0 12px;
    gap: 4px;
  }

  /* Amaga el text del mode switcher i fa els botons més petits */
  .mode-divider {
    display: none;
  }

  .mode-btn {
    font-size: 11px;
    padding: 4px 2px;
    letter-spacing: -0.04em;
  }

  /* Amaga el botó de cerca a la nav per estalviar espai */
  #searchToggle {
    display: none;
  }

  .nav-left,
  .nav-right {
    gap: 8px;
  }

  /* ── TAULER: 3 columnes → 2 ── */
  .tauler {
    gap: 10px;
    padding: 72px 10px 20px;
  }

  /* Amaga la tercera columna (col2) a més de col3 i col4 */
  #col2, #col3, #col4 {
    display: none;
  }

  /* ── CREAR POST ── */
  .crear-page {
    padding: 72px 12px 32px;
  }

  .crear-bloc {
    padding: 24px 20px;
    gap: 20px;
  }

  /* ── IMATGE.PHP ── */
  .imatge-capçalera {
    padding: 16px 16px 12px;
  }

  .imatge-info {
    padding: 16px 16px;
  }

  .info-titol {
    font-size: 16px;
  }

  /* Relacionades: mantenim 2 columnes en mòbil */
  .imatge-relacionades {
    padding: 12px 12px 20px;
    gap: 10px;
  }

  .imatge-relacionades .columna:last-child {
    display: none;
  }

  .relacionades-titol {
    padding: 16px 12px 0;
  }

  /* ── PERFIL ── */
  .perfil-page {
    padding: 72px 12px 32px;
  }

  .perfil-esquerra {
    padding: 20px 16px;
    gap: 16px;
  }

  .perfil-nom {
    font-size: 22px;
  }

  .perfil-avatar,
  .perfil-avatar-placeholder {
    aspect-ratio: 1/1;
    max-height: 240px;
  }

  .perfil-stats {
    gap: 12px;
  }

  .perfil-stat-num {
    font-size: 16px;
  }

  .perfil-menu {
    padding: 12px 12px 20px;
    gap: 2px;
  }

  .perfil-menu-btn {
    font-size: 11px;
    padding: 4px 4px;
  }

  /* Perfil grid: 3 → 2 columnes */
  .perfil-grid {
    gap: 10px;
  }

  .perfil-grid .columna:nth-child(3),
  .perfil-grid .columna:last-child {
    display: none;
  }

  /* ── EDITAR PERFIL ── */
  .editar-bloc {
    padding: 24px 16px !important;
    gap: 20px !important;
  }

  /* ── AUTH (login / registre) ── */
  .auth-box {
    padding: 0 20px;
    gap: 24px;
  }

  /* ── CERCA DROPDOWN ── */
  .cerca-dropdown {
    padding: 12px 12px 32px;
    gap: 16px;
  }

  .cerca-input-fila input {
    font-size: 14px;
  }

  .cerca-categoria-btn {
    font-size: 10px;
    padding: 4px 8px;
  }

  /* ── GALERIA: canvas inalterada (és l'experiència principal) ── */
  /* Però sí adaptem el modal que apareix en clicar */
  .g-modal {
    width: 90vw !important;
  }

  .ig-post-modal {
    width: 90vw !important;
  }

  /* ── EDITOR GALERIA ── */
  .editor-toolbar {
    bottom: 16px;
    padding: 8px 10px;
    gap: 4px;
    width: calc(100% - 24px);
    justify-content: center;
  }

  .ed-btn {
    font-size: 10px;
    padding: 6px 8px;
  }

  .editor-hint {
    font-size: 9px;
    top: 70px;
    text-align: center;
    width: 90%;
  }
}


/* ═══════════════════════════════════════
   EDITOR GALERIA — tablet + mòbil
   (styles inline al PHP, calen !important)
═══════════════════════════════════════ */
@media (max-width: 768px) {

  /* La toolbar passa a ocupar tota l'amplada i es centra */
  .editor-toolbar {
    left: 12px;
    right: 12px;
    transform: none;
    bottom: 20px;
    width: calc(100% - 24px);
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .ed-btn {
    font-size: 10px;
    padding: 6px 10px;
  }

  .editor-hint {
    font-size: 9px;
    top: 68px;
    width: 90%;
    text-align: center;
  }
}