/* Catering: the owner's catering menu, trays and packages ordered ahead from the restaurant, in the site's own system
   (base.css tokens, Mona Sans, olive display type on cream, terracotta for actions and prices). Premium through layout
   and restraint (owner Can, 2026-10-08): few, large, calm blocks with generous space.
   Each section has its own layout: split hero with the simit, two price panels and the wide olive Bora Feast panel,
   a typographic breakfast run, a tray board beside the hummus and lahmacun plates, and the order terms with the phone
   number set large.
   Colour roles: display headings olive (cream on olive); prices and terms terracotta-text on cream (AA for small
   text), sand on olive; terracotta itself only for actions, the large phone number and the large-type separators.
   Shape rule as everywhere: what you press is a pill; panels are square-cornered. The food illustrations are shown
   whole, inside the page gutters and within one screen (Can's ban: products are never cropped).
   Owner rule: nothing animates (no transition, animation or keyframes). */

.cat { background: var(--cream); color: var(--night); }
.cat-plate { display: grid; gap: 12px; align-content: start; justify-items: center; }
.cat-plate img { width: 100%; height: auto; }
.cat-plate figcaption { font-size: 15px; color: var(--mute-cream); }
.cat-sec { padding: clamp(96px, 11vw, 184px) var(--gutter); }
.cat-h2 { font-size: clamp(56px, 6.6vw, 112px); color: var(--olive); }
.cat-terms { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 20px; font-size: 16px; font-weight: 700; font-stretch: 112%; letter-spacing: 0.01em; line-height: 1.3; color: var(--terracotta-text); }
.cat-terms span + span::before { content: "/"; margin: 0 0.6em; font-weight: 500; }
/* Proportional figures: the tabular ones (slab 1, open 0) read as a till receipt next to the dish names. */
.cat .price { font-variant-numeric: lining-nums proportional-nums; }

/* ---------- head: title, one line of copy and the call button beside the simit ---------- */
.cat-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 40px; align-items: center;
  padding: calc(var(--chrome-clear) + clamp(16px, 3.6vw, 52px)) var(--gutter) 0;
}
.cat-head-copy { grid-column: 1 / span 6; }
.cat-title { font-size: clamp(88px, 10.6vw, 176px); line-height: 0.8; color: var(--olive); }
.cat-lede { margin-top: clamp(24px, 2.6vw, 38px); max-width: 15.5em; font-size: clamp(21px, 1.9vw, 29px); line-height: 1.25; font-weight: 600; font-stretch: 96%; }
.cat-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3vw, 40px); }
/* The simit: whole, within one screen under the header strip, caption included. */
.cat-plate-hero { grid-column: 7 / span 6; justify-self: center; width: min(100%, calc(100svh - var(--chrome-clear) - 120px), 600px); }

