/* =========================================================
   CLINICARE — Banner do carrossel em ecrãs pequenos (até 767px)
   Carregar DEPOIS de home.css. Em computador e tablet largo nada muda.

   Ideia: a fotografia do slide aparece inteira em cima, sem camada escura,
   e o texto e os botões ficam por baixo, sobre fundo azul-marinho.
   As setas e os pontos ficam sobre a fotografia.
   ========================================================= */

@media (max-width: 767px) {

  #mainCarousel {
    --cm-bg: #071a30;                          /* fundo da zona de texto */
    --cm-strip: clamp(190px, 52vw, 300px);     /* altura da fotografia */
    --cm-zone: 25rem;                          /* altura da zona de texto (o carousel-mobile.js ajusta ao texto mais longo) */
  }

  /* ---- Estrutura: fotografia em cima, texto por baixo ---- */
  #mainCarousel .carousel-inner {
    padding-bottom: var(--cm-zone) !important;
    background: linear-gradient(180deg, #0a2540 0%, var(--cm-bg) 100%);
  }
  #mainCarousel .carousel-item {
    height: var(--cm-strip) !important;
    min-height: var(--cm-strip) !important;
    max-height: var(--cm-strip) !important;
    background-position: 72% center !important;
  }
  #mainCarousel .banner-overlay { display: none !important; }           /* sem camada escura sobre a foto */
  #mainCarousel .banner-content {
    position: static !important; width: 100% !important; max-width: none !important;
    height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  }

  /* ---- Zona de texto (por baixo da fotografia) ---- */
  #mainCarousel .banner-text {
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    width: auto !important; max-width: none !important; height: var(--cm-zone) !important;
    transform: none !important; box-sizing: border-box !important;
    margin: 0 !important; padding: 1.4rem 1.25rem 1.5rem !important;
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; justify-content: flex-start !important;
    gap: .7rem !important; text-align: left !important;
  }
  #mainCarousel .banner-overline {
    margin: 0 !important; font-size: .76rem !important; letter-spacing: .16em !important; line-height: 1.3 !important;
  }
  #mainCarousel .banner-text h1,
  #mainCarousel .banner-text h2 {
    margin: 0 !important; font-size: clamp(1.45rem, 6.4vw, 1.85rem) !important; line-height: 1.15 !important; text-shadow: none !important;
  }
  #mainCarousel .banner-text p {
    margin: 0 !important; max-width: none !important; font-size: .95rem !important; line-height: 1.5 !important;
    color: rgba(255,255,255,.86) !important; text-shadow: none !important;
  }

  /* ---- Botões: lado a lado, sempre no fundo da zona de texto ---- */
  #mainCarousel .banner-actions {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    gap: .6rem !important; width: 100% !important; margin-top: auto !important;
  }
  #mainCarousel .banner-actions .btn-primary,
  #mainCarousel .banner-actions .btn-dark {
    flex: 1 1 0 !important; min-width: 0; height: 46px !important; padding: 0 .7rem !important;
    gap: .45rem !important; font-size: .82rem !important;
  }
  #mainCarousel .banner-actions .btn-dark .fa-arrow-right { display: none; }

  /* ---- Setas e pontos: sobre a fotografia (pontos à esquerda, setas à direita) ---- */
  #mainCarousel .carousel-bottom-nav {
    left: 0 !important; right: 0 !important; bottom: auto !important;
    top: calc(var(--cm-strip) - 4rem); height: 4rem;
    display: flex; align-items: flex-end; justify-content: flex-start; gap: .55rem;
    padding: 0 1rem .8rem;
    background: linear-gradient(to top, rgba(3,9,20,.72), rgba(3,9,20,0));
  }
  #mainCarousel .carousel-indicators { order: 0; margin-right: auto !important; gap: 6px; align-items: center; }
  #mainCarousel .carousel-control-prev { order: 1; }
  #mainCarousel .carousel-control-next { order: 2; }
  #mainCarousel .carousel-indicators button {
    position: relative; width: 8px !important; height: 8px !important; padding: 0;
    background: rgba(255,255,255,.55) !important;
  }
  #mainCarousel .carousel-indicators button::before { content: ""; position: absolute; inset: -12px -3px; }   /* área de toque maior */
  #mainCarousel .carousel-indicators button.active { width: 24px !important; background: #fff !important; }
  #mainCarousel .custom-control {
    position: static; width: 38px !important; height: 38px !important;
    background: rgba(7,26,48,.55) !important; border: 1px solid rgba(255,255,255,.4) !important;
    backdrop-filter: blur(6px);
  }
  #mainCarousel .custom-arrow { font-size: 1.05rem; }
  #mainCarousel .carousel-progress { height: 3px; }
}

/* Ecrãs muito estreitos: botões só com texto, para caberem inteiros */
@media (max-width: 380px) {
  #mainCarousel .banner-actions .btn-primary i,
  #mainCarousel .banner-actions .btn-dark i { display: none; }
  #mainCarousel .banner-actions .btn-primary,
  #mainCarousel .banner-actions .btn-dark { font-size: .76rem !important; padding: 0 .5rem !important; }
  #mainCarousel .banner-text { padding-inline: 1rem !important; }
}