/* ------------------------------------------------------------------
   fotoprint.pt - correccoes do site estatico
   Ver README.md, seccao "Correccoes feitas ao original".

   O layout das galerias e a lightbox das fotos com link sao feitos pelo
   proprio Elementor (os ficheiros em falta foram repostos a partir do
   backup). Aqui fica so o que o Elementor nao resolve.
   ------------------------------------------------------------------ */

/* --- Layout das galerias -------------------------------------------
   O masonry do Elementor posiciona os itens em absoluto e depende de um
   padding-bottom calculado por JS. Neste site estatico esse calculo sai
   errado: o contentor fica com 1px de altura e o rodape sobrepoe-se as
   fotos. Aqui substitui-se por um masonry em colunas CSS, que nao
   depende de medicoes: 4 colunas em computador, 2 em tablet, 1 em
   telemovel (as mesmas definicoes que estao no widget). */

.elementor-gallery__container {
  display: block !important;
  column-count: 4;
  column-gap: 10px;
  position: relative;
  height: auto !important;
  padding-bottom: 0 !important;
}

@media (max-width: 1024px) { .elementor-gallery__container { column-count: 2; } }
@media (max-width: 767px)  { .elementor-gallery__container { column-count: 1; } }

.elementor-gallery__container > .e-gallery-item {
  display: block !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 10px 0;
  overflow: hidden;
  text-decoration: none;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  transform: none !important;
  opacity: 1 !important;
}

.elementor-gallery__container > .e-gallery-item .e-gallery-image {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;            /* substituido inline pelo racio real */
  background-color: #f2f2f2;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform .35s ease;
}

.elementor-gallery__container > .e-gallery-item:hover .e-gallery-image {
  transform: scale(1.05);
}

.elementor-gallery__container > .e-gallery-item .elementor-gallery-item__overlay,
.elementor-gallery__container > .e-gallery-item .elementor-gallery-item__content {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

.elementor-gallery__container > .e-gallery-item .elementor-gallery-item__content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  pointer-events: none;
}

/* Em 14 paginas de portfolio a galeria foi criada sem link: os itens sao
   <div> e nem o Elementor nem o tema lhes dao lightbox. O fp-fixes.js
   torna-os clicaveis; isto so mostra que o sao. */
.e-gallery-item[data-fp-click] {
  cursor: pointer;
}

/* ---------------------------- lightbox ----------------------------
   Usada apenas nesses itens sem link. */

.fp-lb {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .92);
  touch-action: none;

  /* Fechada: invisivel E inerte. Sem o pointer-events a camada continua
     a ocupar o ecra todo e engole os cliques seguintes. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease;
}

.fp-lb.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fp-lb__figure {
  margin: 0;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fp-lb__img {
  max-width: 92vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.fp-lb__caption {
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  margin-top: 12px;
  text-align: center;
  max-width: 92vw;
  word-break: break-word;
}

.fp-lb__btn {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 12px;
  line-height: 1;
  opacity: .8;
  transition: opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.fp-lb__btn:hover { opacity: 1; }
.fp-lb__btn svg { display: block; width: 32px; height: 32px; fill: currentColor; }

.fp-lb__close { top: 10px; right: 12px; }
.fp-lb__prev  { left: 8px;  top: 50%; transform: translateY(-50%); }
.fp-lb__next  { right: 8px; top: 50%; transform: translateY(-50%); }

.fp-lb__counter {
  position: absolute;
  top: 18px;
  left: 18px;
  color: #fff;
  opacity: .7;
  font-size: 13px;
  letter-spacing: .04em;
}

.fp-lb__spinner {
  position: absolute;
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fp-lb-spin .8s linear infinite;
}
@keyframes fp-lb-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
  .fp-lb__btn svg { width: 26px; height: 26px; }
  .fp-lb__prev { left: 0; }
  .fp-lb__next { right: 0; }
  .fp-lb__caption { font-size: 13px; }
}

html.fp-lb-open, body.fp-lb-open { overflow: hidden; }

/* ------------------------------------------------------------------
   Espacamento lateral em ecras pequenos
   O general.css do tema Amie tem, sem media query nenhuma:
       .art-default-page-custom-wrapper .art-page-content
       { padding: 0 113px 0 113px; }
   Num telemovel de 375px isso deixa apenas 149px de conteudo util e
   esmaga tudo. Abaixo dos 1024px reduz-se. Em computador nada muda.
   ------------------------------------------------------------------ */

