/* ==========================================================================
   TODO COMIENZA CON UNA IDEA — DIGART Studio
   Pattern: Idea Origin

   Referencia documental:
     project/10-HOME-BLUEPRINT.md (4. Todo comienza con una idea)
     project/12-HOME-MOCKUP.md (3.4 Todo comienza con una idea)
     project/13-UI-DESIGN-SYSTEM.md
     D-036 (evolución de la Dirección de Arte hacia un lenguaje editorial
     premium)

   Reconstrucción completa (Entregable B-009.1, Operación ELIMINAR Y
   RECONSTRUIR). La composición reproduce el sangrado asimétrico
   documentado (bloque narrativo alineado al margen editorial estándar
   del sitio, fotografía a sangre hasta el borde derecho del viewport)
   sin modificar Foundations: el margen izquierdo se calcula combinando
   los Tokens --breakpoint-desktop y --space-6 ya existentes (mismo
   ancho máximo y mismo margen que .l-container ya resuelve en el resto
   de Patterns). Todo valor (color, tipografía, espaciado, motion)
   proviene exclusivamente de tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   .idea-origin es un bloque de ancho completo por herencia normal del
   flujo de documento. overflow: hidden evita cualquier desbordamiento
   horizontal mínimo introducido por el cálculo con 100vw (ver 2. Row)
   en navegadores con scrollbar visible.
   -------------------------------------------------------------------- */
.idea-origin {
  width: 100%;
  background-color: var(--color-background-default);
  overflow: hidden;
}

/* --------------------------------------------------------------------
   2. Row
   .idea-origin__row reemplaza a .l-grid para esta sección: dos
   columnas de fracción igual sin column-gap perdido a la derecha,
   permitiendo que la columna visual llegue exactamente al borde del
   viewport. padding-inline-start replica el margen izquierdo que
   .l-container ya aplica en el resto del sitio (centrado hasta
   --breakpoint-desktop con inset --space-6), calculado a partir de los
   mismos Tokens, sin redeclarar sus valores en Foundations.
   align-items: stretch (valor por defecto de Grid) permite que la
   fotografía ocupe la altura completa de la fila, mientras el bloque
   narrativo aplica su propio padding-block vertical (3. Elements),
   reproduciendo el sangrado a los cuatro bordes que le corresponden
   documentado en el Mockup.
   -------------------------------------------------------------------- */
.idea-origin__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-6);
  padding-inline-start: max(
    var(--space-6),
    calc((100vw - var(--breakpoint-desktop)) / 2 + var(--space-6))
  );
}

/* --------------------------------------------------------------------
   3. Elements
   -------------------------------------------------------------------- */
.idea-origin__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding-block: var(--space-8);
  padding-inline-end: var(--space-6);
}

/* Eyebrow y divisor: dispositivo de jerarquía previo al título
   (Mockup 3.4, Dirección de arte; D-036). Agrupados con un espacio
   menor entre sí que el resto del bloque narrativo. */
.idea-origin__eyebrow-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.idea-origin__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);
}

.idea-origin__divider {
  display: block;
  width: var(--space-6);
  height: var(--border-width-thick);
  border-radius: var(--border-radius-full);
  background-color: var(--color-error);
}

.idea-origin__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

/* Énfasis cromático sobre "idea": Token de rojo institucional ya
   existente (--color-error), mismo criterio ya aplicado en el resto de
   Patterns de la nueva Dirección de Arte. */
.idea-origin__title-accent {
  color: var(--color-error);
}

.idea-origin__support-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

/* Enlace discreto de cierre del bloque narrativo (Mockup 3.4,
   Dirección de arte), precedido por un segundo divisor que reutiliza
   .idea-origin__divider. */
.idea-origin__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-error);
  text-decoration: none;
}

.idea-origin__link:hover,
.idea-origin__link:focus-visible {
  text-decoration: underline;
}

/* Área de montaje del recurso fotográfico: sin proporción forzada
   (aspect-ratio) — la fotografía ocupa la altura completa de la fila
   (align-items: stretch, 2. Row) y se recorta mediante object-fit:
   cover, reproduciendo el sangrado vertical documentado en el Mockup
   en lugar de sentirse contenida en una caja rígida. */
.idea-origin__image {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-surface-subtle);
}

.idea-origin__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

/* --------------------------------------------------------------------
   5. States
   El único elemento interactivo propio del Pattern es
   .idea-origin__link (enlace discreto de cierre): sus estados Hover y
   Focus se definen junto a su declaración base (3. Elements). El resto
   del Pattern no posee elementos interactivos; estado base (Default)
   representado por las reglas de Root, Row y Elements.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. Motion Hooks
   Activa la aparición progresiva del bloque narrativo (incluido el
   eyebrow y el divisor, agrupados dentro de .idea-origin__content) y
   del recurso visual mediante su disparador funcional real ya
   existente: idea-origin.js aplica la clase .idea-origin--ready sobre
   .idea-origin 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 .idea-origin--ready,
   sin introducir ningún valor ajeno a los Motion Tokens ya definidos.
   -------------------------------------------------------------------- */
.idea-origin__content,
.idea-origin__visual {
  opacity: 0;
  transition: opacity var(--motion-duration-slow) var(--motion-easing-standard);
}

.idea-origin--ready .idea-origin__content,
.idea-origin--ready .idea-origin__visual {
  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
   Corrección local RWD-10: la retícula propia de dos columnas (1fr 1fr,
   2. Row) producía en móviles una columna narrativa demasiado estrecha
   y una franja visual sin valor editorial. La fila se reorganiza en una
   sola columna conservando el orden del marcado (contenido narrativo →
   imagen). El sangrado izquierdo del Row y el padding derecho del
   bloque narrativo (ambos --space-6) siguen enmarcando el texto; la
   fotografía conserva su llegada al borde derecho del viewport (mismo
   gesto editorial del Desktop) y adopta la proporción editorial 16:9 ya
   oficial en las fotografías apiladas del resto de Patterns, puesto que
   al desaparecer la fila compartida ya no existe una altura de columna
   narrativa que la gobierne; se recorta con el object-fit: cover ya
   declarado en Elements, sin deformación. Se aplica desde el régimen
   ≤768px, el mismo que cubre la franja de móviles reales 376px–430px
   conforme a la infraestructura corregida (RWD-08). */
@media (max-width: 768px) {
  .idea-origin__row {
    grid-template-columns: 1fr;
  }

  .idea-origin__image {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}