/* ==========================================================================
   SPECIALTIES SECTORS — Especialidades v2 — DIGART Studio
   Pattern: Specialties Sectors

   Referencia documental:
     project/01-CONSTITUTION/C-01-IDENTITY.md (§12 Arquitectura de marca)
     project/03-PRODUCT/P-02-FRONTEND.md (4.1 Grid, 4.2 Contenedores, 4.3
     Columnas, 17 Sistema de Accesibilidad)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-container, .l-grid,
   .l-col-5, .l-col-7). No declara valores independientes de color,
   tipografía, espaciado, borde, sombra, tiempo, easing ni punto de
   quiebre. Sin colores sectoriales nuevos: los matices verde (Business),
   cian (Medical) y ámbar (Food) viven exclusivamente dentro de las
   fotografías reutilizadas; ningún Token ni valor cromático propio por
   sector.

   Alternancia imagen/contenido: el marcado de los tres artículos
   mantiene el mismo orden (imagen, luego contenido); la alternancia
   visual del segundo artículo (DIGART Medical) se resuelve aquí mediante
   reordenación de columnas (:nth-of-type + order), nunca duplicando el
   marcado (P-02 §4.3).
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root — artículos
   Fondo alternado (par/impar) como recurso de ritmo editorial, mismo
   criterio ya usado en services-directory.css.
   -------------------------------------------------------------------- */
.specialties-sectors__sector {
  padding-block: var(--space-8);
  background-color: var(--color-background-default);
}

.specialties-sectors__sector:nth-of-type(even) {
  background-color: var(--color-background-subtle);
}

.specialties-sectors__row {
  align-items: center;
}

/* Alternancia de posición: el segundo artículo (DIGART Medical) invierte
   el orden visual de la columna de imagen (queda a la derecha) sin
   alterar el marcado (comentario superior). */
.specialties-sectors__sector:nth-of-type(even) .specialties-sectors__visual {
  order: 1;
}

/* --------------------------------------------------------------------
   2. Elements — área de montaje fotográfico
   -------------------------------------------------------------------- */
.specialties-sectors__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface-subtle);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

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

/* --------------------------------------------------------------------
   3. Elements — contenido
   -------------------------------------------------------------------- */
.specialties-sectors__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.specialties-sectors__name {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

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

.specialties-sectors__challenges-title {
  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);
  margin-block-end: var(--space-2);
}

.specialties-sectors__challenges-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: disc;
  padding-inline-start: var(--space-4);
}

.specialties-sectors__challenges-list li {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

.specialties-sectors__challenges-list li::marker {
  color: var(--color-text-tertiary);
}

/* Enlace discreto: mismo dispositivo editorial ya establecido por Idea
   Origin y Success Stories (idea-origin__link, success-stories__link). */
.specialties-sectors__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin-block-start: 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;
}

.specialties-sectors__link:hover,
.specialties-sectors__link:focus-visible {
  text-decoration: underline;
}

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

/* --------------------------------------------------------------------
   5. States
   Estado base (Default) representado por el resto de las reglas. Los
   estados de interacción (Hover, Focus) de .specialties-sectors__link se
   definen junto a su declaración base (3, Elements).
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. Motion Hooks
   Sin disparador funcional propio ni JavaScript; el contenido se
   presenta directamente en su estado final.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. Responsive
   Sistema Responsive (Cap. 11). El remapeo oficial de spans (RWD-08,
   layout.css) ya linealiza .l-col-5/.l-col-7 en una sola columna de
   ancho completo; aquí solo se cancela la reordenación visual (el orden
   alternado deja de tener sentido en una sola columna), conservando el
   orden narrativo del marcado.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .specialties-sectors__sector:nth-of-type(even) .specialties-sectors__visual {
    order: 0;
  }
}