/* Sinchi: the home page (owner: page-inicio). Loads after tokens.css and site.css; no token is redefined.
   A run of posters: the opening (poster title, seal, a vertical photo in a petrol block), one poster per
   dish the reviews name (ceviche on mustard with its title on the veil, octopus on petrol with the sun
   behind, pisco sour on cream with the house seal on the photo), the ratings on deep petrol, the room and
   the hours, and a mustard close with the booking button. */

/* The poster title: one .ln per real line, with two words on the last line at every width (no word left
   alone). --em: the widest line in em, measured in League Gothic with the poster tracking («pisco sour»
   3,37; «octopus and» 3,98), so the title fills the measure and never runs past the gutter. */
/* Each .ln is a real line: it never wraps inside (Chrome breaks a line a few px before its measured width). */
.abre__titulo .ln > span, .cartaz__titulo .ln > span, .fecho__titulo .ln > span { white-space: nowrap; }
.abre__titulo {
  --em: 3.46;
  font-size: min(var(--fs-poster), calc((100vw - 2 * var(--gutter)) / var(--em)));
}
.abre__titulo:lang(en) { --em: 4.1; }

/* 1. Opening */
.abre {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--cream);
}
.abre__texto {
  grid-row: 1; grid-column: 1;
  padding: var(--sp-7) max(var(--gutter), env(safe-area-inset-left, 0px)) var(--sp-8);
}
.abre__lead { margin-top: var(--sp-5); }
.abre__acoes { margin-top: var(--sp-6); }
.abre__factos {
  display: grid; gap: var(--sp-2); margin-top: var(--sp-5);
  font-size: var(--fs-small); line-height: var(--lh-small);
}
.abre__factos .horario-curto { gap: 0; }
.abre__factos .horario-curto__lista { display: none; }
.abre__tel a {
  font-weight: var(--fw-dish); text-decoration-thickness: 1px;
  display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px;
}
.abre__foto {
  grid-row: 2; grid-column: 1;
  padding: var(--sp-8) 16% 0 14%;
  --sol: 70%; --sol-x: -18%; --sol-y: -14%;
}
.abre__foto img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
/* The seal stamps the seam between the poster and the photo. */
.abre__selo {
  --selo-tam: clamp(120px, 34vw, 168px);
  grid-row: 2; grid-column: 1;
  justify-self: end; align-self: start;
  margin: calc(-0.5 * var(--selo-tam)) var(--gutter) 0 0;
  z-index: 1;
}
.abre__selo::before {
  content: ""; position: absolute; inset: -4%; border-radius: var(--radius-circle); background: var(--cream);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .abre__foto { padding-inline: 24% 24%; }
}

@media (min-width: 1024px) {
  .abre {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    min-height: calc(100svh - var(--cabecalho-h) - var(--faixa-h) - 2.75rem);
  }
  .abre__titulo {
    font-size: max(5.5rem, min(var(--fs-poster),
      calc((58.33vw - max(var(--gutter), (100vw - var(--max)) / 2) - var(--sp-8)) / var(--em)),
      calc((100svh - 34rem) / 2.6)));
  }
  .abre__texto {
    grid-row: 1; grid-column: 1;
    align-self: center;
    padding: var(--sp-8) var(--sp-8) var(--sp-8) max(var(--gutter), calc((100vw - var(--max)) / 2));
  }
  .abre__foto {
    grid-row: 1; grid-column: 2;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--sp-8) 16% 0 14%;
    --sol: 62%; --sol-x: -16%; --sol-y: -10%;
  }
  .abre__foto picture { display: block; }
  .abre__selo {
    --selo-tam: clamp(176px, 15vw, 248px);
    grid-row: 1; grid-column: 1 / -1;
    justify-self: start; align-self: end;
    margin: 0 0 var(--sp-8) calc(58.33% - var(--selo-tam) / 2);
  }
}

/* Big section titles never run past the gutter: --em is the widest line in em (League Gothic). */
.cartaz__titulo.titulo-cartaz--gigante, .fecho__titulo {
  font-size: min(var(--fs-poster), calc((100vw - 2 * var(--gutter)) / var(--em, 2.7)));
}
.cartaz--polvo .cartaz__titulo { --em: 1.9; }
.cartaz--polvo .cartaz__titulo:lang(en) { --em: 2.66; }
.cartaz--pisco .cartaz__titulo { --em: 3.45; }
.fecho__titulo { --em: 3.5; }
@media (min-width: 1024px) {
  .fecho__titulo {
    font-size: min(var(--fs-poster), calc((66.67vw - max(var(--gutter), (100vw - var(--max)) / 2) - var(--sp-8)) / var(--em)));
  }
}

