/*
  Grupo Attia — Portfolio
  Estilos propios de esta subpágina. Tokens, reset, header y footer se heredan
  de assets/css/ (sistema compartido); aquí vive solo lo específico de esta página.
*/

/* .section: compartida en assets/css/base.css. */

/* Sistema de espaciado único de la sección de portafolio: una sola variable
   fluida controla el margen lateral de la galería, el espacio entre las dos
   imágenes de cada proyecto y el espacio entre filas de proyectos (los tres
   deben coincidir exactamente), más los múltiplos coherentes que ordenan la
   jerarquía vertical (hero → encabezado → primera fila → pie de sección). */
.portfolio-section {
  --portfolio-gap: clamp(14px, 1.5vw, 24px);
  /* Arriba: la distancia entre el hero y la sección usa el mismo valor base
     que el resto del sistema (margen lateral = gap entre imágenes = gap entre
     filas = este espacio), no un múltiplo. */
  padding-top: var(--portfolio-gap);
  padding-bottom: calc(var(--portfolio-gap) * 5);
}

/* ---------- 1 · Hero ---------- */
.portfolio-hero {
  position: relative;
  /* Misma altura compacta que .invest-intro (inversion/inversion.css). */
  height: clamp(340px, 30vw, 400px);
  min-height: 0;
  overflow: hidden;
  background: var(--navy);
}

.portfolio-hero__media {
  position: absolute;
  inset: 0;
}

.portfolio-hero__media img,
.portfolio-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  background: var(--navy);
}

.portfolio-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(15, 24, 33, 0.82) 0%, rgba(15, 24, 33, 0.45) 45%, rgba(15, 24, 33, 0.15) 68%, rgba(15, 24, 33, 0.35) 100%);
}

.portfolio-hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(2.5rem, 7vh, 4.5rem);
  padding-top: calc(var(--header-height) + 2rem);
}

.portfolio-hero__content .eyebrow {
  color: var(--gold);
  margin-bottom: 1rem;
}

.portfolio-hero__title {
  color: var(--white);
  font-size: clamp(2.75rem, 6.4vw, 5rem);
  margin-bottom: 1.1rem;
  max-width: 18ch;
}

.portfolio-hero__subtitle {
  color: rgba(245, 245, 245, 0.9);
  font-size: clamp(15px, 1.3vw, 18px);
  max-width: 48ch;
  line-height: 1.6;
}

/* ---------- 2 · Wrap ----------
   Sin filtros por país (portafolio de un solo mercado): el título de la
   sección queda visualmente oculto (accesible para lectores de pantalla), sin
   ningún elemento visible antes de la galería — la distancia entre el hero y
   la primera fila de fotos es exactamente el padding-top de la sección (ver
   arriba), igual al resto del sistema de espaciado. Comparte el ancho amplio
   de la galería (.portfolio-gallery-wrap), no el .container angosto del
   resto del sitio. */
.portfolio-gallery-wrap {
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: var(--portfolio-gap);
}

/* ---------- 3 · Galería editorial ----------
   Cada proyecto es una "pareja" de dos fotografías: una vertical (columna
   angosta, 42%, pieza de apoyo visual) y una horizontal (columna mayor, 58%,
   lleva la información completa). El orden visual izquierda/derecha alterna
   por proyecto vía .portfolio-pair--reverse, pero el marcado (y el orden de
   lectura/tabulación) siempre pone primero la vertical, luego la horizontal;
   en móvil, .portfolio-pair__img--horizontal (la informativa) se reordena
   siempre primero, sin importar el orden visual que tuviera en escritorio. */
.portfolio-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--portfolio-gap);
}

.portfolio-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--portfolio-gap);
}

@media (min-width: 700px) {
  .portfolio-pair {
    grid-template-columns: 42fr 58fr;
    height: clamp(380px, 40vw, 620px);
  }

  .portfolio-pair--reverse {
    grid-template-columns: 58fr 42fr;
  }

  .portfolio-pair__img--vertical {
    order: 1;
  }

  .portfolio-pair__img--horizontal {
    order: 2;
  }

  .portfolio-pair--reverse .portfolio-pair__img--vertical {
    order: 2;
  }

  .portfolio-pair--reverse .portfolio-pair__img--horizontal {
    order: 1;
  }
}

.portfolio-pair__img {
  /* Margen interior único para todo el contenido superpuesto (etiqueta de
     nombre, bloque informativo): una sola variable evita repetir el mismo
     clamp() en cada regla y mantiene sus alineaciones siempre en sincronía. */
  --pair-inset: clamp(1.25rem, 2.5vw, 2.25rem);
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--neutral);
  border: 1px solid var(--line);
  transition: border-color var(--transition-fast);
  height: clamp(320px, 92vw, 480px);
}

@media (min-width: 700px) {
  .portfolio-pair__img {
    height: 100%;
  }
}

.portfolio-pair__img:hover,
.portfolio-pair__img:focus-visible {
  border-color: var(--gold);
}

