/* ============================================================
   PROYECTOS 2026 — Figma "Cubicup-Web" › "Projects" (1440 × 7538)
   /reformas-realizadas. Va sobre home.css + blog.css. Medidas del .fig.
   ============================================================ */

/* ---------------- INTRO: eyebrow a la izquierda, titular y métricas a la derecha ---------------- */
.projects-intro { padding: calc(92px + var(--layout-section-padding-y-base)) 0 var(--layout-section-padding-y-base); }
.projects-intro__grid { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--base-32); }
.projects-intro h1.eyebrow { color: var(--text-primary); }
.projects-intro__content { min-width: 619px; flex: none; display: flex; flex-direction: column; gap: var(--base-40); }
.projects-intro__title {
    font-size: var(--heading-lg-size);
    line-height: var(--heading-lg-line-height);
    letter-spacing: var(--heading-lg-tracking);
    color: var(--text-primary);
}
.projects-intro__title .reveal-line { display: block; white-space: nowrap; } /* los cortes de línea son los del Figma */
.projects-intro__metrics { display: flex; gap: var(--layout-grid-gutter); }
/* Figma "impact-metric": 274×68, padding 10, radio 8, valor 36/40 + texto 16/24 */
.metric-glass--lg { width: 274px; min-height: 68px; box-sizing: border-box; padding: 10px; gap: 12px; border-radius: var(--base-8); }
.metric-glass--lg .metric-glass__value { font-size: var(--heading-lg-size); line-height: var(--heading-lg-line-height); }
.metric-glass--lg .metric-glass__label { font-size: var(--body-base-size); line-height: var(--body-base-line-height); color: var(--glass-text-primary); }

/* ---------------- LISTA DE PROYECTOS ---------------- */
.projects-list { padding: var(--layout-section-padding-y-compact) 0; scroll-margin-top: 16px; }
.projects-list__bar { display: flex; justify-content: flex-end; margin-bottom: var(--layout-grid-gutter); }

/* Figma "Filter Item": icono + "FILTRAR" gris; abre las ciudades como etiquetas */
.projects-filter { position: relative; }
.projects-filter summary {
    display: flex; align-items: center; gap: var(--base-8);
    list-style: none; cursor: pointer;
    font-size: var(--label-eyebrow-size); line-height: var(--label-eyebrow-line-height);
    font-weight: var(--label-eyebrow-weight); letter-spacing: var(--label-eyebrow-tracking);
    text-transform: uppercase;
    color: #9a8e84;
    transition: color var(--transition);
}
.projects-filter summary::-webkit-details-marker { display: none; }
.projects-filter summary:hover, .projects-filter[open] summary { color: var(--text-primary); }
.projects-filter__menu {
    position: absolute; right: 0; top: calc(100% + 12px); z-index: 5;
    display: flex; gap: var(--component-tag-gap);
    margin: 0; padding: 0; list-style: none;
}
.projects-filter__menu a { text-decoration: none; transition: background-color var(--transition), color var(--transition); }
.projects-filter__menu a:hover, .projects-filter__menu a.is-current { background: var(--background-navy); color: #fff; }

/* Fila: línea fina arriba, cabecera (etiquetas 274 · texto 1086) y galería */
.project-row {
    display: flex; flex-direction: column; gap: 56px;
    padding: 56px 0;
    border-top: 1px solid var(--accordion-default-border);
}
.project-row:first-child { padding-top: var(--layout-section-title-content-gap-tight); gap: var(--base-32); }
.project-row__head {
    display: grid;
    grid-template-columns: 274px 332px 1fr auto;
    column-gap: var(--layout-grid-gutter);
    align-items: start;
}
.project-row__tags { display: flex; flex-wrap: wrap; gap: var(--component-tag-gap); }
.project-row__tags .post-tag sub { font-size: .75em; vertical-align: baseline; position: relative; top: .15em; }
.project-row__title {
    font-size: var(--heading-lg-size); line-height: var(--heading-lg-line-height);
    letter-spacing: var(--heading-lg-tracking); font-weight: var(--font-weight-regular);
}
.project-row__title a { color: var(--text-primary); text-decoration: none; }
.project-row__title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* Figma: la descripción empieza 482px después del título (134 dentro de su columna), a 390 de ancho */
.project-row__desc {
    justify-self: start; width: 390px; margin-left: 134px;
    font-size: var(--body-sm-size); line-height: var(--body-sm-line-height); color: var(--text-primary);
}
.project-row__more { color: var(--text-primary); white-space: nowrap; }
.project-row__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Galería: 1086 alineada con el título; diapositivas 743 / 327 de 490 de alto */
.project-row__gallery { position: relative; margin-left: calc(274px + var(--layout-grid-gutter)); }
.project-row__track {
    display: flex; gap: var(--layout-grid-gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    cursor: grab;
}
.project-row__track::-webkit-scrollbar { display: none; }
.project-row__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.project-row__slide { flex: 0 0 327px; height: 490px; overflow: hidden; scroll-snap-align: start; background: var(--background-subtle); }
.project-row__slide.is-wide { flex-basis: 743px; }
.project-row__slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
/* Figma: flechas en cuadrado blanco de 32px a 8px del borde, centradas en altura */
.project-row__arrow {
    position: absolute; z-index: 2; top: calc(50% - 16px);
    width: 32px; height: 32px; padding: 0; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--icon-primary);
    cursor: pointer;
    transition: opacity var(--transition), background-color var(--transition), color var(--transition);
}
.project-row__arrow:hover { background: var(--background-navy); color: #fff; }
.project-row__arrow[hidden] { display: inline-flex; opacity: 0; pointer-events: none; }
.project-row__arrow--prev { left: 8px; }
.project-row__arrow--next { right: 8px; }

.projects-list__empty { padding: var(--layout-section-title-content-gap-base) 0; font-size: var(--body-base-size); }
.projects-list .blog-pager { margin-top: var(--base-16); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1240px) {
    .project-row__head { grid-template-columns: 220px 1fr auto; row-gap: var(--base-12); }
    .project-row__desc { grid-column: 2 / 3; justify-self: start; width: auto; max-width: 480px; margin-left: 0; }
    .project-row__gallery { margin-left: calc(220px + var(--layout-grid-gutter)); }
}
@media (max-width: 900px) {
    .projects-intro__grid { flex-direction: column; }
    .projects-intro__content { min-width: 0; }
    .projects-intro__title .reveal-line { white-space: normal; }
    .project-row__head { grid-template-columns: 1fr auto; }
    .project-row__tags { grid-column: 1 / -1; margin-bottom: var(--base-8); }
    .project-row__desc { grid-column: 1 / -1; }
    .project-row__gallery { margin-left: 0; }
    .project-row__slide, .project-row__slide.is-wide { flex-basis: 80%; height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
    .projects-intro { padding-top: calc(92px + 48px); padding-bottom: var(--layout-section-padding-y-compact); }
    .projects-intro__metrics { flex-direction: column; }
    .metric-glass--lg { width: 100%; }
    .project-row { gap: var(--base-24); padding: 40px 0; }
    .project-row__slide, .project-row__slide.is-wide { flex-basis: 88%; }
    .projects-filter__menu { flex-wrap: wrap; justify-content: flex-end; width: 260px; }
}