/* ==========================================================================
   PORTFOLIO CLOSING — Portafolio — DIGART Studio
   Pattern: Portfolio Closing

   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, 8.1
     Botones)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-container, .l-grid,
   .l-col-6). No declara valores independientes de color, tipografía,
   espaciado, tiempo, easing, z-index, sombra ni punto de quiebre. El
   botón del CTA se resuelve íntegro en el Componente oficial Button v1.0
   (button.css); este archivo solo conserva el layout que lo aloja.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   Fondo editorial oscuro (mismo Token ya usado en Hero, Call To Action y
   Footer) para que la franja de cierre se perciba como un bloque
   deliberado, no como una repetición de Call To Action.
   -------------------------------------------------------------------- */
.portfolio-closing {
  padding-block: var(--space-8);
  background-color: var(--color-background-inverse);
}

/* --------------------------------------------------------------------
   2. Elements
   -------------------------------------------------------------------- */
.portfolio-closing__heading {
  display: flex;
  align-items: center;
}

.portfolio-closing__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-inverse);
}

/* Divisor vertical discreto entre columnas: mismo Token de borde ya
   usado como separador editorial en el bloque legal del Footer
   (footer.css), aquí en el eje de columna y sobre fondo oscuro. */
.portfolio-closing__text-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  border-inline-start: var(--border-width-default) var(--border-style-solid) var(--color-text-secondary);
  padding-inline-start: var(--space-6);
}

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

.portfolio-closing__actions {
  display: flex;
  align-items: center;
}

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

/* --------------------------------------------------------------------
   4. States
   Estado base (Default) representado por el resto de las reglas. Los
   estados de interacción del CTA los resuelve el Componente oficial
   Button v1.0 (button.css), ya integrado en este Pattern.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   5. Motion Hooks
   Sin disparador funcional propio ni JavaScript; el contenido se
   presenta directamente en su estado final.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. Responsive
   Sistema Responsive (Cap. 11). El remapeo oficial de columnas
   (layout.css, 8) ya linealiza .l-col-6 a ancho completo en Tablet y
   Mobile; el divisor vertical pierde sentido apilado en una sola
   columna y se retira en favor de una separación vertical simple.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .portfolio-closing__text-wrap {
    border-inline-start: none;
    padding-inline-start: 0;
  }
}