/* ============================================================================
   Castle Med Spa - Shared responsive refinements
   ----------------------------------------------------------------------------
   Loaded LAST in every page <head>, so it layers on top of each page's inline
   <style> block without touching it.

   Rules live inside media queries only: the desktop layout is never altered.
   This file adjusts spacing, type scale and touch targets only - no content,
   no colours, no component restructuring.

   Breakpoints
     <= 1024px   landscape tablet / small laptop
     <=  900px   portrait tablet (iPad)
     <=  768px   large phone / small tablet
     <=  600px   phone
     <=  380px   compact phone (iPhone SE / mini)
   ========================================================================= */


/* ==========================================================================
   1. Overflow safety
   Grid and flex children default to min-width:auto, so a wide child (a map
   iframe, a long e-mail address) pushes the whole page sideways. This is what
   caused the horizontal scroll on contact.html.
   ========================================================================== */
@media (max-width: 1024px) {
  .contact-wrapper > *,
  .about-inner > *,
  .footer-grid > *,
  .services-grid > *,
  .pricing-grid > *,
  .review-grid > *,
  .form-grid > * {
    min-width: 0;
  }

  /* Long unbroken strings (e-mails, URLs) must wrap rather than widen the box */
  .info-content p,
  .footer-contact-item,
  .review-text,
  .member-meta {
    overflow-wrap: anywhere;
  }
}


/* ==========================================================================
   2. Type scale
   The clamp() minimums were tuned for desktop (2.5-2.6rem = ~41px), which is
   oversized on a 375px screen. Lower the floor only; the desktop maximum in
   each page's own clamp() still wins above these breakpoints.
   ========================================================================== */
@media (max-width: 768px) {
  .hero-title    { font-size: clamp(2rem, 7vw, 2.75rem); line-height: 1.18; }
  .section-title { font-size: clamp(1.65rem, 6vw, 2.2rem); line-height: 1.25; }
  .consult-cta h2 { font-size: clamp(1.5rem, 5.5vw, 2rem); line-height: 1.3; }
  .hero-body     { font-size: 1rem; line-height: 1.7; }
  .form-title    { font-size: 1.35rem; }
}

@media (max-width: 380px) {
  .hero-title    { font-size: 1.75rem; }
  .section-title { font-size: 1.45rem; }
  .hero-body     { font-size: 0.95rem; }
}


/* ==========================================================================
   3. Panel and card padding
   48px of horizontal padding leaves only ~280px of usable width on a phone.
   ========================================================================== */
@media (max-width: 900px) {
  .contact-info,
  .contact-form-panel {
    padding: 30px 22px;
  }
}

@media (max-width: 600px) {
  .contact-info,
  .contact-form-panel {
    padding: 24px 18px;
    border-radius: 16px;
  }
  .info-block  { gap: 12px; margin-bottom: 18px; }
  .info-icon   { width: 42px; height: 42px; }
  .info-icon svg { width: 18px; height: 18px; }
  .map-container { height: 220px; margin-top: 26px; }

  .review-card,
  .about-stat-card {
    padding: 22px 18px;
  }

  /* The About stat tiles sit in a 2-column grid inside a 48px-padded panel.
     On a narrow phone the Playfair numerals cannot shrink far enough, which
     pushed the page ~23px wide at 320px. Tighten the panel and the numerals. */
  .about-visual-bg   { padding: 22px; gap: 12px; }
  .about-stat-card   { padding: 16px 10px; }
  .about-stat-num    { font-size: 1.7rem; }
  .about-stat-lbl    { font-size: 0.72rem; }
}

@media (max-width: 380px) {
  .about-visual-bg { padding: 16px; gap: 10px; }
  .about-stat-num  { font-size: 1.45rem; }
  .about-stat-lbl  { font-size: 0.68rem; line-height: 1.35; }
}


/* ==========================================================================
   4. Touch targets
   The design system asks for comfortable hit areas; several footer and inline
   links render at ~17px tall. Grow the tappable box without moving the text.
   ========================================================================== */
@media (max-width: 900px) {
  .footer-links a,
  .footer-bottom a,
  .footer-contact-item a {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
    line-height: 1.4;
  }

  .footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    align-items: center;
  }

  .btn,
  .nav-cta,
  .mobile-nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ==========================================================================
   5. Forms - stop iOS auto-zoom (needs >= 16px) and give inputs room
   ========================================================================== */
@media (max-width: 900px) {
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
    min-height: 46px;
  }

  textarea,
  textarea.form-control {
    min-height: 120px;
  }
}


/* ==========================================================================
   6. Booking time-slot grid - keep slots thumb-sized and evenly packed
   ========================================================================== */
