/* Meza.Libaneza: the home page (/ and /en/). Owner: page-inicio. Reads the tokens and the components of site.css
   and never redefines a token. Composition only: the opening (title, the room, the Google rating and the short
   hours in the first screen of a phone), the praised dishes in the navy band, the menu in two languages, the house
   and where it is with the small map, and the closing question. On the computer the sections use the 12 columns
   of the wide wrap (largura.md): text in one column, picture, list or map in the other, 5/7 or 4/8, the room
   bleeding to the right edge and the dishes' band from edge to edge. Motion hooks (data-entra, data-revela) are
   animated by motion.css; nothing here hides content. */

/* ---------- rhythm ---------- */
.inicio-abertura { padding-top: var(--space-m); }
.inicio-faixa { margin-block: var(--pattern-band-gap); }
.inicio-caixa, .inicio-visita { margin-bottom: var(--space-section); }
.inicio .t2 { margin-bottom: 0; }

/* «Reservar mesa» in the body only from 760 px: on a phone it lives in the action bar alone */
.inicio-reservar { display: none; }

/* ---------- the opening ---------- */
/* The title's lines sit side by side while they fit and drop one under the other when they don't, so «Cozinha
   libanesa» is one line on a computer and two on a phone; each .linha stays one real line for the line entrance. */
.inicio-titulo, .inicio-fecho .t2 { text-wrap: wrap; }
.inicio-titulo { margin-bottom: var(--space-s); }
.inicio-titulo .linha, .inicio-fecho .t2 .linha { display: inline-block; vertical-align: top; max-width: 100%; }
/* under ~350 px «em Alcântara» is wider than the column at the token's 38 px floor: the title shrinks with the
   screen there, so each line still fits its mask whole */
.inicio-titulo { font-size: min(var(--step-5), 11vw); }

/* one grid for the whole opening, so the lead and the actions stay the title's siblings (motion.css lets them follow
   the title's lines); phone: the room and the facts side by side under the text */
.inicio-abertura {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  column-gap: var(--space-s);
  align-items: start;
}
.inicio-titulo, .inicio-abertura > .lead, .inicio-abertura > .acoes { grid-column: 1 / -1; }
.inicio-abertura > .acoes { margin-block: var(--space-2xs) var(--space-s); }
.inicio-sala { grid-column: 1; }
.inicio-factos { grid-column: 2; display: grid; gap: var(--space-s); }
.inicio-facto { border-top: var(--rule) solid var(--color-rule); padding-top: var(--space-xs); min-width: 0; }
/* a slot that rendered nothing (no Google rating in casa.json) leaves no lone rule behind */
.inicio-facto:not(:has(.avaliacoes, .horario-curto)) { display: none; }

/* the rating line, narrower than the footer's: the number, then the scale and the count under it */
.inicio-avaliacao .avaliacao-linha { flex-direction: column; align-items: flex-start; gap: var(--space-3xs); }
.inicio-avaliacao .avaliacao-nota { font-size: var(--step-3); }
.inicio-avaliacao .avaliacao-escala { font-size: var(--step--1); }
/* the link wraps in a narrow column: the arrow follows the last word instead of floating at the edge */
.inicio-avaliacao .avaliacao-ligacao { display: block; min-height: var(--tap); padding-block: 10px; text-wrap: balance; }
.inicio-avaliacao .avaliacao-ligacao .ic { display: inline-block; vertical-align: -0.2em; margin-left: var(--space-3xs); }
.inicio-factos .horario-curto-lista { font-size: var(--step--1); line-height: 1.45; gap: var(--space-xs); }

