/* ==========================================================================
   MAGRANIT — estilos exclusivos de Proyectos
   1. Proyecto destacado — #projects_featured
   2. Todos los proyectos — #projects_gallery
   ========================================================================== */


/* ==========================================================
   1. PROYECTO DESTACADO — #projects_featured
   ========================================================== */

#projects_featured {
    padding-block: clamp(2.5rem, 5.4vw, 4.75rem) clamp(3.25rem, 7vw, 6.25rem);
    border-top: 2px solid var(--border-color);
}

#projects_featured .projects-featured__container {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: clamp(1.625rem, 4vw, 4rem);
    align-items: center;
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
}

#projects_featured .projects-featured__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--text-color);
    border: 1px solid var(--border-color);
}

#projects_featured .projects-featured__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#projects_featured .projects-featured__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

#projects_featured .projects-featured__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

#projects_featured .projects-featured__eyebrow-rule {
    display: block;
    flex: none;
    width: 1.625rem;
    height: 2px;
    background-color: var(--accent-color);
}

#projects_featured .projects-featured__eyebrow-text {
    font-size: 0.625rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-color);
}

#projects_featured .projects-featured__title {
    max-width: 18ch;
}

#projects_featured .projects-featured__description {
    max-width: 46ch;
    font-size: clamp(0.9375rem, 1.1vw, 1.03125rem);
    color: var(--body-color);
}

#projects_featured .projects-featured__facts {
    width: 100%;
    border-top: 1px solid var(--divider-color);
}

#projects_featured .projects-featured__fact {
    display: grid;
    grid-template-columns: minmax(6rem, 0.3fr) 1fr;
    gap: var(--spacing-xs) 1.25rem;
    padding-block: 0.8125rem;
    border-bottom: 1px solid var(--divider-color);
}

#projects_featured .projects-featured__fact-term {
    font-size: 0.625rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-color);
}

#projects_featured .projects-featured__fact-value {
    font-size: 0.875rem;
}

#projects_featured .projects-featured__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
    margin-top: var(--spacing-xs);
    padding-bottom: var(--spacing-3xs);
    font-size: 0.75rem;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    transition: color var(--transition-base), border-color var(--transition-base);
}

#projects_featured .projects-featured__link:hover {
    color: var(--primary-dark);
    border-color: var(--primary-dark);
}

#projects_featured .projects-featured__link-icon {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}

@media (max-width: 1024px) {
    #projects_featured .projects-featured__container {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   2. TODOS LOS PROYECTOS — #projects_gallery
   El mosaico está en global.css; aquí cabecera y filtros.
   ========================================================== */

#projects_gallery {
    padding-block: var(--section-padding-y-sm);
    background-color: var(--surface-color);
    border-top: 2px solid var(--border-color);
}

#projects_gallery .projects-gallery__container {
    display: flex;
    flex-direction: column;
    gap: clamp(1.375rem, 2.6vw, 2rem);
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
}

#projects_gallery .projects-gallery__header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(1.125rem, 3vw, 2.5rem);
    align-items: end;
}

#projects_gallery .projects-gallery__title {
    max-width: 20ch;
}

#projects_gallery .projects-gallery__count {
    font-size: 0.8125rem;
    color: var(--muted-color);
}

#projects_gallery .projects-gallery__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

#projects_gallery .projects-gallery__filter {
    padding: 0.6875rem 1.125rem;
    font-size: 0.71875rem;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-color);
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

#projects_gallery .projects-gallery__filter:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

#projects_gallery .projects-gallery__filter[aria-pressed="true"] {
    color: var(--background-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

#projects_gallery .projects-grid__item[hidden] {
    display: none;
}