/* ==========================================================================
   BUSINESS HERO — DIGART Business — DIGART Studio
   Pattern: Business Hero

   Referencia documental:
     project/03-PRODUCT/P-02-FRONTEND.md (4.2 Contenedores, 6 Dirección de
     Arte, 10 Tipografía, 8.1 Botones, 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. Misma técnica de capas superpuestas
   y de cálculo de margen izquierdo ya certificadas en services-hero.css y
   specialties-hero.css. El botón del CTA se resuelve íntegro en el
   Componente oficial Button v1.0 (button.css).
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   -------------------------------------------------------------------- */
.business-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--color-background-inverse);
}

/* --------------------------------------------------------------------
   2. Elements — capas superpuestas
   -------------------------------------------------------------------- */
.business-hero__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

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

/* Overlay degradado progresivo (Blueprint del sprint, "el lado izquierdo
   debe conservar overlay oscuro suficiente para el texto"): mismo Token
   Overlay ya oficial (--color-overlay-emphasis) aplicado como gradiente,
   mismo criterio que specialties-hero.css. */
.business-hero__overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    var(--color-overlay-emphasis) 0%,
    var(--color-overlay-emphasis) 42%,
    transparent 78%
  );
}

/* --------------------------------------------------------------------
   3. Container
   -------------------------------------------------------------------- */
.business-hero__container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-inline-end: var(--space-6);
  margin-inline-start: max(
    var(--space-6),
    calc((100vw - var(--breakpoint-desktop)) / 2 + var(--space-6))
  );
  max-width: clamp(40rem, 52vw, var(--breakpoint-desktop));
}

/* --------------------------------------------------------------------
   4. Elements — bloque editorial
   -------------------------------------------------------------------- */
.business-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);
}

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

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

.business-hero__actions {
  display: flex;
  align-items: center;
  margin-block-start: var(--space-2);
}

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

/* --------------------------------------------------------------------
   6. States
   Estado base (Default) representado por el resto de las reglas. Los
   estados de interacción del CTA los resuelve el Componente oficial
   Button v1.0 (button.css), ya integrado en este Pattern.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. Motion Hooks
   Sin disparador funcional propio: el contenido se presenta directamente
   en su estado final, mismo criterio ya aplicado en el resto de páginas
   institucionales.
   -------------------------------------------------------------------- */

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

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .business-hero__container {
    margin-inline-start: var(--space-4);
    padding-inline-end: var(--space-4);
    max-width: none;
  }
}