/* ==========================================================================
   PORTFOLIOS
   Acordeón de portfolios + galería horizontal + tarjeta de contacto.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Variables del portfolio  ✏️ EDITABLE
   -------------------------------------------------------------------------- */

.portfolios {
  --portfolio-height: 500px;         /* Alto de todas las piezas (todos los breakpoints) */
  --portfolio-gap: 32px;             /* Espacio entre piezas */
  --portfolio-track-padding: 10px;   /* Margen interior de la galería */
  --video-radius: 20px;              /* Esquinas de MP4 y Vimeo (las imágenes ya las traen) */
  --video-placeholder-color: #E2D6C2; /* Recuadro visible mientras carga un video */
  --accordion-duration: 400ms;       /* Duración de abrir / cerrar un portfolio */
}


/* --------------------------------------------------------------------------
   Sección
   -------------------------------------------------------------------------- */

.portfolios {
  padding: 10px var(--page-gutter);
}


/* --------------------------------------------------------------------------
   Pestaña (acordeón)
   -------------------------------------------------------------------------- */

.portfolio-tab {
  padding: 10px;
  border-top: 1px solid var(--color-divider);
}

.portfolio-tab__heading {
  font-weight: inherit;
}

.portfolio-tab__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% + 10px);
  margin-left: -10px;          /* anula el padding izquierdo de .portfolio-tab */
  padding: 10px 10px 10px 0;   /* el título empieza donde empieza la línea gris */
  background: none;
  border: 0;
  color: var(--color-gold);
  text-align: left;
  cursor: pointer;
}

.portfolio-tab__title {
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: var(--font-display-weight);
  line-height: 70px;
}

/* En móvil algunos títulos ocupan dos líneas (según el ancho): con 70px de
   interlineado quedaban muy separadas. Se usa 56px entre líneas (el valor que
   ya tenía "Collage & Illustration") y los 14px que faltan hasta 70px van como
   padding arriba y abajo: los títulos de una línea miden lo mismo que antes. */
@media (max-width: 767px) {
  .portfolio-tab__title {
    --tab-title-line-height: 56px;   /* ✏️ interlineado cuando el título ocupa varias líneas */

    padding-block: calc((70px - var(--tab-title-line-height)) / 2);
    line-height: var(--tab-title-line-height);
  }
}

/* Icono: ojo (abierto) / chevron (cerrado), con fundido entre los dos */
.portfolio-tab__icon {
  position: relative;
  flex-shrink: 0;
  width: 45px;
  height: 45px;
}

.portfolio-tab__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.15s ease-in-out;
}

.portfolio-tab__icon-open                              { opacity: 0; }
.portfolio-tab__icon-closed                            { opacity: 1; }
.portfolio-tab.is-open .portfolio-tab__icon-open       { opacity: 1; }
.portfolio-tab.is-open .portfolio-tab__icon-closed     { opacity: 0; }

/* Panel: se abre animando la altura de 0 a su tamaño natural */
.portfolio-tab__panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-inline: -10px;   /* anula el padding lateral de .portfolio-tab: la galería ocupa el ancho del contenedor, de línea a línea */
  transition: grid-template-rows var(--accordion-duration) ease;
}

.portfolio-tab.is-open .portfolio-tab__panel {
  grid-template-rows: 1fr;
}

.portfolio-tab__panel-inner {
  min-height: 0;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   Galería horizontal
   El scroll es nativo (touch, trackpad, Shift + rueda).
   El arrastre con mouse lo añade js/drag-scroll.js.
   -------------------------------------------------------------------------- */

.portfolio-track {
  display: flex;
  gap: var(--portfolio-gap);
  padding: var(--portfolio-track-padding) 0;   /* solo arriba y abajo: la primera y la última pieza tocan los bordes del contenedor */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;  /* evita "atrás/adelante" del navegador al deslizar en trackpad */
  scrollbar-width: none;           /* oculta la barra (Firefox) */
  cursor: grab;
}

.portfolio-track::-webkit-scrollbar {
  display: none;                   /* oculta la barra (Chrome, Safari) */
}

.portfolio-track.is-dragging {
  cursor: grabbing;
  user-select: none;
}


/* --------------------------------------------------------------------------
   Escritorio: galería a todo el ancho de la ventana
   Los títulos siguen dentro del contenedor central; la galería se estira
   hasta ambos bordes de la sección (= ancho de la ventana sin la barra de
   scroll, así nunca aparece scroll horizontal en la página).
   La primera pieza empieza en el borde izquierdo del contenedor (como el
   título) y, al final del recorrido, la última termina en su borde derecho.
   En móvil y tablet la galería ocupa el ancho del contenedor.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  /* La sección es la referencia de ancho: 100cqw = su ancho interior */
  .portfolios {
    container-type: inline-size;
  }

  /* Recorta solo en vertical (para la animación del acordeón);
     en horizontal deja salir la galería.
     min-width: 0 evita que el panel crezca hasta el ancho total de las piezas. */
  .portfolio-tab__panel-inner {
    min-width: 0;
    overflow-x: visible;
    overflow-y: clip;
  }

  /* 100% = ancho del contenedor (el panel anula el padding de la pestaña).
     El margen negativo lleva la galería hasta los bordes de la sección y el
     padding devuelve la primera y la última pieza a los bordes del contenedor. */
  .portfolio-track {
    margin-inline: calc((100% - 100cqw) / 2 - var(--page-gutter));
    padding-inline: calc((100cqw - 100%) / 2 + var(--page-gutter));
  }
}