/* ---------- Bora Bar: heading, Classic and Signature side by side, their add-on, then The Bora Feast ---------- */
.cat-bar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 40px; align-items: start; }
.cat-bar .cat-sec-head { grid-column: 1 / span 8; }
.cat-sub { margin-top: 18px; font-size: clamp(22px, 2vw, 30px); font-weight: 650; font-stretch: 92%; line-height: 1.15; }
.tiers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(48px, 5.6vw, 88px); }
.tier { display: grid; align-content: start; gap: 28px; padding: clamp(28px, 3.4vw, 56px); background: var(--cream-lift); border-top: 4px solid var(--olive); }
.tier-top { display: grid; gap: 18px; }
.tier-name { font-size: clamp(48px, 4.6vw, 76px); color: var(--olive); }
.tier-price, .bk-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tier-price .amt, .bk-price .amt {
  font-family: var(--font-display); font-size: clamp(60px, 5.6vw, 96px); font-weight: 860; font-stretch: 75%; line-height: 0.85;
  font-variant-numeric: lining-nums; color: var(--terracotta-text);
}
.tier-price .unit, .bk-price .unit { font-size: 18px; font-weight: 680; font-stretch: 104%; }
.tier-list { display: grid; gap: 12px; padding-top: 26px; border-top: 2px solid var(--line); font-size: 19px; line-height: 1.35; }
.cat-addon {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px;
  margin-top: 24px; padding: 22px 0 0; border-top: 2px solid var(--line); font-size: 20px; font-weight: 720; line-height: 1.3;
}
.cat-addon .price { color: var(--terracotta-text); }
/* The Bora Feast: the widest panel, on the olive ground; its list runs in two columns. */
.tier-bora-feast {
  grid-column: 1 / -1; margin-top: clamp(48px, 5.6vw, 88px); grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 40px;
  padding: clamp(36px, 5vw, 80px); background: var(--olive); color: var(--cream); border-top: 0; --focus: var(--cream);
}
.tier-bora-feast .tier-top { grid-column: 1 / span 5; align-content: start; gap: 26px; }
.tier-bora-feast .tier-name { font-size: clamp(56px, 6vw, 104px); color: var(--cream); }
.tier-bora-feast .tier-price .amt { font-size: clamp(72px, 7vw, 120px); color: var(--sand); }
.tier-bora-feast .tier-list {
  grid-column: 7 / span 6; display: block; columns: 2; column-gap: 40px; padding-top: 26px;
  border-top-color: rgb(244 239 228 / 0.45);
}
.tier-bora-feast .tier-list li { break-inside: avoid; padding-bottom: 12px; }

/* ---------- Turkish Breakfast Spread: the price on the right, the whole table as one run of display type ---------- */
.cat-breakfast { padding-top: 0; }
.bk-inner {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 40px; align-items: end;
  padding-top: clamp(56px, 6.4vw, 104px); border-top: 2px solid var(--line);
}
.bk-head { grid-column: 1 / span 8; }
.bk-price { grid-column: 9 / span 4; justify-self: end; }
.bk-list {
  grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 72px);
  font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 80px); font-weight: 860; font-stretch: 75%;
  line-height: 1.02; letter-spacing: -0.01em; color: var(--olive);
}
.bk-list li { display: inline; white-space: nowrap; }
/* Hyphenated words ("fresh-baked") never break at the hyphen. */
.bk-list .nobreak { white-space: nowrap; }
.bk-list li:not(:last-child)::after { content: "/"; margin-left: 0.16em; color: var(--terracotta); font-weight: 600; }

/* ---------- Trays: the board on the right, the hummus and lahmacun plates whole on the left ---------- */
.cat-trays { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 40px; align-items: start; padding-top: 0; }
.trays-main { grid-column: 6 / span 7; grid-row: 1; padding-top: clamp(56px, 6.4vw, 104px); border-top: 2px solid var(--line); }
.trays-plates { grid-column: 1 / span 4; grid-row: 1; gap: clamp(24px, 3vw, 48px); padding-top: clamp(56px, 6.4vw, 104px); }
.trays-plates img { width: min(100%, 420px); }
.trays-board { margin-top: clamp(48px, 5vw, 80px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 48px; }
.tray-group { display: grid; gap: 18px; align-content: start; }
.tray-group h3 { padding-bottom: 14px; border-bottom: 2px solid var(--line); font-size: clamp(26px, 2.2vw, 34px); font-weight: 780; font-stretch: 88%; line-height: 1.1; color: var(--olive); }
.tray-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; font-size: 18px; line-height: 1.4; color: var(--mute-cream); }
.tray-row .n { font-weight: 700; color: var(--night); }
.tray-row .price { font-size: 19px; color: var(--terracotta-text); }
.tray-choices { display: flex; flex-wrap: wrap; font-weight: 700; color: var(--night); }
.tray-choices li { white-space: nowrap; }
.tray-choices li:not(:last-child)::after { content: "/"; margin: 0 0.45em; font-weight: 500; color: var(--terracotta-text); }

