/**
 * Kamp mobile web helpers (BP:mobile-web)
 * Phone-first golden path: search → detail → compare/favorites → book.
 * Native apps are out of scope unless both iOS and Android are committed.
 */

:root {
  --kamp-mobile-tap: 44px;
  --kamp-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Prefer larger tap targets on coarse pointers */
@media (pointer: coarse) {
  .kamp-tap-target {
    min-height: var(--kamp-mobile-tap);
    min-width: var(--kamp-mobile-tap);
  }
}

@media (max-width: 768px) {
  /* Modal sheet pattern (camp detail + calendar) */
  .modal-content.kamp-mobile-sheet,
  .modal .modal-content {
    margin: 0;
    margin-top: auto;
    width: 100%;
    max-width: none;
    max-height: min(92dvh, 100%);
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px calc(20px + var(--kamp-safe-bottom));
    position: relative;
  }

  .modal {
    display: none;
    align-items: flex-end;
  }

  .modal[style*="block"],
  .modal.is-open {
    display: flex !important;
  }

  .close-button {
    float: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: var(--kamp-mobile-tap);
    height: var(--kamp-mobile-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
  }

  /* Compare: keep attribute column readable; allow scroll for camps */
  #compare-table-head th:first-child,
  #compare-table-body td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f9f7f4;
    min-width: 120px !important;
    max-width: 140px;
    box-shadow: 2px 0 4px rgba(28, 20, 13, 0.06);
  }

  #compare-table-head th:not(:first-child),
  #compare-table-body td:not(:first-child) {
    min-width: 160px !important;
  }

  #compare-table-body a,
  #compare-table-body button[data-remove-id] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
  }
}