/* Mamma Donella: the two house pages, /massama and /paco-de-arcos. Owner: page-casas (run site-2026-10-09).
   Linked by montar.mjs to both pages (massama.html and paco-de-arcos.html share the same structure and classes).
   Uses the shell's tokens and components (site.css); no token is redefined here. Order of the page: the opening on
   the castanho field (house seal, name and street, phone, the main photograph in the gilded frame), the hours, how
   to get there (the map framed like the photographs), the room (the wall of frames), the closing on castanho. */

/* ---------- opening: castanho field, the seal of the house, the gilded frame ---------- */

.casa-abertura { padding-block: clamp(40px, 5vw, 88px) var(--md-s-section); }
.casa-abertura__grelha { display: grid; gap: var(--md-s-7); align-items: center; }
.casa-abertura__texto { min-width: 0; }

/* the seal of the house, cream on the castanho field (its disc is the field); the ring is a separate group
   (data-selo-gira) that motion.css turns around its own centre, which is the seal's centre */
.casa-selo { width: clamp(96px, 5.5vw + 72px, 160px); height: auto; margin-bottom: var(--md-s-6); color: var(--md-cream); overflow: visible; }

/* the H1 carries the house and its street: the street is a second, smaller line of the same title */
.casa-abertura .titulo .casa-abertura__rua { margin-top: var(--md-s-3); font-size: var(--md-t-h3); line-height: var(--md-lh-h3); letter-spacing: 0; }
/* «Estrada de Paço de Arcos, 6B» stays one line down to 326 px of screen: Gloock at its 20 px floor below 376 px */
@media (max-width: 23.5em) { .casa-abertura .titulo .casa-abertura__rua { font-size: 1.25rem; } }
.casa-abertura__desde { margin-top: var(--md-s-5); font-weight: 600; }
.casa-abertura__desde + .lead { margin-top: var(--md-s-2); }
.casa-abertura .acoes { margin-top: var(--md-s-6); }

.md-frame.casa-abertura__foto { --md-tilt: 1.1deg; width: min(100%, 36rem); justify-self: center; }

@media (min-width: 64em) {
  .casa-abertura__grelha { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--md-s-8); }
  .casa-abertura__foto { justify-self: end; }
}

/* the phone: a real link of 48 px, the number in tabular figures; cream on castanho, castanho on paper */
.casa-tel {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 48px;
  font: 600 1.25rem / 1.2 var(--md-font-text); white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
}
.casa-tel .ico { width: 1.15em; height: 1.15em; }
.casa-tel:active { opacity: 0.72; }
@media (hover: hover) and (pointer: fine) { .casa-tel:hover { text-decoration-thickness: 2px; } }

/* ---------- hours: one narrow column, the shell's table ---------- */

.casa-horario__grelha { display: grid; gap: var(--md-s-5); }
.casa-horario__cabeca { display: grid; gap: var(--md-s-4); align-content: start; }
.casa-horario__cabeca .texto { max-width: 26em; }
@media (min-width: 64em) {
  .casa-horario__grelha { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--md-s-8); align-items: start; }
}

/* ---------- how to get there: the map framed like the photographs, level, then the address and the ways ---------- */

.casa-chegar .h2 { margin-bottom: var(--md-s-6); }
/* the map hangs level (its names stay straight) with a thinner mat, so the street names keep 11 px or more */
.md-frame.casa-mapa { --md-tilt: 0deg; width: 100%; max-width: 32rem; margin-inline: 0; }
.casa-mapa .md-frame__body { padding: clamp(6px, 1.2%, 14px); }
.casa-mapa .md-frame__body img { width: 100%; }
@media (max-width: 25em) { .md-frame.casa-mapa { width: calc(100% + 16px); max-width: none; margin-inline: -8px; } }
@media (min-width: 64em) { .md-frame.casa-mapa { max-width: none; } }

.casa-chegar__info { display: grid; gap: var(--md-s-6); margin-top: var(--md-s-7); }
.casa-chegar__bloco { min-width: 0; }
.casa-chegar__bloco > .h4 { margin-bottom: var(--md-s-2); }
.casa-chegar__morada { font-style: normal; }
.casa-chegar__mapas { list-style: none; margin-top: var(--md-s-2); display: grid; }
.casa-chegar__caminhos { display: grid; gap: var(--md-s-4); align-content: start; }
.casa-chegar__linha { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--md-s-3); align-items: start; max-width: 34em; }
.casa-chegar__linha > .ico { margin-top: 0.2em; color: var(--md-action); }
.casa-chegar .casa-tel { color: var(--md-action); }
@media (min-width: 48em) {
  .casa-chegar__info { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--md-s-7); }
  .casa-chegar__caminhos { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 64em) {
  .casa-chegar__info { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); column-gap: var(--md-s-8); }
  .casa-chegar__caminhos { grid-column: 2; grid-row: 1; }
}

/* ---------- the room: the wall of frames of this house ---------- */

.casa-sala__texto { display: grid; gap: var(--md-s-4); }
.md-frame.casa-sala__f1 { --md-tilt: -0.8deg; }
.md-frame.casa-sala__f2 { --md-tilt: 1.2deg; }
.md-frame.casa-sala__f3 { --md-tilt: -1.4deg; }
.md-frame.casa-sala__f4 { --md-tilt: 0.6deg; }

/* Massamá: the group page, under the second column of frames (Paço de Arcos has it beside its chalkboard) */
.casa-grupos { display: grid; gap: var(--md-s-3); justify-items: start; max-width: 30em; }

/* the chalkboard at the Paço de Arcos door, hung under the wall on the cream (never on terracota), with its source
   and the way to the group page beside it */
.casa-giz { display: grid; gap: var(--md-s-5); justify-items: start; margin-top: var(--md-s-8); }
.casa-giz .md-board { --md-tilt: 0.9deg; width: min(100%, 26rem); }
.casa-giz .md-board__line.num { white-space: nowrap; }
.casa-giz__texto { display: grid; gap: var(--md-s-2); justify-items: start; }
.casa-giz__texto .credito { max-width: 24em; }
@media (min-width: 48em) {
  .casa-giz { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--md-s-7); align-items: end; }
}

.casa-sala__fim { margin-top: var(--md-s-8); }
.casa-sala__fim > .md-rule-dots { margin-block: 0 var(--md-s-7); }
.casa-sala__dados { display: grid; gap: var(--md-s-6); align-items: start; }
.casa-sala__redes { display: grid; gap: var(--md-s-3); max-width: 34em; }
.casa-sala__redes .ligacao { padding-block: 10px 6px; overflow-wrap: anywhere; }
/* the same columns as the wall above (site.css .md-wall, from 900 px), so the Instagram line starts under the second
   column of frames */
@media (min-width: 600px) {
  .casa-sala__dados { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--md-s-7); }
}
@media (min-width: 900px) {
  .casa-sala__dados { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--md-s-8); }
}

/* ---------- closing: castanho field ---------- */

.casa-fecho__grelha { display: grid; gap: var(--md-s-5); align-items: center; }
.casa-fecho__outra { margin-top: var(--md-s-4); padding-top: var(--md-s-5); border-top: 1px solid var(--md-rule); }
.casa-fecho__outra a { display: inline-block; padding-block: 11px; margin-block: -11px; font-weight: 600; }
@media (min-width: 64em) {
  .casa-fecho__grelha { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--md-s-8); }
  .casa-fecho__outra { grid-column: 1 / -1; }
}