/* ==========================================================================
   BANZÉ — one-thumb booking. Mobile first.
   Three scroll-snap wheels (date · time · people) + a name/phone sheet.
   The whole flow is designed to be reachable without the thumb leaving the
   bottom third of the screen.
   ========================================================================== */

@layer components {

  /* ---------- the hero booking card ---------- */
  .qb {
    background: color-mix(in srgb, var(--ink-2) 92%, transparent);
    backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid var(--line);
    padding: clamp(1rem, 4vw, 1.5rem);
    display: grid;
    gap: 0.9rem;
    width: 100%;
    max-width: 30rem;
  }
  /* Inside the #reservar module the card sits on an existing panel, so it drops
     its own background and border rather than stacking a card on a card. */
  .qb-bare {
    background: none; backdrop-filter: none; border: 0; padding: 0; max-width: none;
  }
  .qb-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    font-family: var(--font-mono); font-size: var(--fs-xs);
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  }
  .qb-head .qb-open { color: var(--bone-dim); }
  /* Compact status inside the card — the full "abre às 12h00" phrasing belongs
     in the hero and the footer, not squeezed into a 3-word header. */
  .qb-head .openpill {
    border: 0; padding: 0; gap: 0.4rem;
    font-size: 0.625rem; letter-spacing: 0.12em; white-space: nowrap;
  }
  .qb-head .openpill [data-openpill-text] { display: none; }
  .qb-head .openpill::after {
    content: "Fechado"; color: var(--bone-mute);
  }
  .qb-head .openpill[data-open="true"]::after { content: "Aberto"; color: #7fd18f; }
  html[lang="en"] .qb-head .openpill::after { content: "Closed"; }
  html[lang="en"] .qb-head .openpill[data-open="true"]::after { content: "Open"; }

  /* ---------- wheels ---------- */
  .wheels {
    display: grid;
    grid-template-columns: 1.35fr 1fr 0.85fr;
    gap: 0.35rem;
    position: relative;
  }

  .wheel { position: relative; min-width: 0; }
  .wheel-label {
    font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--bone-mute); text-align: center;
    margin-bottom: 0.3rem;
  }

  .wheel-track {
    height: 9.75rem;             /* exactly 3 rows of 3.25rem */
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-block: 3.25rem;       /* lets first + last row reach the centre */
    /* classic picker falloff */
    mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);
    touch-action: pan-y;
  }
  .wheel-track::-webkit-scrollbar { display: none; }
  .wheel-track:focus-visible { outline: 2px solid var(--gold-lift); outline-offset: 2px; }

  .wheel-item {
    height: 3.25rem;
    display: grid;
    place-items: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;      /* the "nice stopper" — one row per flick */
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    color: var(--bone-mute);
    transition: color 200ms var(--ease), transform 200ms var(--ease), opacity 200ms;
    padding-inline: 0.25rem;
    user-select: none;
    cursor: grab;
  }
  .wheel-item small {
    display: block; font-family: var(--font-mono); font-size: 0.625rem;
    letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; opacity: 0.75;
  }
  .wheel-item.is-sel { color: var(--bone); transform: scale(1.04); }
  .wheel-item.is-near { color: var(--bone-dim); }
  .wheel-item.is-past { opacity: 0.28; }

  /* the selection band sits above the track and never eats a touch */
  .wheel-band {
    position: absolute; inset-inline: 0;
    top: calc(50% + 0.65rem);      /* nudged for the label above the track */
    translate: 0 -50%;
    height: 3.25rem;
    border-block: 1px solid var(--gold);
    background: color-mix(in srgb, var(--gold) 7%, transparent);
    pointer-events: none;
    z-index: 1;
  }

  /* ---------- primary action ---------- */
  .qb-go {
    width: 100%;
    min-height: 3.75rem;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
  }
  .qb-note {
    font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em;
    color: var(--gold-lift); text-align: center;
  }
  .qb-proof {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-family: var(--font-mono); font-size: 0.6875rem; color: var(--bone-dim);
    text-align: center; flex-wrap: wrap;
  }
  .qb-proof .stars { font-size: 0.75rem; }

  /* group interception, inside the card */
  .qb-group {
    display: none; gap: 0.6rem; padding: 0.9rem;
    border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent);
  }
  .qb-group[data-on="true"] { display: grid; }
  .qb-group p { font-size: var(--fs-sm); }

  /* ---------- the confirm sheet ---------- */
  dialog.sheet {
    border: 0; padding: 0; background: transparent;
    position: fixed;
    inset: auto 0 0 0;                    /* pinned to the bottom edge */
    width: 100%; max-width: 100%;
    max-height: 100svh;
    margin: 0;
    overflow: hidden;                     /* nothing escapes sideways */
  }
  dialog.sheet::backdrop { background: color-mix(in srgb, #000 74%, transparent); }
  .sheet-inner {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    padding: 1.25rem clamp(1rem, 5vw, 2rem) calc(1.5rem + env(safe-area-inset-bottom));
    display: grid; gap: 1rem;
    max-height: 92svh; overflow-y: auto;
    animation: sheet-up 340ms var(--ease);
  }
  @keyframes sheet-up { from { transform: translateY(14%); opacity: 0; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .sheet-inner { animation: none; } }

  .sheet-grab {
    width: 2.5rem; height: 4px; border-radius: 999px; background: var(--line);
    margin: 0 auto 0.25rem;
  }
  .sheet-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center; gap: 0.35rem 0.75rem;
    padding: 0.85rem 1rem; border: 1px solid var(--line-soft); background: var(--ink);
    min-width: 0;
  }
  .sheet-summary .when { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: baseline; min-width: 0; }
  .sheet-summary b { font-family: var(--font-display); font-size: 1.05rem; }
  .sheet-summary span { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-mute); }
  .sheet-summary .edit { justify-self: end; white-space: nowrap; }

  .sheet .field input {
    min-height: 3.25rem; font-size: 1rem;   /* ≥16px stops iOS zoom-on-focus */
  }
  .sheet-err { color: #ff9d8a; font-size: var(--fs-xs); font-family: var(--font-mono); }

  /* success state */
  .sheet-done { display: grid; gap: 0.85rem; justify-items: center; text-align: center; padding-block: 1rem; }
  .sheet-done .tick {
    width: 3.25rem; height: 3.25rem; border: 1px solid var(--gold); border-radius: 999px;
    display: grid; place-items: center; color: var(--gold-lift); font-size: 1.5rem;
  }
  .sheet-done h3 { font-size: var(--fs-md); }

  @media (min-width: 40rem) {
    dialog.sheet { max-width: 30rem; margin: auto; }
    .sheet-inner { border: 1px solid var(--line); }
  }

  /* secondary link under the card — the only other thing in the fold */
  .hero-alt { margin-top: 0.9rem; }
  .hero-alt a {
    font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--bone-dim);
    display: inline-block; padding: 0.6rem 0.1rem;   /* ≥44px touch height */
  }
  @media (min-width: 60.01rem) { .hero-alt { display: none; } }

  @media (min-width: 60.01rem) {
    .qb { max-width: 27rem; }
  }
}

/* The mobile hero overrides must sit in `utilities`, the LAST layer declared in
   site.css. Placing them in `components` meant `.u-row { display: flex }` from
   utilities beat `.hero .u-row { display: none }` despite the higher
   specificity — layer order outranks specificity. */
@layer utilities {
  @media (max-width: 60rem) {
    .hero { min-height: 100svh; align-items: end; }
    .hero-inner { padding-block: 6.5rem 1.25rem; }   /* clears the fixed header */
    .hero h1 { font-size: clamp(2.25rem, 10vw, 3.5rem); line-height: 0.94; }
    .hero .label { font-size: 0.625rem; }
    .hero-sub { display: none; }      /* the booking card takes this space */
    .hero-cta { display: none; }      /* the card IS the call to action */
    .scroll-hint { display: none; }
    .hero .u-row { display: none; }   /* proof moves inside the card */
    .hero-media::after {
      background:
        linear-gradient(to top, var(--ink) 34%, color-mix(in srgb, var(--ink) 55%, transparent) 72%, color-mix(in srgb, var(--ink) 25%, transparent) 100%);
    }
  }
}