/* ---------- How to order: the terms, then the one way to order, the phone ---------- */
.cat-order { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 40px; align-items: start; border-top: 2px solid var(--line); margin: 0 var(--gutter); padding-left: 0; padding-right: 0; }
.cat-order .cat-h2 { grid-column: 1 / span 5; }
.order-lines { grid-column: 7 / span 6; display: grid; gap: 0; }
.order-lines li { padding: 20px 0; border-top: 2px solid var(--line); font-size: clamp(19px, 1.6vw, 23px); font-weight: 620; line-height: 1.4; }
.order-lines li:first-child { border-top: 0; padding-top: 6px; }
.order-call { grid-column: 1 / -1; display: grid; gap: 10px; margin-top: clamp(72px, 8vw, 128px); }
.order-tax { font-size: 18px; color: var(--mute-cream); }
.order-line { font-size: clamp(22px, 2.2vw, 32px); font-weight: 650; font-stretch: 96%; line-height: 1.2; }
.order-phone {
  display: flex; align-items: center; width: fit-content; min-height: 48px; margin-top: 8px;
  font-family: var(--font-display); font-size: clamp(40px, 11vw, 180px); font-weight: 860; font-stretch: 75%; line-height: 0.9;
  letter-spacing: -0.01em; color: var(--terracotta); text-decoration: none; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .order-phone:hover { text-decoration: underline; text-decoration-thickness: 4px; } }

/* ---------- tablet ---------- */
@media (max-width: 1099px) {
  .cat-head, .cat-bar, .bk-inner, .cat-trays, .cat-order, .tier-bora-feast { column-gap: 24px; }
  .cat-title { font-size: clamp(80px, 12vw, 132px); }
  .cat-plate-hero { grid-column: 7 / -1; }
  .cat-bar .cat-sec-head { grid-column: 1 / -1; }
  .tier-bora-feast .tier-top, .tier-bora-feast .tier-list { grid-column: 1 / -1; }
  .bk-head { grid-column: 1 / span 7; }
  .bk-price { grid-column: 8 / -1; }
  .trays-main { grid-column: 5 / -1; }
  .trays-board { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .cat-order .cat-h2, .order-lines { grid-column: 1 / -1; }
  .order-lines { margin-top: 36px; }
  .order-lines li:first-child { border-top: 2px solid var(--line); padding-top: 20px; }
}

/* ---------- phone: one column, each section in reading order ---------- */
@media (max-width: 759px) {
  .cat-head, .cat-bar, .bk-inner, .cat-trays, .cat-order, .tier-bora-feast { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .cat-head > *, .cat-bar > *, .bk-inner > *, .cat-trays > *, .cat-order > *, .tier-bora-feast > * { grid-column: 1 / -1; grid-row: auto; }
  .cat-head { row-gap: 28px; padding-top: calc(var(--chrome-clear) + 16px); }
  .cat-title { font-size: clamp(76px, 25vw, 120px); }
  .cat-lede { font-size: 20px; }
  .cat-plate-hero { width: min(72vw, 320px); }
  .cat-sec { padding-top: 88px; padding-bottom: 88px; }
  /* Breakfast and Trays open on their own rule, as at desktop: the gap above each rule is one section padding. */
  .cat-breakfast, .cat-trays { padding-top: 0; }
  .cat-order { padding-left: 0; padding-right: 0; }
  .cat-h2 { font-size: clamp(48px, 14vw, 68px); }
  .tiers { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tier { gap: 24px; }
  .tier-list, .tray-row { font-size: 17px; }
  .cat-addon { font-size: 18px; }
  .tier-bora-feast { padding: 32px 24px; gap: 24px; }
  .tier-bora-feast .tier-list { columns: 1; }
  .bk-price { justify-self: start; margin-top: 24px; }
  .bk-list { font-size: clamp(30px, 9vw, 44px); }
  .bk-list li { white-space: normal; }
  .trays-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 56px; column-gap: 16px; }
  .trays-plates figcaption { grid-column: 1 / -1; }
  .trays-board { gap: 48px; }
  .order-lines li { font-size: 18px; }
  .order-line { font-size: 21px; }
  .order-phone { font-size: clamp(40px, 13vw, 60px); }
}