/* --------------------------------------------------------------------------
   Piezas
   Todas tienen el mismo alto; el ancho sale de su proporción (--piece-ratio),
   que js/portfolio.js asigna a cada pieza. Las piezas NO se reducen para
   caber en pantalla: pueden ser más anchas que el móvil a propósito.
   -------------------------------------------------------------------------- */

.portfolio-piece {
  flex: 0 0 auto;
  height: var(--portfolio-height);
  width: auto;
  aspect-ratio: var(--piece-ratio);
}

/* Imágenes: las esquinas redondeadas ya vienen en el archivo */
.portfolio-piece--image {
  border-radius: 20px;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* --------------------------------------------------------------------------
   Créditos sobre una pieza (piezas con "credits" en data/portfolios/*.js)
   Imagen: el <figure> es la pieza; la imagen lo llena y la franja va encima, abajo.
   MP4 y Vimeo: la franja va dentro del recuadro del video, encima de él.
   -------------------------------------------------------------------------- */

.portfolio-piece--credited {
  --credits-inset: 40px;   /* ✏️ margen del texto a los lados y abajo (el mismo para los tres bordes) */
  --image-radius: 22px;    /* radio que traen dibujado las imágenes (41px en archivos de 920px de alto, a 500px) */

  position: relative;
  margin: 0;
}

/* En móvil, menos separación de los bordes */
@media (max-width: 767px) {
  .portfolio-piece--credited {
    --credits-inset: 24px;   /* ✏️ margen en móvil */
  }
}

/* En videos, las esquinas de la franja siguen el radio del video */
.portfolio-track > .portfolio-piece--credited:is(.portfolio-piece--video, .portfolio-piece--vimeo) {
  --image-radius: var(--video-radius);
}

.portfolio-piece--credited .portfolio-piece--image {
  display: block;
  width: 100%;
  height: 100%;
}

.portfolio-credits {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;   /* por encima del <video> o del iframe de Vimeo (que se crea después) */
  display: flex;
  justify-content: space-between;
  gap: 16px;
  /* El alto de arriba deja espacio al degradado. Abajo se descuenta el aire que
     la línea deja bajo las letras (interlineado + descendentes ≈ 0.36em), para
     que la base del texto quede a --credits-inset del borde, igual que a los lados. */
  padding: 56px var(--credits-inset) calc(var(--credits-inset) - 0.36em);
  border-radius: 0 0 var(--image-radius) var(--image-radius); /* mismas esquinas que la imagen */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));   /* ✏️ oscuro abajo, transparente arriba */
  color: #EDE6D6;
  font-family: var(--font-body);
  font-size: 14px;   /* ✏️ */
  line-height: 1.3;
  pointer-events: none;   /* el arrastre y la lente del cursor siguen funcionando encima */
  opacity: 0;             /* oculta hasta el hover (o el toque en móvil) */
  transition: opacity 0.4s ease;   /* ✏️ aparición / desaparición */
}

.portfolio-credits__right {
  text-align: right;
}

/* Con mouse: aparece al pasar el cursor sobre la imagen. */
@media (hover: hover) {
  .portfolio-piece--credited:hover .portfolio-credits { opacity: 1; }
}

/* Pantallas táctiles (sin hover): los créditos se ven siempre, sin depender
   de tocar la imagen. */
@media (hover: none) {
  .portfolio-credits {
    opacity: 1;
    transition: none;
  }
}

