/* Sinchi: the carta page, /carta and /en/menu (owner: page-carta). Loads after tokens.css and site.css and
   uses their tokens only. The carta is the sibling of the printed one (brand/aplicacoes/carta.css): League
   Gothic section titles with a rule running to the right, dishes in League Gothic with Archivo descriptions,
   prices in Archivo with tabular figures, drinks as ruled lists, the «destaque» in a mustard panel with
   half circles, the kids' menu in petrol, «fora da carta» in deep petrol.
   The markup of .carta comes from site/src/_partes/carta.mjs (renderCarta). */

/* Opening: the poster title on one line, the lead and the two actions beside it on a wide screen */
.carta-abertura { padding-block: var(--sp-7) var(--sp-7); }
.carta-abertura__grelha { display: grid; gap: var(--sp-5); }
/* «A CARTA» and «THE MENU» stay on one line: the poster size, capped by the width at 320 px */
.carta-abertura__titulo { font-size: min(var(--fs-poster), 24vw); }
.carta-abertura__texto { display: grid; gap: var(--sp-5); justify-items: start; }
@media (min-width: 1024px) {
  .carta-abertura { padding-block: var(--sp-8) var(--sp-7); }
  .carta-abertura__grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); align-items: end; }
  .carta-abertura__titulo { grid-column: 1 / 8; }
  .carta-abertura__texto { grid-column: 8 / -1; padding-bottom: var(--sp-3); }
}

/* The page body: the index, then the carta */
.carta-pagina { padding-block: var(--sp-7) var(--sp-9); }
.carta { display: grid; gap: var(--sp-7); }
.carta__corpo { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-7); align-items: start; }
@media (min-width: 768px) { .carta__corpo { row-gap: var(--sp-8); } }

/* Index of sections. Phone and tablet: a grid of jumps at the top; each section header then keeps a way
   back here. From 1024 px: a column that stays beside the carta. */
.carta__indice-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
.carta__indice a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: 48px; padding-block: var(--sp-2);
  border-top: var(--border) solid var(--rule-soft);
  font-family: var(--font-display); font-size: var(--fs-label); line-height: var(--lh-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; text-decoration: none;
  color: var(--text-heading);
  transition: color var(--d-hover) ease;
}
.carta__indice a .ico { width: 18px; height: 18px; color: var(--text-muted); }
@media (min-width: 600px) {
  .carta__indice-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-5); }
}
@media (min-width: 1024px) {
  .carta { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); align-items: start; }
  .carta__indice { grid-column: 1 / 4; position: sticky; top: calc(var(--cabecalho-h) + var(--sp-6)); }
  .carta__corpo { grid-column: 4 / -1; }
  .carta__indice-lista { display: block; }
  .carta__indice a { justify-content: flex-start; gap: var(--sp-3); min-height: 44px; padding-block: 6px; border-top: 0; }
  .carta__indice a .ico { display: none; }
  /* the brand's circle marks the section in view (below, where the browser supports scroll timelines) */
  .carta__indice a::before {
    content: ""; flex: none; width: 10px; height: 10px; border-radius: var(--radius-circle);
    background: var(--rule-soft); transition: background-color var(--d-hover) ease;
  }
}

/* The section in view, without JavaScript: each section is a view timeline seen through a thin band at
   a third of the screen, and its index link takes the colour while the section crosses that band.
   Browsers without scroll timelines show the plain index. */
@supports (animation-timeline: view()) {
  .carta-sec { view-timeline-inset: 33% 66%; }
  @media (min-width: 1024px) {
    .carta__indice a { animation: carta-indice-ativo linear; animation-range: cover 0% cover 100%; }
    .carta__indice a::before { animation: carta-indice-ponto linear; animation-timeline: inherit; animation-range: cover 0% cover 100%; }
  }
}
@keyframes carta-indice-ativo { from, to { color: var(--petrol-deep); } }
@keyframes carta-indice-ponto { from, to { background-color: var(--mustard); } }

/* Notes: allergens, VAT and the source of the prices, before the first section */
.carta__notas { display: grid; gap: var(--sp-1); padding-bottom: var(--sp-5); border-bottom: var(--border-strong) solid var(--rule); }
.carta__nota { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); max-width: 62ch; }
.carta__nota--alergenios {
  display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-1);
  font-size: var(--fs-body); line-height: 1.4; font-weight: 500; color: var(--text);
}
.carta__nota--alergenios .ico { width: 1.2em; height: 1.2em; margin-top: .1em; color: var(--text-heading); }

