/*
 * Lunako — tarjeta, rejilla filtrada y ficha de proyecto
 * Valores portados del prototipo. Los estados son clases o :hover; nada en JS.
 */

/* ============================== la tarjeta ============================== */
/* Un solo componente para la Home y para el archivo. Es un <a> que envuelve
   todo, con el título como texto real: el nombre del proyecto no puede
   depender del rollover. */

.lk-card {
  position: relative; display: block;
  aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--lk-ink);
  min-height: 0;
}

.lk-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  filter: grayscale(1);
  transition: transform var(--lk-dur-zoom) var(--lk-ease-img), filter 1s var(--lk-ease);
  will-change: transform;
}

/* El vídeo se coloca igual que la imagen y con el mismo tratamiento, para que
   al aparecer no se note el cambio. Empieza invisible: lo enciende el JS solo
   cuando de verdad hay algo que ver. */
.lk-card__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  opacity: 0; transition: opacity .45s var(--lk-ease);
  pointer-events: none;
}
.lk-card__video.is-on { opacity: 1; }

/* El vídeo se coloca igual que la imagen y con el mismo tratamiento, para que
   al aparecer no se note el cambio. Empieza invisible: lo enciende el JS solo
   cuando de verdad hay algo que ver. */
.lk-card__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  opacity: 0; transition: opacity .45s var(--lk-ease);
  pointer-events: none;
}
.lk-card__video.is-on { opacity: 1; }

.lk-card__veil {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 24px;
  background-color: rgba(5, 4, 3, .36);
  background-image: linear-gradient(180deg, rgba(5, 4, 3, .10) 0%, rgba(5, 4, 3, .74) 100%);
  opacity: 0;
  transition: opacity .7s var(--lk-ease);
}

/* El marcado son <span> —van dentro de un <a>, donde un <div> no es válido—,
   así que las tres líneas necesitan display:block para apilarse. */
.lk-card__inner {
  display: block;
  transform: translateY(14px);
  transition: transform .8s var(--lk-ease);
}

.lk-card__cat   { display: block; color: #fff; padding-bottom: 8px; }
.lk-card__name  { display: block; color: #fff; }
.lk-card__meta  {
  display: block;
  font-family: var(--lk-font-body); font-weight: 400;
  font-size: 10px; letter-spacing: .5px;
  color: rgba(255, 255, 255, .75); padding-top: 10px;
}

/* Cinta de reposo: el título legible sin necesidad de pasar por encima. */
.lk-card__strip {
  position: absolute; inset: auto 0 0 0; height: 73px;
  display: flex; align-items: flex-start;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(5, 4, 3, 0) 0%, rgba(5, 4, 3, .7) 100%);
  opacity: 1;
  transition: opacity var(--lk-dur-veil) var(--lk-ease);
}
.lk-card__strip > span {
  display: block; padding: 15px 0; max-width: 100%;
  color: rgba(240, 237, 232, .8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lk-card:hover .lk-card__img,
.lk-card:focus-visible .lk-card__img { transform: scale(1.07); filter: grayscale(0); }
.lk-card:hover .lk-card__veil,
.lk-card:focus-visible .lk-card__veil { opacity: 1; }
.lk-card:hover .lk-card__inner,
.lk-card:focus-visible .lk-card__inner { transform: none; }
.lk-card:hover .lk-card__strip,
.lk-card:focus-visible .lk-card__strip { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .lk-card:hover .lk-card__img,
  .lk-card:focus-visible .lk-card__img { transform: scale(1.001); }
}

/* ============================ rejilla y filtros ============================ */

.lk-archive { background: var(--lk-dark); }

.lk-archive__head {
  max-width: var(--lk-max); margin: 0 auto;
  padding: 40px var(--lk-gutter) 0;
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: space-between; align-items: flex-end;
}
.lk-archive__eyebrow {
  font-family: var(--lk-font-display); font-weight: 300;
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--lk-accent-dark); padding-bottom: 12px;
}
.lk-archive__title { color: var(--lk-bone); }

.lk-archive__rule {
  width: calc(100% - 2 * var(--lk-gutter)); max-width: var(--lk-max);
  height: 1px; margin: 40px auto 0;
  background: var(--lk-line-dark);
}

/* 2 px dejaban las pastillas pegadas y el grupo se leía como una barra
   continua. Con 10 se distinguen una a una sin dejar de formar grupo. */
.lk-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.lk-filters a {
  display: flex; align-items: center;
  padding: 8px 16px; min-height: 44px;
  font-family: var(--lk-font-body); font-weight: 400;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  background: transparent;
  color: rgba(240, 237, 232, .55);
  box-shadow: inset 0 0 0 1px rgba(240, 237, 232, .2);
  transition: background .4s var(--lk-ease), color .4s var(--lk-ease), box-shadow .4s var(--lk-ease);
}
.lk-filters a:hover, .lk-filters a:focus-visible {
  background: rgba(216, 210, 194, .22);
  color: var(--lk-light);
}
.lk-filters a[aria-current] {
  background: var(--lk-bone);
  color: var(--lk-ink);
  box-shadow: inset 0 0 0 1px rgba(26, 25, 22, .2);
}

.lk-grid-wrap { padding: 60px var(--lk-gutter) 80px; }
/*
 * Tres columnas en escritorio, dos en tableta y una en móvil. Fijas, no
 * deducidas del ancho disponible.
 *
 * Antes se calculaban solas con repeat(auto-fill, minmax(...)), y eso ataba el
 * número de columnas al tamaño de la tarjeta: a 768 px —una tableta en
 * vertical— salía una sola columna en vez de dos. Y antes de eso, con auto-fit,
 * las columnas sin tarjeta desaparecían y las que quedaban se repartían el
 * hueco: una categoría con un proyecto pintaba una tarjeta de 1840 px de ancho.
 *
 * Escritas así, la rejilla es la misma haya tres proyectos o uno.
 */
.lk-grid {
  max-width: var(--lk-max); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lk-gap);
}
@media (min-width: 700px)  { .lk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lk-grid { grid-template-columns: repeat(3, 1fr); } }
.lk-grid.is-loading { opacity: .35; transition: opacity .25s var(--lk-ease); }

.lk-empty { color: rgba(240, 237, 232, .55); }

/* ============================ ficha de proyecto ============================ */

.lk-hero {
  position: relative;
  height: 840px; max-height: 86vh;
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.lk-hero__img {
  position: absolute; inset: 0; height: 116%;
  background-size: cover; background-position: center;
  will-change: transform;
}
/* Encima de la imagen y por debajo del velo, con el mismo encuadre. Aparece
   cuando de verdad está reproduciendo, no cuando empieza a cargar. */
.lk-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s var(--lk-ease);
  pointer-events: none;
}
.lk-hero__video.is-on { opacity: 1; }

.lk-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 4, 3, .2) 0%, rgba(5, 4, 3, .55) 100%);
}
/* Mismo contenedor que .lk-single__body: el antetítulo y el titular caen
   exactamente sobre la columna de datos, también por encima de 1840 px, donde
   el contenido se centra y el borde de la ventana ya no es la referencia. */
