/* ── Design pass ─────────────────────────────────────────────────────────────
   Component-level refinements made after the client released the build from
   matching getrudys.com. assets/src/ stays the ported baseline; every change of
   judgement lives here so the two are easy to tell apart.

   The through-line: the original was tuned for a short marketing page, and this
   site is content-heavy — a 291-item menu, a long catering list, an about page
   of running text. So headings step down, sections sit closer together, images
   stop towering over the copy beside them, and the footer stops behaving like a
   second page.
   ------------------------------------------------------------------------- */

/* ── Rhythm ───────────────────────────────────────────────────────────────
   A section head that sits nearer its content reads as one unit rather than
   two stranded blocks. */
.section-head { margin-bottom: var(--space-md); }
.section-head h2 { margin-bottom: 0.35em; }
.eyebrow { margin-bottom: 0.7rem; }
.lede { font-size: var(--step-1); line-height: 1.6; max-width: 62ch; }

/* ── Hero ─────────────────────────────────────────────────────────────────
   Shorter, so the first row of content is visible without scrolling on a
   laptop, and the headline measure is set to break in two rather than four. */
.hero { min-height: clamp(26rem, 66vh, 37rem); padding-top: clamp(2.5rem, 7vw, 5rem); }
.hero__content { max-width: 38rem; }
.hero__title { letter-spacing: -0.03em; margin-bottom: 0.9rem; }
.hero__body { font-size: var(--step-1); max-width: 48ch; }
.hero__actions { margin-top: 1.6rem; }
.hero__promise { padding: 0.9rem 1.5rem; }
.hero__promise span { font-size: clamp(1.05rem, 1.9vw, 1.45rem); }

/* ── Inner page headers ───────────────────────────────────────────────────
   These were carrying a full --space-2xl top and bottom on top of the header,
   which left a screen of nothing before the first sentence. */
.page-hero { padding-block: clamp(2.5rem, 5vw, 4rem); }
.page-hero h1 { max-width: 18ch; }
.page-hero__stat { padding: 1.6rem 1.25rem; }

/* ── Split rows ───────────────────────────────────────────────────────────
   4:5 portrait made the photo taller than the paragraph beside it on every
   row. 5:6 keeps the portrait feel without the column fighting the text. */
.split__grid { grid-template-columns: 1fr 0.8fr; align-items: center; }
.split__media img { aspect-ratio: 5 / 6 !important; }
.split__text h2 { margin-bottom: 0.5rem; }

/* ── Cards ────────────────────────────────────────────────────────────────
   Slightly warmer surface and tighter body so eight of them read as a set. */
.dish-card { border-radius: var(--radius); }
.dish-card__media img { border-radius: var(--radius) var(--radius) 0 0; }
.dish-card__body { padding: 0.85rem 1rem 1.1rem; gap: 0.25rem; }
.dish-card__name { font-size: var(--step-0); font-weight: 700; }
.dish-card__price { font-size: 0.8rem; padding: 0.28rem 0.6rem; }
.bestsellers__grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

/* ── Menu ─────────────────────────────────────────────────────────────────
   291 items across two columns is a long page whatever happens; tightening the
   row and the gap between categories takes several screens off it without
   crowding anything. */
.menu-section { margin-bottom: var(--space-lg); }
.menu-section__head h2 { font-size: var(--step-2); }
.menu-row { padding: 0.62rem 0; gap: 1rem; }
.menu-row__desc { max-width: 52ch; line-height: 1.5; }
.menu-row__tags { margin-top: 0.35rem; }
.menu-bar__inner { padding-block: 0.6rem; }

/* ── Footer ───────────────────────────────────────────────────────────────
   It was running to nearly a full screen: a 168px logo, --space-xl of top
   padding and loose rows. The lockup still reads at 96px, and the whole block
   now sits inside the same 1180px column as the rest of the site — it had been
   full-bleed because the markup asked for a container class that no longer
   existed. */
