/* Càphê Commune — menu list layout (design pass, 15 Oct 2026).
   Load order: style.css → this file → commune-theme.css → menu-book.css.
   Everything that shapes the list is scoped to .menu-grid so it outranks the
   theme's generic .coffee-* rules and never reaches the flip-book clones.

   Grid system: photo tiles sit on a 60-track grid from 1180px (12 tracks below,
   where containers are too narrow for 59 gutters). 2, 3, 4 and 5 tiles per row
   all divide the track count evenly, so when a group's count leaves a partial
   last row the leftover tiles are widened (or turned into landscape tiles) to
   finish the row. No group ends with empty cells at any width.
     ≥1600px  5 per row   leftovers: 1→six in a row · 2→two landscape (7+: four tiles then three landscape) · 3→three landscape · 4→four
     ≥1180px  4 per row   leftovers: 1→five in a row · 2→two landscape (6+: six in a row) · 3→three landscape
     ≥761px   3 per row   leftovers: 1→four in a row · 2→two landscape
     ≤760px   2 per row   leftover:  1→one landscape row
   Text-only groups (no product photo) are two-column menu-board lists with the
   shared category photo stretched beside them. */

/* ---- Top matter ---- */
body[data-page="menu"] .menu-body{--menu-weave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M0 18 18 0l18 18-18 18L0 18Zm36 36 18-18 18 18-18 18-18-18Z' fill='none' stroke='%23454c70' stroke-opacity='.075' stroke-width='1'/%3E%3Cpath d='m36 18 18 18-18 18-18-18 18-18Z' fill='none' stroke='%23b08a44' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");background-image:var(--menu-weave);background-size:72px 72px}
body[data-page="menu"] .menu-category::before{background-color:var(--cream);background-image:var(--menu-weave);background-size:72px 72px}
body[data-page="menu"] #lunch::before{background-color:var(--paper)}
body[data-page="menu"] .menu-hero{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cpath d='M0 45 45 0l45 45-45 45L0 45Zm90 90 45-45 45 45-45 45-45-45Z' fill='none' stroke='%23d8b66a' stroke-opacity='.12' stroke-width='1.4'/%3E%3Cpath d='m90 45 45 45-45 45-45-45 45-45Z' fill='none' stroke='%23f1dfb3' stroke-opacity='.065' stroke-width='1.2'/%3E%3C/svg%3E");background-size:180px 180px}
.menu-jumps{gap:10px}
.menu-jumps a{padding-inline:16px}
.coffee-intro{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 6px}
.coffee-intro p{font-size:16px;margin:0}
.coffee-intro>span{font-size:12px;color:var(--quiet)}
.coffee-preview-note{font-size:12px;color:var(--quiet);margin:0 0 var(--gap-m)}

/* ---- Group skeleton ---- */
.coffee-group,.other-drinks{scroll-margin-top:115px}
.menu-grid .coffee-group+.coffee-group,.menu-grid .other-drinks{margin-top:var(--gap-l)}
.coffee-group-heading{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:var(--gap-s)}
.coffee-group-heading h3{margin:0}
.printed-subsection{min-width:0}
.printed-subsection+.printed-subsection{margin-top:var(--gap-m)}
.printed-subheading{font:400 21px/1.3 var(--serif);color:var(--ink);margin:0 0 12px}
.printed-shared-description{font:400 16px/1.5 var(--serif);color:var(--ink);margin:0 0 12px}
.printed-supporting-note{font-size:12px;line-height:1.5;color:var(--quiet);margin:-6px 0 14px}
.printed-hours{font:600 13px/1.4 var(--sans);color:var(--indigo);letter-spacing:.02em}
.printed-drinks{padding-top:0}

/* ---- Photo tiles ---- */
.menu-grid .coffee-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--tile-gap);align-items:stretch}
@media(min-width:1180px){.menu-grid .coffee-grid{grid-template-columns:repeat(60,minmax(0,1fr))}}
.menu-grid .coffee-grid>:where(.coffee-item){grid-column:span 12;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:start;min-width:0;min-height:0;margin:0;padding:0;background:var(--tile);border:1px solid var(--tile-line);border-radius:var(--radius);overflow:hidden;--thumb:220px}
.menu-grid .coffee-item .coffee-image,.menu-grid .coffee-item .printed-photo,.menu-grid .coffee-item .printed-photo-pair{display:block;width:100%;height:auto;max-width:none;aspect-ratio:1;object-fit:cover;border-radius:0;background:#f4efe5;margin:0;box-shadow:none}
.menu-grid .coffee-item .printed-photo-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;overflow:hidden}
.menu-grid .coffee-item .printed-photo-pair .printed-photo{width:100%;height:100%;aspect-ratio:auto}
.menu-grid .printed-no-photo{display:none}
.menu-grid .coffee-copy{padding:11px 13px 13px;border:0;min-height:0;min-width:0}
.menu-grid .coffee-name-price{display:block;padding:0}
.menu-grid .coffee-name-price h4{font:400 17px/1.25 var(--serif);letter-spacing:-.01em;margin:0 0 5px;padding:0;overflow-wrap:anywhere}
.menu-grid .coffee-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px;margin:0;text-align:left;color:var(--indigo);font-size:15px;font-weight:600;line-height:1.3;white-space:normal}
.menu-grid .usd-equivalent{display:inline;margin:0;font:400 11px/1.3 var(--sans);color:var(--quiet);white-space:nowrap}
.menu-grid .coffee-description{font-size:12.5px;line-height:1.45;color:var(--quiet);margin:6px 0 0}
.menu-grid .coffee-serving{font-size:11px;color:var(--quiet);margin:5px 0 0}
.menu-grid .coffee-variants{display:grid;gap:3px;margin:0;max-width:none}
.menu-grid .coffee-variants .coffee-variant{display:flex;align-items:baseline;justify-content:flex-start;gap:8px}
.menu-grid .coffee-variants small{font-size:11px;color:var(--quiet);min-width:46px;white-space:nowrap}
.menu-grid .coffee-variants strong{display:flex;align-items:baseline;gap:6px;color:var(--indigo);font-size:15px;font-weight:600;text-align:left;line-height:1.3;white-space:normal}