/* Sections */
.carta-sec { --titulo: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); position: relative; }
.carta-sec__cabeca { display: flex; align-items: flex-end; gap: var(--sp-4); font-size: var(--titulo); }
.carta-sec__titulo {
  flex: 0 1 auto; min-width: 0; /* a title that needs two lines takes the whole width and the rule steps aside */
  font-size: 1em; line-height: var(--lh-title); letter-spacing: var(--tr-h2);
  overflow-wrap: break-word;
}
/* the rule that runs from the title to the edge, on the title's baseline, as on the printed carta */
.carta-sec__cabeca::after {
  content: ""; order: 1; flex: 1 1 0; min-width: 0; align-self: flex-end;
  height: var(--border-strong); margin-bottom: .14em; background: var(--rule);
}
.carta-sec__voltar {
  order: 2; flex: none; align-self: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 44px; min-height: 44px;
  font-family: var(--font-display); font-size: var(--fs-label); line-height: 1;
  letter-spacing: var(--tr-label); text-transform: uppercase; text-decoration: none;
  color: var(--text-heading);
}
.carta-sec__voltar .ico { width: 20px; height: 20px; }
.carta-sec__intro { margin-top: var(--sp-4); max-width: 60ch; color: var(--text-muted); }
.carta-sec__esgotada {
  display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-4);
  font-weight: var(--fw-dish); color: var(--text);
}
.carta-sec__esgotada .ico { margin-top: .2em; }

/* Phone and tablet: the section header stays under the site header while its section scrolls, with the
   way back to the index; below 480 px the link keeps only its arrow (the name stays in aria-label). */
@media (max-width: 1023px) {
  .carta-sec__cabeca {
    position: sticky; top: var(--cabecalho-h); z-index: 1;
    padding-block: var(--sp-3) var(--sp-2);
    background: var(--surface);
  }
}
@media (max-width: 1023px) {
  /* a link to one dish (/carta#prato-…) lands below the section header that stays on top */
  .carta-sec [id^="prato-"] { scroll-margin-top: calc(var(--titulo) * .92 + var(--sp-6)); }
}
@media (max-width: 379px) {
  .carta-sec { --titulo: 1.75rem; }
}
@media (max-width: 479px) {
  .carta-sec__voltar-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1024px) {
  .carta-sec { --titulo: clamp(2.75rem, 1.5rem + 2vw, 4rem); }
  .carta-sec__voltar { display: none; }
}

/* Dishes: name and price on one line, the description below; two columns from 768 px */
.carta-sec__pratos { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); }
@media (min-width: 768px) {
  .carta-sec__pratos { display: block; columns: 2; column-gap: var(--sp-7); }
  .carta-sec__pratos > li { break-inside: avoid; padding-bottom: var(--sp-6); }
  .carta-sec__pratos > .prato--coluna { break-before: column; }
  .carta-sec__pratos > li:last-child { padding-bottom: 0; }
}
.prato__linha { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.prato__nome {
  min-width: 0; overflow-wrap: break-word;
  font-size: clamp(1.375rem, 1.25rem + .55vw, 1.75rem); line-height: 1; letter-spacing: var(--tr-h3);
}
.prato__unidade {
  font-family: var(--font-text); font-size: var(--fs-small); line-height: 1; font-weight: 500;
  letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--text-muted);
}
.prato__nome .prato__unidade { margin-left: .35em; vertical-align: .1em; }
p.prato__unidade { margin-top: var(--sp-2); }
.prato__preco, .item__preco {
  flex: none; white-space: nowrap; text-align: right;
  font-weight: var(--fw-dish); font-size: var(--fs-body); line-height: 1.35; color: var(--text);
}
.prato__preco--aberto, .item__preco--aberto { font-weight: 500; font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 479px) {
  .prato__preco--aberto, .item__preco--aberto { white-space: normal; max-width: 9ch; }
}
.prato__desc { margin-top: var(--sp-2); max-width: 52ch; line-height: 1.5; }
.prato__estado, .item__estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-text); font-size: var(--fs-small); line-height: 1.3; font-weight: var(--fw-dish);
  letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--text);
}
.prato__estado { margin-top: var(--sp-2); }
.prato__estado .ico, .item__estado .ico, .carta-sec__esgotada .ico { width: 1.1em; height: 1.1em; }
/* sold out today: the words say it, the muted colour follows */
.prato.is-esgotado .prato__nome, .prato.is-esgotado .prato__desc, .prato.is-esgotado .prato__preco,
.item.is-esgotado .item__nome, .item.is-esgotado .item__preco { color: var(--text-muted); }

/* The «destaque» dish: a mustard panel with half circles (the bowls of the printed carta) */
.prato--destaque {
  display: grid; gap: var(--sp-4); margin-top: var(--sp-6);
  padding: var(--sp-5); background: var(--surface); color: var(--text);
}
.prato__tacas { display: flex; gap: 6px; }
.prato__tacas > span {
  width: 36px; height: 18px; background: var(--petrol);
  border-radius: 0 0 36px 36px;
}
.prato--destaque .prato__nome { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); color: var(--text-heading); }
.prato--destaque .prato__preco { font-size: var(--fs-lead); }
@media (min-width: 600px) {
  .prato--destaque { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--sp-6); padding: var(--sp-5) var(--sp-6); }
  .prato__tacas > span { width: 48px; height: 24px; border-radius: 0 0 48px 48px; }
}