.portfolio-piece--credited.is-showing-credits .portfolio-credits {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Escritorio: piezas más grandes
   Imágenes (sueltas o con créditos), MP4, Vimeo y la tarjeta de contacto
   crecen en alto; su ancho sale de su proporción, así que no se deforman
   ni se recortan. En la fila quedan centradas en vertical.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .portfolios {
    --portfolio-image-height: 750px;   /* ✏️ alto de todas las piezas en escritorio (imágenes, MP4, Vimeo y tarjeta) */
  }

  .portfolio-track {
    align-items: center;
  }

  /* ">" : solo la pieza en sí, no la imagen que va dentro de un <figure> con créditos.
     MP4 y Vimeo usan el mismo alto; su ancho sale de --piece-ratio (proporción
     real del video) y el <video>/<iframe> llena el recuadro, sin recortes. */
  .portfolio-track > .portfolio-piece--image,
  .portfolio-track > .portfolio-piece--credited,
  .portfolio-track > .portfolio-piece--video,
  .portfolio-track > .portfolio-piece--vimeo,
  .portfolio-track > .contact-card {
    height: var(--portfolio-image-height);
  }

  /* El radio dibujado en los archivos (41px de 920px de alto) escala con el nuevo alto */
  .portfolio-track > .portfolio-piece--credited {
    --image-radius: calc(var(--portfolio-image-height) * 41 / 920);
  }
}

/* Mientras una imagen no se ha cargado (todavía sin src) no se muestra su texto alt */
.portfolio-track img:not([src]) {
  visibility: hidden;
}

/* MP4 y Vimeo */
.portfolio-piece--video,
.portfolio-piece--vimeo {
  position: relative;
  overflow: hidden;
  border-radius: var(--video-radius);
  background-color: var(--video-placeholder-color);
}

.portfolio-piece--video video,
.portfolio-piece--vimeo iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;   /* mismo radio que su contenedor */
}

.portfolio-piece--video video {
  object-fit: cover;
}

/* El iframe no recibe el mouse, así el arrastre funciona también encima del video */
.portfolio-piece--vimeo iframe {
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   Tarjeta de contacto (última pieza de cada portfolio)
   -------------------------------------------------------------------------- */

.contact-card {
  --piece-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: var(--color-background);
  border: 1px solid #E2D6C2;
  border-radius: 20px;
  cursor: auto;
}

.contact-card__copyright {
  align-self: flex-end;
  color: var(--color-gold);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

/* Ilustración: tarjeta1 normal / tarjeta2 en hover */
.contact-card__illustration {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 4px 0 0;   /* sin margen abajo: el aire hasta "Mail" lo da la fila (ver .contact-card__row) */
}

.contact-card__illustration img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 1s ease;   /* ✏️ fundido entre las dos imágenes (entrada y salida) */
}

/* Al pasar el cursor por la tarjeta, la segunda imagen aparece con un fundido
   (solo opacidad, sin movimiento) ENCIMA de la primera, que se queda siempre
   visible. Si las dos se desvanecieran a la vez, a mitad del fundido ambas
   quedarían semitransparentes y se vería el fondo crema a través (destello
   blanquecino, colores apagados). */
.contact-card__illustration-hover                     { opacity: 0; }
.contact-card:hover .contact-card__illustration-hover   { opacity: 1; }

/* En móvil la tarjeta no cambia al tocarla: siempre se ve la segunda imagen.
   La primera queda oculta (display: none), así ni siquiera se descarga. */
@media (max-width: 767px) {
  .contact-card__illustration-default {
    display: none;
  }

  /* Fija también al tocarla (el toque activa :hover en móvil) */
  .contact-card__illustration .contact-card__illustration-hover,
  .contact-card:hover .contact-card__illustration-hover {
    opacity: 1;
    transition: none;
  }
}

.contact-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  /* ✏️ Ritmo vertical: ≈22px entre cada línea y el alto de las letras de la
     fila siguiente, y ≈22px entre la base del texto y su línea (el resto del
     espacio de abajo lo ponen los descendentes de la fuente). */
  padding: 20px 0 10px;
  border-bottom: 1px solid #616161;
}

/* Sin línea bajo la última fila ("Social"). Solo se vuelve transparente:
   conserva su 1px, así nada de la tarjeta cambia de tamaño ni de sitio.
   Sin padding abajo: el padding de la tarjeta (16px) ya deja bajo "Social"
   un poco más de aire que encima (≈29px frente a ≈22px). */
.contact-card__row:last-child {
  padding-bottom: 0;
  border-bottom-color: transparent;
}

.contact-card__label {
  color: var(--color-gold);
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: var(--font-display-weight);
  line-height: 33.6px;   /* alto de línea fijo (el de 28px): las filas no crecen y la ilustración conserva su tamaño */
}

.contact-card__value {
  display: flex;
  gap: 8px;
  font-size: 14px;
  line-height: 1.2;
}

.contact-card__value a:hover {
  color: var(--color-gold);
}

.contact-card__separator {
  color: var(--color-gold);
}