/* A casa (/casa, /en/about). Owner: page-casa. Linked after the head; reads the tokens and the site.css components
   and redefines no token. The page is the house told in its own pieces: the front with the sign, the room as a
   floor of tiles, the terrace on a band of the pattern, the kitchen in the menu’s navy box, a band from edge to edge on the computer.

   Rhythm: one --space-section between sections (not two, which stacked paddings would give), tighter inside a
   section, the band of the pattern once between the opening and the room. */

/* on the phone a block needs 48 px of visible air above its first glyph; 56 px of box gives that (the title's
   leading takes the rest), so the phone floor is 56 and the token takes over from about 430 px up */
.casa { --casa-entre: calc(var(--space-xl) + var(--space-2xs)); }
.casa > .seccao { padding-block: max(var(--casa-entre), var(--space-section)) 0; }
.casa > .casa-abertura { padding-top: var(--space-l); }
.casa-faixa { margin-top: max(var(--space-2xl), var(--space-section)); }   /* 48 px of air at the least, measured from the glyphs */

/* ---------- opening: title and lead, the front with the sign, the story of the sign ---------- */
.casa-abertura { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--casa-entre); }
/* /en/about: «Meza.Libaneza» is one word of about 7.9 em in caps; it shrinks with its column so it never breaks */
.casa-abertura-topo { container-type: inline-size; }
.casa-titulo-nome { font-size: min(var(--step-4), 12cqi); }
.casa-historia .t2 { margin-bottom: var(--space-s); }

/* ---------- the room ---------- */
.casa-sala { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--casa-entre); }
.casa-sala-texto .texto { max-width: 40ch; }   /* the column is wide for the title on one line; the sentence keeps its measure */

/* The floor as form: four square tiles in a checkerboard, two photographs and two modules of the pattern
   (brand/padroes/modulos), the ceiling on top and the floor below. The modules are the pattern's own pieces, so
   each photograph rests against a solid piece of the brand, as in fotografia.css. Navy under both modules keeps
   the panel's square edge on the cream page. */
.ladrilhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ladrilho { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--navy); }
.ladrilho > picture { display: block; height: 100%; }
.ladrilho--foto { background: var(--color-surface-alt); }   /* if a photograph fails, its alt text reads on paper, not on navy */
.ladrilho img { width: 100%; height: 100%; object-fit: cover; }
.ladrilho--flor { background: var(--navy) url("/assets/img/padroes/modulos/flor-sobre-azul.svg") center / 100% 100% no-repeat; }
/* the red ring turns towards the middle of the panel: the module mirrored, so four tiles share one centre */
.ladrilho--anel::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/img/padroes/modulos/anel-sobre-azul.svg") center / 100% 100% no-repeat;
  transform: scaleX(-1);
}

/* ---------- the terrace ---------- */
.casa-esplanada { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--casa-entre); }

/* ---------- the kitchen: the menu's navy box, a band from edge to edge on the computer (.banda, site.css);
   the dessert cut as the quarter-circle tile ---------- */
.casa > .casa-cozinha { margin-top: max(var(--casa-entre), var(--space-section)); }
.casa-cozinha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--casa-entre); }
.casa-sobremesa { width: 100%; max-width: min(440px, 84%); justify-self: end; }
/* site.css zeroes the last child's bottom margin in a .banda; the photograph needs it, or its block would hang
   out of the band onto the page */
.casa-cozinha > .casa-sobremesa { margin-bottom: var(--foto-m); }

/* ---------- at the bar, and the way on ---------- */
.casa-balcao .acoes { margin-top: var(--space-l); }
.casa-reservar { display: none; }   /* phone: «Reservar mesa» lives only in the bar at the bottom (contrato.md) */

/* The 3x2 floor of the computer has two more modules; the phone keeps the 2x2 that was approved. */
.ladrilho--largo { display: none; }

