/* ─────────────────────────────────────────────────────────
   Card Solution module (Teldat New Home)
   Marcado idéntico al bloque .solution-card del diseño de
   referencia (newhome/home-base.html). Los colores se han
   mantenido literales para reducir dependencias.
   ───────────────────────────────────────────────────────── */

/* ── Wrapper de rejilla para varias cards hermanas ──
   Solo se activa cuando pones <div class="solutions-grid">
   dentro de un [et_pb_code]. Breakpoints:
     > 1280px : 5 en fila
     ≤ 1280px : 3 + 2 centrado (laptops medianas)
     ≤  900px : 2 + 2 + 1 centrado (tablet)
     ≤  560px : 1 columna
   Fondo degradado de la sección incluido. */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0 auto;
  justify-content: center;
}

.solutions-grid > .et_pb_module { width: 100%; margin: 0 !important; }

@media (max-width: 1280px) {
  .solutions-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .solutions-grid > .et_pb_module { grid-column: span 2; }
  .solutions-grid > .et_pb_module:nth-child(4) { grid-column: 2 / span 2; }
  .solutions-grid > .et_pb_module:nth-child(5) { grid-column: 4 / span 2; }
}

@media (max-width: 900px) {
  .solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .solutions-grid > .et_pb_module,
  .solutions-grid > .et_pb_module:nth-child(4),
  .solutions-grid > .et_pb_module:nth-child(5) { grid-column: auto; }
  .solutions-grid > .et_pb_module:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: calc(50% - 7px);
  }
}

@media (max-width: 560px) {
  .solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .solutions-grid > .et_pb_module {
    grid-column: auto;
    max-width: none;
  }
  /* Si hay 5 cards (impar), la 5ª ocupa toda la fila para no quedar huérfana. */
  .solutions-grid > .et_pb_module:nth-child(5):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: calc(50% - 5px);
  }
}

/* ── Layout responsive cuando las cards viven en columnas Divi nativas ──
   La New Home usa un et_pb_row de 5 columnas et_pb_column_1_5 con un
   card_solution dentro de cada columna (no .solutions-grid wrapper).
   Convertimos el row Divi en un grid auto-fit con cards de 260px:
   las cards caben tantas como permita el viewport y las que no caben
   bajan a la siguiente fila, manteniendo simetría 1:1 + centradas.

   Clases:
   - `.cs-row-grid`  → la añade `card-solution-row.js` al et_pb_row que
     contiene cards solution. Necesaria porque selectores como
     `body #page-container .et-db #et-boc .et-l .et_pb_row_N.et_pb_row`
     tienen tanta especificidad que :has() solo no gana. */
body #page-container .et_pb_row.cs-row-grid,
.et_pb_row.cs-row-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, 260px) !important;
  gap: 20px !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Anular los pseudo-elementos clearfix de Divi (.et_pb_row::before/::after
   con content:"" + display:table) — en CSS Grid los pseudos pueden ocupar
   una celda y mover los items reales. */
body #page-container .et_pb_row.cs-row-grid::before,
body #page-container .et_pb_row.cs-row-grid::after,
.et_pb_row.cs-row-grid::before,
.et_pb_row.cs-row-grid::after {
  display: none !important;
  content: none !important;
}

body #page-container .et_pb_row.cs-row-grid > .et_pb_column,
.et_pb_row.cs-row-grid > .et_pb_column {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Mobile (≤600px): 2 cards por fila con anchos más estrechos y menos gap.
   Pasamos de auto-fit con cards de 260px a un grid fijo de 2 columnas que
   ocupan el ancho del row, manteniendo el aspect-ratio 1/1 cuadrado. */
@media (max-width: 600px) {
  body #page-container .et_pb_row.cs-row-grid,
  .et_pb_row.cs-row-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Si hay un nº impar de cards, la última ocupa toda la fila centrada a
     media columna para no quedar como una tarjeta gigante a un lado. */
  body #page-container .et_pb_row.cs-row-grid > .et_pb_column:nth-child(odd):last-child,
  .et_pb_row.cs-row-grid > .et_pb_column:nth-child(odd):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 6px) !important;
  }

  /* Reducir espaciados internos y tamaño del icono para que título +
     icono + descripción quepan dentro del cuadrado en mobile. */
  .solution-card {
    padding: 16px 12px !important;
    gap: 8px !important;
  }
  .solution-card__title {
    font-size: 0.95rem !important;
    margin-bottom: 4px !important;
  }
  .solution-card__icon {
    width: 56px !important;
    height: 56px !important;
  }
  .solution-card__icon svg {
    width: 100% !important;
    height: 100% !important;
  }
  .solution-card__desc {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
}

/* Divi envuelve [et_pb_code] en .et_pb_code_inner con padding; lo neutralizamos
   solo si el code contiene nuestro wrapper de grid. */
.et_pb_code_inner:has(> .solutions-grid) { padding: 0 !important; }

/* Fallback para navegadores sin :has() — aplica a cualquier code que lleve
   el wrapper como único hijo (seguro en la práctica). */
.et_pb_code:has(.solutions-grid),
.et_pb_code:has(.solutions-grid) .et_pb_code_inner { padding: 0 !important; }

/* Fondo de sección de Soluciones (aplicable envolviendo la section con la
   clase .solutions-bg en "CSS Class" del et_pb_section). Copia literal del
   gradiente del diseño de referencia. */



.solution-card {
  background: var(--cs-bg, rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--cs-border, 1px solid rgba(186, 161, 255, 0.2));
  border-radius: var(--cs-radius, 20px);
  padding: 28px 22px;
  gap: 14px;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: inherit;
  box-shadow: 0 4px 24px rgba(50, 36, 74, 0.06);
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  justify-content: center;
}

/* Overrides hover y color de textos via CSS vars del propio elemento.
   Las variables se inyectan inline en el <a> desde el render PHP — así
   evitamos el <style> duplicado por cada card en el HTML. */
.solution-card:hover {
  background: var(--cs-bg-hover, var(--cs-bg, rgba(255, 255, 255, 0.95)));
  border-color: var(--cs-border-color-hover);
}
.solution-card .solution-card__title { color: var(--cs-title, inherit); }
.solution-card:hover .solution-card__title { color: var(--cs-title-hover, var(--cs-title, inherit)); }
.solution-card .solution-card__desc { color: var(--cs-desc, inherit); }
.solution-card:hover .solution-card__desc { color: var(--cs-desc-hover, var(--cs-desc, inherit)); }


.solution-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(186, 161, 255, 0.4), rgba(71, 153, 212, 0.2), rgba(186, 161, 255, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.solution-card:hover::before { opacity: 0.6; }

.solution-card:hover {
  transform: translateY(-4px);
  border-color: #9F8CC1;
  box-shadow: 0 8px 24px rgba(50, 36, 74, 0.1);
}

.solution-card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #32244a;
  margin-bottom: 20px;
  transition: color 0.3s ease;
  text-decoration: none;
  order: 1;
  line-height: 1.3;
}


.solution-card__icon {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.35s ease;
  order: 2;
}

.solution-card:hover .solution-card__icon { transform: scale(1.05); }

.solution-card__icon svg {
  width: 88px;
  height: 88px;
}

.solution-card__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #6b6280;
  order: 3;
}