.lk-hero__body {
  position: relative;
  width: 100%; max-width: var(--lk-max); margin-inline: auto;
  padding: 48px var(--lk-gutter);
}

.lk-hero__cats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-bottom: 14px;
}
.lk-hero__cats .lk-link {
  color: #fff;
  background-image: linear-gradient(#fff, #fff);
  font-family: var(--lk-font-body); font-weight: 500;
  font-size: 10px; line-height: 1; letter-spacing: 2.5px; text-transform: uppercase;
}
.lk-hero__cats .lk-link:hover, .lk-hero__cats .lk-link:focus-visible { color: #fff; }
.lk-sep { color: rgba(240, 237, 232, .3); font-family: var(--lk-font-body); font-size: 10px; line-height: 1; }

.lk-hero__title { max-width: 1400px; color: var(--lk-light); text-wrap: pretty; }

.lk-single__body {
  max-width: var(--lk-max); margin: 0 auto;
  padding: 64px var(--lk-gutter);
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: clamp(40px, 4vw, 80px);
}

/* Columna de datos. El sticky muere si un ancestro tiene overflow:hidden;
   .lk-root usa overflow-x: clip justo por eso. */
.lk-data {
  order: 1;
  position: sticky; top: calc(88px + var(--lk-admin)); align-self: flex-start;
  flex: 0 1 clamp(240px, 22vw, 340px);
  min-width: min(100%, 240px);
  display: flex; flex-direction: column; gap: 28px;
}

/*
 * Única media query del tema, y a conciencia.
 *
 * El resto del sistema escala con clamp() porque son medidas. Esto no lo es:
 * es un cambio de comportamiento, y «pegada o no pegada» no admite valores
 * intermedios que interpolar. En CSS no hay forma de preguntar «¿ha envuelto
 * este flex?», que es la condición que de verdad importa: apilada encima del
 * texto, quedarse pegada taparía justo lo que se está leyendo.
 *
 * Por eso aquí no solo se despega: se fuerza también el apilado con
 * flex-basis 100%. Atando las dos cosas al mismo umbral no pueden discrepar.
 * Dejar que el apilado lo decidiera el reparto natural del flex abría una
 * franja de desacuerdo, porque ese punto se mueve con el ancho de la barra de
 * scroll —840 px sin barra, 856 con ella— mientras que la media query no.
 */
@media (max-width: 900px) {
  /* En móvil el hero se encaja al 80 % de la ventana. Con svh se mide la
     ventana pequeña —la que queda con la barra del navegador desplegada—, así
     que encaja de verdad y no salta al hacer scroll. */
  .lk-hero { height: 80vh; height: 80svh; max-height: none; }

  .lk-data {
    position: static; top: auto;
    flex-basis: 100%;
  }
}
.lk-data__row { border-top: 1px solid var(--lk-line-light); padding-top: 14px; }
.lk-data__k { color: var(--lk-muted); padding-bottom: 8px; }
.lk-data__v {
  font-family: var(--lk-font-display); font-weight: 400;
  font-size: 16px; line-height: 1.2; letter-spacing: .2px; color: var(--lk-ink);
}
.lk-data__cats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lk-data__cats .lk-sep { font-family: var(--lk-font-display); font-size: 16px; color: rgba(26, 25, 22, .25); }

.lk-single__main {
  order: 2;
  flex: 1 1 min(100%, 520px); min-width: 0;
  display: flex; flex-direction: column; gap: 32px;
}
.lk-single__lede { color: var(--lk-ink); text-wrap: pretty; }
.lk-single__text {
  font-family: var(--lk-font-body); font-weight: 300;
  font-size: 15px; line-height: 1.8; color: var(--lk-muted);
  max-width: 70ch; text-wrap: pretty;
}
.lk-single__text p + p { margin-top: 1.1em; }
.lk-single__text a { color: var(--lk-accent); }

/* -------------------------------- galería -------------------------------- */
/* Flex y no grid a propósito: una pieza a doble ancho no genera columnas
   implícitas y todo cae a una columna en móvil sin puntos de corte. */

.lk-gal { display: flex; flex-wrap: wrap; gap: var(--lk-gap); padding: 16px 0; }

.lk-gal__item {
  position: relative; overflow: hidden; background: var(--lk-ink);
  flex: 1 1 calc(50% - 13px);
  min-width: min(100%, 280px);
  aspect-ratio: 4 / 3;
}
.lk-gal__item--completo { flex: 1 1 100%; aspect-ratio: 16 / 9; }

.lk-gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lk-dur-zoom) var(--lk-ease-img); }
.lk-gal__item:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .lk-gal__item:hover img { transform: none; } }

