/* ==========================================================================
   PORTFOLIO HERO — Portafolio — DIGART Studio
   Pattern: Portfolio Hero

   Referencia documental:
     incoming/portafolio/Mockup Portafolio.png (dirección de arte y
     jerarquía visual; solo referencia, no se publica)
     docs/002-information-architecture.md (D-042, entrada "Portafolio")
     project/03-PRODUCT/P-02-FRONTEND.md (4.2 Contenedores, 6 Dirección de
     Arte, 10 Tipografía, 17 Sistema de Accesibilidad)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-full-width, .l-container). No
   declara valores independientes de color, tipografía, espaciado, tiempo,
   easing, z-index, sombra ni punto de quiebre. Misma técnica de capas
   superpuestas (fondo absoluto + overlay absoluto + contenedor relativo,
   sin z-index) ya certificada en hero.css e institutional-hero.css; el
   fondo absoluto aloja aquí un collage de seis fotografías en lugar de
   una sola.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   Hero breve (mismo criterio de altura moderada, no viewport completo,
   ya certificado en institutional-hero.css): suficiente para que el
   collage de seis fotografías se lea con presencia premium sin competir
   con el Grid inmediato siguiente.
   -------------------------------------------------------------------- */
.portfolio-hero {
  position: relative;
  overflow: hidden;
  min-height: 34rem;
  display: flex;
  align-items: center;
  background-color: var(--color-background-inverse);
}

/* --------------------------------------------------------------------
   2. Elements — capas superpuestas
   Collage: tres columnas por dos filas, una fotografía distinta por
   celda (las mismas seis del Grid, sin recursos nuevos), cada una
   recortada mediante object-fit: cover para llenar su celda sin
   deformarse.
   -------------------------------------------------------------------- */
.portfolio-hero__collage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

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

/* Overlay degradado progresivo (prioridad absoluta a la lectura del
   texto, alineado a la izquierda): mismo criterio de gradiente ya
   certificado en business-hero.css/specialties-hero.css, aquí con un
   tercer punto (--color-overlay-default) para una transición más
   gradual sobre seis fotografías distintas en lugar de una sola. Solo
   Tokens oficiales de la categoría Overlay (tokens.css, 3.1): ningún
   color ni opacidad independiente. */
.portfolio-hero__overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    var(--color-overlay-emphasis) 0%,
    var(--color-overlay-emphasis) 45%,
    var(--color-overlay-default) 70%,
    var(--color-overlay-soft) 100%
  );
}

/* --------------------------------------------------------------------
   3. Container
   position: relative (sin z-index) sitúa el bloque editorial por
   encima del collage y del overlay, mismo criterio que hero.css.
   padding-block resuelve la separación respecto al Header fijo
   (position: fixed, header.css) y respecto al siguiente Pattern.
   -------------------------------------------------------------------- */
.portfolio-hero__container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block-start: calc(var(--space-8) + var(--space-6));
  padding-block-end: var(--space-8);
}

/* --------------------------------------------------------------------
   4. Elements — bloque editorial
   -------------------------------------------------------------------- */
.portfolio-hero__eyebrow {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-error);
}

.portfolio-hero__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-inverse);
  max-width: 40rem;
}

.portfolio-hero__support-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-inverse);
  max-width: 34rem;
}

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

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

/* --------------------------------------------------------------------
   7. 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, mismo criterio ya aplicado en el
   resto de páginas institucionales.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   8. Responsive
   Sistema Responsive (Cap. 11), breakpoint oficial de tokens.css
   reproducido en valor literal, mismo criterio que layout.css.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px
   El bloque editorial ocupa el ancho completo del contenedor y el
   overlay se aplana (mismo criterio cromático, sin gradiente) para
   garantizar contraste suficiente en todo el ancho del texto, que en
   este punto de quiebre ya no queda confinado al tercio izquierdo. */
@media (max-width: 768px) {
  .portfolio-hero {
    min-height: 28rem;
  }

  .portfolio-hero__container {
    padding-block-start: calc(var(--space-7) + var(--space-6));
  }

  .portfolio-hero__title,
  .portfolio-hero__support-text {
    max-width: none;
  }

  .portfolio-hero__overlay {
    background-image: linear-gradient(
      to right,
      var(--color-overlay-emphasis) 0%,
      var(--color-overlay-emphasis) 100%
    );
  }
}