.footer { padding-top: var(--space-lg); }
.footer .logo--image { height: 96px; max-width: 260px; }
.footer__grid {
  grid-template-columns: 1.35fr 1fr 1.15fr 0.8fr;
  gap: var(--space-md) var(--space-lg);
  padding-bottom: var(--space-md);
}
.footer__tagline { margin-top: 0.85rem; max-width: 30ch; }
.footer__social { margin-top: 0.9rem; }
.footer__social-link { width: 34px; height: 34px; }
.footer__heading { margin-bottom: 0.7rem; }
.footer__hours li { padding: 0.16rem 0; }
.footer__links { margin-bottom: 0.9rem; }
.footer__bottom { padding-block: 1rem 1.4rem; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer .logo--image { height: 80px; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ═══ Revision round 2 ═══════════════════════════════════════════════════════
   Against the numbered feedback in the client's doc. Item numbers below match
   the doc so the two can be read side by side.
   ------------------------------------------------------------------------- */

/* (2) Lunch Specials — the heading block was taking the full row width, which
   pushed the button onto its own line underneath, and the section carried a
   full --space-2xl above an already generous head. */
.e-con.specials__head { flex-wrap: nowrap; align-items: flex-end; gap: var(--space-md); }
.e-con.specials__head > .e-con { flex: 1 1 auto; width: auto; }
.e-con.specials__head > .elementor-widget-button { flex: 0 0 auto; width: auto; align-self: flex-end; }
.specials { padding-block: var(--space-xl); }
.specials__head { margin-bottom: var(--space-md); }
.specials__grid { gap: 1rem; }

/* (4) + (8) Split rows — a 5:6 portrait next to three short paragraphs left a
   third of every row empty. 4:3 puts the two columns within reach of each
   other, and consecutive rows no longer need 2xl between them. */
.section.split { padding-block: var(--space-xl); }
.split__grid { grid-template-columns: 1fr 0.85fr; align-items: center; }
.split__media img { aspect-ratio: 4 / 3 !important; }
.split__text > *:last-child { margin-bottom: 0; }

/* (7) Catering header — a 4:3 photo beside a four-line paragraph made the
   right column tower. 3:2 and a slightly narrower column sit level with it. */
.page-hero--catering .page-hero__split { grid-template-columns: 1.15fr 0.85fr; }
.page-hero--catering .page-hero__media img { aspect-ratio: 3 / 2 !important; }
.page-hero__media { align-self: center; }

/* (1) Google reviews — the plugin's own widget, wearing the site's type and
   palette instead of its stock skin. Its header repeats the rating we already
   show above it, so that goes; the list becomes a card grid. */
.reviews__carousel { margin-top: var(--space-md); }
.reviews__carousel:empty { display: none; }
.reviews__carousel .grw-header { display: none !important; }
/* Layout is left to the plugin — it writes inline styles from its own script,
   so forcing a grid here only half-works. Pick Grid or Slider in Reviews →
   Builder and this skin follows whatever it outputs. */
.reviews__carousel .wp-google-review {
  width: auto !important; margin: 0 !important; float: none !important;
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 1.15rem 1.25rem !important;
  display: flex !important; flex-direction: column !important; gap: .5rem !important;
}

.reviews__carousel .grw-img-wrap, .reviews__carousel .grw-img {
  width: 40px !important; height: 40px !important; border-radius: 999px !important; overflow: hidden;
}
.reviews__carousel .wp-google-name {
  font-family: var(--font-display) !important; font-weight: 600 !important;
  font-size: var(--step-0) !important; color: var(--ink) !important; text-decoration: none !important;
}
.reviews__carousel .wp-google-time { color: var(--ink-muted) !important; font-size: .78rem !important; }
.reviews__carousel .wp-google-text {
  font-family: var(--font-body) !important; color: var(--ink-soft) !important;
  font-size: var(--step--1) !important; line-height: 1.65 !important;
}
.reviews__carousel .wp-google-url, .reviews__carousel .wp-google-powered,
.reviews__carousel .wp-google-based { color: var(--ink-muted) !important; font-size: .78rem !important; }
.reviews__carousel .rpi-stars svg, .reviews__carousel .rpi-stars img { height: 15px !important; }

/* The closing line and its two buttons read as one row, left aligned with the
   rest of the section rather than stranded mid-width. */
.reviews__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                gap: var(--space-md); margin-top: var(--space-lg);
                border-top: 1px solid var(--line); padding-top: var(--space-md); }
.reviews__cta p { margin: 0; font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); max-width: 40ch; }
.e-con.reviews__cta { flex-direction: row; }
.e-con.reviews__cta-buttons { flex-direction: row; flex-wrap: wrap; width: auto; flex: 0 0 auto; }