@media (max-width: 1024px) {
  .art-default-page-custom-wrapper .art-page-content {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 767px) {
  .art-default-page-custom-wrapper .art-page-content {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .art-default-page-custom-wrapper {
    padding-top: 90px;
    padding-bottom: 50px;
  }
}

/* ------------------------------------------------------------------
   Custo das chamadas (DL 59/2021, art. 4.o): junto de cada numero de
   telefone tem de constar o custo da chamada.
   ------------------------------------------------------------------ */

.fp-custo {
  display: inline-block;
  font-size: 0.72em;
  line-height: 1.3;
  opacity: .75;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

@media (max-width: 767px) {
  .fp-custo { display: block; }
}

/* ------------------------------------------------------------------
   Paginas legais (termos, privacidade, reclamacoes)
   ------------------------------------------------------------------ */

.fp-legal { max-width: 900px; }

.fp-legal h2 {
  margin: 2.2em 0 .7em;
  font-size: 1.25em;
  line-height: 1.3;
}

.fp-legal p, .fp-legal li { line-height: 1.75; }
.fp-legal ul { margin: 0 0 1.2em 1.2em; list-style: disc; }
.fp-legal li { margin-bottom: .4em; }
.fp-legal a { text-decoration: underline; }
.fp-legal code { font-size: .9em; word-break: break-all; }

/* tabelas com scroll proprio em ecras pequenos */
.fp-tabela {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0 1.8em;
  font-size: .92em;
}
.fp-tabela th, .fp-tabela td {
  border: 1px solid rgba(0,0,0,.14);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.fp-tabela th { background: rgba(0,0,0,.04); font-weight: 600; }

@media (max-width: 767px) {
  .fp-tabela, .fp-tabela thead, .fp-tabela tbody, .fp-tabela tr, .fp-tabela th, .fp-tabela td {
    display: block;
  }
  .fp-tabela thead { display: none; }
  .fp-tabela tr {
    border: 1px solid rgba(0,0,0,.14);
    margin-bottom: 14px;
  }
  .fp-tabela td { border: 0; border-bottom: 1px solid rgba(0,0,0,.08); }
  .fp-tabela td:last-child { border-bottom: 0; }
}

.fp-destaque {
  font-size: 1.15em;
  margin: 1.2em 0 1.6em;
}

.fp-versao {
  margin-top: 2.5em;
  font-size: .88em;
  opacity: .7;
}

/* Campos por preencher - propositadamente impossiveis de ignorar */
.fp-preencher {
  background: #ffe3e3;
  color: #a10000;
  border: 1px dashed #d33;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.fp-nota-preencher {
  background: #fff6e5;
  border-left: 4px solid #e0a000;
  padding: 12px 16px;
  margin-bottom: 2em;
  font-size: .95em;
}

/* ------------------------------------------------------------------
   Formulário de contacto (enviado por contacto-enviar.php)
   ------------------------------------------------------------------ */

/* armadilha para robos - invisivel, mas nao com display:none, que alguns
   robos detectam */
.fp-oculto {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.fp-msg {
  display: block;
  margin: 18px 0 0;
  padding: 14px 18px;
  border-left: 4px solid;
  font-size: .95em;
  line-height: 1.55;
}

.fp-msg--ok   { background: #e8f7ec; border-color: #2e9e4f; color: #14532d; }
.fp-msg--erro { background: #fdecec; border-color: #d33; color: #7f1d1d; }