/* Visitar (/visitar, /en/visit). Owner: page-visitar (contrato.md). Tokens and the shell's components only;
   this file adds no colour and redefines no token.
   The page: cream opening with the address and the directions, the map edge to edge on the navy transport field
   (the map's river runs into the field, the brand's wave drawn over the map's top and bottom edges), then cream
   with the façade, the hours and the practical notes. It ends on cream; the footer brings its own wave. */

/* ---------- opening: title, address, phone, directions ---------- */

.visitar-topo { padding-bottom: 0; }
.visitar-topo__grelha { display: grid; row-gap: var(--space-l); }
.visitar-topo__dados { display: grid; row-gap: var(--space-l); align-content: end; }

.visitar-morada { display: grid; row-gap: var(--space-xs); font-style: normal; }
.visitar-morada__rua { font: var(--weight-ui) var(--step-2) / 1.25 var(--font-text); }
.visitar-morada__horas { color: var(--color-text-muted); }

.visitar-tel {
  display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--tap);
  font-weight: var(--weight-label); text-decoration: underline; text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-hover) ease;
}
.visitar-tel:active { opacity: .72; }

/* phone: the two buttons share the width, one under the other when they do not fit */
.visitar-chegar .btn { flex: 1 1 15rem; }
@media (min-width: 48em) { .visitar-chegar .btn { flex: 0 0 auto; } }

@media (min-width: 70em) {
  .visitar-topo__grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-l); align-items: end; }
  .visitar-topo__titulo { grid-column: 1 / 8; }
  .visitar-topo__dados { grid-column: 8 / 13; }
  .visitar-chegar .btn { flex: 1 1 auto; }
}

/* ---------- the map (tools/NOTAS-mapa.md): edge to edge, whole, square corners, under the wave ---------- */

/* The full width of main at every width (a block, not 100vw: main already clips the scrollbar's share, so nothing
   scrolls sideways). Three maps, each at its own type size: phone below 768 px, 4:3 to 1023 px, 2:1 above.
   It sits 2 px into the navy transport field, above the field's own edge, which it hides. */
.visitar-mapa { position: relative; z-index: 2; margin-top: var(--space-xl); margin-bottom: -2px; }
.visitar-mapa__quadro img { width: 100%; height: auto; border-radius: var(--radius-photo); }
@media (min-width: 70em) { .visitar-mapa { margin-top: var(--space-2xl); } }

/* The brand's wave edge drawn over the map, so the map sits under it: at the top the cream page's edge hangs
   down into the city; at the bottom the field's edge rises over the river, its gap filled cream so the wave reads
   on the water too. Both are --wave-edge-h tall; tools/mapa.mjs keeps a band at least that deep free of names,
   stops, the pin, the scale and the attribution (`top` and `bot` per map). data-onda: motion draws them in. */
.visitar-mapa__onda {
  position: absolute; z-index: 1; left: 0; right: 0; height: var(--wave-edge-h); pointer-events: none;
  background: url("/assets/img/visitar/onda-sobre-mapa.svg?v=f2d502e9") repeat-x left bottom / auto 100%;
}
.visitar-mapa__onda--baixo { bottom: 0; }
/* the cream edge without echo, upside down: its flat side joins the page 1 px above the map, the wave hangs over
   it. Quiet on purpose (cream on the map's cream ground); the echo's gap let street ends show through as specks. */
.visitar-mapa__onda--cima {
  top: -1px; transform: scaleY(-1);
  background-image: url("/assets/img/padroes/onda-borda-creme.svg?v=a389a9bd");
}

/* ---------- by public transport: the navy field ---------- */

.visitar-transportes.campo { margin-top: 0; }
/* phone: the map overlaps the field by 2 px, so the section's 48 px became 44; 8 px more keeps it above 48 */
@media (max-width: 47.99em) {
  .visitar-transportes.campo { padding-top: calc(var(--space-section) + var(--space-2xs)); }
}
.visitar-transportes__grelha { display: grid; row-gap: var(--space-xl); }
.visitar-transportes__nota {
  display: flex; align-items: flex-start; gap: var(--space-2xs); margin-top: var(--space-s); max-width: 26em;
  font-size: var(--step--1); line-height: var(--leading-ui); color: var(--color-text-inverse-muted);
}
.visitar-transportes__perto { max-width: 40em; }

.visitar-modos, .visitar-modos__col { display: grid; row-gap: var(--space-xl); align-content: start; }
@media (min-width: 48em) {
  .visitar-modos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
  /* room for the façade, which rises through the wave 64 px into this field: a section's space stays above it */
  .visitar-transportes { padding-bottom: calc(var(--space-section) + var(--wave-edge-h) + var(--space-2xl)); }
}
@media (min-width: 70em) {
  .visitar-transportes__grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-l); }
  .visitar-transportes__topo { grid-column: 1 / 5; }
  .visitar-modos, .visitar-transportes__perto { grid-column: 5 / 13; }
}

