/* instagram.css — Sección "Seguinos en Instagram" (carrusel 3D a todo el ancho). Solo variables de tokens.css.
   Ver docs/DESIGN.md, "Instagram".

   Dos estados:
   1. Base (sin JavaScript, sin soporte 3D o con prefers-reduced-motion): fila horizontal con scroll-snap (5 tarjetas en
      escritorio, 3 en tablet y 1,3 en celular).
   2. .is-3d (lo agrega instagram.js si hay soporte de transform 3D y no hay movimiento reducido): las tarjetas se apilan en
      una escena con perspectiva que ocupa el ancho de la pantalla. La posición de cada una la fija el JS con --ig-d
      (distancia con signo a la activa, en tarjetas, continua), --ig-abs (su valor absoluto) y --ig-z (capa).
   No hay botones ni puntos: el carrusel se recorre con el mouse, el dedo o el teclado.
   Puntos de corte: 48rem (768 px), 64rem (1024 px). */

/* Tarjeta blanca dentro del bloque Redes + contacto (landing.css). El recorte lateral es necesario: las tarjetas
   giradas del 3D no deben salirse de la tarjeta ni generar scroll horizontal de la página. */
.ig {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-5) 0 var(--space-3); /* sin relleno lateral: la cabecera y la fila llevan el suyo */
}

.ig__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-inline: var(--space-5);
}

.ig__cabecera h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
}

.ig__perfil {
  flex: none;
  gap: var(--space-2);
  padding-inline: var(--space-4);
}

.ig-carrusel {
  --ig-w: 72%;

  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}

/* ---- 1. Base: fila con scroll-snap ---- */
.ig-carrusel__pistas {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  /* Aire para la sombra y el anillo de foco (que el scroll no los recorte) */
  padding: var(--space-2) var(--space-5) var(--space-5);
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-5);
}

.ig-tarjeta {
  flex: 0 0 var(--ig-w);
  max-width: none;
  scroll-snap-align: start;
}

.ig-tarjeta__enlace {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
  border: var(--border-card);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  color: var(--color-ink);
  text-decoration: none;
}

.ig-tarjeta__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-sunken);
}

/* Hasta 3 líneas; la altura mínima las reserva siempre, así todas las tarjetas miden lo mismo */
.ig-tarjeta__texto {
  display: -webkit-box;
  min-height: calc(var(--lh-small) * 3em);
  margin: var(--space-4); /* margen y no relleno: con relleno la cuarta línea asoma por debajo del recorte */
  overflow: hidden;
  color: var(--color-ink-2);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .ig-carrusel {
    /* 3 tarjetas visibles: el ancho útil menos los huecos, dividido por 3 */
    --ig-w: calc((100% - 2 * var(--space-4)) / 3);
  }
}

@media (min-width: 64rem) {
  .ig-carrusel {
    /* Sola: 5 tarjetas visibles; junto a WhatsApp (tarjeta de 62 %): 2,4 */
    --ig-w: calc((100% - 4 * var(--space-4)) / 5);
  }

  .redes__grid--doble .ig-carrusel {
    --ig-w: calc((100% - 2 * var(--space-4)) / 2.4);
  }
}

/* ---- 2. Escena 3D a todo el ancho ---- */
/* El ancho de cada tarjeta se calcula sobre el ancho de su tarjeta contenedora, ya no sobre el de la pantalla */
.ig-carrusel.is-3d {
  --ig-w: clamp(13rem, 38vw, 18rem);
}

@media (min-width: 64rem) {
  .ig-carrusel.is-3d {
    --ig-w: 20rem;
  }

  .redes__grid--doble .ig-carrusel.is-3d {
    --ig-w: clamp(12rem, 15vw, 14.5rem);
  }
}

.ig-carrusel.is-3d .ig-carrusel__pistas {
  display: grid;
  justify-items: center;
  padding: var(--space-4) 0 var(--space-4);
  overflow: visible;
  perspective: 1500px;
  scroll-snap-type: none;
  touch-action: pan-y; /* el scroll vertical sigue siendo del navegador; el arrastre horizontal es nuestro */
  user-select: none;
  cursor: grab;
}

.ig-carrusel.is-3d .ig-carrusel__pistas:active {
  cursor: grabbing;
}

/* La posición es continua (la actualiza el JS en cada cuadro): sin transiciones de transform, solo variables */
.ig-carrusel.is-3d .ig-tarjeta {
  grid-area: 1 / 1;
  width: var(--ig-w);
  z-index: var(--ig-z, 1);
  transform:
    translateX(calc(var(--ig-d, 0) * 78%))
    translateZ(calc(var(--ig-abs, 0) * -110px))
    rotateY(calc(var(--ig-d, 0) * -22deg))
    scale(calc(1 - var(--ig-abs, 0) * 0.05));
  opacity: clamp(0, calc(1.7 - var(--ig-abs, 0) * 0.55), 1);
  will-change: transform, opacity;
}

/* Lejos de la activa: ni se ven ni se pueden tocar */
.ig-carrusel.is-3d .ig-tarjeta[data-pos="oculta"] {
  visibility: hidden;
  pointer-events: none;
}

.ig-carrusel.is-3d .ig-tarjeta:not([data-pos="activa"]) .ig-tarjeta__enlace {
  cursor: pointer;
}