/**
 * @file
 * Tarjeta CTA del Slider Hero (Paragraph 'slide_hero').
 *
 * Todo lo nuevo usa el prefijo .sh-cta. Los overrides sobre clases
 * heredadas del slider van encerrados en .c-slider__item--cta para
 * no afectar al slider de Views, que comparte el mismo markup.
 *
 * El color de los botones llega como estilo inline desde el Twig, a
 * partir del hex elegido en field_sh_cta_estilos. Aca solo vive la
 * forma (relleno / borde).
 *
 * SOBRE LOS !important
 * navbar-menu-home.css define con !important:
 *   .c-slider__item-title            font-size: 50px
 *   .c-slider--interna .c-slider__item-title   font-size: 38px
 *   .c-slider__item-content--bottom  bottom / text-align
 *   .c-slider--interna .c-slider__item-content--bottom  bottom: 25%
 * Contra !important no alcanza subir especificidad, asi que las
 * propiedades que chocan se repiten con !important. Las demas van
 * limpias. Cuando se limpie ese archivo, esto se puede quitar.
 *
 * GEOMETRIA
 * El hero se imprime fuera de todo .container (ver page.html.twig),
 * asi que el texto y la tarjeta se alinean contra --hero-side, que
 * reproduce el margen de un contenedor de 1320px centrado. Las dos
 * columnas comparten ese eje: por eso quedan a la misma altura y
 * con los mismos margenes que el diseno.
 *
 * Ubicacion: css/slider-hero-cta.css
 * Se carga desde la libreria svf_theme/slider-generico.
 */

/* El slide es el bloque contenedor de todo lo que va absoluto dentro
   de el: el texto (.c-slider__item-content) y la tarjeta (.sh-cta).

   IMPRESCINDIBLE que esto viva aqui y NO en .c-slider__item--cta: sin
   position, el slide es static y el texto se ancla al track de Slick,
   que mide el ancho de todos los slides sumados. El resultado es que
   left/right y el 100% de --hero-side se calculan contra el track y el
   texto termina fuera de la pantalla. Con tarjeta funcionaba y sin
   tarjeta no, porque el position vivia en la clase de la tarjeta. */
.c-slider--interna .c-slider__item {
  position: relative;

  /* Margen lateral equivalente al contenedor de 1080px del diseno,
     con un minimo de 40px en pantallas angostas. Al ser un porcentaje,
     se resuelve contra el bloque contenedor: depende del position de
     arriba. */
  --hero-side: max(40px, calc((100% - 1080px) / 2));
}