/* (8) About — the page is mostly split rows, so the rules above carry it; this
   just stops the values band from re-adding a full 2xl underneath them. */
.section--dark.values { padding-block: var(--space-xl); }
.values__grid { gap: var(--space-md); }
.faq { padding-block: var(--space-xl); }

/* (6) The categories control now names the section you are reading. */
.menu-bar__jump { gap: 0.5rem; }
.menu-bar__jump-current {
  max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-muted); font-weight: 500;
}
.menu-bar__jump-current:not(:empty)::before { content: '· '; }
.cat-sheet [data-jump].is-active { color: var(--tomato); font-weight: 700; }

/* The plugin sizes its cards in px, which overflowed a phone by ~155px. Cap the
   widget to its column and let anything stubborn scroll inside itself rather
   than dragging the whole page sideways. */
.reviews__carousel { max-width: 100%; overflow-x: auto; }
.reviews__carousel .wp-gr,
.reviews__carousel .wp-google-list,
.reviews__carousel .wp-google-review { max-width: 100% !important; }
@media (max-width: 600px) {
  .reviews__carousel .wp-google-review,
  .reviews__carousel .rpi-flx { width: 100% !important; max-width: 100% !important; }
}
/* Elementor containers are flex items with min-width:auto, so a wide child
   stretches them instead of being clipped. Zero that inside the reviews block
   and the widget stays in its lane on a phone. */
.reviews, .reviews .e-con, .reviews .elementor-widget { min-width: 0; }
.reviews { overflow-x: clip; }

/* (2) The label is either "Categories" or the section you are in, never both. */
.menu-bar__jump-current:not(:empty)::before { content: none; }
.menu-bar__jump-current { max-width: 18ch; color: inherit; font-weight: 600; }
.menu-bar__jump-label:empty { display: none; }

/* (1) Location — the band ran past 1000px on three pages and most of that
   height was empty: a full-width head stacked over a row whose map stretched to
   match whatever the info column happened to be. It now reads across in three
   columns of roughly equal weight — who and where, the week, the map — with the
   heading inside the first column and the map holding a 4:3 frame rather than
   inflating to match a neighbour. Half the height, and no column is padding. */
.e-con.section.location { padding-block: var(--space-xl); }
.location__grid {
  grid-template-columns: 1.2fr 0.8fr 1.15fr !important;
  align-items: start;
  gap: clamp(1.4rem, 3vw, 2.4rem) !important;
}

/* Column 1 — name, address, and the two controls a visitor actually uses. */
.e-con.location__intro { display: flex; flex-direction: column; gap: 0.8rem; }
.location__intro .eyebrow, .location__intro h2 { margin: 0; }
.location__intro .lede { margin: 0; font-size: var(--step-0); }
.location__address { margin: 0; line-height: 1.55; }
.location__hint { display: block; margin-top: 0.15rem; }
.location__actions { margin: 0; }
.location__services { margin: 0; }

/* Column 2 — open-now over the week, one row per day, no dashed rules. */
.location__card { display: flex; flex-direction: column; padding: 1.2rem 1.3rem; }
.location__status { padding-bottom: 0.7rem; margin-bottom: 0.7rem; }
.location__hours { margin: 0; }
.location__hours-row { padding: 0.16rem 0; border-bottom: 0; }
.location__hours dt { color: var(--ink-muted); }
.location__hours dd { font-variant-numeric: tabular-nums; }

