/* Encomendar (/encomendar, /en/order). Owner: page-casa. The three delivery apps as whole-row links on the navy
   field (name, the domain each one opens, the arrow in a circle like the shell's .circulo); the phone and,
   on the computer only, the booking below on cream. No tokens redefined. */

.encomendar-topo .lead { margin-top: var(--space-m); }

/* ---------- the apps ---------- */

.encomendar-lista__grelha { display: grid; row-gap: var(--space-xl); }

.plataformas { list-style: none; border-top: var(--rule) solid var(--color-rule-soft); }
.plataformas > li { border-bottom: var(--rule) solid var(--color-rule-soft); }

.plataforma {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome seta" "destino seta";
  column-gap: var(--space-m); row-gap: var(--space-3xs); align-items: center;
  min-height: 88px; padding-block: var(--space-m);
  color: inherit; text-decoration: none;
}
.plataforma__nome {
  grid-area: nome; font: var(--weight-label) var(--step-2) / var(--leading-heading) var(--font-text);
  text-decoration: underline; text-decoration-thickness: var(--rule); text-underline-offset: .18em;
  text-decoration-color: transparent; transition: text-decoration-color var(--dur-hover) ease;
}
.plataforma__destino { grid-area: destino; font-size: var(--step--1); line-height: var(--leading-ui); color: var(--color-text-muted); }
.plataforma__seta {
  grid-area: seta; display: grid; place-items: center; width: var(--button-h); height: var(--button-h);
  border: var(--rule) solid currentColor; border-radius: var(--radius-round);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.plataforma__seta .ico { width: 22px; height: 22px; }
.plataforma:active .plataforma__seta { transform: scale(.94); }
.plataforma:focus-visible { outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .plataforma:hover .plataforma__nome { text-decoration-color: currentColor; }
  .plataforma:hover .plataforma__seta { background: var(--color-action); border-color: var(--color-action); color: var(--color-action-text); }
}

.encomendar-lista__nota { margin-top: var(--space-m); max-width: 40em; }

/* from 64em the heading stands left and the list runs beside it */
@media (min-width: 64em) {
  .encomendar-lista__grelha { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: start; }
}

/* ---------- phone and booking ---------- */

.encomendar-mais__grelha { display: grid; row-gap: var(--space-xl); }
.encomendar-mais__telefone p, .encomendar-mais__sala p { max-width: 30em; }
.encomendar-mais__telefone .ligacao { margin-top: var(--space-2xs); font-size: var(--step-1); }
.encomendar-mais__sala .btn { margin-top: var(--space-s); }

@media (min-width: 64em) {
  .encomendar-mais__grelha { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: start; }
  .encomendar-mais__sala { grid-column: 2; grid-row: 1; }
  .encomendar-mais__telefone { grid-column: 1; grid-row: 1; }
}

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