/* mp-book — the booking card (GET form to /book/). COMPONENTS.md §7.15.
   Composes mp-seg and mp-field (mp-theme) and mp-btn. The container places it: the
   home wraps hero + card in one mp-wrap; from md the card overlaps the hero. */
@layer components {
  .mp-book {
    position: relative;
    display: grid;
    gap: var(--mp-space-xs);
    /* The full width up to the cap on every tab: in the page's grid an auto margin shrinks an item to its
       content, so without this the card was 517px on most tabs at 1556 and jumped wider on Membership. */
    inline-size: 100%;
    max-inline-size: var(--mp-w-booking);
    margin-inline: auto;
    margin-block-start: var(--mp-space-s);
    padding: var(--mp-space-s);
    border-radius: var(--mp-radius-lg);
    background: var(--mp-color-surface);
    color: var(--mp-color-text);
    box-shadow: var(--mp-shadow-float);
  }

  .mp-book__field[hidden],
  .mp-book__about[hidden],
  .mp-book__go [hidden] { display: none; }

  /* The chips in the field slots: Membership's passes (--pass) and Gift card's amounts (--amount, Nick,
     2026-11-07: "just show the gift card chips here"). Each chip stacks the name over its price (Nick,
     2026-11-06: "stack the membership and the price"), the name at the inputs' size and the price at sm
     ("make the font size larger"). A grid, not a wrap, so a chip is never left alone on a row: the passes
     one per row on a phone, two by two from md, all four in one row from lg (content-sized columns that
     share the rest; the narrower side padding is what lets them fit the field slots at 1024); the six
     amounts three by two (two by three under 375), all six in one row from lg. */
  .mp-book__chips .mp-seg { display: grid; grid-template-columns: minmax(0, 1fr); }
  .mp-book__chips--amount .mp-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Under 375 three across leaves "$67.50 $75" 2px from the chip's edge (75px chips at 320): two across. */
  @media (width < 23.4375rem) { .mp-book__chips--amount .mp-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .mp-book__chips .mp-seg__opt { flex-direction: column; padding: var(--mp-space-2xs); font-size: var(--mp-fs-base); text-align: center; }
  /* The price line, in the secondary colour; the one format's sale/regular spans come from mp-core. */
  .mp-book__chips .mp-seg__price { color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); font-weight: var(--mp-weight-body); white-space: nowrap; }
  /* Picked = the wizard's green card with white words (Nick, 2026-11-07: "Membership options, these should
     be green as well"): the deep green (--mp-color-pick), white at 5.4:1; the struck price and the tax words
     at 92% white (4.8:1). The intent tabs above stay ink: a tab is where you are, not a thing you buy. */
  .mp-book__chips .mp-seg--chips .mp-seg__opt:has(:checked) { background-color: var(--mp-color-pick); color: var(--mp-color-on-pick); box-shadow: none; }
  .mp-book__chips .mp-seg__opt:has(:checked) :is(.mp-seg__price, .mp-price__now) { color: inherit; }
  .mp-book__chips .mp-seg__opt:has(:checked) :is(.mp-price__was, .mp-price__tax) { color: color-mix(in srgb, var(--mp-color-on-pick) 92%, transparent); }

  /* A choice with no inputs (gift card): its line in their place. */
  .mp-book__about {
    align-self: center;
    margin: 0;
    color: var(--mp-color-text-2);
    font-size: var(--mp-fs-sm);
    line-height: var(--mp-lh-snug);
  }

  .mp-book__go { inline-size: 100%; }

  /* The date (book-cal.js, Nick 2026-11-06: "an actual mini calendar here"): a field that reads the
     chosen day ("Sun, Nov 8") and opens the month under it. A popover, not the calendar inline: the
     card keeps its one row at 1180 and its height at 375; the calendar is mp-cal (cal.css). */
  .mp-book__date { position: relative; }
  .mp-book__pick {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mp-space-2xs);
    text-align: start;
    cursor: pointer;
  }
  .mp-book__pick[aria-expanded="true"] { border-color: var(--mp-color-line-hover); }
  .mp-book__pop {
    position: absolute;
    inset-block-start: calc(100% + var(--mp-space-3xs));
    /* A phone: out past the card to the screen's edge less --mp-space-2xs (the card sits in the home's
       mp-wrap: --mp-gutter, then its own --mp-space-s), so a day is 41px at 320 and 48px at 375. */
    inset-inline: calc(var(--mp-space-2xs) - var(--mp-gutter) - var(--mp-space-s));
    z-index: calc(var(--mp-z-sticky) - 1); /* over the page, under the sticky header */
    padding: var(--mp-space-2xs);
    border: var(--mp-border) solid var(--mp-color-line);
    border-radius: var(--mp-radius-md);
    background: var(--mp-color-surface);
    box-shadow: var(--mp-shadow-float);
  }
  .mp-book__pop[hidden] { display: none; }

  /* The block's note, when it gives one. */
  .mp-book__note {
    margin: 0;
    padding-block-start: var(--mp-space-3xs);
    color: var(--mp-color-text-2);
    font-size: var(--mp-fs-xs);
    line-height: var(--mp-lh-snug);
  }
  .mp-book__note:empty { display: none; }

  @media (width >= 48rem) {
    .mp-book {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: end;
      gap: var(--mp-space-s);
      margin-block-start: calc(-1 * var(--mp-space-3xl));
      padding: var(--mp-space-m);
    }
    .mp-book__seg,
    .mp-book__go,
    .mp-book__note,
    .mp-book__about { grid-column: 1 / -1; }
    /* From md the field can be narrower than a month: the popover keeps 44px days. */
    .mp-book__pop { inset-inline: 0 auto; inline-size: max(100%, calc(var(--mp-tap) * 7 + var(--mp-space-s) * 2)); padding: var(--mp-space-s); }
    /* One field showing (MP Camp: riders; Stay: date; Membership, Gift card: the chips): it takes both field
       slots. The chips don't count as a hidden field, or Rental and Lesson stack their date and riders. */
    .mp-book:has(.mp-book__field[hidden]:not(.mp-book__chips)) .mp-book__field:not([hidden]) { grid-column: 1 / -1; }
    .mp-book__chips--pass .mp-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (width >= 64rem) {
    .mp-book { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) auto; }
    .mp-book__seg,
    .mp-book__go { grid-column: auto; }
    .mp-book__go { inline-size: auto; grid-column: -2; } /* always the last column */
    .mp-book__about,
    .mp-book:has(.mp-book__field[hidden]:not(.mp-book__chips)) .mp-book__field:not([hidden]) { grid-column: span 2; } /* the two field slots */
    /* Six choices or more don't fit beside the fields: the tabs take the first row (counted in the tabs
       only, not the six gift amounts). */
    .mp-book:has(.mp-book__seg > .mp-seg__opt:nth-of-type(6)) { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
    .mp-book:has(.mp-book__seg > .mp-seg__opt:nth-of-type(6)) .mp-book__seg { grid-column: 1 / -1; }
    .mp-book__chips--pass .mp-seg { grid-template-columns: repeat(4, auto); }
    .mp-book__chips--amount .mp-seg { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  }
}