/*
 * Sección: DECISIONS (pieza reutilizable — ver ADR-0006)
 * Dos paneles espejados: Voice of Customer (celeste) y Loyalty (rosa).
 * Cada panel define su color de marca en --pf-* y el resto lo hereda.
 * Contenido FIJO (mensaje de producto, no administrable). Ancla: #decisiones
 * Clases namespaceadas a mano (sin build step, ADR-0003).
 */

.decisions {
  padding-block: var(--section-y);
}

.decisions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

/* ---------- Paneles ---------- */
/* Los dos son el MISMO panel: solo cambian estas variables. El degradé va del
   color de la plataforma (arriba) al de la otra (abajo) → quedan espejados. */
.decisions__panel--voc {
  --pf-color: var(--color-primary);
  --pf-from: rgba(0, 184, 230, 0.12);
  --pf-to: rgba(229, 0, 126, 0.12);
  --pf-tint: var(--color-primary-soft); /* ECFCFF */
}

.decisions__panel--loyalty {
  --pf-color: var(--color-accent);
  --pf-from: rgba(229, 0, 126, 0.12);
  --pf-to: rgba(0, 184, 230, 0.12);
  --pf-tint: var(--color-accent-soft); /* FFEAF5 */
}

/* flex column + .features en flex:1 → las mini-cards de los DOS paneles reparten
   la misma altura sobrante. Ver el comentario de .decisions__features. */
.decisions__panel {
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-6), 2.5vw, var(--space-10));
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, var(--pf-from) 0%, var(--color-white) 45%, var(--pf-to) 100%);
}

.decisions__overline {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pf-color);
}

/*
  min-height reserva líneas FIJAS para título y descripción, así el header de los
  DOS paneles mide lo mismo aunque el copy tenga distinto largo (VoC es más
  largo). Con headers iguales, el flex:1 de .features reparte lo mismo abajo → las
  mini-cards de izquierda y derecha quedan alineadas. En em (no px) → no depende
  del font-size. Si el texto es más corto, sobra aire simétrico en ambos (alineado
  igual); si es más largo, crece (es MIN), sin truncar.
*/
.decisions__title {
  margin-top: var(--space-4);
  min-height: 3.45em; /* 3 líneas × lh-heading (1.15) */
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.decisions__desc {
  margin-top: var(--space-5);
  min-height: 6.4em; /* 4 líneas × lh-body (1.6) */
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* ---------- Mini-cards ---------- */
/*
  Las 8 mini-cards tienen que medir IGUAL, y son dos grids distintos (uno por
  panel) que no se conocen entre sí. Se resuelve en tres pasos:

  1. .decisions__grid estira los dos paneles a la misma altura (stretch, por defecto).
  2. flex:1 acá → .features ocupa toda la altura que sobra debajo del header.
     Como los headers de ambos paneles miden lo mismo, sobra lo mismo.
  3. grid-auto-rows:1fr → esa altura se reparte en dos filas iguales.

  Sin el paso 2 cada fila medía según su texto, y como el copy de VoC es más
  largo, sus cards salían más altas que las de Loyalty.
*/
.decisions__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-4);
  flex: 1;
  margin-top: var(--space-8);
}

/* sin borde: a la card la define su relleno contra el degradé del panel */
.decisions__feature {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--pf-tint);
}

.decisions__feature-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--color-ink);
}

.decisions__feature-desc {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* ---------- Responsive ---------- */
/* Laptop (1025–1280): los dos paneles siguen lado a lado, así que las mini-cards
   quedan angostas y el texto las estira a lo alto. Achico letra y padding para
   que se vean más anchas que largas. */
@media (min-width: 1025px) and (max-width: 1280px) {
  .decisions__feature {
    padding: var(--space-4);
  }
  .decisions__feature-title {
    font-size: var(--fs-small);
  }
  .decisions__feature-desc {
    font-size: var(--fs-caption);
    line-height: 1.4;
  }
}

/* Dos paneles con 2x2 adentro = 4 columnas de texto: se aprietan temprano. */
@media (max-width: 1024px) {
  .decisions__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

@media (max-width: 520px) {
  .decisions__features {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mobile: los paneles (ya apilados) van de lado a lado, sin redondeo. */
@media (max-width: 640px) {
  .decisions {
    --page-padding-x: 0;
    padding-block: 0; /* pega el panel al de arriba/abajo: sin blanco entre colores */
  }
  /* apilados, el gap del grid dejaba blanco entre Voice y Loyalty → 0 para que
     se toquen (celeste con rosa, sin blanco al medio) */
  .decisions__grid {
    gap: 0;
  }
  .decisions__panel {
    border-radius: 0;
  }
}