/* ---------- the praised dishes: the navy band of the menu (a box inside the gutters on the phone) ---------- */
.inicio-caixa { display: grid; gap: var(--space-xl); }
.inicio-caixa-texto { display: grid; justify-items: start; min-width: 0; }
.inicio-caixa-texto > * { width: 100%; }
.inicio-caixa-texto > .ligacao { width: auto; margin-top: var(--space-xs); }
.inicio-caixa-lead { margin-top: var(--space-s); max-width: 46ch; color: var(--color-text-muted); }
.inicio-pratos { margin-top: var(--space-m); }
.inicio-caixa .pratos { border-top: var(--rule) solid var(--color-rule); }
.inicio-caixa .prato { padding-block: var(--space-s); }
.inicio-caixa .prato-descricao { margin-top: var(--space-3xs); }
.inicio-caixa-nota { margin-top: var(--space-s); }
.inicio-prato { width: min(100% - var(--pattern-module), 420px); justify-self: start; }
/* site.css zeroes the last child's bottom margin in a .banda; the photo needs it for its block */
.banda.inicio-caixa > .inicio-prato { margin-bottom: var(--pattern-module); }

/* ---------- the menu in two languages, and the vegetarian dishes ---------- */
.inicio-ementa { display: grid; gap: var(--space-xl); align-items: start; }
.inicio .inicio-ementa-titulo { margin-bottom: calc(var(--space-m) - var(--space-xl)); }
.inicio-ementa-col {
  display: grid; gap: var(--space-s); justify-items: start;
  border-top: var(--rule) solid var(--color-rule); padding-top: var(--space-s);
  max-width: 46ch;
}
.inicio-ementa-col .t3 { margin-bottom: 0; }
.inicio-falafel { width: min(100% - var(--pattern-module), 320px); }

/* ---------- the house, and where it is ---------- */
.inicio-visita { display: grid; gap: var(--space-xl); align-items: start; }
.inicio-visita-texto { display: grid; gap: var(--space-xl); }
.inicio-bloco { display: grid; gap: var(--space-s); justify-items: start; max-width: 46ch; }
.inicio-morada { font-weight: var(--weight-label); }
.inicio-ligacoes { display: grid; }
.inicio-mapa { width: 100%; max-width: 440px; }
.inicio-mapa > img { width: 100%; height: auto; }

/* ---------- the closing question ---------- */
.inicio-fecho { display: grid; gap: var(--space-m); justify-items: start; }
.inicio-fecho .lead { max-width: 44ch; }
.inicio-fecho .lead a { font-weight: var(--weight-label); text-decoration-color: currentColor; overflow-wrap: anywhere; }

/* ---------- widths ---------- */
@media (max-width: 359px) {
  /* 320 px: the room takes the column, the rating and the hours sit side by side under it */
  .inicio-sala { grid-column: 1 / -1; width: min(100% - var(--pattern-module), 300px); margin-bottom: calc(var(--pattern-module) + var(--space-m)); }
  .inicio-factos { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-s); }
}

@media (min-width: 760px) {
  .inicio-abertura { padding-top: var(--space-2xl); }
  .inicio-reservar { display: inline-flex; }

  .inicio-abertura, .inicio-caixa, .inicio-ementa, .inicio-visita, .inicio-fecho {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 2.4vw, 48px);
  }

  /* 5/7: text under the title on the left, where the eye already is; the room on the right, to the screen edge
     (.foto--sangra moves its block and quarter circle to the left) */
  .inicio-abertura { grid-template-rows: auto auto auto 1fr; }
  .inicio-titulo { margin-bottom: var(--space-xl); }
  .inicio-abertura > .lead { grid-column: 1 / span 5; grid-row: 2; }
  .inicio-abertura > .acoes { grid-column: 1 / span 5; grid-row: 3; margin-block: var(--space-m) var(--space-xl); gap: var(--space-s) var(--space-m); }
  .inicio-factos { grid-column: 1 / span 5; grid-row: 4; gap: var(--space-l); }
  .inicio-sala { grid-column: 6 / -1; grid-row: 2 / span 3; }

  /* the band: the list on the left, the dish on the right */
  .inicio-caixa { row-gap: var(--space-xl); align-items: center; }
  .inicio-caixa-texto { grid-column: 1 / span 7; }
  .inicio-prato { grid-column: 8 / -1; width: auto; }

  /* 760 to 1023: the two columns share the width and the dish sits under them */
  .inicio-ementa { row-gap: var(--space-xl); }
  .inicio .inicio-ementa-titulo { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; }
  .inicio-ementa-col:nth-of-type(1) { grid-column: 1 / span 6; grid-row: 2; }
  .inicio-ementa-col:nth-of-type(2) { grid-column: 7 / span 6; grid-row: 2; }
  .inicio-falafel { grid-column: 1 / span 5; grid-row: 3; width: auto; }

  .inicio-fecho > * { grid-column: 1 / -1; }

  .inicio-visita { align-items: center; }
  .inicio-visita-texto { grid-column: 1 / span 6; }
  .inicio-mapa { grid-column: 8 / -1; justify-self: end; }
}

