/* ==========================================================================
   components.css — Componentes reutilizables
   --------------------------------------------------------------------------
   Depende de tokens.css y base.css.

   Fase 1: los componentes base que el Figma define en la página `Components`
   y los patrones tipográficos pequeños que se repiten en todas las páginas.
   Fase 3: encabezado de sección y filas de Expertise, que Home y About
   comparten literalmente.
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* Botón                                                               */
/* ------------------------------------------------------------------ */

/* Figma: Components / Button (25:158). padding 10px 19px, radio 4px,
   Raleway Bold 16px, line-height 1.2.
   El único hover definido en todo el archivo es el del primario. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 19px;
  border-radius: var(--radius-btn);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-none);
  white-space: nowrap;
  overflow: hidden;
  transition: background-color var(--dur-hover) var(--ease-out-quint);
}

.btn--primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--btn-primary-bg-hover);
}

.btn--secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}

/* El Figma no define hover para el secundario. Se usa el mismo salto de
   contraste que el primario, invertido, para no dejarlo sin respuesta. */
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: var(--color-white);
}

/* ------------------------------------------------------------------ */
/* Eyebrow de sección                                                  */
/* ------------------------------------------------------------------ */

/* `/// Portfolio ///` — Inter Medium 14px, gris. El texto de los slashes
   va en el HTML, no en ::before/::after: forma parte del copy del Figma. */

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-micro);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------ */
/* Lista de tags con separador de punto                                */
/* ------------------------------------------------------------------ */

/* Tarjeta de proyecto y cabecera de página de proyecto.
   El separador es un círculo de 2px, no un carácter. */

.tag-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tag-list__item {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-micro);
  color: var(--color-text-muted);
}

.tag-list__item + .tag-list__item::before {
  content: "";
  display: inline-block;
  width: var(--space-0-5);
  height: var(--space-0-5);
  margin-right: var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--color-rule);
  vertical-align: middle;
}

/* En la cabecera de página de proyecto los tags son 16px, no 14px. */
.tag-list--lg .tag-list__item {
  font-size: var(--fs-body);
  line-height: var(--lh-heading);
}

.tag-list--lg {
  gap: var(--space-3);
}

.tag-list--lg .tag-list__item + .tag-list__item::before {
  margin-right: var(--space-3);
}

/* ------------------------------------------------------------------ */
/* Encabezado de sección                                               */
/* ------------------------------------------------------------------ */

/* Eyebrow + h2 a la izquierda y, opcionalmente, un dato a la derecha
   alineado con la base del titular. Home lo usa en Featured work y en
   What I bring; About, en My Experience. */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}

/* El bloque del titular mide 84px en el Figma, contando los 12px de aire
   superior. Un h2 de 64px deja 8px libres debajo; el de 72px de
   "Other Projects" lo llena justo y no cambia nada. */
.section-head__title {
  margin-top: var(--space-3);
  min-height: calc(var(--head-title-block) - var(--space-3));
}

.section-head__aside {
  flex: none;
  text-align: right;
  color: var(--color-text);
}

/* ------------------------------------------------------------------ */
/* Filas de Expertise — "What I bring"                                 */
/* ------------------------------------------------------------------ */

/* Home (11:345) y About (49:300) llevan esta sección palabra por palabra,
   con la misma altura de 905px. Un solo bloque de CSS para las dos. */

.expertise__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* El margin-bottom por defecto de <ul> añadía 14px de más bajo la lista. */
  margin: var(--space-10) 0 0;
  list-style: none;
  padding: 0;
}

.expertise__row {
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-card);
  padding: var(--space-8) var(--space-6);
}

/* El Figma limita el contenido de la fila a 1078px dentro de un hueco de
   1152px, dejando 74px libres a la derecha. Se replica literalmente. */
.expertise__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  width: var(--measure-expertise-row);
  max-width: 100%;
}

.expertise__label {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-expertise-num);
}

.expertise__num {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-micro);
  color: var(--color-text);
}

.expertise__detail {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  width: var(--measure-wide);
  max-width: 100%;
}

.expertise__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.expertise__points li,
.expertise__text {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-micro);
  color: var(--color-text);
}

.expertise__text {
  flex: none;
  width: var(--measure-narrow);
}

/* ------------------------------------------------------------------ */
/* Rejilla asimétrica de proyectos                                              */
/* ------------------------------------------------------------------ */

/* Home lleva tres filas alternando qué lado es la tarjeta ancha; las
   páginas de proyecto llevan una sola fila en «Other Projects».
   El orden del DOM es el orden de lectura; el ancho lo decide la fila. */

