/* ================================================
   QuickPhoto Suite — Shared Mobile RWD
   For Tailwind-based tool pages & homepage ONLY.
   QuickPhoto.html has its own RWD in style.css.
   ================================================ */

/* ─── HEADER (Tailwind-based pages) ─── */
@media (max-width: 768px) {

  header.h-16,
  header[class*="h-16"] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    height: auto !important;
    min-height: 3.25rem;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  header>div:first-child p {
    display: none !important;
  }

  header>div:first-child h1 {
    font-size: 0.85rem !important;
  }

  /* Language switcher — compact */
  #qp-lang-switcher {
    gap: 1px !important;
    margin-right: 4px !important;
    padding-right: 6px !important;
  }

  #qp-lang-switcher button {
    padding: 2px 5px !important;
    font-size: 9px !important;
  }

  /* Nav icons area */
  header .border-l {
    padding-left: 0.5rem !important;
    gap: 0.25rem !important;
  }

  header .border-l a,
  header .border-l button {
    padding: 0.25rem !important;
  }
}

/* ─── MAIN LAYOUT (Tailwind grid-based pages) ─── */
@media (max-width: 768px) {
  main:not(.canvas-container) {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: calc(100vh - 4rem);
    overflow: visible !important;
    padding: 0.75rem !important;
    gap: 0.75rem !important;
  }

  main>aside,
  main>aside.col-span-4 {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  main>div,
  main>section,
  main>div.col-span-8 {
    height: auto !important;
    min-height: 50vh;
  }

  .glass-card {
    padding: 1rem !important;
  }
}

/* ─── SMALL PHONES (≤ 480px) ─── */
@media (max-width: 480px) {
  #qp-lang-switcher button {
    padding: 2px 3px !important;
    font-size: 8px !important;
  }

  main:not(.canvas-container) {
    padding: 0.5rem !important;
  }

  .glass-card {
    padding: 0.75rem !important;
    border-radius: 0.75rem !important;
  }
}

/* ─── TABLET PORTRAIT ─── */
@media (min-width: 769px) and (max-width: 1024px) {
  main:not(.canvas-container) {
    grid-template-columns: 1fr 2fr !important;
    gap: 1rem !important;
  }
}

/* ─── VIEW MODE BUTTONS (Vectorize) ─── */
@media (max-width: 768px) {
  #view-mode-buttons {
    flex-wrap: wrap;
  }

  #view-mode-buttons button {
    padding: 0.25rem 0.5rem !important;
    font-size: 9px !important;
  }

  #preview-container {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  #previewGrid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── TOOL MODAL (Tailwind pages) ─── */
@media (max-width: 768px) {
  #toolModal>div {
    max-height: 80vh;
    overflow-y: auto;
  }

  #toolModal .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
}

/* ─── HOMEPAGE (index.html) ─── */
@media (max-width: 768px) {
  .text-5xl {
    font-size: 1.75rem !important;
  }

  .text-xl {
    font-size: 0.9rem !important;
  }

  .lg\:flex-row {
    flex-direction: column !important;
  }

  .lg\:w-1\/4 {
    width: 100% !important;
  }
}