/* ==========================================================================
   Mister Frango - pagina de contactos
   (cabecalho de pagina partilhado esta em paginas.css)
   ========================================================================== */

/* Bloco principal em creme: o unico ponto claro da pagina, tal como no
   index. Aqui e o conteudo inteiro, nao so uma faixa, porque a pagina
   existe para uma coisa: dar a informacao para vir cá ou ligar. */

.contacto-principal{
  background:var(--creme);
  color:var(--tinta);
  padding-block:4.5rem;
}

.contacto-principal__grid{
  display:grid;
  grid-template-columns:1fr .95fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}

.contacto-principal .etiqueta{color:rgba(35,31,32,.55)}
.contacto-principal h1,
.contacto-principal h2{color:var(--tinta)}

.contacto-bloco{margin-bottom:2.75rem}
.contacto-bloco:last-child{margin-bottom:0}
.contacto-bloco h2{font-size:1.5rem;margin-bottom:1rem}

.contacto-morada{
  font-size:var(--fs-lead);
  line-height:1.55;
}
.contacto-morada strong{display:block;font-size:1.125rem;margin-bottom:.25rem}

.contacto-accoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.contacto-accoes .btn--linha{border-color:rgba(35,31,32,.3);color:var(--tinta)}
.contacto-accoes .btn--linha:hover{border-color:var(--tinta);background:rgba(35,31,32,.06)}

.lista-contacto{list-style:none;margin:0;padding:0}
.lista-contacto li{
  display:flex;justify-content:space-between;gap:1rem;
  padding-block:.9375rem;
  border-bottom:1px solid rgba(35,31,32,.14);
  font-size:.9375rem;
}
.lista-contacto li:first-child{padding-top:0}
.lista-contacto li:last-child{border-bottom:none}
.lista-contacto dt{font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:.8125rem}
.lista-contacto dd{margin:0;text-align:right;color:rgba(35,31,32,.75)}
.lista-contacto a{color:inherit;text-decoration:underline;text-decoration-color:rgba(35,31,32,.35)}
.lista-contacto a:hover{color:var(--tinta)}

.contacto-nota{
  margin-top:1.25rem;
  font-family:var(--mono);
  font-size:.8125rem;
  color:rgba(35,31,32,.55);
}

/* --- painel da fachada ------------------------------------------------------ */

.contacto-media{
  border-radius:var(--radio);
  overflow:hidden;
  background:var(--tinta);
}
.contacto-media img,
.contacto-media iframe{
  width:100%;
  aspect-ratio:4/3;
  display:block;
}
.contacto-media img{object-fit:cover}
.contacto-media iframe{border:0}

@media (max-width:56.25rem){
  .contacto-principal__grid{grid-template-columns:1fr;gap:3rem}
}