/* ==========================================================================
   CALL TO ACTION — DIGART Studio
   Pattern: Call To Action

   Referencia documental:
     project/10-HOME-BLUEPRINT.md (9. Call To Action)
     project/11-HOME-WIREFRAME.md (9. Call To Action)
     project/12-HOME-MOCKUP.md (3.9 Call To Action)
     project/13-UI-DESIGN-SYSTEM.md (4.1 Grid, 4.2 Contenedores, 5.4
     Jerarquía, Capítulo 9 Estados, Capítulo 10 Motion, Capítulo 11
     Responsive)
     D-015 (Metodología oficial de implementación de Patterns)

   Sección editorial: consume el Content Container (.l-container) y el
   Grid oficial de 12 columnas (.l-grid, .l-col-12) ya resueltos en
   layout.css. Este archivo no redefine su comportamiento.

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y
   la infraestructura de Layout (layout.css). No declara valores
   independientes de color, tipografía, espaciado, tiempo, easing,
   z-index, sombra ni punto de quiebre.

   Segunda implementación (Implementación visual, D-015): espaciado de
   sección, continuidad de fondo editorial con Why DIGART, tratamiento
   del área de montaje del recurso visual de apoyo y activación del
   movimiento de Aparición mediante .call-to-action--ready, ya aplicado
   por call-to-action.js. La tipografía del mensaje principal y del
   texto de apoyo ya consumía Design Tokens desde la primera
   implementación y no requirió cambios. Los botones principal y
   secundario se resuelven mediante el Componente oficial Button v1.0
   (13-UI-DESIGN-SYSTEM.md 8.1, D-026), integrado en este Pattern
   (Sprint B-004): su tratamiento visual, estados y motion viven en
   button.css; este archivo solo conserva el layout que organiza ambos
   botones (.call-to-action__actions). No incluye fotografía o video
   definitivos, JavaScript ni reglas Responsive específicas.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   .call-to-action no redefine .l-container. Replica el espaciado
   vertical oficial entre secciones (.l-section, layout.css 4.4) y el
   mismo fondo editorial claro de Why DIGART, para que el cierre de la
   narrativa se sienta como una conclusión natural del mismo ritmo
   pausado, sin ninguna transición perceptible entre ambas.
   -------------------------------------------------------------------- */
.call-to-action {
  padding-block: var(--space-8);
  background-color: var(--color-background-inverse);
}

/* --------------------------------------------------------------------
   2. Container
   .call-to-action__container delega por completo su comportamiento en
   .l-container (layout.css); no se declara ninguna propiedad adicional
   para evitar duplicar lógica ya resuelta (13.3 Consumo del Sistema).
   -------------------------------------------------------------------- */

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

/* .call-to-action__content ya no requiere una composición centrada
   (iteración visual, Mockup aprobado): además de .l-grid (layout.css),
   centra verticalmente .message y .visual entre sí, mismo criterio ya
   aplicado en el resto de Patterns editoriales de dos columnas. */
.call-to-action__content {
  align-items: center;
}

/* .call-to-action__message agrupa el mensaje principal, el texto de
   apoyo y el grupo de acciones, alineados a la izquierda conforme al
   Mockup aprobado (columna narrativa junto al recurso visual, no ya un
   bloque centrado de ancho completo). */
.call-to-action__message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  text-align: left;
}

.call-to-action__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-inverse);
}

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

.call-to-action__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-inverse);
}

/* .call-to-action__actions agrupa el botón principal y el botón
   secundario en un mismo eje horizontal (Wireframe 9, Esquema espacial
   "CTA   BTN"), conforme a la Regla de una única acción principal: el
   botón secundario ofrece una alternativa de exploración, no un
   segundo objetivo de conversión (Blueprint 9, "Elementos"). */
.call-to-action__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* El botón principal y el botón secundario se renderizan mediante el
   Componente oficial Button v1.0 (button.php); su tipografía (nivel
   jerárquico Button), color, estados y motion viven en button.css
   (13-UI-DESIGN-SYSTEM.md, 5.4 y 8.1; D-026). El Pattern Call To Action
   no implementa responsabilidades del Componente ni declara reglas
   propias para los botones. */

/* Área de montaje del recurso visual editorial de apoyo (Blueprint 9,
   "Composición visual"). Sin fuente ni tratamiento visual: fotografía
   o video fuera del alcance de esta implementación. Iteración visual:
   ocupa su propia columna (l-col-6) junto al mensaje, conforme al
   Mockup aprobado, en vez de centrarse como bloque de ancho contenido
   bajo el mensaje. */
.call-to-action__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-surface-subtle);
  border-radius: var(--border-radius-md);
}

/* Fotografía oficial montada (Asset Intake Pipeline, D-034): ocupa por
   completo el área de montaje 16:9 mediante object-fit: cover (recorte
   editorial del recurso nativo 3:2), mismo criterio ya aplicado en el
   resto de Patterns. */
.call-to-action__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-md);
}

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

/* --------------------------------------------------------------------
   5. States
   Estado base (Default) representado por las reglas de Container y
   Elements. Los estados de interacción (Hover, Focus, Active) del
   botón principal y del botón secundario los resuelve el Componente
   oficial Button v1.0 (button.css), ya integrado en este Pattern;
   sección reservada sin reglas adicionales.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. Motion Hooks
   Activa la aparición de la sección conforme el visitante llega al
   final de la Home (Blueprint 9, "Comportamiento") mediante su
   disparador funcional real ya existente: call-to-action.js aplica la
   clase .call-to-action--ready directamente sobre .call-to-action tan
   pronto el IntersectionObserver detecta la sección en el viewport,
   después de recibir whydigart:ready. A diferencia de los Patterns con
   listado de bloques repetidos, aquí el disparador y el Motion Hook
   coinciden en el mismo elemento, sin necesidad de un selector
   descendiente. Las microinteracciones de los botones las resuelve el
   Componente oficial Button v1.0 (button.css), ya integrado en este
   Pattern, y no se preparan en este archivo.
   -------------------------------------------------------------------- */
.call-to-action {
  opacity: 0;
  transition: opacity var(--motion-duration-slow) var(--motion-easing-standard);
}

.call-to-action--ready {
  opacity: 1;
}

/* --------------------------------------------------------------------
   7. Responsive
   Sistema Responsive (Cap. 11), breakpoints oficiales de tokens.css
   reproducidos en valor literal, mismo criterio que layout.css.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px
   El Grid oficial se reduce a 8 columnas (layout.css 8) y ya no permite
   las dos columnas l-col-6 lado a lado, por lo que la composición se
   reorganiza en una sola columna de ancho completo conservando el orden
   narrativo del marcado: titular, texto de apoyo, botón principal,
   botón secundario y recurso visual. El área de montaje conserva su
   proporción editorial 16:9 y object-fit: cover ya declarados en
   Elements. Los botones se apilan verticalmente y ocupan el ancho
   disponible mediante layout del Pattern; su tratamiento visual sigue
   viviendo íntegro en el Componente Button v1.0 (button.css). */
@media (max-width: 768px) {
  .call-to-action__message,
  .call-to-action__visual {
    grid-column: 1 / -1;
  }

  .call-to-action__actions {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
  }
}