/* Column 3 — a fixed map frame, with the delivery note taking up the slack
   underneath so all three columns finish at about the same depth. */
.e-con.location__mapcol { display: flex; flex-direction: column; gap: 0.9rem; }
.location__mapcol iframe {
  width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; border: 0; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); filter: saturate(0.85);
}
.location__note { margin: 0; }

@media (max-width: 1020px) {
  .location__grid { grid-template-columns: 1fr 1fr !important; }
  .e-con.location__mapcol { grid-column: 1 / -1; }
  .location__mapcol iframe { aspect-ratio: 21 / 9; }
}
@media (max-width: 700px) {
  .location__grid { grid-template-columns: 1fr !important; }
  .location__mapcol iframe { aspect-ratio: 4 / 3; }
}

/* (3) Catering header — the photo was still deeper than the paragraph beside
   it. A 16:10 crop and an equal-ish split sit level. */
.page-hero--catering .page-hero__split { grid-template-columns: 1fr 0.9fr; align-items: center; }
.page-hero--catering .page-hero__media img { aspect-ratio: 16 / 10 !important; }
.page-hero--catering .page-hero__media { border-radius: var(--radius-lg); overflow: hidden; }

/* (4) About — three split rows, a values band and an FAQ stacked up to a very
   tall page with a lot of air. Tighter rows, a calmer gap, and the FAQ column
   pulled in so the accordion is not stranded beside an empty half. */
