/* Mamma Donella: the home page (/). Owner: page-inicio (.orchestration/site-2026-10-09/contrato.md).
   Built on the shell (tokens.css, site.css): uses the tokens and the shared components, never redefines either.
   The opening is the Massamá façade: the terracota wall, the castanho band of the sign with the cream text, and the
   gilded frame hanging on the wall. Terracota carries no text and nothing black or dark grey, on it or touching it
   (Henrique, 9 Oct 2026): the wall here holds only the castanho band and the gilded frame with castanho shadows.
   Mobile first; the two-column compositions start at 64em, where the header shows the full navigation. */

/* ---------- opening: the façade ---------- */

.abertura { background: var(--md-surface-field); }
.abertura__in { display: grid; }

/* the sign band: on a phone it runs edge to edge under the castanho header */
.abertura__faixa { padding: var(--md-s-7) var(--md-s-gutter); container-type: inline-size; }
/* three real lines that never break inside: the size follows the band's width so «e em Paço de Arcos» (8,6 em
   wide in Gloock) always fits, from 320 px to the desktop column; never above the h1 token */
.abertura__titulo { font-size: min(var(--md-t-h1), 9.6vw); font-size: min(var(--md-t-h1), 11cqi); }
.abertura__titulo .ln > span { white-space: nowrap; }
.abertura__texto { max-width: 30em; }
.abertura__acoes { margin-top: var(--md-s-6); }

/* the wall under the band, where the photograph hangs */
.abertura__parede { display: grid; justify-items: center; padding: var(--md-s-7) var(--md-s-gutter) var(--md-s-8); }
.abertura__foto { width: min(100%, 30rem); --md-tilt: -0.8deg; }

@media (min-width: 64em) {
  .abertura__in {
    max-width: var(--wrap); margin-inline: auto;
    padding: clamp(32px, 3.4vw, 56px) var(--md-s-gutter) clamp(44px, 4.6vw, 72px);
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(48px, 5.6vw, 88px); align-items: center;
  }
  /* the band hangs on the wall: castanho fundo shadow, never #232121 against terracota */
  .abertura__faixa { padding: clamp(56px, 6.2vw, 96px) clamp(40px, 4.6vw, 72px); box-shadow: var(--md-shadow-frame-wall); }
  .abertura__parede { padding: var(--md-s-5) 0; }
  .abertura__foto { width: 94%; --md-tilt: 1.1deg; }
}

/* ---------- the two houses: not two equal cards ---------- */

.casas__titulo { margin-bottom: var(--md-s-7); }
.casas__grelha { display: grid; gap: var(--md-s-8); }
.casa { display: grid; gap: var(--md-s-6); align-content: start; min-width: 0; }
.casa__foto { width: 100%; }
.casa--massama .casa__foto { --md-tilt: -1deg; }
.casa--paco .casa__foto { --md-tilt: 1.3deg; width: 90%; justify-self: end; }

.casa__corpo { display: grid; gap: var(--md-s-4); justify-items: start; max-width: 30rem; min-width: 0; }
.casa__cabeca { display: flex; align-items: center; gap: var(--md-s-4); }
.casa__selo { width: 88px; height: 88px; flex: none; }
.casa__desde { margin-top: var(--md-s-1); font-size: var(--md-t-small); line-height: var(--md-lh-small); color: var(--md-text-muted); }
.casa__texto { max-width: var(--md-measure); }

/* address, phone and hours: an icon and its value, never a line joined with «·» */
.casa__dados { list-style: none; display: grid; gap: var(--md-s-3); margin-top: var(--md-s-1); }
.casa__dados > li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: var(--md-s-3); align-items: start; }
.casa__dados > li > .ico { width: 1.25rem; height: 1.25rem; margin-top: 0.18em; color: var(--md-action); }
/* the phone keeps 44 px of target without pushing the next line down */
.casa__dados a { display: inline-block; padding-block: 10px; margin-block: -10px; font-weight: 500; }
.casa__dados .horario-curto__lista { gap: var(--md-s-1); }
.casa__dados .horario-curto__lista > div { display: flex; flex-wrap: wrap; column-gap: 0.5em; }
.casa__dados .horario-curto__lista dt::after { content: ":"; }
.casa .avaliacoes { margin-top: var(--md-s-2); }
.casa__ligacao { margin-top: var(--md-s-1); }

@media (min-width: 40em) {
  .casa__selo { width: 104px; height: 104px; }
}

