/* ═══════════════════════════════════════════════════════════════════════
   QwikGlam Phase E1 — TABLET BAND (769–1180px)
   File: wp-content/mu-plugins/qg-web-assets/qg-tablet.css
   Loaded last, on every page, by qg-phase-e-tablet-loader.php.

   WHY THIS FILE EXISTS
   The audit measured the tablet band directly: qg-mobile.css carries 1 rule
   in 769–1024, qg-global.css carries 0, luxe-home.css carries 2. Everything
   else jumps from a phone stack (≤768) to a desktop grid (≥1101). An iPad in
   portrait (768–834) lands on the phone layout stretched to 800px; in
   landscape (1024–1180) it lands on the desktop layout squeezed. Neither is
   wrong enough to break — which is exactly why it never got fixed.

   RULES OF THIS FILE
   1. Every selector below was verified to exist in the deployed CSS, and its
      current tablet-band value was read before being overridden. Line
      references are to the file that owns the rule today.
   2. Bounded to (min-width: 769px) — mobile-master owns ≤768 and must never
      be touched from here.
   3. !important is used ONLY where the rule being overridden is itself
      !important (artist-dashboard-premium.css uses it throughout). Everywhere
      else, load order carries the specificity.
   4. No colour, type-scale or component restyling. Layout only. This file
      changes how much fits on a row, never what anything looks like.

   REVERT: delete this file and its loader.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. TABLET PORTRAIT + LANDSCAPE  (769–1180)
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1180px) {

  /* ── Services: transformation gallery ──────────────────────────────
     qg-services.css:770 sets repeat(3,1fr); qg-services-additions.css:430
     only widens max-width and gap. There is NO tablet rule, so three 3:4
     cards share ~1000px minus 2.5rem gaps → ~300px each, and the
     before/after clip-path reveal becomes unreadable. Two per row restores
     a usable card width.
     (Note: .qg-services-grid already has its own 769–1100 rule at
     qg-services.css:415 — deliberately NOT duplicated here.) */
  .qg-trans-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px !important;   /* additions.css:431 sets 1240px !important */
    gap: 2rem !important;          /* additions.css:432 sets 2.5rem !important */
  }

  /* ── Booking flow: the single-column stretch ───────────────────────
     qg-bookings.css:1397 collapses .qgbe-cart-grid and .qgbe-artist-grid to
     1fr below 1100px, and .qgbe-container (line 179) is max-width 1280px.
     On an iPad the result is a full-bleed 1000px+ single column: summary
     rows with ~140 characters between label and value, which reads as a
     spreadsheet, not a checkout. Constraining the column is the whole fix. */
  .qgbe-container,
  .qgbe-container-wide {
    max-width: 860px;
  }
  .qgbe-cart-grid,
  .qgbe-artist-grid {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
  /* The summary card goes static at ≤1100 (line 1400). At tablet widths there
     IS room to keep it sticky, which is worth real conversion on a long cart. */
  .qgbe-summary-card {
    position: sticky;
    top: 88px;
  }
  .qgbe-gmap {
    height: 300px;   /* 360px at ≤1100 crowds the form below on a 1024 viewport */
  }

  /* ── Booking step chips ────────────────────────────────────────────
     .qgbe-bs-grid is repeat(4,1fr) at desktop (qg-bookings.css:3107) and
     repeat(2,1fr) at ≤640/≤480. Four fits comfortably at tablet; the ≤640
     rule never reaches here. Left intentionally alone — documented so the
     next reader doesn't "fix" a rule that is already correct. */
}

/* ─────────────────────────────────────────────────────────────────────
   2. ARTIST DASHBOARD  (769–1180)
   Every rule in artist-dashboard-premium.css is !important, so overrides
   here must be too. Its responsive rules stop at ≤900 and ≤560/≤480,
   leaving 901–1180 (iPad landscape, the width an artist actually works at
   between appointments) on the full desktop layout.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) and (max-width: 1180px) {

  /* Five KPI cards in a row (premium.css:401-402) at ~950px gives each ~180px,
     and the card labels wrap to three lines. Three per row reads cleanly. */
  #tab-overview .kpi-grid-secondary {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  #tab-overview .kpi-grid-secondary .kpi-card-sm:nth-child(3) {
    border-right: none !important;
  }

  /* Portfolio media grid is locked to 2 columns (premium.css:245) at every
     width above 900. A landscape iPad fits 3 comfortably — more work visible
     per screen is the entire point of the portfolio tab. */
  .media-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   3. TABLET PORTRAIT ONLY  (769–900)
   The band that currently inherits the phone layout stretched wide.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 900px) {

  /* Prose and forms: an unconstrained measure at 850px is ~120 characters.
     65–75 is the readable range; these containers carry the long-form
     content (policies, profile forms, confirmation copy). */
  .qgbe-container-narrow {
    max-width: 680px;
  }

  /* Home: auto-fill minmax(320px) grids (luxe-home.css:593, 1020) resolve to
     exactly 2 columns here, which is correct and left alone. The 260px grid
     (line 896) resolves to 3 and gets cramped on portrait; hold it to 2. */
  .qg-why-grid,
  .qg-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─────────────────────────────────────────────────────────────────────
   4. POINTER-AWARE HOVER  (all tablet widths)
   Tablets match desktop width queries but have no hover. Cards that only
   reveal their price or CTA on :hover are unreachable by touch. Rather than
   restyle each component, disable the transform-on-hover so the resting
   state is the complete state.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1180px) and (hover: none) {
  .qg-ultra-card:hover,
  .qg-trans-card:hover {
    transform: none;
  }
  /* Reveal-on-hover overlays: show them at rest on touch devices. */
  .qg-ultra-card::after,
  .qg-trans-card::before {
    opacity: 1;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   5. SAFE-AREA + SCROLL
   iPadOS Safari applies safe-area insets in landscape on newer hardware.
   header.php:77 already sets viewport-fit=cover, so the insets resolve;
   nothing below assumes a value, it only respects one if present.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1180px) {
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}