.section.split { padding-block: var(--space-lg); }
.split__grid { gap: clamp(1.5rem, 4vw, 3rem); }
.split__text p:last-child { margin-bottom: 0; }
.values { padding-block: var(--space-lg) !important; }
.values__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.faq { padding-block: var(--space-lg) !important; }
.faq__grid { grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
.accordion__trigger { padding: 0.95rem 0; font-size: var(--step-0); }
.page-hero { padding-block: clamp(2.25rem, 4vw, 3.25rem); }
@media (max-width: 900px) { .values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .values__grid { grid-template-columns: 1fr; } }

/* The two review buttons sat in a row that refused to shrink, so on a phone
   they ran ~150px past the edge of the card (clipped, but the text was cut).
   The row now takes the width it is given and wraps inside it. */
.e-con.reviews__cta-buttons { flex: 1 1 auto; min-width: 0; width: auto; }
@media (max-width: 640px) {
  .e-con.reviews__cta-buttons > .elementor-element { flex: 1 1 100%; width: 100%; }
  .e-con.reviews__cta-buttons > .elementor-element .elementor-button { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Spacing pass. design.css now loads after wp-bridge.css, so these no longer
   need `!important` to beat `.e-con.section`.
   ───────────────────────────────────────────────────────────────────────── */

/* (4) About ran three story rows back to back, each carrying a full 2xl of
   padding top and bottom — 170px of nothing between one row and the next. The
   rows keep their own breathing room, but consecutive ones share it. */
.e-con.section.split { padding-block: var(--space-lg); }
.e-con.section.split + .e-con.section.split { padding-top: 0; }
.split__grid { align-items: center; }

/* (7)/(3) Catering header — the buttons sat a full section-gap below the
   paragraph they belong to. */
.page-hero--catering .page-hero__actions { margin-top: var(--space-sm); }

/* (2) The categories control: most section names fit now instead of eliding
   after twelve characters, and a caret says it opens something. */
.menu-bar__jump { max-width: 17rem; gap: 0.55rem; }
.menu-bar__jump-current { max-width: none; }
.menu-bar__jump::after {
  content: ''; flex: none; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: 0.55;
}

/* Alternating story rows. The ported rule flipped the row with `direction: rtl`,
   which in this markup swapped the column widths without moving the photo — so
   all three rows put the picture on the right and the middle one was 90px wider
   than its neighbours. Placing the two cells explicitly alternates the rhythm
   and keeps every photo the same size. */
.split__grid, .split--reverse .split__grid { direction: ltr; }
.split--reverse .split__grid { grid-template-columns: 0.85fr 1fr; }
.split--reverse .split__media { grid-column: 1; grid-row: 1; }
.split--reverse .split__text  { grid-column: 2; grid-row: 1; }
@media (max-width: 860px) {
  .split--reverse .split__grid { grid-template-columns: 1fr; }
  .split--reverse .split__media,
  .split--reverse .split__text { grid-column: auto; grid-row: auto; }
  /* Picture first on a phone, so the row still opens with an image. */
  .split--reverse .split__media { order: -1; }
}

/* Catering trays. As a three-column grid every card stretched to the tallest
   in its row, so "Salads" and "Club Sandwich Trays" trailed 300px of empty
   white. Flowing them as columns packs each card to its own content. */
.catering__grid {
  display: block !important;
  columns: 3;
  column-gap: clamp(1rem, 2.2vw, 1.6rem);
}
.catering-card {
  break-inside: avoid;
  margin-bottom: clamp(1rem, 2.2vw, 1.6rem);
}
@media (max-width: 1000px) { .catering__grid { columns: 2; } }
@media (max-width: 680px)  { .catering__grid { columns: 1; } }

/* ─────────────────────────────────────────────────────────────────────────
   Narrow screens, declared last.

   This sheet now loads after the ported stylesheets, so its unconditional
   two-column rules were outranking the mobile media queries in pages.css and
   leaving phones with a 270px text column beside a sliver of photo. Every grid
   this sheet re-proportions has to restate its own collapse here.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .faq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .split__grid,
  .split--reverse .split__grid,
  .page-hero--catering .page-hero__split,
  .page-hero__split,
  .contact__grid,
  .bestsellers__layout { grid-template-columns: 1fr; }
  .split__media, .split__text,
  .split--reverse .split__media, .split--reverse .split__text { grid-column: auto; grid-row: auto; }
  .split--reverse .split__media { order: -1; }
}
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Google reviews.

   The widget itself (Reviews widget #82 in the plugin admin) is now set to
   `grid`, not `slider` -- the carousel was what produced the arrows, the dots,
   and cards padded to the height of the tallest review on either page. Its
   business header is switched off there too, because this section already
   shows the name, the rating and the review count above it.

   Everything below is skin: the plugin keeps its own markup and behaviour.
   ───────────────────────────────────────────────────────────────────────── */

/* Three across on a desktop, using the plugin's own width variable. */
.reviews .grw-review { --col: 3 !important; }
@media (max-width: 900px) { .reviews .grw-review { --col: 2 !important; } }
@media (max-width: 620px) { .reviews .grw-review { --col: 1 !important; } }

/* A short last row keeps the column width instead of stretching its two cards
   across the full width of the section. */
.reviews .grw-review { flex-grow: 0 !important; }

/* Cards size to their own quote instead of to their tallest neighbour. */
.reviews .grw-row,
.reviews .grw-content-inner,
.reviews .grw-reviews { align-items: flex-start !important; flex-wrap: wrap !important; }
.reviews .grw-review { overflow: visible !important; height: auto !important; }
.reviews .wp-gr .grw-review .wp-google-feedback,
.reviews .wp-gr .grw-review .grw-scroll {
  height: auto !important; max-height: none !important;
  overflow: visible !important; overflow-y: visible !important;
}

/* The plugin's header is reduced (in the widget settings) to just the stars and
   the review count -- no second logo, no second business name, no duplicate
   review button. What is left becomes the rating line under the section head. */
.reviews .grw-header { display: block !important; margin: 0 0 var(--space-md); }
.reviews .grw-header-inner { padding: 0 !important; justify-content: flex-start !important; }
.reviews .grw-header .wp-google-based {
  font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-muted) !important;
}
.reviews .wp-google-powered,
.reviews .grw-pagination,
.reviews .grw-prev, .reviews .grw-next { display: none !important; }

/* No card for a rating-only review that slipped past the five-star sweep. */
.reviews .grw-review:not(:has(.wp-google-text:not(:empty))) { display: none !important; }

/* The head sat a full section-gap above the rating line. */
.reviews__carousel { margin-top: 0; }
.reviews__head { margin-bottom: 0; }
.reviews .section-head { margin-bottom: 0; }

/* Elementor insets the head's text by two nested 10px paddings; the plugin's
   markup has none, so the rating line and the cards started 20px to the left of
   the heading above them. */
.reviews .wp-gr { padding-inline: 20px; }

/* ─────────────────────────────────────────────────────────────────────────
   Blog post shell.

   Deliberately a fixed layout rather than a per-post one: a new post is a
   title, an excerpt, a featured image and body copy, and it inherits all of
   this. Everything `.post__body` can contain is styled here, so a post written
   next year still sits beside one written today.
   ───────────────────────────────────────────────────────────────────────── */

.post__header { padding-block: var(--space-xl) var(--space-md); }
.post__back {
  display: inline-block; margin-bottom: var(--space-md);
  font-size: var(--step--1); font-weight: 600; color: var(--ink-muted); text-decoration: none;
}
.post__back:hover { color: var(--tomato); }
.post__title { margin: 0.35rem 0 0; font-size: var(--step-5); line-height: 1.1; max-width: 24ch; }
.post__lede {
  margin: var(--space-sm) 0 0; max-width: 56ch;
  font-size: var(--step-1); line-height: 1.55; color: var(--ink-muted);
}
.post__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: var(--space-md) 0 0; font-size: var(--step--1); color: var(--ink-muted);
}
.post__meta-sep { opacity: 0.5; }

.post__hero { margin: var(--space-md) 0 var(--space-lg); }
.post__hero-img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.post__hero figcaption {
  margin-top: 0.6rem; font-size: var(--step--1); color: var(--ink-muted); text-align: center;
}

/* ── Body copy ─────────────────────────────────────────────────────────── */
.post__body { font-size: var(--step-0); line-height: 1.75; }
.post__body > * + * { margin-top: 1.15em; }
.post__body > h2 {
  margin-top: 2.2em; margin-bottom: 0.15em;
  font-size: var(--step-3); line-height: 1.2;
}
.post__body > h3 {
  margin-top: 1.8em; margin-bottom: 0.1em;
  font-size: var(--step-1); line-height: 1.3;
}
.post__body > h2 + *, .post__body > h3 + * { margin-top: 0.5em; }
/* An opening paragraph that reads as an opening paragraph. */
.post__body > p:first-child { font-size: var(--step-1); line-height: 1.6; color: var(--ink); }

.post__body a { color: var(--tomato-dark); text-underline-offset: 3px; }
.post__body a:hover { color: var(--tomato); }

.post__body ul, .post__body ol { padding-left: 1.3em; }
.post__body li + li { margin-top: 0.45em; }
.post__body ul { list-style: none; padding-left: 1.5em; }
.post__body ul > li { position: relative; }
.post__body ul > li::before {
  content: ''; position: absolute; left: -1.1em; top: 0.62em;
  width: 0.42em; height: 0.42em; border-radius: 999px; background: var(--tomato);
}

.post__body blockquote {
  margin-inline: 0; padding: 0.2em 0 0.2em 1.2em;
  border-left: 3px solid var(--tomato);
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45;
}
.post__body blockquote p { margin: 0; }
.post__body blockquote p + p { margin-top: 0.6em; }

.post__body img, .post__body figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.post__body figure { margin-inline: 0; }
.post__body figcaption {
  margin-top: 0.55rem; font-size: var(--step--1); color: var(--ink-muted);
}

.post__body hr {
  margin-block: var(--space-lg); border: 0; border-top: 1px solid var(--line);
}
.post__body table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.post__body th, .post__body td {
  padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); text-align: left;
}
.post__body th { font-weight: 700; background: var(--paper-warm); }

