/* Sunday in Lisbon: the home page, PT and EN (owner: page-inicio; contrato.md). Loaded after site.css on / and /en/.
   Uses the tokens and the shell's pieces (.campo, .foto, .caixa, .selo, .selo-anel, .onda, .h2, .ligacao) and never
   redefines a token. Photo system: brand/fotografia/README.md (whole, anchored, blue photos on cream, warm on navy).

   The page, top to bottom:
   1. abertura  cream  title, lead, today's status, actions; the façade (blue) bleeds right and goes down across the
                       wave into the navy field from 768 px; the ring seal sits on its top corner.
   2. pratos    navy   the dishes reviewers name most, the Google rating, the menu's highlights, the waffles in the
                       menu's rule box (a reel frame, so small).
   3. sala      cream  the terrace and the tram (the house's own photo, blue) bleeding left, text and two links.
   4. caes      cream  dogs welcome, the corgi bleeding right; the page ends on cream before the navy footer. */

/* ---------- 1. opening ---------- */

.abertura { padding-top: var(--space-xl); }
.abertura__grelha { display: grid; row-gap: var(--space-xl); }
.abertura__texto { align-self: start; }
.abertura .lead { margin-top: var(--space-m); max-width: 30ch; }
.abertura__estado { margin-top: var(--space-m); }
/* only the sentence: the lead already gives the days and the hours */
.abertura__estado .horario-curto__lista { display: none; }
.abertura__acoes { margin-top: var(--space-l); }

.abertura__media { position: relative; align-self: end; }
.abertura__foto { aspect-ratio: 4 / 5; }

/* the seal: on a phone the photo touches both screen edges, so the seal sits inside the right edge, half above it */
.abertura__selo {
  --selo-anel: clamp(96px, 8vw + 66px, 184px);
  position: absolute; z-index: 2;
  top: calc(var(--selo-anel) * -0.62); right: 0;
}

/* a tablet: the text, then the photo on the right two thirds, bleeding right and crossing the wave */
@media (min-width: 48em) {
  .abertura__media { width: 72%; justify-self: end; }
  .abertura__foto { aspect-ratio: 3 / 4; }
  /* the seal on the photo's inner top corner, centred on it and 10 % of its diameter inside */
  .abertura__selo { top: calc(var(--selo-anel) * -0.4); right: auto; left: calc(var(--selo-anel) * -0.4); }
}

/* from 960 px: text and photo side by side; the photo is bottom-aligned, so it always crosses the wave */
@media (min-width: 60em) {
  .abertura { padding-top: var(--space-2xl); }
  .abertura__grelha { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--space-2xl); }
  .abertura__texto { padding-top: var(--space-l); padding-bottom: var(--space-xl); }
  .abertura__media { width: auto; justify-self: stretch; }
  .abertura .lead { max-width: 32ch; }
}

/* ---------- 2. the dishes (navy field) ---------- */

/* from 768 px the façade comes 64 px into this field: the content starts below it */
@media (min-width: 48em) { .pratos { padding-top: calc(var(--space-section) + var(--space-xl)); } }

.pratos__grelha { display: grid; row-gap: var(--space-2xl); }
.pratos__texto { margin-top: var(--space-m); max-width: 38ch; color: var(--color-text-muted); }
.pratos__avaliacao { margin-top: var(--space-l); }

/* the highlights: renderDestaques of site/src/_partes/ementa.mjs (owner page-ementa), called with fotos=sem because
   the waffles are in the box below. Name on the left, price on the right (the menu's dish line, brand-brief.md
   «Prato da ementa»), the description under the name, a soft rule between dishes. The whole row opens the menu. */
.destaques { list-style: none; display: grid; }
.destaque {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-m); align-items: baseline;
  padding-block: var(--space-s);
}
.destaque + .destaque { border-top: var(--rule) solid var(--color-rule-soft); }
.destaque:first-child { padding-top: 0; }
.destaque__seccao { display: block; font: var(--weight-label) var(--step--1) / var(--leading-ui) var(--font-text); color: var(--color-text-muted); }
.destaque__nome { grid-column: 1; grid-row: 1; font: var(--weight-label) var(--step-1) / var(--leading-ui) var(--font-text); }
.destaque__nome a {
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em;
  transition: text-decoration-color var(--dur-hover) ease;
}
.destaque__nome a::after { content: ""; position: absolute; inset: 0; }
/* the focus ring goes round the whole row the link covers; without :has() it stays on the link */
@supports selector(:has(a)) {
  .destaque__nome a:focus-visible { outline: none; }
  .destaque:has(.destaque__nome a:focus-visible) { outline: var(--rule-strong) solid var(--color-focus); outline-offset: var(--focus-offset); border-radius: var(--radius); }
}
.destaque:active .destaque__nome a { opacity: .72; }
@media (hover: hover) and (pointer: fine) { .destaque:hover .destaque__nome a { text-decoration-color: currentColor; } }
.destaque__desc { grid-column: 1; grid-row: 2; margin-top: var(--space-3xs); font-size: var(--step--1); line-height: var(--leading-ui); color: var(--color-text-muted); }
/* the price sits right of the name; a price written in words («Preço ao balcão») may wrap, a number never does
   (precoHtml joins it to the € with a no-break space) */
