/* ══════════════════════════════════════════════════════════════════════
   CH BABYSITTERS & PLAYGROUPS — MOBILE stylesheet
   Loaded only on screens ≤ 819px wide (phones, small tablets) via
   <link media="screen and (max-width: 819.98px)">. base.css carries the
   shared storybook look; this file owns phone ergonomics: compact hero,
   swipeable chip rows, dense stacked list, thumb-size targets, iPhone
   safe areas.
   ══════════════════════════════════════════════════════════════════════ */

.wrap {
  padding: 0 1rem;
}

/* ─── HERO — compact so listings reach the first screen ────────────── */

.hero {
  padding: 3.4rem 1rem 1.4rem;
}

.hero h1 {
  font-size: clamp(2rem, 8.5vw, 2.6rem);
}

.hero-tag {
  margin-bottom: 0.65rem;
}

.hero-sub {
  font-size: 14.5px;
  margin: 0.45rem auto 1rem;
}

/* The drawn sun/clouds need horizontal room the phone doesn't have, and
   they sit behind the headline at this width. The skyline stays — it's
   the signature of the design and reads fine at its clamped floor. */
.sky-decor {
  display: none !important;
}

/* Stat pills: one swipeable row with a fade hinting there's more */
.stat-pills {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 calc(100% - 28px),
    transparent
  );
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.stat-pills::-webkit-scrollbar {
  display: none;
}

.stat-pill {
  flex-shrink: 0;
  white-space: nowrap;
}

.dateline {
  margin-top: 0.7rem;
}

/* ─── CONTROLS — swipeable chip rows, thumb-size targets ───────────── */

.controls {
  padding: 0.9rem;
  border-radius: 20px;
}

.chip-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* bleed to the panel edge so chips scroll edge-to-edge — these must
     stay in step with .controls padding above */
  margin-left: -0.9rem;
  margin-right: -0.9rem;
  padding-left: 0.9rem;
  padding-right: 0.9rem;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 calc(100% - 28px),
    transparent
  );
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip-row .pill-btn,
.chip-row > span {
  flex-shrink: 0;
}

.pill-btn {
  padding: 11px 17px;
  font-size: 14px;
}

.view-toggle {
  margin-left: 0;
}

.view-toggle button {
  padding: 10px 16px;
  font-size: 13.5px;
}

.icon-btn {
  width: 42px;
  height: 42px;
}

.reveal-btn,
.call-btn,
.wa-btn {
  min-height: 42px;
}

/* ─── LIST VIEW — dense stacked rows instead of a 7-column table ───── */

table.register {
  min-width: 0;
}

table.register thead {
  display: none;
}

table.register tbody {
  display: block;
}

table.register tr {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 10px;
  row-gap: 3px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

table.register tr:last-child {
  border-bottom: none;
}

table.register td {
  display: block;
  padding: 0;
  border-bottom: none;
}

/* Row 1: number badge · name + organizer · age pill */
table.register td.no {
  grid-row: 1;
  grid-column: 1;
}

table.register td.who {
  grid-row: 1;
  grid-column: 2;
}

table.register td.ages {
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
  align-self: start;
}

/* Row 2: location · Row 3: hours + care times */
table.register tr > td:nth-child(4) {
  grid-row: 2;
  grid-column: 2 / 4;
}

table.register td.hours-col {
  grid-row: 3;
  grid-column: 2 / 4;
  white-space: normal;
}

/* Row 4: badges left, contact button right */
table.register tr > td:nth-child(6) {
  grid-row: 4;
  grid-column: 2 / 3;
  align-self: center;
}

table.register tr > td:nth-child(7) {
  grid-row: 4;
  grid-column: 3;
  justify-self: end;
  align-self: center;
}

/* ─── MAP ──────────────────────────────────────────────────────────── */

#map {
  height: 320px;
}

/* ─── SUBMIT FORM ──────────────────────────────────────────────────── */

.form-grid {
  grid-template-columns: 1fr;
}

.form-grid .full {
  grid-column: 1;
}

/* ─── IPHONE SAFE AREAS — keep fixed elements above the home bar ───── */

.filters-fab {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.toast {
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

footer {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}