/* ==========================================================================
   PORTFOLIO GRID — Portafolio — DIGART Studio
   Pattern: Portfolio Grid

   Referencia documental:
     incoming/portafolio/Mockup Portafolio.png (dirección de arte y
     jerarquía visual; solo referencia, no se publica)
     project/03-PRODUCT/P-02-FRONTEND.md (4.1 Grid, 4.2 Contenedores, 4.3
     Columnas)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-container, .l-grid,
   .l-col-5/6/7, .l-items-start). No declara valores independientes de
   color, tipografía, espaciado, tiempo, easing, z-index, sombra ni punto
   de quiebre. Sin bordes redondeados grandes ni sombra: superficie plana,
   editorial, deliberadamente distinta de una tarjeta genérica.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   -------------------------------------------------------------------- */
.portfolio-grid {
  padding-block-end: var(--space-8);
  background-color: var(--color-background-default);
}

/* --------------------------------------------------------------------
   2. Elements — caso
   Cada caso reserva una proporción fija (4:3) mediante aspect-ratio.
   .l-items-start (layout.css) evita que el Grid estire los casos entre
   sí, conservando la proporción propia de cada uno. Excepción: Veta
   Vertical y Swan, la primera fila del Grid (l-col-7 + l-col-5), donde
   Variants (3) recalcula esta proporción base para que ambas compartan
   la misma altura visual en Desktop pese a su distinto ancho de
   columna.
   -------------------------------------------------------------------- */
.portfolio-grid__case {
  position: relative;
}

.portfolio-grid__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface-inverse);
}

.portfolio-grid__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay degradado (legibilidad del bloque de texto anclado al pie):
   mismo criterio de gradiente con Tokens oficiales de la categoría
   Overlay ya usado en portfolio-hero.css. */
.portfolio-grid__overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    var(--color-overlay-emphasis) 0%,
    var(--color-overlay-soft) 45%,
    transparent 75%
  );
}

.portfolio-grid__body {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
}

.portfolio-grid__name {
  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-inverse);
}

.portfolio-grid__description {
  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-overlay-inverse);
}

/* Mismo dispositivo de acento editorial corto ya certificado en
   footer.css (.footer__contact-title::before) y en success-stories.css
   (.success-stories__divider): separa la descripción de las etiquetas
   de servicio sin introducir un color nuevo. */
.portfolio-grid__divider {
  display: block;
  width: var(--space-5);
  height: var(--border-width-thick);
  border-radius: var(--border-radius-full);
  background-color: var(--color-error);
  margin-block: var(--space-1);
}

.portfolio-grid__tags {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
}

.portfolio-grid__tag {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-inverse);
}

/* --------------------------------------------------------------------
   3. Variants
   .portfolio-grid__case--featured (Veta Vertical): además del salto
   tipográfico de su nombre (mayor presencia editorial), corrige el
   desfase vertical con Swan en la primera fila del Grid en Desktop
   (diagnóstico confirmado: ambas heredaban la misma proporción base
   4:3 de Elements (2), pero al ocupar Veta l-col-7 frente a l-col-5 de
   Swan, resultaba visiblemente más alta). Proporción recalculada en la
   misma base 4:3, escalada por la razón de columnas 7:5 de ambas
   tarjetas (4/3 × 7/5 = 28/15) para que, a igual altura de fila,
   Veta Vertical y Swan compartan la misma altura visual sin fijar un
   valor en píxeles. Swan conserva explícitamente su proporción 4:3
   mediante el selector de hermano adyacente (sin clase propia en el
   marcado existente, Alcance) para dejar ambos lados del cálculo
   declarados en el mismo lugar. object-fit: cover (Elements) sigue
   resolviendo el recorte de ambas fotografías sin deformarlas.
   -------------------------------------------------------------------- */
.portfolio-grid__case--featured .portfolio-grid__media {
  aspect-ratio: 28 / 15;
}

.portfolio-grid__case--featured + .portfolio-grid__case .portfolio-grid__media {
  aspect-ratio: 4 / 3;
}

.portfolio-grid__case--featured .portfolio-grid__name {
  font-size: var(--font-size-h4);
}

/* --------------------------------------------------------------------
   4. States
   Sección editorial sin elementos interactivos propios (v1 sin enlaces
   "Ver proyecto"); estado base (Default) representado por el resto de
   las reglas.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   5. Motion Hooks
   Sin disparador funcional propio ni JavaScript; el contenido se
   presenta directamente en su estado final. Sin sliders, filtros ni
   carruseles (alcance del sprint "Portafolio v1.0").
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. Responsive
   Sistema Responsive (Cap. 11). El remapeo oficial de columnas
   (layout.css, 8) ya linealiza l-col-5/6/7 a ancho completo en Tablet y
   Mobile: el Grid se reorganiza limpiamente en una sola columna
   conservando el orden narrativo del marcado, sin overflow horizontal.
   La proporción 28:15 de Veta Vertical (Variants, 3) solo tiene sentido
   junto a Swan en la fila de Desktop; apiladas en una sola columna
   ambas vuelven a la misma proporción general 4:3 de Elements (2), que
   Swan ya conserva sin cambios en todos los puntos de quiebre.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .portfolio-grid__case--featured .portfolio-grid__media {
    aspect-ratio: 4 / 3;
  }
}