/* ============================================================
   TARJETAS 3 COLUMNAS - Home San Vicente Fundación
   Bloque "Tarjetas 3 Columnas" (block-content type: tarjetas-3-columnas)
   3 cards en fila, flotando sobre el slider, con esquinas
   redondeadas, separación entre ellas y botones tipo pill.
   ============================================================ */
.r-page-top {
  background-color: transparent !important;
}

.c-cards-3col {
  width: 100%;
  position: relative;
  margin-top: -120px;
  z-index: 10;
}

.c-cards-3col .container {
  max-width: 1000px !important; 
  margin: 0 auto;
  padding: 0 16px;
}

.c-cards-3col__row {
  display: flex;
  align-items: stretch;
  gap: 20px; /* separación entre cards */
}

/* ------------------------------------------------------------
   Cada card: color de fondo viene inline desde el Twig
   (style="background-color: #xxxxxx"), acá el layout + esquinas
   redondeadas + sombra sutil para reforzar el efecto flotante.
------------------------------------------------------------ */
.c-cards-3col__item {
  flex: 1 1 33.333%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 28px;
  min-height: 200px;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.c-cards-3col__title {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 24px 0;
}

/* ------------------------------------------------------------
   Contenedor de botones: apilados verticalmente cuando hay 2
------------------------------------------------------------ */
.c-cards-3col__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ------------------------------------------------------------
   Botón pill: borde + texto + flecha, todo currentColor
   (heredan el color inline del <a>, definido desde el Twig).
------------------------------------------------------------ */
.c-cards-3col__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 14px 8px 18px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background: transparent;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ------------------------------------------------------------
   Hover del botón: se rellena con su propio color (borde/texto
   original) y el texto se invierte para mantener contraste.
   Como el color viene inline desde Twig (style="color: #xxxxxx"),
   se apunta por el valor del atributo style y se usa !important
   para vencer la prioridad del inline style.
------------------------------------------------------------ */

/* Botón con texto/borde BLANCO -> hover: fondo blanco, texto oscuro */
.c-cards-3col__btn[style*="color: #ffffff"]:hover {
  background-color: #ffffff;
  color: #1a1a1a !important;
}

/* Botón con texto/borde NEGRO -> hover: fondo negro, texto blanco */
.c-cards-3col__btn[style*="color: #000000"]:hover {
  background-color: #000000;
  color: #ffffff !important;
}

/* Botón con texto/borde NEGRO SUAVE -> hover: fondo negro suave, texto blanco */
.c-cards-3col__btn[style*="color: #1a1a1a"]:hover {
  background-color: #1a1a1a;
  color: #ffffff !important;
}

/* Reset de subrayado en todos los estados del botón, por si el
   tema aplica text-decoration:underline en hover por defecto */
.c-cards-3col__btn,
.c-cards-3col__btn:hover,
.c-cards-3col__btn:focus,
.c-cards-3col__btn:active {
  text-decoration: none !important;
}

/* Reset del wrapper que Drupal agrega alrededor de cada botón
   cuando el campo tiene más de un valor (field__item), para que
   el 1er y 2do botón queden con el mismo espaciado exacto */
.c-cards-3col__buttons .field__item {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}

/* Solo en la card 3 (o cualquier card con 2 botones): ambos
   botones ocupan el mismo ancho, igualado al más ancho de los
   dos gracias al contenedor flex en columna con align-items:stretch. */
.c-cards-3col__item:nth-child(3) .c-cards-3col__buttons {
  align-items: stretch;
}

.c-cards-3col__item:nth-child(3) .c-cards-3col__btn {
  width: 100%;
}

/* Flecha: mismo color que el texto y el borde del botón (currentColor).
   SVG codificado con comillas dobles internas escapadas (%22) en vez
   de comillas simples anidadas, para evitar que el navegador falle
   al parsear la data-URI y muestre un bloque sólido en vez del ícono. */
.c-cards-3col__btn-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
}

.c-cards-3col__btn-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ------------------------------------------------------------
   Responsive: en móvil, las cards se apilan y ya no flotan
   sobre el slider (evita que el texto quede ilegible encima
   de la imagen en pantallas chicas).
------------------------------------------------------------ */
@media (max-width: 767px) {
  .c-cards-3col {
    margin-top: 0;
  }

  .c-cards-3col__row {
    flex-direction: column;
    gap: 16px;
  }

  .c-cards-3col__item {
    flex: 1 1 auto;
    padding: 28px 24px;
    min-height: auto;
    border-radius: 12px;
  }

  .c-cards-3col__title {
    font-size: 22px;
  }
}