@media (max-width: 600px) {
  .time-slot-picker,
  .slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
  }
  .time-slot-btn,
  .slot-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 6px;
  }
}


/* ==========================================================================
   7. Hero carousel - arrows sit clear of the text on small screens
   ========================================================================== */
@media (max-width: 600px) {
  .carousel-arrow      { width: 38px; height: 38px; }
  .carousel-arrow.prev { left: 8px; }
  .carousel-arrow.next { right: 8px; }
  .hero-right          { min-height: 260px; }
  .hero-slide-placeholder { padding: 26px 54px; }
}


/* ==========================================================================
   8. Admin back office
   Tables are the weak point: header.php pins them to min-width:600px, which
   overflows a phone. Narrow them, tighten the cells, and make the scroll
   container behave properly with momentum scrolling.
   ========================================================================== */
@media (max-width: 900px) {
  .main-content { padding: 18px 14px; }

  .card,
  .panel,
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Some admin tables sit in a bare <div> with no .card wrapper (the dashboard
     "Today's Schedule" / "Pending" tables). Without this the whole page scrolls
     sideways and the topbar scrolls away with it. :has() lets the immediate
     wrapper become the scroll container without touching the markup. */
  .main-content div:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Keep the page itself locked to the viewport so only the table pans. */
  .main-content {
    overflow-x: hidden;
  }

  .card table,
  .panel table,
  table.quick-table,
  table.data-table {
    min-width: 540px;
    font-size: 0.82rem;
  }

  .card th, .card td,
  .panel th, .panel td,
  table.quick-table th, table.quick-table td {
    padding: 10px 10px;
    white-space: nowrap;
  }

  /* Stat tiles: 4 across is unreadable on a tablet, 2 is comfortable */
  .stats-row,
  .dash-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Filter bars wrap instead of squeezing */
  .toolbar,
  .filters {
    flex-wrap: wrap;
    gap: 10px;
  }
}

@media (max-width: 600px) {
  .main-content { padding: 14px 12px; }

  .stats-row,
  .dash-grid {
    grid-template-columns: 1fr;
  }

  /* Modals use the full screen rather than a cramped centred box */
  .modal-box,
  .modal-content {
    max-width: calc(100vw - 20px);
    margin: 10px;
    padding: 20px 16px;
    max-height: 88vh;
    overflow-y: auto;
  }

  .action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
}


/* ==========================================================================
   9. Member card - the section grids collapse to one column on a phone
   ========================================================================== */
@media (max-width: 768px) {
  .form-grid-2,
  .modal-grid,
  .grid2,
  .rv-meta {
    grid-template-columns: 1fr;
  }
  .form-group.span-2 { grid-column: 1; }

  .member-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .member-meta {
    flex-wrap: wrap;
    gap: 8px 14px;
  }
}


/* ==========================================================================
   10. Session console - the two-column start form stacks below tablet
   ========================================================================== */
@media (max-width: 768px) {
  .start-grid { grid-template-columns: 1fr; gap: 0; }
  .sess-row {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: left;
  }
  .sess-row > div:last-child { text-align: left; }
}


/* ==========================================================================
   11. Signing kiosk (tablet/kiosk.php, tablet/sign.php)
   Built iPad-first with no breakpoints of its own. These keep it comfortable
   when a client signs on a phone instead.
   ========================================================================== */
@media (max-width: 700px) {
  .wrap        { padding: 6px 14px 150px; }
  .card-h      { padding: 16px 18px; }
  .card-h h2   { font-size: 1.12rem; line-height: 1.35; }
  .card-b      { padding: 20px 16px; }
  .doc         { font-size: 0.95rem; line-height: 1.75; }
  .doc h2      { font-size: 1.15rem; }
  .doc h3      { font-size: 1rem; }

  .pdots       { gap: 5px; padding: 14px 10px; }
  .pdot        { min-width: 44px; }
  .pdot .c     { width: 34px; height: 34px; font-size: 0.78rem; }
  .pdot .l     { font-size: 0.56rem; }

  .fgroup      { padding: 14px 14px; }
  .opt         { padding: 10px 13px; font-size: 0.9rem; }

  .pr-choice   { flex-direction: column; gap: 10px; }
  .pr-btn      { padding: 16px; }

  .agree       { padding: 15px 16px; gap: 12px; }
  .agree .t    { font-size: 0.9rem; }

  #sigCanvas   { height: 190px; }
  .footer      { padding: 12px 14px; }
  .btn-next    { min-height: 52px; font-size: 1rem; }

  /* sign.php: initials column sits under the section text */
  .initials-col { width: 100%; }
}


/* ==========================================================================
   12. Accessibility - honour the OS "reduce motion" setting
   (required by design-system/castle-med-spa/MASTER.md)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