/* 2. The dish posters */
.cartaz { overflow: clip; }
.cartaz__grelha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.cartaz__lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 40ch; }
.cartaz__texto > * + * { margin-top: var(--sp-5); }
.cartaz__texto .texto { max-width: 46ch; }
.cartaz__acoes { margin-top: var(--sp-6) !important; }

/* Signature dishes and their prices (renderDestaques from page-carta; the same markup is baked here) */
.destaques { --fs-destaque: clamp(1.5rem, 1.2rem + .9vw, 2.125rem); border-top: var(--border-strong) solid var(--rule); max-width: 34rem; }
.destaque {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-1) var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: var(--border) solid color-mix(in srgb, var(--rule) 45%, transparent);
}
.destaque__nome {
  grid-row: 1; grid-column: 1;
  font-family: var(--font-display); font-size: var(--fs-destaque); line-height: 1;
  letter-spacing: var(--tr-h3); text-transform: uppercase; color: var(--text-heading);
}
.destaque__preco {
  grid-row: 1; grid-column: 2;
  font-family: var(--font-display); font-size: var(--fs-destaque); line-height: 1; letter-spacing: .02em;
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: var(--text-heading);
}
.destaque__preco--aberto { font-family: var(--font-text); font-size: var(--fs-small); font-weight: var(--fw-dish); letter-spacing: 0; }
.destaque__estado { grid-row: 2; grid-column: 1 / -1; font-size: var(--fs-small); font-weight: var(--fw-dish); color: var(--estado-fechado, var(--error)); }
.destaque.is-esgotado .destaque__nome, .destaque.is-esgotado .destaque__preco { text-decoration: line-through; text-decoration-thickness: 2px; }

/* Ceviche: mustard, the title on the photo's deep-petrol veil */
.cartaz--ceviche .cartaz__foto { container-type: inline-size; aspect-ratio: 3 / 4; }
.cartaz--ceviche .cartaz__foto picture { display: block; height: 100%; }
.cartaz__veu { left: 9%; right: 9%; padding: 0 8% 7%; }
.cartaz--ceviche .cartaz__titulo {
  font-size: 27cqi; line-height: .86; letter-spacing: var(--tr-poster); color: var(--mustard);
}
.cartaz--ceviche .cartaz__texto { align-self: center; }

/* Octopus: the petrol section is the block, a mustard sun behind the photo */
.cartaz--polvo .cartaz__titulo { line-height: var(--lh-poster); }
.cartaz__foto--sol { position: relative; isolation: isolate; width: 84%; margin-left: auto; }
.cartaz__foto--sol picture, .cartaz__foto--sol img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.cartaz__sol {
  position: absolute; z-index: -1; left: -18%; top: -12%;
  width: 72%; aspect-ratio: 1; border-radius: var(--radius-circle); background: var(--mustard);
}

/* Pisco sour: cream, the house seal on the photo's dark corner */
.cartaz--pisco .cartaz__titulo { line-height: var(--lh-poster); }
.cartaz--pisco .cartaz__foto { aspect-ratio: 1; --selo: 24%; }
.cartaz--pisco .cartaz__foto picture { display: block; height: 100%; }
.cartaz--pisco .foto-selo__selo { top: 6%; left: 6%; }

@media (min-width: 768px) {
  .cartaz__grelha { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--sp-5); row-gap: var(--sp-7); }
  .cartaz--ceviche .cartaz__foto { grid-column: 1 / 5; grid-row: 1; }
  .cartaz--ceviche .cartaz__texto { grid-column: 5 / 9; grid-row: 1; }
  .cartaz--polvo .cartaz__titulo { grid-column: 1 / -1; }
  .cartaz--polvo .cartaz__foto { grid-column: 4 / 9; }
  .cartaz--polvo .cartaz__texto { grid-column: 1 / 6; }
  .cartaz--pisco .cartaz__titulo { grid-column: 1 / -1; }
  .cartaz--pisco .cartaz__foto { grid-column: 1 / 7; }
  .cartaz--pisco .cartaz__texto { grid-column: 3 / 9; }
}
@media (min-width: 1024px) {
  .cartaz__grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cartaz--ceviche .cartaz__foto { grid-column: 1 / 7; grid-row: 1; }
  .cartaz--ceviche .cartaz__texto { grid-column: 8 / 13; grid-row: 1; }
  .cartaz--polvo .cartaz__titulo { grid-column: 1 / 8; grid-row: 1; align-self: end; }
  .cartaz--polvo .cartaz__foto { grid-column: 8 / 13; grid-row: 1 / 3; width: 100%; }
  .cartaz--polvo .cartaz__texto { grid-column: 1 / 7; grid-row: 2; align-self: start; }
  .cartaz--pisco .cartaz__titulo { grid-column: 1 / -1; grid-row: 1; }
  .cartaz--pisco .cartaz__foto { grid-column: 1 / 8; grid-row: 2; }
  .cartaz--pisco .cartaz__texto { grid-column: 8 / 13; grid-row: 2; align-self: end; padding-left: var(--sp-6); }
}