/* Hover coherente: al pasar el cursor por cualquiera de las dos fotografías
   de la pareja, ambas reciben el mismo realce de borde, reforzando que son
   una sola unidad (aunque cada una siga siendo su propio enlace). */
.portfolio-pair:has(.portfolio-pair__img:hover) .portfolio-pair__img,
.portfolio-pair:has(.portfolio-pair__img:focus-visible) .portfolio-pair__img {
  border-color: var(--gold);
}

.portfolio-pair__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-pair__img:hover img,
.portfolio-pair__img:focus-visible img {
  transform: scale(1.045);
}

.portfolio-pair__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 24, 33, 0) 40%, rgba(15, 24, 33, 0.82) 100%);
  opacity: 0.92;
  transition: opacity var(--transition);
}

/* La imagen "limpia" (vertical) solo necesita sombreado cerca del texto, no
   sobre toda la foto: degradado más corto y más suave. */
.portfolio-pair__scrim--soft {
  background: linear-gradient(180deg, rgba(15, 24, 33, 0) 68%, rgba(15, 24, 33, 0.72) 100%);
}

.portfolio-pair__img:hover .portfolio-pair__scrim,
.portfolio-pair__img:focus-visible .portfolio-pair__scrim {
  opacity: 1;
}

.portfolio-pair__content {
  position: absolute;
  left: var(--pair-inset);
  right: var(--pair-inset);
  bottom: var(--pair-inset);
  color: var(--white);
}

.portfolio-pair__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.portfolio-pair__tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(15, 24, 33, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.4em 0.85em;
  backdrop-filter: blur(6px);
}

.portfolio-pair__location {
  font-size: 12px;
  color: rgba(245, 245, 245, 0.82);
}

.portfolio-pair__name {
  font-family: var(--font-display);
  color: var(--white);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15;
  margin-bottom: 0.6rem;
}

.portfolio-pair__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(245, 245, 245, 0.8);
  max-width: 46ch;
  margin-bottom: 1.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.portfolio-pair__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  background: var(--gold);
  border-radius: var(--radius);
  padding: 0.75em 1.4em;
  transition: background var(--transition), transform var(--transition-fast);
}

.portfolio-pair__img:hover .portfolio-pair__cta,
.portfolio-pair__img:focus-visible .portfolio-pair__cta {
  background: var(--white);
}

.portfolio-pair__arrow {
  width: 13px;
  height: 13px;
  flex: none;
  transition: transform var(--transition-fast);
}

.portfolio-pair__img:hover .portfolio-pair__arrow,
.portfolio-pair__img:focus-visible .portfolio-pair__arrow {
  transform: translate(1px, -1px);
}

/* Nombre del proyecto en la fotografía "limpia" (vertical): oculto por
   defecto, aparece con una animación sutil (opacidad + desplazamiento
   vertical ligero) al pasar el cursor o al enfocar el enlace con teclado.
   El degradado de .portfolio-pair__scrim--soft ya aporta el contraste
   necesario; el text-shadow es un refuerzo adicional para cualquier foto. */
.portfolio-pair__label {
  position: absolute;
  left: var(--pair-inset);
  bottom: var(--pair-inset);
  font-family: var(--font-display);
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--white);
  text-shadow: 0 1px 6px rgba(15, 24, 33, 0.55);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}

.portfolio-pair__img:hover .portfolio-pair__label,
.portfolio-pair__img:focus-visible .portfolio-pair__label {
  opacity: 1;
  transform: translateY(0);
}

/* Táctil: no hay hover, así que el nombre queda siempre visible (de forma
   discreta por su propio tamaño y peso tipográfico) para no ocultar
   información en dispositivos donde el usuario no puede "pasar el cursor". */
@media (hover: none) {
  .portfolio-pair__label {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Contenido "limpio" (imagen vertical): sin descripción ni CTA, solo el
   nombre (arriba, revelado al hover) y el botón de icono. */
.portfolio-pair__content--clean {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.portfolio-pair__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--white);
  transition: background var(--transition), border-color var(--transition);
}

.portfolio-pair__icon-btn .portfolio-pair__arrow {
  width: 15px;
  height: 15px;
}

.portfolio-pair__img:hover .portfolio-pair__icon-btn,
.portfolio-pair__img:focus-visible .portfolio-pair__icon-btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--white);
}

/* ---------- 4 · Móvil: la foto informativa siempre va primero ----------
   El gap interno de la pareja (entre sus dos fotos apiladas) se reduce a la
   mitad del gap general, para que quede claramente menor que el espacio
   entre proyectos distintos (.portfolio-gallery) y así se lea como un solo
   grupo al apilarse en una columna. */
@media (max-width: 699px) {
  .portfolio-pair {
    gap: calc(var(--portfolio-gap) / 2);
  }

  .portfolio-pair__img--horizontal {
    order: 1;
  }

  .portfolio-pair__img--vertical {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-pair__img,
  .portfolio-pair__img img,
  .portfolio-pair__scrim,
  .portfolio-pair__label,
  .portfolio-pair__cta,
  .portfolio-pair__arrow,
  .portfolio-pair__icon-btn {
    transition: none;
  }
}