/* ==========================================================================
   CONTACT HERO — Contacto v2 — DIGART Studio
   Pattern: Contact Hero

   Referencia documental:
     docs/002-information-architecture.md (D-042, entrada "Contacto")
     project/01-CONSTITUTION/C-01-IDENTITY.md (§6 Cómo se trata a las
     personas)
     project/03-PRODUCT/P-02-FRONTEND.md (4.2 Contenedores, 6 Dirección de
     Arte, 10 Tipografía, 17 Sistema de Accesibilidad)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-full-width). No declara
   valores independientes de color, tipografía, espaciado, tiempo, easing,
   z-index, sombra ni punto de quiebre. Fondo fotográfico + overlay
   (D-046, "Contacto v2"): misma estructura de capas superpuestas
   (.hero__background, .hero__overlay) ya certificada en hero.css (Home),
   reutilizada sin variación bajo el espacio de nombres propio de este
   Pattern (Reuse Before Creation, G-03 §3.3).

   Corrección visual (mockup de referencia): .contact-hero__container
   sustituye .l-container (centraba el bloque editorial) por el mismo
   mecanismo de margin-inline-start ya usado en .hero__container
   (hero.css, Home) para anclarlo a la izquierda, dejando la fotografía
   con mayor presencia hacia la derecha; un panel contenido en Overlay
   Emphasis sostiene la legibilidad del texto sin necesidad de oscurecer
   toda la fotografía (que ahora usa Overlay Default). Ambos overlays son
   categorías ya oficiales (tokens.css 3.1, tokens.css §11 "Overlay");
   sin gradiente ni color nuevo.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   1. Root
   position: relative sitúa el contexto de posicionamiento para el fondo
   fotográfico y el overlay (2); flex + justify-content: flex-start ancla
   el bloque editorial (3) al lado izquierdo, mismo criterio que .hero
   (hero.css, Home). padding-block-start generoso evita que el título
   quede oculto bajo el Header fijo (position: fixed, header.css).
   -------------------------------------------------------------------- */
.contact-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-block-start: calc(var(--space-8) + var(--space-7));
  padding-block-end: var(--space-8);
}

/* --------------------------------------------------------------------
   2. Elements — fondo fotográfico y overlay
   Capas absolutas superpuestas (mismo criterio que .hero__background/
   .hero__overlay de hero.css, Home): la fotografía cubre por completo el
   Root mediante object-fit: cover; el overlay (categoría oficial Overlay,
   tokens.css) sostiene la legibilidad general sin aplicar ningún color de
   marca sobre la fotografía (P-02 §11, "Color y fotografía"). Nivel
   Default (más claro que Emphasis): dejar mayor presencia visual a la
   fotografía en el área sin bloque editorial (derecha); la legibilidad
   del texto la sostiene el panel contenido de (3), no este overlay
   general.
   -------------------------------------------------------------------- */
.contact-hero__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

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

.contact-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay-default);
}

/* --------------------------------------------------------------------
   3. Container
   position: relative sitúa el bloque editorial en la capa de pintado de
   los posicionados, por encima del fondo y del overlay (mismo criterio
   de remediación ya aplicado en hero.css, INC-QA-1). margin-inline-start
   replica exactamente la fórmula ya certificada en .hero__container
   (hero.css, Home) para compartir el mismo eje horizontal que el
   logotipo del Header en cualquier ancho de viewport, ancla el bloque a
   la izquierda y dejando el resto del viewport a la fotografía. El fondo
   Overlay Emphasis contenido en este panel (no en toda la sección)
   sostiene el contraste del texto sin oscurecer la fotografía completa.
   -------------------------------------------------------------------- */
.contact-hero__container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-overlay-emphasis);
  margin-inline-start: max(
    var(--space-6),
    calc((100vw - var(--breakpoint-desktop)) / 2 + var(--space-6))
  );
  max-width: clamp(32rem, 42vw, 40rem);
}

/* --------------------------------------------------------------------
   4. Elements — contenido editorial
   -------------------------------------------------------------------- */
.contact-hero__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);
}

.contact-hero__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-inverse);
}

.contact-hero__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);
}

/* --------------------------------------------------------------------
   5. Variants
   Sección reservada: este Pattern no define variantes.
   -------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------
   7. Motion Hooks
   Sin disparador funcional propio: esta página no reproduce la cadena de
   eventos narrativos de la Home (P-03), por lo que el contenido se
   presenta directamente en su estado final, sin movimiento de Aparición
   pendiente de un evento inexistente (mismo criterio ya aplicado en
   institutional-hero.css, services-hero.css, specialties-hero.css,
   portfolio-hero.css y blog-hero.css).
   -------------------------------------------------------------------- */

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

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .contact-hero {
    padding-block-start: calc(var(--space-7) + var(--space-6));
  }

  .contact-hero__container {
    margin-inline-start: var(--space-4);
    margin-inline-end: var(--space-4);
    max-width: none;
  }
}