/* ==========================================================================
   Proyectos: filter pills, masonry grid, clip-path diagonal wipe, lightbox.
   ========================================================================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-12);
}

.filter {
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.filter:hover {
  border-color: var(--color-secondary-deep);
}

.filter[aria-pressed='true'] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-secondary);
}

/* ----------------------------------------------------------------- Masonry */
.masonry {
  columns: 3;
  column-gap: var(--space-8);
}

.tile {
  position: relative;
  margin-bottom: var(--space-8);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #d9d2c4;
  break-inside: avoid;
  transition: opacity 400ms ease, transform 400ms var(--ease-out);
}

.tile.is-hidden {
  display: none;
}

.tile.is-entering {
  opacity: 0;
  transform: translateY(16px);
}

.tile__link {
  position: relative;
  display: block;
  color: var(--color-text-light);
  text-decoration: none;
  --accent: var(--color-secondary);
}

.tile__img {
  width: 100%;
  transition: transform 1200ms var(--ease-out);
}

.tile__link:hover .tile__img,
.tile__link:focus-visible .tile__img {
  transform: scale(1.05);
}

/* 6. Image hover: a dark panel wipes in diagonally via clip-path. */
.tile__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 24, 0.84);
  clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);
  transition: clip-path 600ms var(--ease-out);
}

.tile__link:hover .tile__overlay,
.tile__link:focus-visible .tile__overlay {
  clip-path: polygon(0 36%, 100% 8%, 100% 100%, 0 100%);
}

.tile__badge {
  position: absolute;
  left: var(--space-6);
  bottom: var(--space-6);
  transition: transform 600ms var(--ease-out);
}

.tile__info {
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: var(--space-6);
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms ease, transform 600ms var(--ease-out);
}

.tile__link:hover .tile__info,
.tile__link:focus-visible .tile__info {
  opacity: 1;
  transform: none;
  transition-delay: 120ms;
}

.tile__link:hover .tile__badge,
.tile__link:focus-visible .tile__badge {
  transform: translateY(calc(-1 * (var(--info-h, 84px) + var(--space-4))));
}

.tile__title {
  line-height: 1.2;
}

.masonry__empty {
  padding-block: var(--space-12);
  color: var(--muted);
  text-align: center;
}

/* Touch devices have no hover: keep the title readable over a soft gradient. */
@media (hover: none) {
  .tile__overlay {
    clip-path: none;
    background: linear-gradient(180deg, transparent 45%, rgba(26, 26, 24, 0.88));
  }

  .tile__info {
    opacity: 1;
    transform: none;
  }

  .tile__info .link {
    display: none;
  }

  .tile__badge {
    top: var(--space-4);
    left: var(--space-4);
    bottom: auto;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------- Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-6) var(--space-8);
  background: rgba(20, 20, 18, 0.96);
  color: var(--color-text-light);
  opacity: 0;
  transition: opacity var(--transition-base);
  --accent: var(--color-secondary);
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__figure {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  min-width: 0;
  height: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
}

.lightbox__img {
  width: auto;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-base);
}

.lightbox__img.is-loading {
  opacity: 0;
}

.lightbox__caption {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  text-align: center;
}

.lightbox__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-secondary);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.lightbox__btn:hover {
  border-color: var(--color-secondary);
  background: rgba(200, 169, 110, 0.12);
}

.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

/* -------------------------------------------------------------- Responsive */
@media (max-width: 1000px) {
  .masonry {
    columns: 2;
    column-gap: var(--space-6);
  }

  .tile {
    margin-bottom: var(--space-6);
  }
}

@media (max-width: 640px) {
  .masonry {
    columns: 1;
  }

  .lightbox {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: var(--space-16) var(--space-4) var(--space-6);
  }

  .lightbox__figure {
    grid-column: 1 / -1;
  }

  .lightbox__prev {
    grid-row: 2;
    justify-self: end;
  }

  .lightbox__next {
    grid-row: 2;
    justify-self: start;
  }
}