.destaque__preco {
  grid-column: 2; grid-row: 1 / span 2; align-self: start; max-width: 7em; text-align: right;
  font-size: var(--step-1); font-weight: var(--weight-text-light); line-height: var(--leading-ui); font-variant-numeric: var(--numeric);
}
/* the pancakes come in twos and threes: one line per size under the description, the label on the left and the
   price on the right edge, where the other dishes have theirs (break-ui: three sizes squeezed the text at 320 px) */
.destaque__precos { grid-column: 1 / -1; grid-row: 3; list-style: none; display: grid; gap: 2px; margin-top: var(--space-2xs); font-variant-numeric: var(--numeric); }
.destaque__precos li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); }
.destaque__precos .preco { flex: none; font-size: var(--step-1); font-weight: var(--weight-text-light); line-height: var(--leading-ui); }
.destaque__var { min-width: 0; font-size: var(--step--1); line-height: var(--leading-ui); color: var(--color-text-muted); }
.destaque.is-esgotado .destaque__nome { color: var(--color-text-muted); }
.destaque__esgotado { grid-column: 1 / -1; margin-top: var(--space-2xs); font-size: var(--step--1); font-weight: var(--weight-label); }

.pratos__cookie { margin-top: var(--space-l); max-width: 44ch; }
.pratos__ementa .ligacao { margin-top: var(--space-s); }

/* the waffles in the menu's rule box: a reel frame, never wider than 360 px */
.pratos__caixa { width: fit-content; max-width: 100%; justify-self: start; }

/* 768 to 959 px: alone on its row the box left a column of empty navy beside it (verify.md, finding 8), so it
   goes beside the title and the dishes take the full width below */
@media (min-width: 48em) and (max-width: 59.99em) {
  .pratos__grelha { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-xl); align-items: center; }
  .pratos__cabeca { grid-column: 1; grid-row: 1; }
  .pratos__caixa { grid-column: 2; grid-row: 1; }
  .pratos__caixa .foto { width: 280px; }
  .pratos__ementa { grid-column: 1 / -1; grid-row: 2; }
}

@media (min-width: 60em) {
  .pratos__grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-l); row-gap: var(--space-2xl); align-items: start; }
  .pratos__cabeca { grid-column: 1 / span 6; grid-row: 1; }
  .pratos__ementa { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: center; }
  .pratos__caixa { grid-column: 2 / span 5; grid-row: 2; }
}

/* ---------- 3. inside and on the square (cream field over the navy) ---------- */

.sala__grelha { display: grid; row-gap: var(--space-xl); }
.sala__foto { aspect-ratio: 4 / 5; }
.sala__texto .texto { margin-top: var(--space-m); }
.sala__ligacoes { list-style: none; display: flex; flex-wrap: wrap; column-gap: var(--space-l); margin-top: var(--space-m); }

@media (min-width: 48em) {
  .sala__foto { width: 72%; }
}
@media (min-width: 60em) {
  .sala__grelha { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-3xl); align-items: center; }
  .sala__foto { width: auto; }
}

/* ---------- 4. dogs (cream; the page ends here) ---------- */

.caes__grelha { display: grid; row-gap: var(--space-xl); }
.caes__texto .lead { margin-top: var(--space-m); }
.caes__foto { aspect-ratio: 1; }
.caes__foto img { object-position: 30% 50%; }

@media (min-width: 48em) {
  .caes__foto { width: 64%; justify-self: end; }
}
@media (min-width: 60em) {
  .caes__grelha { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); align-items: center; }
  .caes__onda { grid-column: 1 / -1; }
  .caes__titulo { font-size: var(--step-4); }
  .caes__foto { width: auto; }
}