/* Meza.Libaneza: /contactos (/en/contact). Owner: page-visitar.
   Linked after site.css. Reads the tokens and the site.css components (.grelha, .btn, .foto, .horario) and
   redefines no token. Breakpoints follow the shell: 960 px (the 12-column .grelha), 1200 px (the big map) and
   1921 px (the map stops bleeding); 359 px for the narrowest phone. /reservar has its own reservar.css.

   Contents: one grid · the facts · getting here · widths */

/* ---------- one grid for the whole page ----------
   The blocks sit in the phone's reading order (title, facts, front door, hours, getting here, map, map links,
   transport) in one .grelha. On the phone it is one column with the approved rhythm; from 960 px the facts sit
   beside the hours (5/7), the front door beside the map, and the map runs to the right edge of the screen. */
.vis-pagina { padding-top: var(--space-xl); }
.vis-pagina > .vis-cabeca { margin-bottom: 0; }
/* a section's distance on the phone: the grid gap plus this margin is one --space-section */
.vis-pagina > .vis-horario,
.vis-pagina > .vis-chegar-titulo { margin-top: calc(var(--space-section) - var(--space-xl)); }
.vis-pagina > .vis-chegar-titulo { margin-bottom: calc(var(--space-m) - var(--space-xl)); scroll-margin-top: var(--space-m); }

/* ---------- the facts ----------
   Each starts on the brand's 2 px navy rule with its label on the same line, as the footer columns do, with
   the value larger, because on this page the facts are the content. */
.vis-cabeca { display: grid; gap: var(--space-m); justify-items: start; margin-bottom: var(--space-xl); }
.vis-dados { display: grid; gap: var(--space-l); }
.vis-dado {
  display: grid; align-content: start; justify-items: start; gap: var(--space-2xs);
  min-width: 0;
  border-top: var(--rule) solid var(--color-rule);
  padding-top: var(--space-xs);
}
.vis-rotulo {
  font-size: var(--step--1);
  font-weight: var(--weight-heading);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-3xs);
}
.vis-valor { font-size: var(--step-1); font-weight: var(--weight-label); line-height: var(--leading-ui); }
.vis-numero { font-size: var(--step-2); font-weight: var(--weight-heading); line-height: var(--leading-heading); white-space: nowrap; }
.vis-bairro { color: var(--color-text-muted); }
.vis-email { overflow-wrap: anywhere; text-decoration-color: currentColor; }
.vis-acoes { width: 100%; margin-block: var(--space-2xs); }
.vis-acoes .btn { flex: 1 1 auto; }
.vis-fachada { max-width: 480px; }

/* ---------- getting here ----------
   The map in the wide-photograph seat (the band under it). On the phone the list reads like the menu's dishes:
   the name on the left, the walking minutes where the price goes, the stop underneath, a 1 px rule between rows.
   From 960 px the five ways in become five columns, each on the 2 px rule, the icon in a navy tile as the stops
   are drawn on the map. */
.vis-mapa > picture > img { width: 100%; }
.vis-mapas { display: flex; flex-wrap: wrap; align-content: start; gap: var(--space-xs) var(--space-s); }
.vis-mapas .btn { flex: 1 1 auto; }
.vis-transportes { display: grid; border-top: var(--rule) solid var(--color-rule); }
.vis-transporte {
  display: grid;
  grid-template-columns: 1.5em minmax(0, 1fr) auto;
  grid-template-areas: "ic nome tempo" ". onde onde";
  gap: var(--space-3xs) var(--space-xs);
  padding-block: var(--space-s);
  border-bottom: var(--rule-soft) solid var(--color-rule-soft);
}
.vis-transporte > .ic { grid-area: ic; width: 1.35em; height: 1.35em; align-self: center; }
.vis-transporte-nome { grid-area: nome; font-size: var(--step-1); font-weight: var(--weight-label); line-height: var(--leading-ui); }
.vis-transporte-tempo { grid-area: tempo; align-self: center; font-weight: var(--weight-label); white-space: nowrap; }
.vis-transporte-onde { grid-area: onde; color: var(--color-text-muted); line-height: 1.5; }
.vis-perto .nota { margin-top: var(--space-s); }

