/* ════════════════════════════════════════════════════════════════════
   TD Service — Site-wide Mobile + Tablet polish (additive overlay).
   Only kicks in below 1024px. Doesn't override desktop layouts.
   Loaded site-wide via <link rel="stylesheet" href="/mobile-tablet.css">.
   ════════════════════════════════════════════════════════════════════ */

/* ── TOUCH: enforce 44px minimum tap target everywhere ── */
@media (hover:none) and (pointer:coarse) {
  button, .btn, .btn-gold, .ad-card, a.stat-card, a.pcard,
  input[type=button], input[type=submit], select {
    min-height: 44px;
  }
  /* form fields ≥16px so iOS doesn't zoom on focus */
  input[type=text], input[type=email], input[type=tel],
  input[type=number], input[type=password], input[type=date],
  input[type=search], textarea, select {
    font-size: 16px !important;
  }
}

/* ════ TABLET + PHONE (≤1024px) ════ */
@media (max-width: 1024px) {
  /* Generic dash/container fluid widths */
  .dash, .shell, .container, .wrap, main, .main {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Wide tables → horizontal scroll instead of breaking layout */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }
  /* But preserve admin tables that are already mobile-styled */
  .table-stack, .table-stack table { display: table; white-space: normal; }

  /* Stats grids collapse */
  .stats-row { grid-template-columns: repeat(2,1fr) !important; }

  /* Long horizontal flexes wrap */
  nav, .nav, .header-bar, .topbar {
    flex-wrap: wrap !important;
  }

  /* Booking/inventory rows that use rigid grid columns */
  .bk-row, .inv-row {
    grid-template-columns: 1fr !important;
    gap: .35rem !important;
  }
  .bk-row .bk-cell, .inv-row > * {
    border-bottom: 1px dashed rgba(201,168,76,.1);
    padding-bottom: .35rem;
  }
  .bk-row .bk-cell:last-child, .inv-row > *:last-child {
    border-bottom: none;
  }

  /* Two-column admin layouts → stack */
  .two-col, .split, .row-2col {
    grid-template-columns: 1fr !important;
  }

  /* Admin home tile grids stay responsive */
  .ad-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  }
}

/* ════ PHONE-ONLY (≤640px) ════ */
@media (max-width: 640px) {
  /* Nav links wrap and shrink */
  nav, .nav { padding: .5rem 1rem !important; }
  nav .nav-right, .nav-right { gap: .4rem !important; }
  nav .nav-badge { font-size: .65rem !important; padding: .2rem .5rem !important; }

  /* Headings scale down */
  h1 { font-size: 1.55rem !important; }
  h2 { font-size: 1.2rem !important; }

  /* Forms full width */
  form input, form select, form textarea {
    width: 100% !important;
  }
  /* Buttons stack rather than overflow */
  .btn-row, .btn-group {
    flex-wrap: wrap !important;
    gap: .5rem !important;
  }

  /* Stats single-column for breathing room on tiny screens */
  .stats-row { grid-template-columns: 1fr !important; }

  /* Admin pulse/dashboard grids */
  .ad-grid { grid-template-columns: 1fr !important; }
  .ad-card { padding: 1rem !important; }

  /* Modals/sheets fit screen */
  .modal, .sheet, .drawer {
    max-width: 100vw !important;
    width: 100% !important;
    border-radius: 0 !important;
  }

  /* Hide bulky desktop-only chrome on phones, but only when class is set */
  .desktop-only { display: none !important; }
}

/* ════ TINY PHONE (≤380px) ════ */
@media (max-width: 380px) {
  body { font-size: 14px; }
  h1 { font-size: 1.35rem !important; }
  .ad-card-title { font-size: .95rem !important; }
  .ad-card-desc { font-size: .72rem !important; }
}

/* ════ Make all media respect their container ════ */
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* ════ Smooth scroll for in-page anchors ════ */
html { scroll-behavior: smooth; }

/* ════ Coming-soon splash: hide the countdown timer site-wide.
       The "Welcome" card stays — just no DAYS / HOURS / MINS / SECS row. ════ */
.cs-timer { display: none !important; }