/* Contactos (/contactos, /en/contact). Owner: page-casa-contactos. Loads after tokens.css and site.css;
   places their components (poster title, the hours component, .btn, .ligacao, .faixa) and adds the
   petrol band of contact details and the map in the brand's block. No token is redefined here. */

/* Opening: the title in two real lines and the lead */
.contactos-abertura { padding-block: var(--sp-8); }
.contactos-abertura__grelha { display: grid; gap: var(--sp-5); }
@media (min-width: 1024px) {
  .contactos-abertura__grelha {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5);
    align-items: end;
  }
  .contactos-abertura h1 { grid-column: 1 / 8; }
  .contactos-abertura .lead { grid-column: 8 / 13; padding-bottom: .4em; }
}

/* The petrol band: phone, address, email, booking and social, label over value, rules on one line */
.meios { padding-block: var(--sp-8); }
.meios__grelha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6) var(--sp-5); }
.meio {
  display: grid; align-content: start; justify-items: start; gap: var(--sp-3);
  padding-top: var(--sp-5); border-top: 1px solid var(--trilho);
}
.meio--telefone { border-top: 0; padding-top: 0; container-type: inline-size; }
.meio__telefone {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.75rem, 24cqi, 7.5rem); line-height: .9; letter-spacing: .02em;
  white-space: nowrap; color: var(--text-heading);
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em;
  text-decoration-color: rgb(207 210 200 / .45);
  transition: text-decoration-color var(--d-hover) ease;
}
/* The English number carries +351: five more characters in the same column. */
:lang(en) .meio__telefone { font-size: clamp(2.5rem, 17cqi, 6.5rem); }
.meio__valor { font-size: var(--fs-lead); line-height: 1.35; font-weight: var(--fw-dish); }
.meio__email {
  font-size: var(--fs-body); font-weight: var(--fw-dish); overflow-wrap: anywhere;
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration-color: rgb(207 210 200 / .5);
  transition: color var(--d-hover) ease, text-decoration-color var(--d-hover) ease;
}
.meio--reservar p { max-width: 42ch; }
.meio--reservar .btn { margin-top: var(--sp-2); }
.meio__redes { display: grid; }
.meio__redes a {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  text-decoration-color: rgb(207 210 200 / .5);
  transition: color var(--d-hover) ease, text-decoration-color var(--d-hover) ease;
}
@media (min-width: 768px) {
  .meios__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-7); }
  .meio--morada { border-top: 0; padding-top: 0; }
  .meio--reservar { grid-column: 1 / -1; grid-row: 3; }
}
@media (min-width: 1280px) {
  .meios__grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .meio--telefone { grid-column: 1 / 6; }
  .meio--morada { grid-column: 6 / 9; }
  .meio--email { grid-column: 9 / 13; border-top: 0; padding-top: 0; }
  .meio--reservar {
    grid-column: 1 / 9; grid-row: 2;
    grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-6); align-items: center;
  }
  .meio--reservar .btn { margin-top: 0; }
  .meio--redes { grid-column: 9 / 13; grid-row: 2; }
}

/* Hours: the shell's component, full width */
.contactos-horario .h2 { margin-bottom: var(--sp-6); }

/* Getting here: the map in a petrol block with a mustard sun peeking behind it, the ways to arrive */
.chegar__grelha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6) var(--sp-5); }
.mapa-bloco {
  position: relative; isolation: isolate; overflow: clip;
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--sp-8) var(--gutter) var(--gutter);
  background: var(--petrol);
}
.mapa-bloco::before {
  content: ""; position: absolute; z-index: -1;
  width: 46%; aspect-ratio: 1; top: -16%; right: -10%;
  border-radius: var(--radius-circle); background: var(--mustard);
}
.mapa-bloco__mapa { display: block; }
.mapa-bloco__mapa img { display: block; width: 100%; height: auto; background: var(--cream); }
.chegar { display: grid; gap: var(--sp-6); justify-items: start; }
.chegar__lista { display: grid; gap: var(--sp-5); }
.chegar__item { position: relative; min-height: 44px; padding-left: calc(44px + var(--sp-4)); }
.chegar__icone {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius-circle); background: var(--petrol); color: var(--cream);
}
.chegar__icone .ico { width: 22px; height: 22px; }
.chegar__item dt {
  display: flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-size: var(--fs-label); line-height: var(--lh-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--label);
}
.chegar__item dd { margin: 0; }
.chegar__item dd + dd { margin-top: var(--sp-3); }
.chegar__paragem { display: block; font-weight: var(--fw-dish); }
.chegar__distancia { display: block; color: var(--text-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
@media (min-width: 768px) {
  .chegar__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
}
@media (min-width: 1200px) {
  .chegar__grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .chegar__titulo { grid-column: 1 / -1; }
  .mapa-bloco { grid-column: 1 / 10; align-self: start; margin-inline: 0; padding: var(--sp-8) var(--sp-6) var(--sp-6); }
  .chegar { grid-column: 10 / 13; align-self: end; }
  .chegar__lista { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); }
}

@media (hover: hover) and (pointer: fine) {
  .meio__telefone:hover { text-decoration-color: currentColor; }
  .meio__email:hover, .meio__redes a:hover { color: var(--mustard); text-decoration-color: currentColor; }
}