/* Landscape tiles (photo beside copy) are produced by the leftover rules below; :where() keeps them at the same specificity as the default so the list and split rules further down can still override. Their copy is a bounded block beside the photo. */
.menu-grid .coffee-copy{max-width:46ch}

/* ≥1600: five per row */
@media(min-width:1600px){
.menu-grid .coffee-grid>:where(.coffee-item){grid-column:span 12;--thumb:230px}
.menu-grid .coffee-grid>:where(.coffee-item:nth-child(5n+1):nth-last-child(6),.coffee-item:nth-child(5n+1):nth-last-child(6)~.coffee-item){grid-column:span 10}
.menu-grid .coffee-grid>:where(.coffee-item:nth-child(5n+1):nth-last-child(3),.coffee-item:nth-child(5n+1):nth-last-child(3)~.coffee-item){grid-column:span 20;--thumb:180px;grid-template-columns:var(--thumb) minmax(0,1fr);grid-template-rows:none;align-items:center}
.menu-grid .coffee-grid>:where(.coffee-item:nth-child(5n+1):nth-last-child(4),.coffee-item:nth-child(5n+1):nth-last-child(4)~.coffee-item){grid-column:span 15}
.menu-grid .coffee-grid>:where(.coffee-item:nth-child(5n+1):nth-last-child(2),.coffee-item:nth-child(5n+1):nth-last-child(2)~.coffee-item){grid-column:span 30;--thumb:200px;grid-template-columns:var(--thumb) minmax(0,1fr);grid-template-rows:none;align-items:center}
.menu-grid .coffee-grid>:where(.coffee-item:nth-child(5n+1):nth-last-child(7),.coffee-item:nth-child(5n+1):nth-last-child(7)~.coffee-item){grid-column:span 15;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:start}
.menu-grid .coffee-grid>:where(.coffee-item:nth-child(5n+1):nth-last-child(7)~.coffee-item:nth-last-child(-n+3)){grid-column:span 20;--thumb:180px;grid-template-columns:var(--thumb) minmax(0,1fr);grid-template-rows:none;align-items:center}
.menu-grid .coffee-grid>:where(.coffee-item:only-child){grid-column:span 60;grid-template-columns:var(--thumb) minmax(0,1fr);grid-template-rows:none;align-items:center}
}
/* 1180–1599: four per row */
@media(min-width:1180px) and (max-width:1599px){
.menu-grid .coffee-grid>:where(.coffee-item){grid-column:span 15;--thumb:200px}
.menu-grid .coffee-grid>:where(.coffee-item:nth-child(4n+1):nth-last-child(5),.coffee-item:nth-child(4n+1):nth-last-child(5)~.coffee-item){grid-column:span 12}
.menu-grid .coffee-grid>:where(.coffee-item:nth-child(4n+1):nth-last-child(3),.coffee-item:nth-child(4n+1):nth-last-child(3)~.coffee-item){grid-column:span 20;--thumb:170px;grid-template-columns:var(--thumb) minmax(0,1fr);grid-template-rows:none;align-items:center}
.menu-grid .coffee-grid>:where(.coffee-item:nth-child(4n+1):nth-last-child(2),.coffee-item:nth-child(4n+1):nth-last-child(2)~.coffee-item){grid-column:span 30;grid-template-columns:var(--thumb) minmax(0,1fr);grid-template-rows:none;align-items:center}
.menu-grid .coffee-grid>:where(.coffee-item:nth-child(4n+1):nth-last-child(6),.coffee-item:nth-child(4n+1):nth-last-child(6)~.coffee-item){grid-column:span 10;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:start}
.menu-grid .coffee-grid>:where(.coffee-item:only-child){grid-column:span 60;grid-template-columns:var(--thumb) minmax(0,1fr);grid-template-rows:none;align-items:center}
}
/* 761–1179: three per row (12 tracks below 1180px, so narrow containers never overflow) */
@media(min-width:761px) and (max-width:1179px){
.menu-grid .coffee-grid>:where(.coffee-item){grid-column:span 4;--thumb:150px}
.menu-grid .coffee-grid>:where(.coffee-item:nth-child(3n+1):nth-last-child(4),.coffee-item:nth-child(3n+1):nth-last-child(4)~.coffee-item){grid-column:span 3}
.menu-grid .coffee-grid>:where(.coffee-item:nth-child(3n+1):nth-last-child(2),.coffee-item:nth-child(3n+1):nth-last-child(2)~.coffee-item){grid-column:span 6;grid-template-columns:var(--thumb) minmax(0,1fr);grid-template-rows:none;align-items:center}
.menu-grid .coffee-grid>:where(.coffee-item:only-child){grid-column:span 12;grid-template-columns:var(--thumb) minmax(0,1fr);grid-template-rows:none;align-items:center}
.menu-grid .coffee-name-price h4{font-size:16px}
}
/* ≤760: two per row, phones included */
@media(max-width:760px){
.menu-grid .coffee-grid{gap:10px}
.menu-grid .coffee-grid>:where(.coffee-item){grid-column:span 6;--thumb:120px}
.menu-grid .coffee-grid>:where(.coffee-item:nth-child(2n+1):last-child){grid-column:span 12;grid-template-columns:var(--thumb) minmax(0,1fr);grid-template-rows:none;align-items:center}
.menu-grid .coffee-copy{padding:9px 10px 11px}
.menu-grid .coffee-name-price h4{font-size:15px}
.menu-grid .coffee-price,.menu-grid .coffee-variants strong{font-size:14px}
.menu-grid .coffee-description{font-size:12px}
}
@media(max-width:520px){
.menu-grid .coffee-grid>:where(.coffee-item){--thumb:112px}
.menu-grid .coffee-name-price h4{font-size:14.5px}
.menu-grid .coffee-price,.menu-grid .coffee-variants strong{font-size:13.5px}
.menu-grid .usd-equivalent{font-size:10.5px}
.menu-grid .coffee-description{font-size:11.5px}
.printed-subheading{font-size:19px}
.printed-shared-description{font-size:15px}
}
@media(max-width:360px){.menu-grid .coffee-grid>:where(.coffee-item){--thumb:96px}}