.project-row {
  display: grid;
  gap: var(--grid-project-gap);
  margin-top: var(--space-12);
  grid-template-columns: var(--grid-project-wide) var(--grid-project-narrow);
}

.project-row--narrow-first {
  grid-template-columns: var(--grid-project-narrow) var(--grid-project-wide);
}

/* ------------------------------------------------------------------ */
/* Tarjeta de proyecto                                             */
/* ------------------------------------------------------------------ */

.project-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.project-card__media {
  height: var(--project-thumb-height);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* A 1200px de contenedor, 654/437 y 498/437 son las proporciones exactas de
   los assets: en escritorio no hay recorte ninguno. Por debajo de 992 las
   columnas se igualan y todas pasan a una proporción común (ver la media
   query del final). */

/* Incoherencia del Figma, replicada: esta única tarjeta usa 24px de radio
   mientras las otras cinco usan 20px. Ver DISENO.md §6. */
.project-card__media--r24 {
  border-radius: var(--radius-media);
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
}

.project-card__tags {
  padding-top: var(--space-1);
}

.project-card__year {
  flex: none;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-micro);
  color: var(--color-text-muted);
}

/* Incoherencia del Figma, replicada: solo el año de Studio Swift es negro. */
.project-card__year--ink {
  color: var(--color-text);
}

/* ------------------------------------------------------------------ */
/* Zoom de la imagen al pasar por la tarjeta                            */
/* ------------------------------------------------------------------ */

/* Recetas `a-31` / `a-32` del original: scale 1 ↔ 1.2 en 500ms outQuint.
   Es CSS puro, no necesita JavaScript. El recorte lo da el overflow
   hidden de .project-card__media. Bajo movimiento reducido, la regla
   global de base.css §7 deja la transición en 0.01ms. */

.project-card__media img {
  transition: transform var(--dur-zoom) var(--ease-out-quint);
}

.project-card:hover .project-card__media img,
.project-card:focus-visible .project-card__media img {
  transform: scale(1.2);
}

/* ==========================================================================
   Fase 6 — responsive
   ========================================================================== */

@media screen and (max-width: 991px) {
  /* El botón del Figma mide 39px de alto (10px de padding + 19.2 de línea).
     Sin ratón, el mínimo de la Fase 6 son 44. El padding horizontal y la
     tipografía no cambian: solo crece el área de pulsación. */
  .btn {
    min-height: 44px;
  }

  /* El bloque del titular deja de tener alto fijo: con un h2 fluido, los
     84px del Figma dejarían un hueco muerto debajo. */
  .section-head__title {
    min-height: 0;
  }

  /* Columnas iguales y sin alternancia: el orden del DOM manda. */
  .project-row,
  .project-row--narrow-first {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* Proporción ÚNICA para todas las tarjetas: la de la tarjeta ancha del
     Figma, 654×437 (≈ 3/2). Las seis imágenes no comparten proporción —tres
     se exportaron a 1308×874 y tres a 996×874— así que dejar a cada una la
     suya hacía que los pies de cada fila no se alinearan y pareciera un
     fallo. Con una sola proporción y `object-fit: cover` todas miden igual;
     el precio es que las tres estrechas se recortan por arriba y por abajo.

     En escritorio no aplica: allí cada columna tiene su ancho y el alto fijo
     de 437px da la proporción exacta de cada imagen, sin recorte. */
  .project-card__media {
    height: auto;
    aspect-ratio: var(--aspect-card);
  }

  /* Expertise: el número y el título siguen en fila, con menos aire entre
     ellos, y el detalle baja debajo. */
  .expertise__inner {
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
  }

  .expertise__detail {
    width: 100%;
  }

  .expertise__text {
    flex: 1 1 auto;
    width: auto;
    max-width: var(--measure-narrow);
  }
}

@media screen and (max-width: 767px) {
  /* Una sola columna. */
  .project-row,
  .project-row--narrow-first {
    grid-template-columns: 1fr;
  }

  /* Encabezado de sección: el dato de la derecha baja bajo el titular. */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .section-head__aside {
    text-align: left;
  }

  /* Expertise: se apila todo. */
  .expertise__label {
    flex-direction: column;
    gap: var(--space-2);
  }

  .expertise__detail {
    flex-direction: column;
    gap: var(--space-4);
  }

  .expertise__text {
    max-width: none;
  }

  .expertise__row {
    padding: var(--space-6) var(--space-5);
  }
}