/* 3. Ratings, always with source and date */
.notas__grelha { display: grid; }
@media (max-width: 1023px) {
  .notas .avaliacao__nota { grid-row: 1 / span 2; width: 88px; font-size: 2.75rem; }
  .notas .avaliacao .ligacao { grid-column: 1 / -1; margin-top: var(--sp-2); }
}
.notas__lista { justify-content: start; }
@media (min-width: 1024px) {
  .notas__lista { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: var(--sp-9); }
}

/* 4. The room, the address and the hours */
.visita__grelha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
.visita__foto { aspect-ratio: 3 / 4; }
.visita__foto picture { display: block; height: 100%; }
.visita__veu { padding: 0 12% 9%; }
.visita__veu-rua {
  font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1;
  letter-spacing: var(--tr-h3); text-transform: uppercase; color: var(--cream);
}
.visita__veu-bairro {
  margin-top: var(--sp-2);
  font-family: var(--font-display); font-size: var(--fs-label); line-height: 1;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--mustard);
}
.sem-quebra { white-space: nowrap; }
.visita__morada { margin-top: var(--sp-5); font-size: var(--fs-lead); line-height: 1.45; }
.visita__pe { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-weight: var(--fw-dish); }
.visita__pe .ico { width: 1.3em; height: 1.3em; }
.visita__acoes { margin-top: var(--sp-6); }
.visita__casa { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: var(--border-strong) solid var(--rule); max-width: var(--measure); }
.visita__casa > * + * { margin-top: var(--sp-3); }
.visita__casa .ligacao { margin-top: var(--sp-2); }
.visita__horario-titulo { margin-bottom: var(--sp-5); }
@media (min-width: 768px) {
  .visita__grelha { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--sp-5); }
  .visita__foto { grid-column: 1 / 5; }
  .visita__texto { grid-column: 5 / 9; align-self: center; }
  .visita__horario { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .visita__grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--sp-8); }
  .visita__foto { grid-column: 1 / 6; grid-row: 1; }
  .visita__texto { grid-column: 7 / 13; grid-row: 1; align-self: end; }
  .visita__horario { grid-column: 1 / -1; grid-row: 2; }
}

/* 5. The close: mustard, the dense pattern beside it, the booking button */
.fecho { display: grid; grid-template-columns: minmax(0, 1fr); }
.fecho__padrao { min-height: 96px; }
.fecho__texto { padding: var(--sp-8) max(var(--gutter), env(safe-area-inset-left, 0px)) var(--section); }
.fecho__titulo { line-height: 1; letter-spacing: var(--tr-poster); }
/* Room inside the line mask for the cedilla of «ALMOÇO», clear of the line below. */
.fecho__titulo .ln { padding-bottom: .12em; margin-bottom: -.12em; }
.fecho .lead { margin-top: var(--sp-5); }
.fecho .acoes { margin-top: var(--sp-6); }
.fecho__grupos { margin-top: var(--sp-5); font-size: var(--fs-small); line-height: var(--lh-small); }
.fecho__grupos a { font-weight: var(--fw-dish); display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
@media (min-width: 1024px) {
  .fecho { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .fecho__padrao { grid-column: 2; grid-row: 1; min-height: 0; }
  .fecho__texto { grid-column: 1; grid-row: 1; padding: var(--section) var(--sp-8) var(--section) max(var(--gutter), calc((100vw - var(--max)) / 2)); }
}

/* Mouse only */
@media (hover: hover) and (pointer: fine) {
  .abre__tel a:hover, .fecho__grupos a:hover { text-decoration-thickness: 2px; }
}