/**
 * Widget Pilares — Buses JPS
 *
 * Rejilla de tarjetas con distintivo (número correlativo o icono), título y
 * descripción. Por defecto usa "rejilla continua": las tarjetas comparten el
 * fondo y se separan con líneas de 1px, igual que la maqueta aprobada.
 * La variante --cards las separa en tarjetas independientes.
 */

.jps-pillars {
  --jps-pillars-badge-bg: var(--jps-ink, #16242b);
  --jps-pillars-badge-color: var(--jps-amber, #f2a93b);
  --jps-pillars-badge-size: 44px;
  --jps-pillars-badge-radius: 2px;
  --jps-pillars-card-bg: var(--jps-paper, #f6f4ee);
  --jps-pillars-line: var(--jps-line, rgba(22, 36, 43, .14));

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--jps-pillars-line);
  border: 1px solid var(--jps-pillars-line);
}

.jps-pillars__card {
  display: flex;
  flex-direction: column;
  padding: 32px 26px;
  background: var(--jps-pillars-card-bg);
}

/* --- Distintivo: número correlativo o icono --- */
.jps-pillars__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--jps-pillars-badge-size);
  height: var(--jps-pillars-badge-size);
  margin-bottom: 20px;
  background: var(--jps-pillars-badge-bg);
  color: var(--jps-pillars-badge-color);
  border-radius: var(--jps-pillars-badge-radius);
  font-family: var(--jps-font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}

/* Sirve tanto para los SVG del tema como para los de la biblioteca de
   Elementor (SVG inline o icono tipográfico <i>). */
.jps-pillars__badge svg {
  width: 55%;
  height: 55%;
}

.jps-pillars__badge i {
  font-size: calc(var(--jps-pillars-badge-size) * .48);
  line-height: 1;
}

/* Variante sin pastilla: el icono suelto, con el color de acento. */
.jps-pillars--badge-plain .jps-pillars__badge {
  width: auto;
  height: auto;
  background: none;
  color: var(--jps-pillars-badge-bg);
}

.jps-pillars--badge-plain .jps-pillars__badge svg {
  width: var(--jps-pillars-badge-size);
  height: var(--jps-pillars-badge-size);
}

.jps-pillars--badge-plain .jps-pillars__badge i {
  font-size: var(--jps-pillars-badge-size);
}

/* --- Textos --- */
.jps-pillars__title {
  margin: 0 0 10px;
  font-family: var(--jps-font-body, sans-serif);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  color: var(--jps-ink, #16242b);
}

.jps-pillars__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--jps-muted, rgba(22, 36, 43, .72));
}

/* --- Variante: tarjetas separadas --- */
.jps-pillars--cards {
  gap: 16px;
  background: transparent;
  border: 0;
}

/* En tarjetas separadas el fondo por defecto es el blanco cálido, pero se
   cambia la VARIABLE, no la propiedad: si se fijara aquí 'background' ganaría
   por especificidad al color que define el control de Elementor. */
.jps-pillars--cards {
  --jps-pillars-card-bg: var(--jps-white, #fffdf9);
}

.jps-pillars--cards .jps-pillars__card {
  border: 1px solid var(--jps-pillars-line);
  border-radius: var(--jps-radius, 4px);
  transition: transform .2s ease, box-shadow .2s ease;
}

.jps-pillars--cards .jps-pillars__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--jps-shadow, 0 20px 30px -18px rgba(22, 36, 43, .3));
}

/* --- Responsive --- */
@media (max-width: 760px) {
  .jps-pillars {
    grid-template-columns: 1fr;
  }

  .jps-pillars__card {
    padding: 26px 22px;
  }
}