/* A casa (/casa, /en/about). Owner: page-casa-contactos. Loads after tokens.css and site.css and only
   places their components: the poster title, .foto-bloco for the chef, the mustard sun behind the room
   photos (the brand's vertical treatment, with the petrol section as the block), the seal. No token is
   redefined here. */

/* Opening: the poster title and the lead, the chef in the petrol block, the chef's text */
.casa-abertura { padding-block: var(--sp-8) var(--section); }
.casa-abertura__grelha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7) var(--sp-5);
}
.casa-abertura__titulo .lead { margin-top: var(--sp-5); }
.casa-chef__foto > picture { display: block; }
.casa-chef__foto { --sol: 62%; --sol-y: -12%; --sol-x: -16%; }
.casa-chef .texto { margin-top: var(--sp-5); }
.casa-chef .ligacao { margin-top: var(--sp-4); }

@media (min-width: 768px) {
  .casa-abertura__grelha { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .casa-abertura__titulo { grid-column: 1 / -1; }
  .casa-chef__foto { grid-column: 1 / 5; }
  .casa-chef { grid-column: 5 / 9; align-self: center; }
}
@media (min-width: 1024px) {
  .casa-abertura__grelha {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    row-gap: var(--sp-8);
  }
  .casa-abertura__titulo { grid-column: 1 / 7; grid-row: 1; }
  .casa-chef { grid-column: 1 / 6; grid-row: 2; align-self: end; }
  /* The photo stays in view while the text beside it is longer than the photo (1024 to 1280 px). */
  .casa-chef__foto {
    grid-column: 7 / 13; grid-row: 1 / 3; align-self: start;
    position: sticky; top: calc(var(--cabecalho-h) + var(--sp-5));
  }
}

/* The room: a petrol section is the block, the photos are square-cornered rectangles in it and two
   mustard suns sit behind them. The columns dissolve on a phone and the order becomes text, the wall,
   then the two verticals side by side. */
.casa-sala { isolation: isolate; overflow: clip; }
.casa-sala__grelha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-4);
  align-items: start;
}
.casa-sala__coluna { display: contents; }
.casa-sala__texto { grid-column: 1 / -1; order: 1; }
.casa-sala__texto .lead { margin-top: var(--sp-5); }
.casa-sala__foto { position: relative; }
.casa-sala__foto > picture { display: block; }
.casa-sala__foto img { width: 100%; }
.casa-sala__foto--parede { grid-column: 1 / -1; order: 2; }
.casa-sala__foto--mesa { grid-column: 1 / 3; order: 3; }
.casa-sala__foto--noite { grid-column: 3 / 5; order: 4; margin-top: var(--sp-8); }
.casa-sala__foto--parede::before,
.casa-sala__foto--noite::before {
  content: ""; position: absolute; z-index: -1;
  aspect-ratio: 1; border-radius: var(--radius-circle); background: var(--mustard);
}
.casa-sala__foto--parede::before { width: 40%; top: -8%; right: -12%; }
.casa-sala__foto--noite::before { width: 74%; bottom: -14%; left: -30%; }

@media (min-width: 768px) and (max-width: 1023px) {
  .casa-sala__grelha { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--sp-5); }
  .casa-sala__texto { grid-column: 1 / 7; }
  .casa-sala__foto--parede { grid-column: 2 / 9; }
  .casa-sala__foto--mesa { grid-column: 1 / 5; }
  .casa-sala__foto--noite { grid-column: 5 / 9; margin-top: var(--sp-9); }
}
@media (min-width: 1024px) {
  .casa-sala__grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); }
  .casa-sala__coluna { display: flex; flex-direction: column; }
  .casa-sala__coluna--texto { grid-column: 1 / 6; }
  .casa-sala__coluna--fotos { grid-column: 7 / 13; }
  /* Four of the column's five tracks, pushed to its inner edge */
  .casa-sala__foto--mesa { width: calc(80% - var(--sp-5) * .2); align-self: flex-end; margin-top: var(--sp-9); }
  /* Four of six tracks, one track in */
  .casa-sala__foto--noite {
    width: calc(66.667% - var(--sp-5) / 3);
    margin: var(--sp-8) 0 0 calc(16.667% + var(--sp-5) / 6);
  }
  .casa-sala__foto--parede::before { width: 38%; top: -12%; right: -14%; }
}

/* Booking: a mustard poster with the number in it, and the seal */
.casa-reservar__grelha { display: grid; gap: var(--sp-7); align-items: center; }
.casa-reservar__titulo {
  max-width: 17ch;
  font-size: var(--fs-h2); line-height: var(--lh-title); letter-spacing: var(--tr-h2);
}
.casa-reservar__titulo a {
  white-space: nowrap;
  text-decoration-thickness: 3px; text-underline-offset: .12em;
  transition: color var(--d-hover) ease;
}
.casa-reservar .acoes { margin-top: var(--sp-6); }
.casa-reservar__selo { --selo-tam: clamp(140px, 38vw, 200px); justify-self: end; }
@media (min-width: 768px) {
  .casa-reservar__grelha { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-8); }
  .casa-reservar__selo { --selo-tam: clamp(200px, 24vw, 320px); }
}
@media (min-width: 1024px) {
  .casa-reservar__titulo { font-size: var(--fs-h1); }
}

@media (hover: hover) and (pointer: fine) {
  .casa-reservar__titulo a:hover { color: var(--action-hover); }
}