/* ==========================================================================
   services.css

   Cuatro servicios con peso desigual. El triaje ya usa filete izquierdo con
   grosor variable, asi que aqui el peso NO se codifica igual — repetir el mismo
   recurso dos secciones seguidas convierte un criterio en un tic. Aqui el peso
   lo lleva el AREA:

     principal  fila entera, con foto, texto grande
     grande     fila entera, sin foto, texto medio
     menor      media fila cada uno, texto pequeno

   Sin filetes, sin relleno, sin radio, sin sombra, sin iconos. La jerarquia
   sale del sitio que ocupa cada cosa, que es como se jerarquiza en papel.

   Vuelve a --fog para que el triaje quede como la hoja elevada entre dos
   planos de fondo.
   ========================================================================== */

.services {
  background: var(--fog);
  padding-block: var(--section-y);
}

.services .wrap {
  display: grid;
  gap: var(--space-7);
}

/* --- Entradilla ----------------------------------------------------------- */

.services__intro {
  display: grid;
  gap: var(--space-4);
}

.services__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  max-width: 20ch;
}

.services__lede {
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* --- Lista --------------------------------------------------------------- */

.services__list {
  display: grid;
  gap: var(--space-7);
}

.services__body {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.services__name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

.services__item[data-weight="major"]   .services__name { font-size: var(--text-xl); }
.services__item[data-weight="primary"] .services__name { font-size: var(--text-2xl); }

/* El nombre del servicio ES el enlace. Asi no hace falta una linea de "ver mas"
   repetida cuatro veces, ni la flecha pegada al texto que va prohibida. */
.services__name a {
  text-decoration: underline;
  /* --ink-soft y no --rule-strong: el subrayado es la unica senal de que el
     nombre es un enlace, y en zinc sobre fondo daba 2.3:1 — se perdia. */
  text-decoration-color: var(--ink-soft);
  text-decoration-thickness: var(--hairline);
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--transition-control);
}

.services__name a:hover {
  text-decoration-color: var(--ink);
}

.services__text {
  color: var(--ink-soft);
  max-width: var(--measure);
}

.services__photo {
  width: 100%;
  /* 3/2 y no 4/3: junto a un bloque de texto de cuatro lineas, una foto mas
     alta deja hueco muerto a su lado. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* --- Movil ---------------------------------------------------------------- */
/* En movil todo pasa a ancho completo, asi que la codificacion por area
   desaparece y la jerarquia se quedaria solo en el tamano del titular. El
   telefono es la version que importa, asi que los dos menores bajan tambien de
   cuerpo: menos peso, mismo contenido. */

@media (max-width: 899px) {
  .services__item[data-weight="minor"] .services__name { font-size: var(--text-base); }
  .services__item[data-weight="minor"] .services__text { font-size: var(--text-sm); }
}

/* --- Escritorio ----------------------------------------------------------- */

@media (min-width: 900px) {

  .services__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
    row-gap: var(--space-9);
  }

  /* Principal: fila entera, partida en dos. La foto va a la IZQUIERDA — el hero
     ya tiene texto a la izquierda y foto a la derecha, y repetir esa misma
     particion mas abajo aplana el ritmo de la pagina. */
  .services__item[data-weight="primary"] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-8);
    align-items: center;
  }

  /* Grande: fila entera, sin foto, con el titulo colgado en su propia columna.
     Ocupar la fila entera no bastaba: como la medida corta el texto a 58ch, el
     ancho de mas quedaba en hueco y el bloque media lo mismo que un menor. Con
     el titulo aparte, la fila se usa de verdad y el peso se ve. */
  .services__item[data-weight="major"] {
    grid-column: 1 / -1;
  }

  .services__item[data-weight="major"] .services__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    column-gap: var(--space-8);
    align-items: baseline;
  }

  /* Menores: se colocan solos, uno en cada columna. Van iguales entre si porque
     de verdad son equivalentes entre si. */
}