.c-slider__item--cta {
  --sh-cta-bg: var(--svf-tinte, #f0f9f4);
  --sh-cta-fg: var(--svf-primario, #004628);
  --sh-cta-radio: 32px;
  --sh-cta-pad: 40px;
}

/* ------------------------------------------------------------------
   Tarjeta
   ------------------------------------------------------------------ */

.sh-cta {
  z-index: 2;
  box-sizing: border-box;
  padding: var(--sh-cta-pad);
  color: var(--sh-cta-fg);
  border-radius: var(--sh-cta-radio);
  background: var(--sh-cta-bg);
}

.sh-cta__title {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.sh-cta__text {
  margin: 0 0 24px;
  font-size: 1rem;
  line-height: 1.45;
}

/* Por defecto (movil) apilados y a ancho completo.
   En escritorio pasan a fila, mas abajo. */
.sh-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ------------------------------------------------------------------
   Botones

   El color lo pone el Twig como --btn-color (el hex elegido en
   field_sh_cta_estilos) y --btn-sobre-color (blanco u oscuro, segun
   la luminancia del hex). Aca solo se define la forma.

   El <a> lo renderiza Drupal dentro de .sh-cta__btn, por eso el
   estilo se aplica al descendiente y no al contenedor.
   ------------------------------------------------------------------ */

.sh-cta__btn {
  /* Respaldo por si el campo llega vacio y el Twig no puso el inline. */
  --btn-color: var(--svf-primario, #004628);
  --btn-sobre-color: #ffffff;
}

.sh-cta__btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  padding: 14px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid var(--btn-color);
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sh-cta__btn--relleno a {
  color: var(--btn-sobre-color);
  background: var(--btn-color);
}

.sh-cta__btn--borde a {
  color: var(--btn-color);
  background: #fff;
}

/* Hover: el de borde se rellena con su propio color; el relleno
   aclara sin cambiar de tono. */
.sh-cta__btn--borde a:hover,
.sh-cta__btn--borde a:focus-visible {
  color: var(--btn-sobre-color);
  background: var(--btn-color);
}

.sh-cta__btn--relleno a:hover,
.sh-cta__btn--relleno a:focus-visible {
  filter: brightness(1.2);
}

.sh-cta__btn a:focus-visible {
  outline: 2px solid var(--btn-color);
  outline-offset: 3px;
}

/* Icono de WhatsApp. Solo aparece si la URL del enlace contiene
   wa.me o whatsapp. Usa currentColor, asi que sirve con cualquier
   color sin variantes del SVG. */
.sh-cta__btn--wa a::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask: url("../img/icons/ico-whatsapp.svg") no-repeat center / contain;
  -webkit-mask: url("../img/icons/ico-whatsapp.svg") no-repeat center / contain;
}

/* ------------------------------------------------------------------
   Escritorio: texto a la izquierda, tarjeta a la derecha, ambos
   centrados verticalmente y alineados contra --hero-side.
   ------------------------------------------------------------------ */

@media (min-width: 992px) {

  /* Se anulan bottom / margin-left heredados y se ancla el bloque
     con left + right, para que el ancho salga de la diferencia y no
     haya que adivinar un porcentaje.

     Aplica a TODOS los slides de .c-slider--interna, con tarjeta o
     sin ella: el heredado los dejaba en bottom 25%, muy abajo. La
     clase --interna solo la usa este componente, asi que no toca ni
     el slider de la home ni el de Views. */
  .c-slider--interna .c-slider__item-content,
  .c-slider--interna .c-slider__item-content--bottom {
    top: 52% !important;
    bottom: auto !important;
    left: var(--hero-side) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    transform: translateY(-50%) !important;
  }

  /* Sin tarjeta el texto usa el ancho completo del slide, contra el
     mismo eje de --hero-side por ambos lados. Con tarjeta cede la
     mitad derecha para no quedar debajo de ella. */
  .c-slider--interna .c-slider__item-content,
  .c-slider--interna .c-slider__item-content--bottom {
    right: var(--hero-side) !important;
  }

  .c-slider--interna .c-slider__item--cta .c-slider__item-content,
  .c-slider--interna .c-slider__item--cta .c-slider__item-content--bottom {
    right: 45% !important;
  }

  /* El titulo pelea contra dos reglas con !important
     (.c-slider__item-title 50px y .c-slider--interna 38px). */
  .c-slider--interna .c-slider__item .c-slider__item-title {
    font-size: clamp(2.2rem, 3.7vw, 3.5rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 12px;
  }

  .c-slider--interna .c-slider__item .c-slider__item-body {
    font-size: clamp(1.05rem, 1.8vw, 1.75rem);
    line-height: 1.3;
  }

  .c-slider .c-slider__item--cta .sh-cta {
    position: absolute;
    top: 50%;
    right: var(--hero-side);
    width: min(34%, 470px);
    transform: translateY(-50%);
  }

  /* Botones uno al lado del otro, ajustados al texto. */
  .sh-cta__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .sh-cta__btn a {
    width: auto;
    padding: 13px 20px;
    font-size: 0.85rem;
  }
}

/* ------------------------------------------------------------------
   Movil y tablet: apilado.

   Se usa flujo de bloque normal, sin flex: Slick aplica
   .slick-initialized .slick-slide { display: block } y le ganaria a
   un display:flex puesto sobre una sola clase.

   El reset es exhaustivo a proposito: el contenido viene absoluto,
   con bottom y margin propios, asi que hay que devolver cada una de
   esas propiedades a su valor inicial para que se apile de verdad.
   ------------------------------------------------------------------ */

@media (max-width: 991.98px) {
  .c-slider .c-slider__item--cta.c-slider__item {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: visible;
    background-position: center center;
    background-size: cover;
  }

  /* La imagen placeholder solo existe para fijar el aspect-ratio.
     Con la tarjeta apilada el alto lo manda el contenido. */
  .c-slider .c-slider__item--cta .c-slider__item-img {
    display: none;
  }

  .c-slider--interna .c-slider__item--cta .c-slider__item-content,
  .c-slider--interna .c-slider__item--cta .c-slider__item-content--bottom {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto;
    min-height: 0;
    margin: 0 !important;
    /* Deja pasar la barra movil, que sigue siendo absoluta. */
    padding: 104px 20px 24px !important;
    transform: none !important;
  }

  .c-slider--interna .c-slider__item .c-slider__item-title {
    display: block;
    margin-bottom: 10px;
    font-size: clamp(1.75rem, 7vw, 2.4rem) !important;
    line-height: 1.12 !important;
  }

  .c-slider--interna .c-slider__item--cta .c-slider__item-body {
    display: block;
    font-size: 1rem;
    line-height: 1.4;
  }

  .c-slider .c-slider__item--cta .sh-cta {
    --sh-cta-pad: 28px 24px;
    --sh-cta-radio: 28px;
    position: static;
    width: auto;
    margin: 0 20px 32px;
    transform: none;
  }

  .sh-cta__title {
    font-size: 1.6rem;
  }

  .sh-cta__text {
    margin-bottom: 20px;
    font-size: 0.85rem;
  }

  .sh-cta__btn a {
    padding: 13px 20px;
    font-size: 0.88rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-cta__btn a {
    transition: none;
  }
}

/* ==========================================================================
   Slider Hero con tarjeta CTA — el texto no pasa por debajo de la tarjeta
   (≥1087px). El límite derecho del texto se mide contra el eje de 1080px,
   igual que la tarjeta, en vez de un porcentaje de la pantalla.
   ========================================================================== */
@media (min-width: 1087px) {
  .c-slider--interna {
    /* Espacio que se reserva a la derecha del eje: tarjeta + separación.
       540px = la mitad del eje de 1080. */
    --sh-reserva-cta: 540px !important;
  }

  .c-slider--interna .c-slider__item.c-slider__item--cta .c-slider__item-content {
    right: max(45%, calc(var(--hero-side) + var(--sh-reserva-cta))) !important;
  }
}

/* ==========================================================================
   Slider Hero en móvil — todos los slides con la misma altura (≤991.98px).
   La altura ya no la da la imagen de relleno ni el contenido de cada slide:
   parten de un mínimo común y la pista los estira al más alto.
   ========================================================================== */
@media (max-width: 991.98px) {
  .c-slider--interna {
    /* Alto mínimo de todas las fotos en móvil. */
    --sh-alto-movil: 440px;
  }

  /* La pista reparte el mismo alto a todos los slides (clones incluidos). */
  .c-slider--interna .slick-track {
    display: flex;
    align-items: stretch;
  }

  .c-slider--interna .c-slider__item.slick-slide {
    height: auto;
    min-height: var(--sh-alto-movil);
  }

  /* La imagen de relleno solo servía para dar alto: ya no hace falta. */
  .c-slider--interna .c-slider__item .c-slider__item-img {
    display: none;
  }
}