/* ---------- widths ---------- */
@media (max-width: 899px) {
  .vis-mapa { max-width: 560px; }   /* the small map (4:5) below 900 px: brand/mapa.md, «Legibilidade» */
}
/* a 320 px phone: the minutes go under the name, which then never splits («Elétrico 15E») */
@media (max-width: 359px) {
  .vis-transporte { grid-template-columns: 1.5em minmax(0, 1fr); grid-template-areas: "ic nome" ". tempo" ". onde"; }
  .vis-transporte-tempo { align-self: start; }
}

/* contactos on the computer: rows 1 title · 2 facts | hours · 3 to 5 heading, front door, map links | map ·
   6 the five ways in. Row 5 takes what the map is taller than the left column, so nothing below the map links
   stretches the rows above it. */
@media (min-width: 960px) {
  .vis-pagina {
    --vis-esq: 1 / span 5;
    --vis-dir: 6 / -1;
    --vis-sangra: max(var(--space-gutter), calc((100vw - var(--wrap)) / 2));
    padding-top: var(--space-2xl);
    row-gap: var(--space-l);
    grid-template-rows: auto auto auto auto 1fr auto;
  }
  .vis-pagina > .vis-cabeca { grid-column: 1 / -1; grid-row: 1; }
  .vis-pagina > .vis-dados { grid-column: 1 / span 5; grid-row: 2; }
  .vis-pagina > .vis-horario {
    grid-column: 6 / -1; grid-row: 2; margin-top: 0;
    border-top: var(--rule) solid var(--color-rule);
    padding-top: var(--space-xs);
  }
  .vis-horario-titulo {     /* beside the facts it reads as one of them: the label on the rule */
    font-size: var(--step--1); font-weight: var(--weight-heading); line-height: var(--leading-ui);
    letter-spacing: var(--tracking-label);
    margin-bottom: var(--space-m);
  }
  .vis-horario .horario { max-width: none; }
  .vis-pagina > .vis-chegar-titulo,
  .vis-pagina > .vis-mapa { margin-top: calc(var(--space-section) - var(--space-l)); }
  .vis-pagina > .vis-chegar-titulo { grid-column: var(--vis-esq); grid-row: 3; margin-bottom: 0; }
  .vis-pagina > .vis-fachada { grid-column: var(--vis-esq); grid-row: 4; max-width: none; }
  .vis-pagina > .vis-mapas { grid-column: var(--vis-esq); grid-row: 5; }
  .vis-pagina > .vis-mapa {
    grid-column: var(--vis-dir); grid-row: 3 / span 3; align-self: start;
    margin-right: calc(-1 * var(--vis-sangra));
  }
  .vis-mapas { flex-direction: column; align-items: stretch; }
  .vis-mapas .btn { flex: none; }
  .vis-pagina > .vis-perto { grid-column: 1 / -1; grid-row: 6; margin-top: var(--space-xl); }

  .vis-transportes {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: clamp(24px, 2.4vw, 48px);
    border-top: 0;
  }
  .vis-transporte {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ic" "nome" "tempo" "onde";
    align-content: start;
    gap: var(--space-3xs);
    padding-block: var(--space-xs) 0;
    border-top: var(--rule) solid var(--color-rule);
    border-bottom: 0;
  }
  .vis-transporte > .ic {
    width: 40px; height: 40px; padding: 8px;
    background: var(--navy); color: var(--cream);
    align-self: start; margin-bottom: var(--space-xs);
  }
  .vis-transporte-tempo { align-self: start; }
  .vis-perto .nota { margin-top: var(--space-l); }
}
@media (min-width: 1200px) {    /* the big map from here: four columns for the door, eight and the bleed for the map */
  .vis-pagina { --vis-esq: 1 / span 4; --vis-dir: 5 / -1; }
}
@media (min-width: 1921px) {    /* past 1920 the page sits centred on the --wrap and the map stops at its edge */
  .vis-pagina > .vis-mapa { margin-right: 0; }
}