/* Lists: drinks, sides, wine and coffee, ruled rows as on the printed carta */
.carta-sec__lista { margin-top: var(--sp-5); }
.item {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  min-height: 44px; padding-block: 10px;
  border-bottom: var(--border) solid var(--linha-lista, var(--rule-soft));
}
/* a rule above each row too, drawn over the one below the row before: every column starts ruled */
.item::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: var(--border); background: var(--linha-lista, var(--rule-soft)); }
.item__texto { min-width: 0; overflow-wrap: break-word; }
.item__nome { font-weight: 500; }
.item__nota { font-size: var(--fs-small); color: var(--text-muted); }
.item__estado { margin-left: .35em; vertical-align: .05em; }
/* the house splits its drinks in two columns where the beers start: `nova_coluna` on that item */
.item--coluna { break-before: column; }
@media (min-width: 768px) {
  .carta-sec--lista:not(.carta-sec--curta) .carta-sec__lista { columns: 2; column-gap: var(--sp-7); }
  /* at -1px the rule of the item that opens a column would be painted at the foot of the column before */
  .carta-sec--lista:not(.carta-sec--curta) .item--coluna::before { top: 0; }
  .carta-sec__lista .item { break-inside: avoid; }
}

/* Panels: the kids' menu on petrol, «fora da carta» on deep petrol */
.carta-sec--superficie { padding: var(--sp-6) var(--sp-5); --linha-lista: rgb(207 210 200 / .3); }
.carta-sec--superficie .carta-sec__intro { color: var(--text-muted); }
.carta-sec--painel .carta-sec__pratos { margin-top: var(--sp-4); columns: auto; }
.carta-sec--painel .prato__linha { align-items: flex-start; }
.carta-sec--painel .prato__linha > .prato__desc { margin-top: 0; font-size: var(--fs-lead); line-height: 1.4; }
.carta-sec--painel .prato__preco { font-size: var(--fs-lead); }
@media (min-width: 768px) {
  .carta-sec--superficie { padding: var(--sp-7) var(--sp-7); }
}

/* Two short lists side by side from 768 px (sides and desserts, wine and coffee) */
@media (min-width: 768px) {
  .carta__corpo { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-7); }
  .carta__corpo > * { grid-column: 1 / -1; }
  .carta__corpo > .carta-sec--curta:not(.carta-sec--superficie) { grid-column: auto; }
}

/* Closing: the plate cut at its rim and a pisco sour from above, on mustard, and the booking */
.carta-fecho { padding-block: var(--section); }
.carta-fecho__grelha { display: grid; gap: var(--sp-7); align-items: center; }
.carta-fecho__pratos {
  position: relative; isolation: isolate; justify-self: center;
  width: min(78vw, 360px); aspect-ratio: 1;
}
.carta-fecho__disco {
  position: absolute; z-index: -1; left: -4%; bottom: -2%;
  width: 58%; aspect-ratio: 1; border-radius: var(--radius-circle); background: var(--petrol);
}
.carta-fecho__prato {
  position: absolute; right: 0; bottom: 4%; width: 84%; aspect-ratio: 1;
  border-radius: var(--radius-circle); object-fit: cover;
}
.carta-fecho__copo {
  position: absolute; left: 4%; top: 0; width: 27%; aspect-ratio: 1;
  border-radius: var(--radius-circle); object-fit: cover;
}
.carta-fecho__texto { display: grid; gap: var(--sp-5); justify-items: start; }
.carta-fecho__texto .lead { max-width: 34ch; }
.carta-fecho__texto a:not(.btn) { color: inherit; font-weight: var(--fw-dish); white-space: nowrap; }
@media (min-width: 768px) {
  .carta-fecho__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-7); }
  .carta-fecho__pratos { width: min(100%, 380px); }
}
@media (min-width: 1024px) {
  .carta-fecho__grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); }
  .carta-fecho__pratos { grid-column: 2 / 6; justify-self: end; }
  .carta-fecho__texto { grid-column: 7 / -1; }
}

/* Pointer states: colour on hover only with a mouse, the press for everyone */
.carta__indice a:active, .carta-sec__voltar:active { transform: scale(.97); }
.carta__indice a, .carta-sec__voltar { transition: color var(--d-hover) ease, transform var(--d-press) var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .carta__indice a:hover, .carta-sec__voltar:hover { color: var(--action-hover); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .24em; }
  .carta__indice a:hover::before { background: var(--petrol); }
  .carta-fecho__texto a:not(.btn):hover { text-decoration-thickness: 2px; }
}

/* Printing this page prints the carta, not the page around it */
@media print {
  .carta-abertura .acoes, .faixa, .carta__indice, .carta-sec__voltar, .carta-fecho { display: none; }
  .carta-sec__cabeca { position: static; }
  .carta-sec { break-inside: avoid-page; }
}