/* A short aside inside a post, for the "what to order" style callouts. */
.post__body .note {
  padding: 1rem 1.2rem; border-radius: var(--radius-lg);
  background: var(--paper-warm); border: 1px solid var(--line);
  font-size: var(--step--1); line-height: 1.65;
}
.post__body .note > *:first-child { margin-top: 0; }
.post__body .note > *:last-child { margin-bottom: 0; }

/* ── Tail ──────────────────────────────────────────────────────────────── */
.post__cta { margin-top: var(--space-xl); padding-block: var(--space-lg); background: var(--paper-warm); }
.post__cta-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-md);
}
.post__cta h2 { margin: 0 0 0.3rem; font-size: var(--step-2); }
.post__cta p { margin: 0; color: var(--ink-muted); max-width: 46ch; }
.post__cta-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.post__related { padding-top: var(--space-lg); }
.related__title { margin: 0 0 var(--space-md); font-size: var(--step-2); }

@media (max-width: 700px) {
  .post__title { font-size: var(--step-4); max-width: none; }
  .post__hero-img { aspect-ratio: 4 / 3; }
  .post__cta-inner { flex-direction: column; align-items: flex-start; }
}

/* The ported post header centred everything, including the "All posts" link
   and the CTA. Every other heading on the site is left-aligned, and a
   long-form article scans better ranged left, so the post follows suit. */
