/* A casa (/casa, /en/about). Owner: page-casa. Three fields: cream with the square's photo going down
   through the wave; navy with the room going down into the cream; cream with the tray paper (the brand's
   «Every day feels like» pattern, with the house's own photo of the paper sitting across its lower edge).
   Photos follow brand/fotografia/README.md through the shell's .foto classes. No tokens redefined. */

/* ---------- the opening: title, lead, the square, the story ---------- */

.casa-topo__grelha { display: grid; row-gap: var(--space-xl); }
.casa-topo .lead { margin-top: var(--space-m); }
.casa-topo__foto img { aspect-ratio: 4 / 5; object-position: 50% 56%; }
.casa-historia { max-width: 32rem; }
.casa-historia .h2 { margin-bottom: var(--space-s); }
.casa-historia .nota { margin-top: var(--space-s); }

/* from 48em the photo stands on the right and goes down through the wave into the navy field below */
@media (min-width: 48em) {
  .casa-topo { padding-bottom: 0; }
  .casa-topo__grelha {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "abertura foto" "historia foto";
    column-gap: var(--space-xl); row-gap: var(--space-2xl);
  }
  .casa-topo__abertura { grid-area: abertura; }
  .casa-topo__foto { grid-area: foto; align-self: end; }
  .casa-historia { grid-area: historia; align-self: end; padding-bottom: var(--space-section); }
}
@media (min-width: 64em) {
  .casa-topo__grelha { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); }
}

/* ---------- the room and the square: navy field ---------- */

.casa-sala__grelha { display: grid; row-gap: var(--space-xl); }
.casa-sala__foto img { aspect-ratio: 4 / 3; }
.casa-sala__texto .h2 { margin-bottom: var(--space-s); }
.casa-sala__caes { display: flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-m); font-weight: var(--weight-ui); }

@media (min-width: 48em) {
  .casa-sala { padding-bottom: 0; }
  .casa-sala__grelha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-xl); }
  .casa-sala__foto { align-self: end; }
  .casa-sala__texto { align-self: center; padding-bottom: var(--space-section); }
}
@media (min-width: 64em) {
  .casa-sala__grelha { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); }
}

/* ---------- the tray paper: cream field ---------- */

.casa-papel__grelha { display: grid; row-gap: var(--space-2xl); }
.casa-papel__texto { max-width: 32rem; }
.casa-papel__texto .h2 { margin-bottom: var(--space-s); }
.casa-papel__texto .acoes { margin-top: var(--space-m); }

/* the pattern is a sheet of the paper; the photo of the paper under the pan sits across its lower edge */
.casa-papel__campo { position: relative; margin-inline: calc(-1 * var(--space-gutter)); }
.casa-papel__padrao { min-height: clamp(240px, 26vw + 120px, 440px); border-block: var(--rule) solid var(--color-rule); }
.casa-papel__foto { width: min(240px, 58vw); margin: calc(-1 * clamp(120px, 10vw + 80px, 210px)) 0 0 var(--space-gutter); }
.casa-papel__foto img { aspect-ratio: 4 / 5; object-position: 50% 74%; }

@media (min-width: 48em) {
  /* room for the room's photo, which comes down from the navy field above */
  .casa-papel { padding-top: calc(var(--space-section) + var(--wave-edge-h) + var(--space-2xl)); }
  .casa-papel__grelha { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: center; }
  .casa-papel__campo { margin-inline: 0 calc(-1 * max(var(--space-gutter), (100vw - var(--wrap)) / 2)); }
  .casa-papel__padrao { border-left: var(--rule) solid var(--color-rule); border-radius: var(--radius) 0 0 var(--radius); }
  .casa-papel__foto { width: clamp(220px, 12vw + 110px, 280px); margin-left: var(--space-xl); }
}

/* the footer brings its own wave and section space: the last field does not add a second one */
.casa-papel { padding-bottom: 0; }