/* ==========================================================================
   pages/trabajos.css — Penumbra Rental
   Portfolio: filter bar, masonry grid, modal, logo wall
   ========================================================================== */

/* --------------------------------------------------------------------------
   Works filter bar
   -------------------------------------------------------------------------- */
.works-filter-bar {
  position: sticky;
  top: 72px;
  z-index: 200;
  background: rgba(7, 9, 11, 0.96);
  border-bottom: var(--border);
  padding: var(--space-4) 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.works-filter-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.works-filter-bar__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-steel);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-right: var(--space-2);
}

.filter-pill {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-steel);
  border: var(--border);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  background: transparent;
}

.filter-pill:hover,
.filter-pill--active {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.filter-pill--active {
  background: var(--color-gold-dim);
}

/* --------------------------------------------------------------------------
   Portfolio counter hero
   -------------------------------------------------------------------------- */
.works-counter {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-gold);
  letter-spacing: 0.12em;
  display: block;
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Works masonry/grid
   -------------------------------------------------------------------------- */
.works-grid-section {
  background: var(--color-bg);
}

.works-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-10);
}

/* Varied sizes for interest */
.work-tile--tall .work-tile__img-wrap {
  aspect-ratio: 2 / 3;
}

.work-tile--wide .work-tile__img-wrap {
  aspect-ratio: 16 / 9;
}

.work-tile--square .work-tile__img-wrap {
  aspect-ratio: 1;
}

.work-tile--std .work-tile__img-wrap {
  aspect-ratio: 4 / 3;
}

/* Items that get hidden when filtered */
.work-tile.is-hidden {
  display: none;
}

/* --------------------------------------------------------------------------
   No results state
   -------------------------------------------------------------------------- */
.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-20) 0;
}

.no-results p {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-border);
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   Logo wall section
   -------------------------------------------------------------------------- */
.logoswall-section {
  background: var(--color-bg-deep);
  border-top: var(--border);
}

.logoswall-section .section-header--centered {
  margin-bottom: var(--space-12);
}

.logo-wall {
  padding: var(--space-8) 0;
  border-top: var(--border);
  border-bottom: var(--border);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .works-masonry {
    grid-template-columns: repeat(2, 1fr);
  }

  .works-filter-bar {
    top: 64px;
  }
}

@media (max-width: 768px) {
  .works-filter-bar__inner {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
    gap: var(--space-2);
  }

  .works-filter-bar__label {
    display: none;
  }

  .works-masonry {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .work-tile--tall .work-tile__img-wrap,
  .work-tile--wide .work-tile__img-wrap,
  .work-tile--square .work-tile__img-wrap,
  .work-tile--std .work-tile__img-wrap {
    aspect-ratio: 16 / 9;
  }

  .logo-wall {
    gap: var(--space-8);
  }

  .logo-wall__item {
    font-size: 0.75rem;
  }
}