/* ==========================================================================
   FOOD SOLUTIONS — DIGART Food — DIGART Studio
   Pattern: Food Solutions

   Referencia documental:
     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. Misma estructura ya certificada en business-solutions.css y
   medical-solutions.css.

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

/* --------------------------------------------------------------------
   1. Root
   -------------------------------------------------------------------- */
.food-solutions {
  padding-block: var(--space-8);
  background-color: var(--color-background-inverse);
}

.food-solutions__block {
  padding-block: var(--space-6);
}

.food-solutions__block + .food-solutions__block {
  margin-block-start: var(--space-7);
  border-block-start: var(--border-width-default) var(--border-style-solid) var(--color-overlay-inverse);
}

.food-solutions__row {
  align-items: center;
}

.food-solutions__block:nth-of-type(even) .food-solutions__visual {
  order: 1;
}

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

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

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

.food-solutions__number {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-error);
}

.food-solutions__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-inverse);
}

.food-solutions__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-overlay-inverse);
}

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

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

/* --------------------------------------------------------------------
   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.
   -------------------------------------------------------------------- */

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