/* ==========================================================================
   SPECIALTIES HERO — Especialidades v2 — DIGART Studio
   Pattern: Specialties Hero

   Referencia documental:
     docs/002-information-architecture.md (D-042, entrada "Especialidades")
     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. Reconstrucción del sprint
   "Especialidades v2": misma técnica de capas superpuestas y de cálculo
   de margen izquierdo ya certificadas en services-hero.css, sustituyendo
   el fondo plano y el bloque centrado en .l-container de la
   implementación anterior.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   -------------------------------------------------------------------- */
.specialties-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
   -------------------------------------------------------------------- */
.specialties-hero__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

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

/* Overlay degradado progresivo: mismo Token Overlay ya oficial
   (--color-overlay-emphasis) aplicado como gradiente, concentrando el
   oscurecimiento en el tercio izquierdo (donde vive el bloque editorial,
   3. Container) y dejando visible la fotografía hacia la derecha. No
   declara ningún color independiente: los dos extremos del gradiente son
   el mismo Token (opaco) y "transparent". */
.specialties-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
   Mismo cálculo de margen izquierdo ya certificado en hero.css y
   services-hero.css: coincide con el mismo eje horizontal que el
   logotipo del Header (.l-container) en cualquier ancho de viewport.
   position: relative (sin z-index) sitúa el bloque editorial por encima
   de fondo/overlay.
   -------------------------------------------------------------------- */
.specialties-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
   -------------------------------------------------------------------- */
.specialties-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);
}

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

.specialties-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 el resto de las reglas.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. Motion Hooks
   Sin disparador funcional propio: esta página no reproduce la cadena de
   eventos narrativos de la Home (P-03); 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 y
   services-hero.css.
   -------------------------------------------------------------------- */

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