@media (min-width: 48em) {
  .casas__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 7vw, 128px); align-items: start; }
  /* each house is one column, its photograph over its own seal and words (a photograph never sits beside the
     other house's text); Paço de Arcos hangs one step lower, so the two still read as a diagonal */
  .casa--paco { padding-top: clamp(56px, 8vw, 128px); }
  .casa--paco .casa__foto { width: 100%; }
}
@media (min-width: 64em) {
  .casas__grelha { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ---------- from the menu ---------- */

.carta-inicio__grelha { display: grid; gap: var(--md-s-7); grid-template-areas: "texto" "lista" "foto"; }
.carta-inicio__texto { grid-area: texto; display: grid; gap: var(--md-s-5); align-content: start; }
.carta-inicio__lista { grid-area: lista; display: grid; gap: var(--md-s-4); justify-items: start; min-width: 0; }
.carta-inicio__foto { grid-area: foto; width: min(76%, 22rem); justify-self: center; --md-tilt: 1.2deg; }
.carta-inicio__pratos { width: 100%; }

/* the dish lines (the destaques encaixe of ementa.mjs, or the fallback list): one rule between dishes, the last one
   closed, names that wrap and prices that never do */
.carta-inicio__pratos ul { list-style: none; margin: 0; padding: 0; }
.carta-inicio__pratos .md-dish { align-items: baseline; padding-block: var(--md-s-4); }
.carta-inicio__pratos .md-dish:last-child { border-bottom: 1px solid var(--md-rule); }
.carta-inicio__pratos .md-dish__name { min-width: 0; overflow-wrap: anywhere; }
/* a dish name links to its section of the menu: the whole line is the target, not the 22 px of text */
.carta-inicio__pratos .md-dish { position: relative; }
.carta-inicio__pratos .md-dish__name a { text-underline-offset: 0.22em; }
.carta-inicio__pratos .md-dish__name a::after { content: ""; position: absolute; inset: 0; }
.carta-inicio__pratos .md-dish__name a:active { opacity: 0.72; }
@media (hover: hover) and (pointer: fine) { .carta-inicio__pratos .md-dish__name a:hover { text-decoration-thickness: 2px; } }
.carta-inicio__aviso { margin-top: var(--md-s-1); }

@media (min-width: 64em) {
  .carta-inicio__grelha {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "texto lista" "foto lista";
    column-gap: clamp(56px, 7vw, 128px); row-gap: var(--md-s-8); align-items: start;
  }
  .carta-inicio__foto { width: min(88%, 22rem); justify-self: start; margin-left: var(--md-s-4); }
  .carta-inicio__lista { padding-top: var(--md-s-2); }
  .carta-inicio__pratos .md-dish__name, .carta-inicio__pratos .md-dish__price { font-size: 1.1875rem; }
}

/* ---------- the chalkboard: a real phrase of the house, on cream ---------- */

.giz-inicio { padding-bottom: 0; }
.giz-inicio__in { display: grid; justify-items: center; gap: var(--md-s-4); text-align: center; }
.giz-inicio__quadro { display: grid; justify-items: center; gap: var(--md-s-5); }
.giz-inicio .md-board { margin: 0; width: min(100%, 32rem); --md-tilt: 0.7deg; --md-tilt-phone: 0.5deg; }
.giz-inicio__fonte { max-width: 30em; }

/* ---------- the wall of frames: the one full zone of the page ---------- */

.parede__grelha { display: grid; gap: var(--md-s-7); }
.parede__cabeca { display: grid; gap: var(--md-s-5); justify-items: start; align-content: start; max-width: 34rem; }
/* on a phone the four frames hang as a small wall too: the wide one, two portraits side by side, the last one to
   the right, instead of a column of four */
@media (max-width: 899px) {
  .parede__quadros { max-width: 38rem; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--md-s-5); row-gap: var(--md-s-7); align-items: end; }
  .parede__quadros .md-wall__col { display: contents; }
  .parede__quadros .md-frame { width: auto; }
  .parede__q1 { grid-column: 1 / -1; order: 1; }
  .parede__q3 { order: 2; }
  .parede__q4 { order: 3; margin-bottom: var(--md-s-6); }
  .parede__q2 { grid-column: 1 / -1; order: 4; justify-self: end; }
  .parede__quadros .parede__q2 { width: 82%; }
}
.parede__q1 { --md-tilt: -0.9deg; }
.parede__q2 { --md-tilt: 1.1deg; }
.parede__q3 { --md-tilt: 0.6deg; }
.parede__q4 { --md-tilt: -1.3deg; }

@media (min-width: 64em) {
  .parede__grelha { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(48px, 5vw, 96px); align-items: start; }
  /* the words stay in view while the wall goes by */
  .parede__cabeca { position: sticky; top: var(--md-s-8); padding-top: var(--md-s-4); }
}

/* ---------- the close: the large seal in cream, booking, phones and groups ---------- */

.fecho { padding-block: var(--md-s-section); }
.fecho__grelha { display: grid; gap: var(--md-s-7); }
.fecho__selo { width: min(56vw, 13rem); color: var(--md-cream); }
.fecho__svg { display: block; width: 100%; height: auto; overflow: visible; fill: currentColor; }

.fecho__reservar .lead { margin-top: var(--md-s-5); }
.fecho__botao { margin-top: var(--md-s-6); }
.fecho__ligar { margin-top: var(--md-s-6); }
.fecho__pergunta { font-weight: 600; }
.fecho__tel { list-style: none; display: grid; margin-top: var(--md-s-1); }
/* one link per house: the number carries the underline, the name is its label */
.fecho__tel a { display: inline-flex; align-items: center; gap: var(--md-s-3); min-height: var(--alvo); text-decoration: none; }
.fecho__tel .num {
  text-decoration: underline; text-decoration-color: rgba(240, 233, 220, 0.45); text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  transition: text-decoration-color var(--md-dur-hover) ease;
}
.fecho__tel a:active { opacity: 0.72; }
.fecho__tel .ico { width: 1.15em; height: 1.15em; }
.fecho__casa { min-width: 8.5em; }
@media (hover: hover) and (pointer: fine) { .fecho__tel a:hover .num { text-decoration-color: currentColor; text-decoration-thickness: 2px; } }

.fecho__filete { margin-block: 0 var(--md-s-7); }
.fecho__grupos .texto { margin-top: var(--md-s-4); }
.fecho__grupos .ligacao { margin-top: var(--md-s-3); }

@media (min-width: 64em) {
  .fecho__grelha {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "selo reservar" "selo grupos";
    column-gap: clamp(56px, 7vw, 128px); row-gap: 0; align-items: start;
  }
  .fecho__selo { grid-area: selo; width: 100%; max-width: 25rem; align-self: center; justify-self: center; }
  .fecho__reservar { grid-area: reservar; }
  .fecho__grupos { grid-area: grupos; margin-top: var(--md-s-8); }
}