.lk-gal__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 4, 3, .28);
  min-height: 0;
}
.lk-gal__play span {
  width: 74px; height: 74px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(240, 237, 232, .7);
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background .4s var(--lk-ease);
}
.lk-gal__play:hover span, .lk-gal__play:focus-visible span { background: rgba(5, 4, 3, .35); }
.lk-gal__play svg { margin-left: 3px; }

.lk-gal__tag {
  position: absolute; left: 16px; top: 16px;
  color: rgba(240, 237, 232, .75);
}

/* El vídeo sustituye a la portada al pulsar. */
.lk-gal__item iframe,
.lk-gal__item video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* ---------------------------- proyecto siguiente ---------------------------- */

.lk-next {
  border-top: 1px solid var(--lk-line-light);
  border-bottom: 1px solid var(--lk-line-light);
  padding: 48px var(--lk-gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  transition: background var(--lk-dur-veil) var(--lk-ease);
}
.lk-next:hover, .lk-next:focus-visible { background: rgba(26, 25, 22, .035); }
/* Dos líneas con la misma letra y el mismo peso: el rótulo, más pequeño, en
   versalitas espaciadas y en gris; el título, a cuerpo. */
.lk-next__texto { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lk-next__k,
.lk-next__t { font-family: var(--lk-font-display); font-weight: 400; }
.lk-next__k {
  font-size: 12px; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lk-muted);
}
.lk-next__t {
  font-size: clamp(19px, 1.5vw, 24px); line-height: 1.2; letter-spacing: -.01em;
  color: var(--lk-ink);
}

/* La flecha de la Home (.lk-arrow), tumbada: mismo trazo fino, misma opacidad
   en reposo y la misma subida a 1 al pasar por encima. */
.lk-next__flecha {
  flex-shrink: 0; width: clamp(40px, 3.4vw, 58px); height: auto; overflow: visible;
  color: var(--lk-ink); opacity: .45;
  transition: transform .6s var(--lk-ease), opacity var(--lk-dur-veil) var(--lk-ease);
}
.lk-next:hover .lk-next__flecha,
.lk-next:focus-visible .lk-next__flecha { opacity: 1; transform: translateX(10px); }