/* ============================================
   TRABAJOS.PHP — CSS propia del portfolio
   Filtros, rejilla "bento" con 4 tamaños y panel de proyecto.
   Todo sale de variables.css. Las piezas lur-* (cabecera,
   fichas de color, contacto) viven en main.css.
   ============================================ */


/* --- FILTROS ---
   Texto plano en mayúsculas; el activo, subrayado. */
.pf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-brand-black);
}

.lur-split + .pf-filters {
  margin-top: var(--spacing-xl);
}

.filter-btn {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  padding: 0 0 4px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.filter-btn:hover {
  color: var(--color-text-primary);
}

.filter-btn.active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-text-primary);
}

.filter-btn:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 4px;
}


/* --- REJILLA BENTO ---
   4 columnas con aire; las filas miden lo mismo que una columna
   (celdas cuadradas), así los 4 tamaños encajan como un puzle.
   .pf-wrap es solo la "caja" que sirve para medir el ancho. */
.pf-wrap {
  container-type: inline-size;
}

.pf-grid {
  --pf-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--pf-cols), minmax(0, 1fr));
  grid-auto-rows: calc((100cqw - (var(--pf-cols) - 1) * var(--spacing-gutter)) / var(--pf-cols));
  grid-auto-flow: dense;   /* las pequeñas rellenan los huecos de las grandes */
  gap: var(--spacing-gutter);
}

.portfolio-item {
  position: relative;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

/* Tamaños */
.portfolio-item--featured { grid-column: span 2; }
.portfolio-item--tall     { grid-row: span 2; }
.portfolio-item--big      { grid-column: span 2; grid-row: span 2; }

/* Oculta por el filtro */
.portfolio-item.hidden {
  display: none;
}

.portfolio-thumb {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-surface);
}

.portfolio-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.portfolio-thumb:hover img,
.portfolio-thumb:focus-visible img {
  transform: scale(1.04);
}

.portfolio-thumb:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 3px;
}

/* Nombre del proyecto: etiqueta blanca sobre la foto.
   Oculta en reposo; aparece al pasar el ratón o con el teclado.
   (Para que se vea siempre: borrar "opacity: 0" y "transform".
    Para quitarla del todo: borrar los <span class="portfolio-item__tag">.) */
.portfolio-item__tag {
  position: absolute;
  left: var(--spacing-sm);
  bottom: var(--spacing-sm);
  max-width: calc(100% - 2 * var(--spacing-sm));
  padding: 6px 10px;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.portfolio-thumb:hover .portfolio-item__tag,
.portfolio-thumb:focus-visible .portfolio-item__tag {
  opacity: 1;
  transform: translateY(0);
}

/* Fichas de color: ocupan una celda y solo se ven en "Todos" */
.pf-card {
  min-height: 0;
}

.pf-grid.is-filtered .pf-card {
  display: none;
}


/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  .pf-grid { --pf-cols: 2; }
}

@media (max-width: 480px) {
  /* Una columna: todo cuadrado, sin tamaños */
  .pf-grid { --pf-cols: 1; }
  .portfolio-item--featured,
  .portfolio-item--tall,
  .portfolio-item--big {
    grid-column: auto;
    grid-row: auto;
  }
}


/* ============================================
   PANEL DE PROYECTO (drawer) — mismo HTML y JS, estética nueva
   ============================================ */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.drawer-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.project-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  max-width: 900px;
  height: 100vh;
  background: var(--color-bg-page);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.project-drawer.active {
  transform: translateX(0);
}

.drawer-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-brand-black);
  color: var(--color-on-brand);
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}

.drawer-close:hover {
  background: var(--color-brand-accent);
  color: var(--color-brand-black);
}

.drawer-close:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 3px;
}

.drawer-inner {
  overflow-y: auto;
  height: 100%;
  padding: var(--spacing-xl);
}

.drawer-inner::-webkit-scrollbar { width: 4px; }
.drawer-inner::-webkit-scrollbar-thumb {
  background: var(--color-border-neutral);
}

.drawer-main-img {
  width: 100%;
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
  background: var(--color-bg-surface);
}

.drawer-main-img img {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  display: block;
}

.drawer-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xl);
}

.drawer-thumb {
  width: 72px;
  height: 72px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.5;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: opacity 0.2s, outline-color 0.2s;
}

.drawer-thumb:hover { opacity: 1; }

.drawer-thumb.active {
  opacity: 1;
  outline-color: var(--color-brand-black);
}

.drawer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.drawer-info h2 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-brand-black);
}

.drawer-info p {
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

/* Datos de la ficha (vienen dentro de la descripción de cada proyecto) */
.drawer-info .proyecto-categoria {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.drawer-info .proyecto-anio {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
  .project-drawer { width: 100%; }

  /* La X baja para quedar debajo del botón de menú (fijo arriba a la derecha,
     ver sidebar.css › .mobile-menu-btn: top 16px, ~40px de alto), alineada con él */
  .drawer-close {
    top: 68px;
    right: 16px;
  }

  /* La foto empieza por debajo de la X */
  .drawer-inner { padding: 128px 20px var(--spacing-xl); }
}


@media (prefers-reduced-motion: reduce) {
  .portfolio-thumb img,
  .portfolio-item__tag,
  .project-drawer,
  .drawer-overlay { transition: none; }

  .portfolio-thumb:hover img,
  .portfolio-thumb:focus-visible img { transform: none; }
}