@media (min-width: 960px) {
  /* the closing question on the left, what to do about it on the right, on the same baseline */
  .inicio-fecho { align-items: end; row-gap: var(--space-m); }
  .inicio-fecho .t2 { grid-column: 1 / span 5; grid-row: 1 / span 2; align-self: start; }
  .inicio-fecho .lead { grid-column: 7 / -1; grid-row: 1; }
  .inicio-fecho .acoes { grid-column: 7 / -1; grid-row: 2; }
}

@media (min-width: 1024px) {
  /* 5/7 the other way round: the dish on the left, the text on the right, one block under the other */
  .inicio-ementa { grid-template-rows: auto auto 1fr; row-gap: var(--space-l); }
  .inicio-falafel { grid-column: 1 / span 5; grid-row: 1 / span 3; align-self: center; }
  .inicio .inicio-ementa-titulo { grid-column: 7 / -1; grid-row: 1; }
  .inicio-ementa-col:nth-of-type(1) { grid-column: 7 / -1; grid-row: 2; }
  .inicio-ementa-col:nth-of-type(2) { grid-column: 7 / -1; grid-row: 3; }
  .inicio-ementa-col { max-width: none; }
  .inicio-ementa-col > p { max-width: 60ch; }

  /* 6/5 with one column of air: the map grows with the column instead of stopping at 440 px */
  .inicio-mapa { grid-column: 8 / -1; justify-self: stretch; max-width: none; }
}

@media (min-width: 1100px) {
  /* 6/6 split hero: the title in three lines on the left, with the lead, the actions and the facts under it; the room
     from the title's top to the screen edge. The title is sized to its six columns (EM ALCÂNTARA is the widest line,
     about 7.8 times the font size), never above the token. */
  .inicio-abertura { grid-template-rows: auto auto auto 1fr; }
  .inicio-titulo { grid-column: 1 / span 6; grid-row: 1; font-size: min(var(--step-5), 5.5vw, 86px); margin-bottom: var(--space-l); }
  .inicio-abertura > .lead { grid-column: 1 / span 6; grid-row: 2; }
  .inicio-abertura > .acoes { grid-column: 1 / span 6; grid-row: 3; }
  .inicio-factos { grid-column: 1 / span 6; grid-row: 4; }
  .inicio-sala { grid-column: 7 / -1; grid-row: 1 / span 4; align-self: start; }

  /* the dishes in two columns (.pratos--colunas, site.css) need eight columns; the dish keeps four */
  .inicio-caixa-texto { grid-column: 1 / span 8; }
  .inicio-prato { grid-column: 9 / -1; }
  .inicio-caixa-lead { max-width: 60ch; }
}

@media (min-width: 1200px) {
  .inicio-abertura { padding-top: var(--space-xl); }
  /* the rating and the hours side by side; the hours get the column they need, so an interval never splits after
     its dash (the shell's renderer has no no-break spans yet) */
  .inicio-factos { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-m); align-self: end; max-width: 620px; }
  .inicio-factos .horario-curto-lista dd { white-space: nowrap; }
}