/* Catering page — two offerings + inquiry form. */
/* Mobile-first: stacked cells by default, 2-up at >=641px. Tokens only — no */
/* hardcoded colors, no max-width queries. */

/* Tighten the band rhythm: title sits directly above the intro, and the two
   content bands sit closer together than the default section padding. */
.cater-offer { padding-bottom: clamp(36px, 5vw, 64px); }
.cater-form { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(48px, 7vw, 88px); }

/* NB: the intro paragraph is styled by .pagelede in base.css and nothing here.
   The override that stood here set max-width and margin, both of which the shared
   class now owns. */

.cater__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 8px;
}
.cater__cell {
  background: var(--cream);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
}
.cater__cell h3 { font-size: 1.4rem; margin: 0 0 12px; }
.cater__cell p { color: var(--ink-2); font-size: 0.95rem; margin: 0 0 22px; }
/* .cater__lead removed 2026-08-30 with the three eyebrows it styled -- "Order 48 hrs
   ahead", "Full service", "By the case". A rule for a class nothing renders is the kind
   of thing that gets copied into the next cell by someone who assumes it is in use. */
/* The photograph leads the cell. 3:2 so a landscape frame is not cropped to a band,
   and it bleeds to the cell's edges because the cell already carries the padding. */
.cater__media {
  margin: calc(-1 * clamp(24px, 3vw, 40px)) calc(-1 * clamp(24px, 3vw, 40px)) clamp(20px, 2.4vw, 28px);
}
.cater__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--bg-soft);
}
/* ONE FAMILY OF CONTROLS, ON ONE BASELINE, ACROSS ALL THREE CELLS.

   Renato, 2026-08-28: "'Order Party Platters' has different styling from the 'Start an
   Inquiry' button, and the 'See Full Catering Menu PDF' has yet another styling. They
   don't align. Different fonts, different colors."
   Renato, 2026-08-29, on what was still wrong: "i dont like that the order buttons doesnt
   align with start buttons vertically."

   THE TYPE was three systems in one row and is now one: same face, size, tracking and
   case everywhere, with weight and rule colour the only thing separating primary from
   secondary.

   THE ALIGNMENT IS A STRUCTURAL PROBLEM AND NEEDS A STRUCTURAL FIX. Party Platters has
   TWO actions and the other two cells have one. Bottom-anchoring the stack -- which is
   what margin-top:auto was doing -- lines up the LAST control in each cell, so the PDF
   link landed level with the two "Start an inquiry" links and the primary above it floated
   67px higher than its neighbours. Aligning the last item is the wrong goal: the eye reads
   the primaries as a row, and those are what must agree.

   So every cell's action block is a two-row grid, and a cell with no secondary RESERVES
   the second row rather than collapsing it. The reserved row is not a magic number -- it
   is an empty box carrying .cater__pdf's own padding and line box, so if that link's type
   ever changes the spacer changes with it and the row stays true. Below 641px the cells
   stack one above another, there is no row left to align to, and the spacer would only add
   dead space, so it is switched off there. */
.cater__actions {
  margin-top: auto;
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 6px;
  justify-items: start;
}
.cater__actions .link-arrow { margin-top: 0; }

@media (min-width: 641px) {
  .cater__actions:not(:has(.cater__pdf))::after {
    content: "\200B";              /* a zero-width space, so the box has a line to size to */
    display: block;
    padding: 9px 0;
    font-size: 0.8rem;
    line-height: 1.4;
    visibility: hidden;
  }
}

/* Secondary: the same type as .link-arrow, one weight down, a quieter rule, no arrow. */
.cater__pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1.5px solid var(--taupe);
}
.cater__pdf svg { flex: none; }
.cater__pdf:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* The cells' controls are <button>s where they open the dialog. `font: inherit` was
   pulling the body font and dropping .link-arrow's own size, weight, tracking and case --
   which is exactly the "different fonts" he saw. Only the chrome is reset now. */
.cater__inquiry-link {
  background: none;
  border-width: 0 0 1.5px 0;
  padding: 9px 0;
  cursor: pointer;
  font-family: inherit;
}

.form-wrap { max-width: 760px; }
.cater__call { font-size: 0.86rem; }

