/* =========================================================================
   ANDEZ THEME — projects.css (tarjetas, archivo y caso de estudio)
   ========================================================================= */

/* --- Tarjeta de proyecto --- */
.project-card { overflow: hidden; padding: 0; }
.project-card__link { display: block; color: inherit; }
.project-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-2); }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.project-card:hover .project-card__media img { transform: scale(1.05); }
.project-card__badge {
	position: absolute; top: var(--sp-2); left: var(--sp-2);
	background: color-mix(in srgb, var(--bg) 75%, transparent); backdrop-filter: blur(8px);
	border: 1px solid var(--line); border-radius: var(--radius-pill);
	padding: 0.3rem 0.75rem; font-size: 0.75rem; font-family: var(--font-mono); color: var(--ink);
}
.project-card__body { padding: var(--sp-3); display: grid; gap: 0.5rem; }
.project-card__title { font-size: var(--fs-lg); }
.project-card__tagline { color: var(--muted); font-size: var(--fs-sm); }
.project-card__services { color: var(--muted); font-size: 0.8rem; font-family: var(--font-mono); }
.project-card__cta { color: var(--accent); font-weight: 600; font-size: var(--fs-sm); margin-top: 0.25rem; }

/* --- Filtros --- */
.work-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-4); }
.chip { padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); font-size: var(--fs-sm); }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* --- Caso de estudio --- */
.project-hero { padding-top: var(--sp-3); }
.project-hero__title { font-size: var(--fs-4xl); margin-top: var(--sp-2); }
.project-hero__tagline { font-size: var(--fs-xl); color: var(--muted); margin-top: var(--sp-2); max-width: 46ch; }
.project-hero__media { margin-top: var(--sp-4); }
.project-hero__media img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 16 / 9; object-fit: cover; }

.project-single__layout { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .project-single__layout { grid-template-columns: 300px 1fr; align-items: start; } }

.project-meta { display: grid; gap: var(--sp-2); position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3); }
.project-meta__row { display: grid; gap: 0.35rem; }
.project-meta__row dt { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.project-meta__row dd { margin: 0; color: var(--ink); font-size: var(--fs-sm); }
.project-meta__services { display: grid; gap: 0.35rem; }

.project-block { margin-top: var(--sp-4); }
.project-block h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.project-results { display: grid; gap: 0.6rem; }
.project-results li { position: relative; padding-left: 1.5rem; color: var(--ink); }
.project-results li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }

.project-gallery { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .project-gallery { grid-template-columns: repeat(2, 1fr); } }
.project-gallery img { width: 100%; border-radius: var(--radius); }

.project-next { border-top: 1px solid var(--line); margin-top: var(--sp-6); padding-block: var(--sp-4); }
.project-next__label { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.project-next__link { display: block; font-size: var(--fs-2xl); font-weight: 600; color: var(--ink); margin-top: 0.5rem; }
.project-next__link:hover { color: var(--accent); }