/* =========================================================
   CLINICARE — Galeria: melhorias visuais
   Carregar DEPOIS de style.css e galeria.css.
   Fotografias inteiras (sem cortes), linhas justificadas, filtros fixos e visualizador em ecrã inteiro.
   ========================================================= */

:root { --gg: clamp(8px, 1vw, 16px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Banner: título legível sobre o fundo escuro ---------- */
.galeria-hero-content h1 span { background: linear-gradient(180deg, #8fd0ff, #3b97e6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Filtros: barra de vidro, fixa por baixo do cabeçalho ---------- */
/* O style.css põe overflow-x:hidden em html E body, o que impede o position:sticky de funcionar.
   "clip" continua a evitar o deslize lateral, mas sem criar uma área de scroll. */
html, body { overflow-x: clip; }

body .gallery-filters {
  position: sticky; top: calc(var(--hdr, 76px) + 12px); left: auto; bottom: auto; transform: none;
  margin: -48px auto 0; z-index: 900;
  width: max-content; max-width: min(98%, 1500px); padding: 12px 14px; gap: 8px;                 /* a barra ajusta-se ao conteúdo */
  flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;                   /* uma só linha (com deslize se for preciso) */
}
.gallery-filters > .filter-btn:first-child { margin-left: auto; }                     /* centradas quando cabem */
.gallery-filters > .filter-btn:last-child { margin-right: auto; }
.filter-btn { gap: .5rem; padding: .55rem .95rem; font-size: .82rem; }
@media (min-width: 1920px) {
  body .gallery-filters { gap: 10px; }
  .filter-btn { padding: .62rem 1.15rem; font-size: .9rem; }
}
/* quando as categorias não cabem, as pontas esbatem-se para indicar que a barra desliza */
@media (max-width: 1240px) {
  body .gallery-filters {
    scroll-padding-inline: 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
  }
}
.filter-btn[data-count]::after {
  content: attr(data-count); font-size: .72rem; font-weight: 700; line-height: 1;
  padding: .22rem .5rem; border-radius: 999px; background: rgba(0,0,0,.07); opacity: .75;
}
.filter-btn:hover[data-count]::after, .filter-btn.active[data-count]::after { background: rgba(255,255,255,.26); opacity: 1; }
.filter-btn:focus-visible { outline: 3px solid #0af; outline-offset: 2px; }

/* ---------- Grelha: linhas justificadas, cada fotografia inteira na sua proporção ---------- */
main .gallery-grid {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gg);
  grid-template-columns: none; grid-auto-rows: auto;
  margin: clamp(26px, 3.4vw, 48px) auto clamp(30px, 4vw, 60px); width: 100%;
  transition: opacity .2s ease;
}
main .gallery-grid.is-changing { opacity: 0; }
main .gallery-grid > .gallery-item,
main .gallery-grid > .gallery-item:nth-child(5n+1) {
  grid-column: auto; grid-row: auto; flex: 1 1 calc(25% - var(--gg)); aspect-ratio: 4 / 3; min-width: 0;   /* medidas iniciais, antes de o JavaScript calcular as linhas */
}
main .gallery-grid.gal-js > .gallery-item { flex: none; }
/* duas colunas (telemóvel): as fotografias são posicionadas pelo JavaScript */
main .gallery-grid.is-columns { display: block; position: relative; }
main .gallery-grid.is-columns > .gallery-item { position: absolute; margin: 0; }
.gallery-item.is-out { display: none !important; }

.gallery-item {
  border-radius: clamp(12px, 1.2vw, 18px); box-shadow: 0 10px 30px rgba(10,30,60,.1);
  background: linear-gradient(110deg, #e6edf3 8%, #f5f8fb 18%, #e6edf3 33%); background-size: 220% 100%;
  animation: galShimmer 1.4s linear infinite;
  transition: opacity .7s ease, transform .75s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.gallery-item.is-loaded { animation: none; background: #e9eff4; }
.gallery-item:focus-visible { outline: 3px solid #0af; outline-offset: 3px; }
@keyframes galShimmer { to { background-position: -220% 0; } }

/* entrada suave ao aparecerem no ecrã */
main .gallery-grid.gal-js > .gallery-item { opacity: 0; transform: translateY(22px) scale(.985); }
main .gallery-grid.gal-js > .gallery-item.is-in { opacity: 1; transform: none; }
main .gallery-grid.gal-js > .gallery-item.is-in:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(10,30,60,.2); }

/* fotografia: preenche a moldura (que tem a proporção da foto) e surge com um fade */
.gallery-item img { object-fit: cover; opacity: 0; transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.gallery-item.is-loaded img { opacity: 1; }
.gallery-item:hover img { transform: scale(1.045); }
.gallery-item.is-broken { display: grid; place-items: center; }

/* gradiente leve: a fotografia fica limpa e a legenda legível */
.gallery-overlay { background: linear-gradient(to top, rgba(5,15,30,.66), rgba(5,15,30,0) 46%); }
.gallery_caption { left: clamp(14px, 1.4vw, 22px); right: clamp(14px, 1.4vw, 22px); bottom: clamp(12px, 1.3vw, 20px); font-size: clamp(.84rem, .9vw, .98rem); text-shadow: 0 2px 12px rgba(0,0,0,.45); }
@media (hover: none) { .gallery-overlay, .gallery_caption { opacity: 1; } .gallery_caption { transform: none; } }

/* ---------- Visualizador (lightbox) ---------- */
.modal { background: rgba(4,9,16,.96); backdrop-filter: blur(14px); padding: clamp(10px, 2.4vw, 34px); }
/* O style.css define um .modal-content branco, com margem interior, para o modal de marcação de consultas
   (background, padding, width:100%, overflow). Aqui isola-se o visualizador pelo seu #modal para a fotografia
   aparecer sozinha, sem moldura branca. */
#modal .modal-content {
  background: transparent; padding: 0; border: 0; box-shadow: none; border-radius: 0; overflow: visible;
  width: auto; height: auto; max-width: 96vw; max-height: 92vh; animation: none;
}
#modal .modal-content img {
  max-width: 96vw; max-height: 88vh; border-radius: 14px; box-shadow: 0 30px 90px rgba(0,0,0,.55);
  transition: opacity .28s ease;
}
#modal .modal-content img.is-fading { opacity: 0; }
.modal-footer {
  left: 0; right: 0; bottom: 0; margin: 0; padding: 54px clamp(16px, 2vw, 28px) 18px; border-radius: 0 0 14px 14px;
  background: linear-gradient(to top, rgba(3,8,14,.78), rgba(3,8,14,0)); backdrop-filter: none; align-items: flex-end;
}
.modal-caption { font-size: clamp(.92rem, 1vw, 1.08rem); text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.modal-counter { font-variant-numeric: tabular-nums; }
.modal-close, .modal-nav { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.modal-close:focus-visible, .modal-nav:focus-visible { outline: 3px solid #8fd0ff; outline-offset: 3px; }
.modal-nav[hidden] { display: none; }
.modal-error { position: absolute; max-width: 80%; padding: 1rem 1.4rem; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; text-align: center; font-weight: 600; }
.modal-error[hidden] { display: none; }

/* =========================================================
   TELEMÓVEL (até 768px)
   ========================================================= */
@media (max-width: 768px) {

  /* banner: fotografia visível em cima, texto por baixo */
  body .galeria-hero {
    --gl-strip: clamp(200px, 56vw, 320px);
    display: block; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0;
    background: linear-gradient(180deg, #0a2f52 0%, #071a30 100%) !important;
  }
  .galeria-hero::before {
    content: ""; position: relative; inset: auto; display: block; height: var(--gl-strip); pointer-events: none;
    background: url("../../images/galeria/galeria-hero.webp") 74% center / cover no-repeat;
  }
  .galeria-hero .container { padding: 1.5rem 1.25rem 2rem; }
  .galeria-hero-content { max-width: none; padding: 0; animation: none; }
  .galeria-hero-content h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); margin-bottom: .9rem; color: #fff; text-shadow: none; }
  .galeria-hero-content p { max-width: none; font-size: 1rem; line-height: 1.6; text-shadow: none; }

  /* filtros: uma só linha com deslize lateral, fixa por baixo do cabeçalho */
  body .gallery-filters {
    top: var(--hdr, 64px); margin: 0; width: 100%; max-width: none; padding: 10px 12px; gap: 8px;
    border-radius: 0; border-width: 1px 0;
    background: rgba(255,255,255,.94); box-shadow: 0 8px 22px rgba(16,46,82,.12);
    scroll-snap-type: x proximity;
  }
  .filter-btn { scroll-snap-align: start; min-height: 44px; }
  main .gallery-grid { margin-top: 16px; }

  /* duas colunas: legenda numa só linha e degradê curto, para a fotografia ficar limpa */
  .gallery-overlay { background: linear-gradient(to top, rgba(5,15,30,.6), rgba(5,15,30,0) 38%); }
  .gallery_caption {
    left: 10px; right: 10px; bottom: 8px; font-size: .74rem; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item, .gallery-item img, main .gallery-grid, #modal .modal-content img { transition: none; animation: none; }
  main .gallery-grid.gal-js > .gallery-item { opacity: 1; transform: none; }
}