@media (min-width: 760px) {
  .casa > .casa-abertura { padding-top: var(--space-2xl); }
  .casa-abertura, .casa-sala, .casa-esplanada {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-m);
  }

  .casa-abertura { row-gap: var(--space-2xl); align-items: start; }
  .casa-abertura-topo { grid-column: 1 / span 6; grid-row: 1; }
  .casa-historia { grid-column: 1 / span 5; grid-row: 2; }
  .casa-fachada { grid-column: 7 / -1; grid-row: 1 / span 2; }

  .casa-sala { row-gap: var(--space-3xl); }
  .casa-sala-texto { grid-column: 1 / span 6; grid-row: 1; align-self: center; }
  .ladrilhos { grid-column: 7 / -1; grid-row: 1; }
  .casa-janela { grid-column: 1 / span 7; grid-row: 2; }
  .casa-sala-mais { grid-column: 8 / -1; grid-row: 2; align-self: center; }

  .casa-esplanada { align-items: center; }
  .casa-esplanada-texto { grid-column: 1 / span 5; }
  .casa-esplanada-foto { grid-column: 6 / -1; }

  .casa-cozinha { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--space-2xl); align-items: center; }
  .casa-sobremesa { max-width: 440px; }

  .casa-reservar { display: inline-flex; }
}

/* ---------- the computer (largura.md): 12 columns on the 1440 px wrap, 5/7 and 7/5 in turn, bigger photographs,
   the kitchen band from edge to edge, the terrace photograph running to the left edge of the screen ---------- */
@media (min-width: 1024px) {
  .casa {
    --casa-gap: clamp(24px, 2.4vw, 48px);    /* the column gap of .grelha in site.css */
    --casa-sangra: max(var(--space-gutter), calc((100vw - var(--wrap)) / 2));
  }
  .casa-abertura, .casa-sala, .casa-esplanada, .casa-cozinha, .casa-balcao {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--casa-gap);
  }

  /* 5 | 7: the title, the lead and the story beside the front with the sign */
  .casa-abertura { grid-template-rows: auto 1fr; }
  .casa-abertura-topo { grid-column: 1 / span 5; }
  .casa-historia { grid-column: 1 / span 5; align-self: end; }
  .casa-fachada { grid-column: 7 / -1; grid-row: 1 / span 2; }

  /* 7 | 5: the floor of tiles, three by two, beside the floor and the lamps; then 5 | 7: the counter and the
     tables beside the window, its block filling the gap between them */
  .ladrilhos { grid-column: 1 / span 7; grid-row: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ladrilho--largo { display: block; }
  .ladrilhos > :nth-child(1) { grid-area: 1 / 1; }    /* the lamps */
  .ladrilhos > :nth-child(2) { grid-area: 1 / 2; }    /* flower */
  .ladrilhos > :nth-child(3) { grid-area: 2 / 1; }    /* ring, centre on the top right corner */
  .ladrilhos > :nth-child(4) { grid-area: 2 / 2; }    /* the floor */
  .ladrilhos > :nth-child(5) { grid-area: 1 / 3; }    /* ring, centre on the bottom left corner */
  .ladrilhos > :nth-child(6) { grid-area: 2 / 3; }    /* flower */
  .ladrilhos > :nth-child(5)::before { transform: scaleY(-1); }
  .casa-sala-texto { grid-column: 8 / -1; grid-row: 1; align-self: center; }
  .casa-sala-mais { grid-column: 1 / span 5; grid-row: 2; align-self: center; }
  .casa-janela { grid-column: 6 / -1; grid-row: 2; }

  /* 7 | 5: the terrace table on its band, from the left edge of the screen */
  .casa-esplanada-foto { grid-column: 1 / span 7; grid-row: 1; margin-left: calc(-1 * var(--casa-sangra)); }
  .casa-esplanada-texto { grid-column: 8 / -1; grid-row: 1; }

  /* the band: the text on 6 columns, the dessert on the last 5 */
  .casa-cozinha { align-items: center; }
  .casa-cozinha-texto { grid-column: 1 / span 6; }
  .casa-sobremesa { grid-column: 8 / -1; max-width: none; justify-self: stretch; }

  /* the title in the margin, the text and the way on beside it: no empty half */
  .casa-balcao { align-items: start; }
  .casa-balcao > .t2 { grid-column: 1 / span 4; grid-row: 1 / span 2; }
  .casa-balcao > .texto { grid-column: 5 / span 7; grid-row: 1; }
  .casa-balcao > .acoes { grid-column: 5 / span 7; grid-row: 2; }
}