/* Public-site phone refinements. Booking/admin have their own scoped rules. */
@media (max-width: 767px) {
  .section-shell,
  .header,
  .announcement {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  .header .wordmark:has(.brand-logo) { min-width: 0; flex-shrink: 1; }
  .header .brand-logo { width: clamp(116px, 38vw, 160px); max-width: 100%; }
  .header .button.small { min-height: 44px; }
  .header .button,
  .section-shell .button,
  .tabs button,
  .footer button,
  dialog .button,
  dialog .close-button {
    min-height: 44px;
    touch-action: manipulation;
  }

  .gallery-controls { flex-wrap: wrap; gap: 12px; }
  .gallery-controls .tabs { flex-wrap: wrap; gap: 8px 16px; }
  .tabs button { padding-top: 10px; padding-bottom: 10px; }
  .section-shell .button { max-width: 100%; white-space: normal; }
  .section-shell h2,
  .section-shell h3,
  .footer p { overflow-wrap: break-word; }

  .footer > div { flex-wrap: wrap; gap: 8px 20px; }
  .footer > div,
  .footer button { font-size: 12px; line-height: 1.5; }
  .footer > div > a,
  .footer button { display: inline-flex; align-items: center; min-height: 44px; }
  .footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }

  .case-dialog,
  .privacy-dialog {
    box-sizing: border-box;
    width: calc(100% - 24px);
    max-width: 560px;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  dialog .close-button { width: 44px; height: 44px; flex-shrink: 0; }
  .case-dialog > .close-button {
    position: sticky;
    top: 8px;
    right: auto;
    margin: 8px 8px -52px auto;
    z-index: 5;
  }
  .case-dialog-grid { min-width: 0; }
  .case-dialog-grid > div:last-child { padding: 24px 20px; }
  .case-dialog h2 { font-size: clamp(32px, 10vw, 48px); overflow-wrap: anywhere; }
  .case-dialog .micro,
  .case-dialog ol { font-size: 13px; line-height: 1.6; }
  .case-dialog .button { gap: 16px; white-space: normal; }
  .privacy-dialog { padding: 0 20px 24px; }
  .privacy-dialog > .close-button {
    position: sticky;
    top: 8px;
    right: auto;
    margin: 8px -8px 8px auto;
    z-index: 5;
    background: var(--paper);
  }
  .privacy-dialog h2 { font-size: clamp(28px, 8vw, 35px); overflow-wrap: break-word; }
  .privacy-dialog > p:not(.eyebrow) { font-size: 16px; line-height: 1.6; }
  .privacy-dialog > .button { width: 100%; gap: 12px; white-space: normal; }
  dialog input:not([type="checkbox"]),
  dialog textarea,
  dialog select { min-width: 0; max-width: 100%; font-size: 16px; }
}