/* ==========================================================================
   SERVICES DIRECTORY — Servicios v2 — DIGART Studio
   Pattern: Services Directory

   Referencia documental:
     incoming/services/services-v2-mockup-reference.png (guía de
     composición, fondos, ritmo visual y alternancia imagen/contenido; no
     fuente de contenido ni de assets)
     project/03-PRODUCT/P-02-FRONTEND.md (4.1 Grid, 4.2 Contenedores, 4.3
     Columnas, 10 Tipografía, 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-*). No declara valores independientes de color, tipografía,
   espaciado, borde, sombra, tiempo, easing ni punto de quiebre. Directorio
   editorial de servicios, texto siempre visible (sin acordeones, tabs ni
   contenido oculto): no incluye JavaScript.

   Alternancia imagen/contenido: el marcado de los cuatro bloques
   mantiene el mismo orden (imagen, luego contenido); la alternancia
   visual de los bloques pares (2, "Imprime y hazte visible" y 4, "Lleva
   tu proyecto a digital") se resuelve aquí mediante reordenación de
   columnas (:nth-of-type + order), nunca duplicando el marcado (P-02
   §4.3, "mediante reordenación de columnas, nunca mediante contenido
   duplicado").
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root — encabezado del directorio
   -------------------------------------------------------------------- */
.services-directory {
  background-color: var(--color-background-default);
}

.services-directory__intro-container {
  padding-block: var(--space-8);
  padding-block-end: var(--space-6);
}

.services-directory__intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}

.services-directory__intro-line {
  flex: 1 1 auto;
  height: var(--border-width-default);
  background-color: var(--color-error);
  max-width: 6rem;
}

.services-directory__intro-title {
  flex: 0 0 auto;
  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);
  text-align: center;
}

/* --------------------------------------------------------------------
   2. Bloques — imagen + categorías
   Fondo alternado (par/impar) como recurso de ritmo editorial, mismo
   criterio ya usado en la Home entre secciones consecutivas (P-02 §7,
   "Ritmo y composición"). scroll-margin-block-start evita que el Header
   fijo (position: fixed, header.css) cubra el bloque al llegar mediante
   los enlaces ancla de Services Hero ("¿Qué necesitas hoy?").
   -------------------------------------------------------------------- */
.services-directory__block {
  padding-block: var(--space-8);
  scroll-margin-block-start: calc(var(--space-8) + var(--space-4));
}

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

.services-directory__row {
  align-items: start;
}

/* Alternancia de posición: los bloques pares invierten el orden visual
   de la columna de imagen (queda a la derecha) sin alterar el marcado
   (1, comentario superior). */
.services-directory__block:nth-of-type(even) .services-directory__visual {
  order: 1;
}

/* --------------------------------------------------------------------
   3. Elements — área de montaje fotográfico
   Proporción editorial 4:5 (retrato), mismo criterio de área de montaje
   con object-fit: cover ya usado en el resto de fotografías del sitio,
   adaptado a una proporción más vertical acorde a la composición del
   Blueprint del sprint.
   -------------------------------------------------------------------- */
.services-directory__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: var(--color-surface-subtle);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

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

/* --------------------------------------------------------------------
   4. Elements — contenido y categorías
   -------------------------------------------------------------------- */
.services-directory__block-title {
  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);
  margin-block-end: var(--space-2);
  padding-block-end: var(--space-4);
  border-block-end: var(--border-width-default) var(--border-style-solid) var(--color-border-subtle);
}

/* Grupos de listas en dos o tres columnas (Blueprint del sprint); los
   bloques con cuatro categorías (Bloque 1 y 3) las agrupan en dos filas
   de dos para conservar columnas legibles dentro del ancho disponible
   de .l-col-7, en lugar de cuatro columnas angostas. */
.services-directory__categories {
  display: grid;
  gap: var(--space-6) var(--space-5);
  margin-block-start: var(--space-6);
}

.services-directory__categories--two,
.services-directory__categories--four {
  grid-template-columns: repeat(2, 1fr);
}

.services-directory__categories--three {
  grid-template-columns: repeat(3, 1fr);
}

.services-directory__category-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
  margin-block-end: var(--space-3);
}

.services-directory__category-marker {
  display: block;
  flex-shrink: 0;
  width: var(--space-3);
  height: var(--border-width-thick);
  border-radius: var(--border-radius-full);
  background-color: var(--color-error);
}

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

.services-directory__list li {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

.services-directory__list li::marker {
  color: var(--color-text-tertiary);
}

/* --------------------------------------------------------------------
   5. Cierre — Servicios Empresariales (sin imagen)
   Cierre editorial sobrio antes del Call To Action: sin fotografía,
   lista en línea separada por el propio marcador de lista (::marker),
   centrada, mismo fondo alternado del último bloque par (4, "Lleva tu
   proyecto a digital") para continuar el ritmo sin una transición
   perceptible.
   -------------------------------------------------------------------- */
.services-directory__closing {
  padding-block: var(--space-7);
  background-color: var(--color-background-subtle);
  border-block-start: var(--border-width-default) var(--border-style-solid) var(--color-border-subtle);
  scroll-margin-block-start: calc(var(--space-8) + var(--space-4));
}

.services-directory__closing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.services-directory__closing-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-error);
}

.services-directory__closing-icon {
  width: var(--space-6);
  height: var(--space-6);
}

.services-directory__closing-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

.services-directory__closing-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
}

.services-directory__closing-list li {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

.services-directory__closing-list li:not(:last-child)::after {
  content: "•";
  color: var(--color-border-strong);
  margin-inline-start: var(--space-3);
}

/* --------------------------------------------------------------------
   6. Variants
   El Pattern no define variantes; sección reservada sin reglas.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. States
   Sección editorial sin elementos interactivos propios; estado base
   (Default) representado por el resto de las reglas.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   8. 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 (13.6 Gobernanza, "sin
   sobreingeniería").
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   9. Responsive
   Sistema Responsive (Cap. 11), breakpoint oficial de tokens.css
   reproducido en valor literal, mismo criterio que layout.css. 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
   resuelve lo que ese remapeo no cubre: cancelar la reordenación visual
   (el orden alternado deja de tener sentido en una sola columna) y
   colapsar los grupos de categorías a una columna, conservando listas
   completas y legibles, sin desbordamiento horizontal.
   -------------------------------------------------------------------- */

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

  .services-directory__categories--two,
  .services-directory__categories--three,
  .services-directory__categories--four {
    grid-template-columns: 1fr;
  }
}