/* ===== Proyectos (grid y tarjetas) ===== */

.proj-hero{
  border-bottom:1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 92%, black 8%);
}
.proj-hero .container{ padding:26px 0 22px; }
.proj-hero .lead{ color:var(--muted); max-width:72ch; }

.section{ padding:28px 0 48px; }

.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid var(--border);
  border-radius:999px; background:var(--card); color:var(--text);
}
.chip[aria-current="true"], .chip.active{
  background:#0e1622; color:#eaf1ff;
}
html[data-theme="light"] .chip[aria-current="true"],
html[data-theme="light"] .chip.active{
  background:#0f1a28; color:#f4f8ff;
}

/* Grid principal */
.projects-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap:16px;
}

/* Tarjeta base */
.card.project-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  display:grid;
}
.card.project-card:hover{
  transform: translateY(-2px);
  background:#0e1622;
  border-color:#22324a;
}

/* cuerpo y meta */
.card.project-card .body{ display:grid; gap:8px; }
.card .meta{ display:flex; gap:8px; flex-wrap:wrap; }
.badge{
  background:#1a2738; color:#c7dfff; border:1px solid var(--border);
  border-radius:999px; font-size:12px; padding:3px 8px;
}
.badge.green{ background:#153522; color:#b9f8d0; border-color:#1d3d2d; }
.tag{ font-size:12px; color:var(--muted); }

/* Imagen */
.project-card .thumb{ position:relative; overflow:hidden; background:#0b1220; }
.project-card .thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
.ratio-16x9{ aspect-ratio:16/9; }
.ratio-9x16{ aspect-ratio:9/16; }
.pos-top img{ object-position:center top; }
.pos-center img{ object-position:center center; }
.pos-bottom img{ object-position:center bottom; }

/* Variante horizontal (thumb arriba) */
.project-card.horizontal{
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}
.project-card.horizontal .thumb{ aspect-ratio:16/9; }
.project-card.horizontal .body{ padding:10px 14px 14px; }

/* Variante vertical (thumb izq retrato) */
.project-card.vertical{
  grid-template-columns: auto 1fr;
  align-items: stretch; column-gap: 12px;
}
.project-card.vertical .thumb{
  width: clamp(140px, 32%, 220px);
  aspect-ratio:9/16;
  border-radius: 12px;
  margin: 12px 0 12px 12px;
}
.project-card.vertical .body{ padding:12px 14px; }

/* Títulos de proyecto en sus páginas: usa primario */
html[data-template="project"] .page-content h1,
body.page-project .page-content h1 { color: var(--brand-2); }

/* Responsive */
@media (max-width: 980px){
  .projects-grid{ grid-template-columns:1fr; }

  .project-card.vertical{
    grid-template-columns: 1fr;
  }
  .project-card.vertical .thumb{
    width: 100%;
    margin: 0;
    aspect-ratio:16/9;
    border-radius: 0;
  }
  .project-card.vertical .body{
    padding:10px 14px 14px;
  }
}

/* Alineación de chips dentro de la tarjeta */
.project-card .body .meta{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.project-card .body .meta .badge,
.project-card .body .meta .tag{
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  line-height: 1; border-radius: 999px; white-space: nowrap;
}
.project-card .body .meta .tag{
  background: transparent; border: 1px solid var(--border); color: var(--muted);
}