/* ==========================================================================
   ¿POR QUÉ DIGART? — DIGART Studio
   Pattern: Why DIGART?

   Referencia documental:
     project/10-HOME-BLUEPRINT.md (8. ¿Por qué DIGART?)
     project/12-HOME-MOCKUP.md (3.8 ¿Por qué DIGART?)
     project/13-UI-DESIGN-SYSTEM.md (4.1 Grid, 4.2 Contenedores, 4.3
     Columnas, Capítulo 7 Iconografía)
     D-036 (evolución de la Dirección de Arte hacia un lenguaje editorial
     premium)

   Reconstrucción completa (Entregable B-010.4): reemplaza los cuatro
   bloques verticales con imagen de gran formato por un bloque editorial
   compacto (intro + cuatro principios en una sola fila con icono,
   título y descripción). Sigue consumiendo el Content Container
   (.l-container) y el Grid oficial de 12 columnas (.l-grid) ya
   resueltos en layout.css, y exclusivamente Design Tokens (tokens.css)
   para todo valor de color, tipografía, espaciado y motion.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   .why-digart no redefine .l-container. Replica el espaciado vertical
   oficial entre secciones (.l-section, layout.css 4.4) y el mismo fondo
   editorial claro de Success Stories, para que el ritmo pausado y
   reflexivo continúe sin ninguna transición perceptible entre ambas.
   -------------------------------------------------------------------- */
.why-digart {
  padding-block: var(--space-8);
  background-color: var(--color-background-subtle);
}

/* --------------------------------------------------------------------
   2. Container
   .why-digart__container delega por completo su comportamiento en
   .l-container (layout.css). .why-digart__row delega el número de
   columnas en .l-grid; únicamente centra verticalmente el bloque
   introductorio respecto a la fila de principios, sin redefinir
   columnas ni breakpoints (13.3 Consumo del Sistema).
   -------------------------------------------------------------------- */
.why-digart__row {
  align-items: center;
}

/* --------------------------------------------------------------------
   3. Elements
   -------------------------------------------------------------------- */

/* .why-digart__intro agrupa el Eyebrow, el título y el texto
   introductorio que preparan la lectura de los cuatro principios
   (Blueprint 8, "Elementos"). */
.why-digart__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Mismo nivel jerárquico Label (13.2) utilizado para las etiquetas
   narrativas de Success Stories y el bloque de contacto del Footer,
   manteniendo coherencia tipográfica entre Patterns editoriales. */
.why-digart__eyebrow {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-error);
}

.why-digart__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

/* Énfasis cromático de la iteración visual (mismo criterio ya aplicado
   en Idea Origin): utiliza el Token de rojo institucional ya existente
   (--color-error), sin introducir un nuevo valor. */
.why-digart__title-accent {
  color: var(--color-error);
}

.why-digart__support-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

/* .why-digart__list agrupa los cuatro principios fundamentales en una
   sola composición horizontal (Mockup 3.8, Dirección de arte), en
   lugar de bloques apilados verticalmente. Columnas de fracción igual:
   los cuatro principios comparten exactamente el mismo ancho. */
.why-digart__list {
  display: flex;
  gap: var(--space-6);
}

.why-digart__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Icono del Sistema de Iconografía oficial (13-UI-DESIGN-SYSTEM.md,
   Capítulo 7): SVG en línea, monocromático mediante currentColor,
   estilo lineal. El color Primary/institucional (--color-error) se
   utiliza aquí como acento estratégico, mismo criterio ya aplicado al
   resto de la iteración visual. Tamaño resuelto mediante un Token de
   espaciado existente, al no existir todavía una escala de tamaños de
   iconografía definida en Design Tokens (7.2). */
.why-digart__icon {
  width: var(--space-6);
  height: var(--space-6);
  color: var(--color-error);
  margin-block-end: var(--space-2);
}

.why-digart__item-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

.why-digart__item-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------
   4. Variants
   El Pattern no define variantes en el Mockup oficial de la Home;
   sección reservada sin reglas.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   5. States
   Sección editorial sin elementos interactivos propios; estado base
   (Default) representado por las reglas de Root, Container y Elements.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. Motion Hooks
   Activa la aparición progresiva del bloque introductorio y de los
   cuatro principios (Blueprint 8, "Interacción") mediante su
   disparador funcional real ya existente: why-digart.js aplica la
   clase .why-digart--ready sobre .why-digart tan pronto el
   IntersectionObserver detecta la sección en el viewport. El estado
   Default permanece invisible (opacity: 0) y solo se revela mediante
   el selector descendiente .why-digart--ready, sin introducir ningún
   retraso ajeno a los Motion Tokens ya definidos: el bloque
   introductorio y los cuatro principios aparecen simultáneamente, sin
   escalonamiento artificial.
   -------------------------------------------------------------------- */
.why-digart__intro,
.why-digart__item {
  opacity: 0;
  transition: opacity var(--motion-duration-slow) var(--motion-easing-standard);
}

.why-digart--ready .why-digart__intro,
.why-digart--ready .why-digart__item {
  opacity: 1;
}

/* --------------------------------------------------------------------
   7. Responsive
   Sistema Responsive (Cap. 11), breakpoint oficial de tokens.css
   reproducido en valor literal, mismo criterio que layout.css.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px
   .why-digart__list resuelve sus cuatro columnas mediante Flexbox
   (3. Elements), fuera del Grid oficial remapeado en layout.css
   (RWD-08): sin esta regla, los cuatro principios conservan su fila
   horizontal en móvil y los títulos más largos ("Acompañamos el
   crecimiento") fuerzan desbordamiento. flex-direction: column apila
   los cuatro .why-digart__item a ancho completo (align-items: stretch,
   valor por defecto de Flexbox, ya resuelve el 100% del ancho
   disponible); flex: 1 1 auto sustituye la fracción igual de columna
   (1 1 0, pensada para el eje horizontal) por altura natural de
   contenido en el nuevo eje vertical, permitiendo que título y texto
   envuelvan con normalidad. La composición horizontal de Desktop
   permanece sin cambios. */
@media (max-width: 768px) {
  .why-digart__list {
    flex-direction: column;
  }

  .why-digart__item {
    flex: 1 1 auto;
  }
}