/* the mode: a small seal (cream disc, navy icon, as the seal sits on navy) and the name; the line under it */
.visitar-modo__titulo {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-xs); align-items: center;
  font: var(--weight-label) var(--step-1) / var(--leading-ui) var(--font-text);
}
.visitar-modo__selo {
  grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius-round); background: var(--cream); color: var(--navy);
}
.visitar-modo__selo .ico { width: 22px; height: 22px; min-width: 0; min-height: 0; }
.visitar-modo__linha { font: var(--weight-text) var(--step--1) / var(--leading-ui) var(--font-text); color: var(--color-text-inverse-muted); }

/* one stop per row: the lines as the map's labels, the place, the minutes on the right */
.visitar-paragens { list-style: none; display: grid; margin-top: var(--space-s); }
.visitar-paragem {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-s); align-items: baseline;
  padding-block: var(--space-xs); border-top: var(--rule) solid var(--color-rule-soft-inverse);
}
/* with lines, the place wraps in its own column (hanging under itself, never under the labels) */
.visitar-paragem__onde:has(> .visitar-linhas) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-2xs); align-items: baseline; }
.visitar-linhas { display: inline-flex; flex-wrap: wrap; gap: 4px; }
/* narrow screens: the labels go on their own line above the place (three labels below 480 px, all below 384 px) */
@media (max-width: 29.99em) {
  .visitar-paragem__onde:has(> .visitar-linhas > .visitar-linha ~ .visitar-linha ~ .visitar-linha) { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3xs); }
}
@media (max-width: 23.99em) {
  .visitar-paragem__onde:has(> .visitar-linhas) { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3xs); }
}
.visitar-linha {
  display: inline-block; min-width: 2.9em; padding: 1px 6px; border-radius: var(--radius);
  background: var(--cream); color: var(--navy); text-align: center;
  font: var(--weight-strong) var(--step--1) / 1.35 var(--font-text); font-variant-numeric: var(--numeric);
}
.visitar-paragem__nota { display: block; margin-top: 2px; font-size: var(--step--1); line-height: var(--leading-ui); color: var(--color-text-inverse-muted); }
.visitar-paragem__tempo { white-space: nowrap; text-align: right; font-weight: var(--weight-label); font-variant-numeric: var(--numeric); }

/* ---------- cream again: the façade, the hours, the practical notes ---------- */

.visitar-casa__grelha { display: grid; row-gap: var(--space-xl); }
.visitar-casa__foto { aspect-ratio: 4 / 3; }
/* from 768 px the façade rises through the wave: its top 64 px into the navy field above (the shell's
   .foto--sobe counts from the content edge; this section has its padding on top of that) */
@media (min-width: 48em) {
  .visitar-casa .foto--sobe { margin-top: calc(-1 * (var(--space-section) + var(--wave-edge-h) + var(--space-2xl))); }
}
/* the footer brings a section of space and its own wave: the page needs less of its own here */
.visitar-casa.sec { padding-bottom: var(--space-xl); }
.visitar-casa__horario > .h2 { margin-bottom: var(--space-l); }

.visitar-saber { display: grid; margin: 0; }
.visitar-saber__item { display: grid; row-gap: var(--space-3xs); padding-block: var(--space-m); border-top: var(--rule) solid var(--color-rule-soft); }
.visitar-saber__item:first-child { padding-top: 0; border-top: 0; }
.visitar-saber dt { display: flex; align-items: center; gap: var(--space-2xs); font-weight: var(--weight-label); }
.visitar-saber dd { margin: 0; max-width: var(--measure); }
.visitar-saber dd a { font-weight: var(--weight-label); }
@media (min-width: 40em) {
  .visitar-saber__item { grid-template-columns: 12.5rem minmax(0, 1fr); column-gap: var(--space-m); align-items: baseline; }
}

/* tablet: the façade takes most of the width from the left edge */
@media (min-width: 48em) and (max-width: 69.99em) {
  .visitar-casa__foto { width: calc(72% + var(--space-gutter)); }
}
@media (min-width: 70em) {
  .visitar-casa__grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-l); row-gap: var(--space-2xl); align-items: start; }
  .visitar-casa__foto { grid-column: 1 / 7; grid-row: 1; }
  .visitar-casa__saber { grid-column: 1 / 7; grid-row: 2; }
  .visitar-casa__horario { grid-column: 8 / 13; grid-row: 1 / span 2; }
}

@media (hover: hover) and (pointer: fine) {
  .visitar-tel:hover { text-decoration-color: currentColor; }
}