/* =========================================================
   CLINICARE — Página "A Clínica": melhorias
   Carregar DEPOIS de clinica.css.
   ========================================================= */

/* ---------- Títulos: só há um <h1> (o do banner) ---------- */
.clinica-text>.clinica-eyebrow { display: block; }

/* ---------- Texto sempre alinhado à esquerda nos cartões e nas unidades (o justificado abria buracos) ---------- */
.clinica-card p, .detalhes p, .unit-card p, .unit-value { text-align: left; }

/* ---------- Vídeo: só imagem (sem som), com pausa e ecrã inteiro ---------- */
.clinica-video-controls { position: absolute; z-index: 4; right: 1.1rem; bottom: 1.1rem; display: none; gap: .6rem; }
.clinica-video.playing .clinica-video-controls { display: flex; }
.clinica-video-btn {
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(7,26,48,.62); color: #fff; font-size: 1rem; backdrop-filter: blur(6px); transition: background-color .2s;
}
.clinica-video-btn:hover { background: rgba(7,26,48,.88); }
.clinica-video-btn:focus-visible { outline: 3px solid #8fd8ff; outline-offset: 2px; }
.clinica-video-progress { position: absolute; left: 0; bottom: 0; z-index: 4; height: 4px; width: 0; background: #8fd8ff; display: none; }
.clinica-video.playing .clinica-video-progress { display: block; }
.clinica-video:fullscreen { height: 100%; border-radius: 0; background: #000; }
.clinica-video:fullscreen video { object-fit: contain; }
.clinica-video:-webkit-full-screen { height: 100%; border-radius: 0; background: #000; }
.clinica-video:-webkit-full-screen video { object-fit: contain; }

/* ---------- Faixa de números ---------- */
.cl-stats { background: linear-gradient(135deg, #0a3d63 0%, #0f5f97 100%); color: #fff; padding: clamp(2.6rem, 5vw, 3.8rem) clamp(1rem, 4vw, 3rem); }
.cl-stats-grid { max-width: 1250px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cl-stat { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: .8rem .5rem; }
.cl-stat + .cl-stat::before { content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 1px; background: rgba(255,255,255,.2); }
.cl-stat i { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: .5rem; border-radius: 50%; background: rgba(255,255,255,.1); color: #8fd8ff; font-size: 1.2rem; }
.cl-stat-number { display: inline-block; font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cl-stat-label { color: #c4e3ff; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cl-stats.cl-js .cl-stat { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.cl-stats.cl-js.is-in .cl-stat { opacity: 1; transform: none; }

/* ---------- Unidades: Ligar, Como chegar e contactos ---------- */
.unit-card { display: flex; flex-direction: column; }
.unit-body { display: flex; flex-direction: column; flex: 1; }
.unit-actions { margin-top: auto; padding-top: 1.9rem; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.unit-btn {
  display: flex; align-items: center; justify-content: center; gap: .55rem; height: 50px; border-radius: 14px;
  border: 1.5px solid #005eb8; background: #fff; color: #005eb8; font-size: .93rem; font-weight: 750; text-decoration: none;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.unit-btn:hover { background: #005eb8; color: #fff; }
.unit-btn-primary { border-color: transparent; background: linear-gradient(135deg, #005eb8, #087fc0); color: #fff; box-shadow: 0 10px 24px rgba(0,89,179,.2); }
.unit-btn-primary:hover { background: linear-gradient(135deg, #004d9a, #0670ab); }
.unit-link { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .35rem; color: #005eb8; font-size: .9rem; font-weight: 700; text-decoration: none; }
.unit-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.unit-link i { font-size: .8rem; transition: transform .2s; }
.unit-link:hover i { transform: translateX(3px); }

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

  /* ---- Banner: fotografia visível em cima, texto por baixo (sem camada escura a tapar a foto) ---- */
  /* o style.css fixa a altura de todos os banners com !important (--banner-h-*): aqui a altura passa a seguir o conteúdo */
  body .clinic-banner {
    --cl-strip: clamp(190px, 52vw, 300px);
    display: block; margin-bottom: 0;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    background: linear-gradient(180deg, #0a2f52 0%, #071a30 100%) !important;     /* a foto passa para o ::before */
  }
  .clinic-banner::before {
    content: ""; display: block; width: 100%; height: var(--cl-strip);
    background: url("../../images/banner-clinica.webp") 72% center / cover no-repeat;
  }
  .clinic-banner::after, .clinic-banner-overlay { display: none; }
  .clinic-banner-content { display: block; width: 100%; max-width: none; height: auto; padding: 1.4rem 1.25rem 2.1rem; }
  .clinic-banner-text, .clinic-banner-card { width: 100%; max-width: none; padding: 0; }
  .clinic-banner-badge { margin-bottom: .9rem; }
  .clinic-title { font-size: clamp(1.9rem, 8.4vw, 2.4rem); margin-bottom: 1rem; }
  .clinic-banner-text p, .clinic-banner-card p { font-size: .98rem; line-height: 1.55; }
  .clinic-banner-text .clinic-banner-cta { display: flex; width: 100%; min-height: 50px; margin-top: 1.4rem; font-size: .92rem; }

  /* ---- Sobre nós: texto completo com "Mais Detalhes" a sério; Missão e Visão sempre visíveis ---- */
  .clinica-text { display: flex; flex-direction: column; }
  .clinica-text>.clinica-eyebrow { order: 0; }
  .clinica-text>.clinica-heading { order: 1; }
  .clinica-text>p { order: 2; text-align: left; }
  .clinica-text:not(.is-expanded)>p:first-of-type { -webkit-line-clamp: 5; }
  .clinica-text.is-expanded>p:first-of-type { display: block; overflow: visible; -webkit-line-clamp: unset; }

  .clinica-text .detalhes, .clinica-text .detalhes.active { display: contents; animation: none; }   /* o 2.º parágrafo e os cartões passam a itens do .clinica-text */
  .clinica-text .detalhes>p { display: none; order: 3; margin: 0; text-align: left; }
  .clinica-text .detalhes.active>p { display: block; margin: 1.1rem 0 0; }
  .clinica-text .toggle-btn { order: 4; }
  .clinica-text .clinica-cards { order: 5; display: grid; grid-template-columns: 1fr; gap: .8rem; margin-top: 1.8rem; }

  /* cartões Missão / Visão compactos: ícone ao lado do texto */
  .clinica-cards .clinica-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: .95rem; align-items: start; min-height: 0; padding: 1.15rem; border-radius: 16px; }
  .clinica-cards .clinica-card-icon { grid-row: 1 / span 2; margin: 0; }
  .clinica-cards .clinica-card h3 { grid-column: 2; margin: .1rem 0 .35rem; }
  .clinica-cards .clinica-card p { grid-column: 2; font-size: .88rem; line-height: 1.55; }

  /* ---- Vídeo ---- */
  .clinica-video-btn { width: 44px; height: 44px; }
  .clinica-video-controls { right: .8rem; bottom: .8rem; }

  /* ---- Números: 2 × 2 ---- */
  .cl-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem .5rem; }
  .cl-stat + .cl-stat::before { display: none; }
  .cl-stat:nth-child(even)::after { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: rgba(255,255,255,.2); }
  .cl-stat i { width: 46px; height: 46px; font-size: 1.05rem; }
  .cl-stat-label { font-size: .72rem; }

  /* ---- Unidades ---- */
  .unit-actions { padding-top: 1.5rem; }
  .unit-btn { height: 48px; font-size: .9rem; }
}

@media (max-width: 380px) {
  .unit-btn { font-size: .85rem; gap: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-stats.cl-js .cl-stat { transition: none; }
}