.post__header, .post__header .container-narrow,
.post__cta, .post__cta-inner { text-align: left; }
.post__cta-inner { justify-content: space-between; }
.post__header .post__meta { justify-content: flex-start; }
.post__header .post__lede { margin-inline: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   Phone ergonomics.

   Measured across 360 / 390 / 430: no page scrolls sideways, but eyebrows fell
   under 11px and several links were ~22-31px tall, which is under the ~44px a
   thumb actually hits.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* --step--1 bottoms out near 10.9px on a small phone. */
  .eyebrow { font-size: max(0.72rem, var(--step--1)); letter-spacing: 0.14em; }

  /* The Lunch Specials head kept its desktop row on a phone, so the intro
     paragraph was crushed into a 90px column -- one or two words a line --
     to leave space for the Order Online button beside it. */
  .e-con.specials__head,
  .e-con.reviews__head,
  .e-con.bestsellers__head {
    flex-direction: column; align-items: flex-start; gap: var(--space-sm);
  }
  .e-con.specials__head > .elementor-widget-button,
  .e-con.reviews__head > .elementor-element { align-self: flex-start; }

  /* The dish-card category label is the smallest type on the site. */
  .dish-card__cat { font-size: max(0.72rem, 0.68rem + 0.2vw); }

  /* Footer, contact details and the post's back link: real tap targets. */
  .footer__link,
  .footer__links a { display: block; padding: 0.6rem 0; }
  .footer__contact a,
  .footer__meta a,
  a.contact__value,
  .contact__value a,
  .contact-list a { display: inline-block; padding: 0.45rem 0; }
  .post__back { padding: 0.5rem 0; }

  /* The hours table in the footer is a lot of rows on a phone; give the
     columns room rather than letting the times crowd the days. */
  .footer__hours dd { text-align: right; }
}

/* Header, 561-640px. The ported sheet only dropped the Order Online button
   below 560, but logo + phone + button + burger need about 640px -- so on a
   small tablet or a large phone in landscape the row ran 11px past the edge
   and the whole page scrolled sideways. The button is in the menu panel at
   these widths anyway. */
@media (max-width: 660px) {
  .header__actions .btn--phone .btn__label,
  .header__order { display: none; }
  .header__actions .btn--phone { padding: 0.6rem 0.75rem; }
}

/* Catering tray prices. Two-size trays stack Half over Full, so the price
   column right-aligns. The Elementor visual editor also wraps loose inline
   text in <p> tags when the page is saved there, which pulled some item names
   and prices down to the 0.8rem description size; the last two rules undo
   that so every row stays the same size however the page was last saved. */
.catering-card li > span,
.menu-row__price { text-align: right; }

.catering-card li > div > p:first-child:has(> strong) {
  margin: 0;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

.catering-card li > p:last-child {
  margin: 0;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}