/* ---- Text-only groups: a two-column menu board (one column below 1180px) ---- */
.menu-grid .printed-menu-grid--list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;border-top:1px solid var(--line)}
.menu-grid .printed-menu-grid--list>.coffee-item{grid-column:auto;display:block;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0 13px;--thumb:0}
.menu-grid .printed-menu-grid--list>.coffee-item:nth-child(odd):last-child{grid-column:1/-1}
.menu-grid .printed-menu-grid--list .coffee-copy{padding:0}
.menu-grid .printed-menu-grid--list .coffee-name-price{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.menu-grid .printed-menu-grid--list .coffee-name-price h4{margin:0}
.menu-grid .printed-menu-grid--list .coffee-price{flex:none;justify-content:flex-end;text-align:right}
.menu-grid .printed-menu-grid--list .coffee-description{font-size:13px;margin-top:4px}
@media(max-width:1179px){.menu-grid .printed-menu-grid--list{grid-template-columns:minmax(0,1fr)}.menu-grid .printed-menu-grid--list>.coffee-item{grid-column:auto}}

/* ---- Groups with a shared category photo: photo beside the list, stretched to its height ---- */
.menu-grid .printed-shared-image{margin:0 0 var(--gap-s);max-width:none}
.menu-grid .printed-shared-image img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#f4efe5;border:1px solid var(--tile-line);border-radius:var(--radius)}
.menu-grid .printed-shared-image figcaption{font:400 11px/1.4 var(--sans);color:var(--quiet);margin:7px 0 0}
@media(min-width:761px){
.menu-grid .printed-menu-group--photo{display:grid;grid-template-columns:minmax(0,clamp(220px,31%,440px)) minmax(0,1fr);column-gap:clamp(22px,3vw,44px);align-items:stretch}
.menu-grid .printed-menu-group--photo>*{grid-column:1/-1;min-width:0}
.menu-grid .printed-menu-group--photo>.printed-shared-image{grid-column:1;grid-row:2;display:block;align-self:start;margin:0}
.menu-grid .printed-menu-group--photo>.printed-shared-image img{width:100%;height:auto;max-height:none;aspect-ratio:1;object-fit:contain}
.menu-grid .printed-menu-group--photo>.printed-shared-image+.printed-subsection{grid-column:2;grid-row:2;align-self:center;margin:0}
.menu-grid .printed-menu-group--photo>.printed-subsection+.printed-subsection{margin-top:var(--gap-m)}
}
/* Breakfast Platter: list in the middle, the single photographed Fruit Plate as a third column (so neither a lone tile nor a blank column). */
@media(min-width:1180px){
.menu-grid .printed-menu-group--photo-split{grid-template-columns:minmax(0,29%) minmax(0,1fr) minmax(0,24%)}
.menu-grid .printed-menu-group--photo-split>.printed-shared-image+.printed-subsection{align-self:start}
.menu-grid .printed-menu-group--photo-split>.printed-subsection+.printed-subsection{grid-column:3;grid-row:2;margin:0;align-self:start}
.menu-grid .printed-menu-group--photo-split .printed-menu-grid--list{grid-template-columns:minmax(0,1fr)}
.menu-grid .printed-menu-group--photo-split .printed-menu-grid--list>.coffee-item{grid-column:auto}
.menu-grid .printed-menu-group--photo-split .printed-subsection+.printed-subsection .coffee-grid{grid-template-columns:minmax(0,1fr)}
.menu-grid .printed-menu-group--photo-split .printed-subsection+.printed-subsection .coffee-grid>.coffee-item{grid-column:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:start}
}
@media(max-width:760px){
.menu-grid .printed-shared-image{display:block;margin:0 auto var(--gap-s);width:min(100%,190px)}
.menu-grid .printed-shared-image img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.menu-grid .printed-shared-image figcaption{margin:6px 0 0;text-align:center}
}

/* Section controls remain visible at each major menu stage and clear the compact header. */
#menu-jumps{scroll-margin-top:110px}
.menu-grid,.menu-grid>.menu-category{min-width:0}
@media(max-width:760px){.menu-grid{width:100%}}
.menu-stage-return{display:flex;justify-content:flex-end;margin-top:var(--gap-s);padding-top:10px;border-top:1px solid var(--line)}
.menu-return-link{font:600 12px/1.3 var(--sans);color:var(--indigo);text-decoration:none;white-space:nowrap}
.menu-return-link:hover,.menu-return-link:focus-visible{text-decoration:underline;text-underline-offset:3px}
@media(max-width:430px){.menu-return-link{font-size:11px}}

/* ---- Extras panels and the oat-milk note: the same tile surface ---- */
/* Add-on boxes (group extras and the oat-milk note) share one rule: full width of the list on the tile surface, with the label and every "name price" pair centred as one wrapping line, so a box with two entries and a box with seven read the same. */
.menu-grid .printed-extras,.menu-grid .coffee-extra{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 26px;width:auto;margin:var(--gap-s) 0 0;padding:11px 18px 12px;border:1px solid var(--tile-line);border-radius:var(--radius);background:var(--tile);font-size:13px;line-height:1.4;text-align:center}
.menu-grid .printed-extras h5,.menu-grid .coffee-extra>span{font:600 11px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);margin:0}
.menu-grid .printed-extras ul{display:contents;list-style:none;padding:0;margin:0}
.menu-grid .printed-extras li,.menu-grid .coffee-extra strong{display:flex;align-items:baseline;gap:8px;white-space:nowrap;font-weight:400;color:var(--ink)}
.menu-grid .printed-extras strong,.menu-grid .coffee-extra strong{color:var(--indigo);font-variant-numeric:tabular-nums;font-weight:600}
.menu-grid .printed-extras .usd-equivalent,.menu-grid .coffee-extra .usd-equivalent{display:inline;margin-left:4px}
.menu-grid .coffee-extra{margin-top:var(--gap-m)}
@media(max-width:520px){.menu-grid .printed-extras,.menu-grid .coffee-extra{gap:5px 18px;padding:10px 12px 11px;font-size:12.5px}}