/*
 * Localsewa Customer Tablet = Mobile Interaction Model — v32.8
 *
 * Why this layer exists:
 * - The original Customer UI was designed primarily for phones.
 * - Large tablets such as iPad Pro can report >1024 CSS px and therefore
 *   accidentally activate laptop/desktop Tailwind breakpoints.
 * - Tablet devices should preserve the mobile interaction model while using
 *   the extra width for comfortable gutters and larger readable cards.
 *
 * Tablet mode is entered when either:
 *   A) the viewport is 768–1023.98px, or
 *   B) it is a touch-first/coarse-pointer device up to 1439.98px.
 * This lets 1032px portrait and ~1366/1376px landscape tablets remain tablet UI,
 * while mouse/trackpad laptops can still use the laptop layout from 1024px.
 */

@media (min-width: 768px) and (max-width: 1023.98px),
       (min-width: 768px) and (max-width: 1439.98px) and (hover: none) and (pointer: coarse) {
  /* Tablet shell: mobile-style composition with tablet-sized breathing room. */
  #root:has(.ls-public-header) {
    --ls-page-gutter: 24px;
    --ls-grid-gap: 16px;
    --ls-section-gap: 32px;
    --ls-dialog-gutter: 24px;
  }

  /* ---------- Header / navigation ---------- */
  #root:has(.ls-public-header) .ls-public-main-nav,
  #root:has(.ls-public-header) .ls-public-desktop-actions {
    display: none !important;
  }

  #root:has(.ls-public-header) .ls-public-menu-button {
    display: flex !important;
  }

  #root:has(.ls-public-header) .ls-public-notifications {
    margin-left: auto !important;
  }

  #root:has(.ls-public-header) .ls-public-header-inner {
    width: 100%;
    max-width: 56rem;
    margin-inline: auto;
    padding-inline: max(var(--ls-page-gutter), var(--ls-safe-left));
  }

  /* Keep customer content readable instead of stretching a phone composition
     across the full tablet canvas. */
  #root:has(.ls-public-header) .max-w-7xl,
  #root:has(.ls-public-header) .max-w-6xl {
    max-width: 56rem !important;
  }

  /* ---------- Home ---------- */
  #root:has(.ls-public-header) .ls-home-hero-inner,
  #root:has(.ls-public-header) .ls-home-popular > div,
  #root:has(.ls-public-header) .ls-home-emergency > div,
  #root:has(.ls-public-header) .ls-home-nearby > div {
    max-width: 56rem;
    margin-inline: auto;
  }

  #root:has(.ls-public-header) .ls-home-hero-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  /* Tablet follows mobile interaction model: hide the desktop hero directory panel. */
  #root:has(.ls-public-header) .ls-home-hero-layout > div:last-child {
    display: none !important;
  }

  #root:has(.ls-public-header) .ls-home-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* Nearby providers stay stacked like mobile, with larger readable cards. */
  #root:has(.ls-public-header) .grid:has(> .ls-provider-card) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #root:has(.ls-public-header) .ls-provider-card {
    width: 100%;
  }

  /* ---------- General Customer page layout resets ----------
     Neutralize desktop-responsive utility columns that activate at md/lg/xl.
     The base/mobile declarations then remain the dominant composition. */
  #root:has(.ls-public-header) .md\:grid-cols-2,
  #root:has(.ls-public-header) .md\:grid-cols-3,
  #root:has(.ls-public-header) .md\:grid-cols-4,
  #root:has(.ls-public-header) .lg\:grid-cols-2,
  #root:has(.ls-public-header) .lg\:grid-cols-3,
  #root:has(.ls-public-header) .lg\:grid-cols-4,
  #root:has(.ls-public-header) .lg\:grid-cols-5,
  #root:has(.ls-public-header) .xl\:grid-cols-2,
  #root:has(.ls-public-header) .xl\:grid-cols-3,
  #root:has(.ls-public-header) .xl\:grid-cols-4,
  #root:has(.ls-public-header) .xl\:grid-cols-5,
  #root:has(.ls-public-header) [class*="lg:grid-cols-["],
  #root:has(.ls-public-header) [class*="xl:grid-cols-["] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #root:has(.ls-public-header) .md\:flex-row {
    flex-direction: column !important;
  }

  /* Service directory is a special mobile-like grid: two comfortable columns
     instead of 3/4 compressed desktop columns on tablets. */
  #root:has(.ls-public-header) [class~="sm:grid-cols-3"][class~="lg:grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Provider search/list skeletons and results stay single-column on tablet. */
  #root:has(.ls-public-header) [class~="md:grid-cols-2"][class~="xl:grid-cols-3"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Desktop/sidebar-specific positioning must not activate on touch tablets. */
  #root:has(.ls-public-header) .lg\:sticky {
    position: static !important;
    top: auto !important;
  }

  #root:has(.ls-public-header) [class~="lg:pl-[292px]"] {
    padding-left: 0 !important;
  }

  /* Desktop footer remains laptop/desktop-only. This selector also protects
     a future footer implementation from appearing on touch tablets. */
  #root:has(.ls-public-header) footer,
  #root:has(.ls-public-header) .ls-desktop-footer {
    display: none !important;
  }

  /* ---------- Sticky search ---------- */
  #root:has(.ls-public-header) .ls-customer-sticky-search {
    padding-inline: var(--ls-page-gutter) !important;
  }

  #root:has(.ls-public-header) .ls-customer-sticky-search > div {
    max-width: 56rem !important;
  }

  /* Avoid huge empty-looking cards/surfaces caused by desktop min-heights. */
  #root:has(.ls-public-header) main,
  #root:has(.ls-public-header) section,
  #root:has(.ls-public-header) article {
    min-width: 0;
  }
}