/* THREE CELLS SINCE 2026-08-25, and the ladder below is why it is not just "1fr 1fr 1fr".
   Stacey: "I think we should do a third column, and it will say wholesale and school
   lunch inquiries." April, on the width: "Oh, make them skinnier. Yeah, I like that."

   641px gets TWO columns and leaves the third cell full-width beneath them. Three
   columns inside a tablet's content width puts each cell under ~230px, which is
   narrower than the photo above it is tall — the cell stops reading as a card and
   starts reading as a stripe. The odd cell spanning both columns is the shape the file
   header already warned about ("an odd cell leaves a filled half-width block"): it is
   filled deliberately, so the 1px gaps still draw a complete grid and there is no
   half-width hole.

   Three columns only from 981px, where each cell clears ~300px and April gets her
   skinnier columns without any of them collapsing. */
@media (min-width: 641px) {
  .cater__grid { grid-template-columns: 1fr 1fr; }
  .cater__cell--wide { grid-column: 1 / -1; }
}
@media (min-width: 981px) {
  .cater__grid { grid-template-columns: repeat(3, 1fr); }
  .cater__cell--wide { grid-column: auto; }
}

/* ===== Catering inquiry dialog (client, 8/8) =====
   Header and footer are fixed; only the body scrolls. That is the whole argument for a
   sticky modal footer on a form this long: Send and Cancel stay reachable instead of
   being hunted for at the bottom of a scroll. */
/* The page-head button that sat beside the h1 is gone (2026-08-28, see catering.php).
   The wrapper stays: it is the h1's row and costs nothing, and it is where a second
   page-level control would go if one is ever wanted back. */
.cater__title { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 3vw, 24px); }

.cmodal {
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 30px 70px rgba(0,0,0,0.28);
}
.cmodal::backdrop { background: rgba(20,21,15,0.55); backdrop-filter: blur(2px); }


.cmodal__form { display: flex; flex-direction: column; max-height: inherit; height: 100%; }

.cmodal__head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: 12px;
  padding: clamp(18px, 3vw, 24px) clamp(18px, 4vw, 28px) 12px;
  border-bottom: 1px solid var(--line);
}
.cmodal__h { margin: 0; flex: 1 1 auto; font-size: clamp(1.2rem, 4vw, 1.5rem); line-height: 1.15; }
/* Always visible, so the visitor is never in a state where the way out is unclear. */
.cmodal__x {
  flex: 0 0 auto; width: 40px; height: 40px; margin: -8px -8px 0 0;
  border: 0; background: none; color: var(--text-muted);
  font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.cmodal__x:hover { color: var(--ink); }

.cmodal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(16px, 3vw, 22px) clamp(18px, 4vw, 28px);
}
.cmodal__lede { margin: 0 0 18px; color: var(--ink-2); font-size: 0.9rem; line-height: 1.55; }

.cmodal__foot {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px clamp(18px, 4vw, 28px) calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.cmodal__call { color: var(--text-muted); font-size: 0.82rem; }
.cmodal__call a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Mobile first: the two actions share the width so both are comfortable thumb targets. */
.cmodal__actions { display: flex; gap: 10px; width: 100%; }
.cmodal__actions .btn { flex: 1 1 0; }
@media (min-width: 481px) {
  .cmodal__actions { width: auto; margin-left: auto; }
  .cmodal__actions .btn { flex: 0 0 auto; }
}


/* ── Conditional fields in the one catering form (2026-08-26) ──────────────────────
   `hidden` is not enough here and this is the second time on this project it has not
   been. The UA rule is `[hidden] { display: none }`, a single attribute selector, and
   any explicit `display` on the element beats it — .grid--2 sets `display: grid`, so a
   hidden row stayed on screen with its inputs disabled and invisible only in spirit.
   (The same trap cost a rendered-but-wrong admin screen on 8/18, and a Save button that
   would not hide on 8/26.)

   Three classes' worth of specificity, so it wins without !important. */
.cmodal [data-when][hidden] { display: none; }

/* THE OPENING BAND IS GONE, AND THAT IS THE FIX (2026-08-28).

   This page had a private treatment for its opening blurb -- first a dark panel, then a
   photograph, then a full-bleed ivory band -- while market, wine club, careers, our menus,
   visit us and the wine list all used the shared .pagelede in base.css. Renato: "Why is
   everything different? You changed one, but they should all look the same."

   So there is no catering-specific blurb style any more. The markup uses .pagelede like
   every other page, and the treatment lives in exactly one file. If the blurb needs to
   change again it changes there, once, for all seven pages. */