/* =========================================================
   CLINICARE — Página "Sabia que?": melhorias
   Carregar DEPOIS de style.css e sabia-que.css.
   ========================================================= */

/* O style.css põe overflow-x:hidden em html E body, o que impede o position:sticky.
   "clip" evita o deslize lateral sem criar uma área de scroll. */
html, body { overflow-x: clip; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Temas: barra de vidro, fixa por baixo do cabeçalho ---------- */
main .sabia-section-header { margin-bottom: clamp(26px, 3vw, 40px); }
.sabia-filters {
  position: sticky; top: calc(var(--hdr, 76px) + 10px); z-index: 900;
  display: flex; gap: 8px; width: max-content; max-width: min(100%, 1200px); margin: 0 auto clamp(28px, 3.4vw, 46px);
  padding: 10px 12px; overflow-x: auto; scrollbar-width: none; border-radius: 999px;
  background: rgba(255,255,255,.8); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.75); box-shadow: 0 14px 34px rgba(16,46,82,.14), 0 4px 12px rgba(0,0,0,.06);
}
.sabia-filters::-webkit-scrollbar { display: none; }
.sabia-filters > .sabia-chip:first-child { margin-left: auto; }          /* centrados quando cabem */
.sabia-filters > .sabia-chip:last-child { margin-right: auto; }
.sabia-chip {
  flex: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; padding: .55rem 1.05rem;
  border: 0; border-radius: 999px; background: #fff; color: #2a3a4d; cursor: pointer;
  font-family: inherit; font-size: .84rem; font-weight: 650; line-height: 1; white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0,0,0,.07); transition: background .25s, color .25s, transform .25s, box-shadow .25s, opacity .25s;
}
.sabia-chip[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: .8;
}
.sabia-chip:hover { background: #007ad6; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,122,214,.3); }
.sabia-chip.active { color: #fff; background: linear-gradient(135deg, var(--color-primary, #005eb8), #0af); box-shadow: 0 6px 20px rgba(0,122,214,.4), inset 0 1px 0 rgba(255,255,255,.3); }
.sabia-chip:hover[data-count]::after, .sabia-chip.active[data-count]::after { background: rgba(255,255,255,.26); opacity: 1; }
.sabia-chip.is-empty:not(.active) { opacity: .45; }
.sabia-chip:focus-visible { outline: 3px solid #0af; outline-offset: 2px; }
@media (max-width: 1100px) {
  .sabia-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%);
  }
}

/* ---------- Grelha: reorganiza-se com os resultados (os escondidos deixam de ocupar lugar) ---------- */
.sabia-grid { transition: opacity .2s ease; }
.sabia-grid.is-changing { opacity: 0; }
.sabia-card.is-out { display: none !important; }

/* entrada suave dos cartões */
.sabia-grid.sb-js .sabia-card { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .75s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.sabia-grid.sb-js .sabia-card.is-in { opacity: 1; transform: none; }
.sabia-grid.sb-js .sabia-card.is-in:hover { transform: translateY(-8px); }
.sabia-card-image { overflow: hidden; }
.sabia-card-image img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.sabia-card:hover .sabia-card-image img { transform: scale(1.05); }

/* destaque do termo pesquisado */
mark.sabia-mark { color: inherit; background: linear-gradient(transparent 52%, #bfe6ff 52%); padding: 0 1px; border-radius: 2px; }

/* ---------- Sem resultados ---------- */
.sabia-empty {
  display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center;
  max-width: 560px; margin: 0 auto; padding: 3rem 1.5rem; border: 1.5px dashed #c3d3e3; border-radius: 20px; background: #fff; color: #4a5a6c;
}
.sabia-empty[hidden] { display: none; }
.sabia-empty > i:first-child { font-size: 1.9rem; color: #0a7cc4; }
.sabia-empty p { margin: 0; max-width: 38ch; line-height: 1.55; }
.sabia-empty-link {
  display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.3rem; border-radius: 999px;
  background: linear-gradient(135deg, #005eb8, #087fc0); color: #fff; font-weight: 700; font-size: .92rem; text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,89,179,.2);
}
.sabia-empty-link:hover { filter: brightness(1.08); }

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

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

  /* temas: uma só linha com deslize, fixa por baixo do cabeçalho */
  .sabia-filters { top: var(--hdr, 64px); width: 100%; max-width: 100%; border-radius: 16px; padding: 8px; }
  .sabia-chip { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .sabia-grid, .sabia-grid.sb-js .sabia-card, .sabia-card-image img, .sabia-chip { transition: none; }
  .sabia-grid.sb-js .sabia-card { opacity: 1; transform: none; }
}