/**
 * ============================================================
 * Morris Millwork · Colecciones en inicio
 * Archivo: /assets/css/index-colecciones.css
 * ============================================================
 *
 * Responsabilidad:
 * - Presentar las tres familias principales dentro del index.
 * - Mantener el texto como elemento dominante.
 * - Introducir una franja fotográfica sutil en el extremo derecho.
 * - Usar las mismas imágenes de referencia que colecciones.php.
 * - Conservar accesibilidad, interacción por teclado y adaptación móvil.
 */

.categories {
    padding-block: var(--mm-section-y);
    border-top: 1px solid var(--mm-line);
    border-bottom: 1px solid var(--mm-line);
    background: var(--mm-bg-soft);
}

.category-list {
    display: grid;
    border-top: 1px solid var(--mm-line);
}

.category-card {
    position: relative;
    display: grid;
    min-height: 13rem;
    align-items: end;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--mm-line);
    overflow: hidden;
    isolation: isolate;
}

/**
 * La fotografía ocupa únicamente una franja del lado derecho.
 * El degradado extiende el fondo negro hacia la imagen para evitar
 * una división brusca y conservar la lectura tipográfica del bloque.
 */
.category-card::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(
            90deg,
            var(--mm-bg-soft) 0%,
            var(--mm-bg-soft) 54%,
            rgba(11, 11, 11, 0.96) 62%,
            rgba(11, 11, 11, 0.72) 74%,
            rgba(11, 11, 11, 0.24) 100%
        ),
        linear-gradient(
            0deg,
            rgba(5, 5, 5, 0.38) 0%,
            rgba(5, 5, 5, 0.06) 58%,
            rgba(5, 5, 5, 0.18) 100%
        ),
        var(--category-image) right center / 46% 100% no-repeat;
    content: "";
    pointer-events: none;
    transition:
        filter 450ms ease,
        transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.category-card::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-inline: 1px solid transparent;
    content: "";
    pointer-events: none;
    transition: border-color var(--mm-transition);
}

.category-card:hover::before,
.category-card:focus-visible::before {
    filter: brightness(1.08);
    transform: scale(1.012);
}

.category-card:hover::after,
.category-card:focus-visible::after {
    border-color: rgba(216, 255, 56, 0.24);
}

.category-content,
.category-number {
    position: relative;
    z-index: 2;
}

.category-content {
    display: grid;
    gap: 0.6rem;
    max-width: min(58%, 44rem);
}

.category-title {
    margin: 0;
    font-family: "Syne", sans-serif;
    font-size: clamp(2.1rem, 9vw, 5.4rem);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 0.95;
    transition:
        color var(--mm-transition),
        transform var(--mm-transition);
}

.category-card:hover .category-title,
.category-card:focus-visible .category-title {
    color: var(--mm-accent);
    transform: translateX(0.4rem);
}

.category-description {
    max-width: 31rem;
    margin: 0;
    color: var(--mm-muted);
}

.category-number {
    color: var(--mm-muted);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

@media (min-width: 48rem) {
    .category-card {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 15rem;
    }

    .category-number {
        align-self: end;
    }
}

@media (min-width: 75rem) {
    .category-card {
        min-height: 17rem;
    }

    .category-card::before {
        background:
            linear-gradient(
                90deg,
                var(--mm-bg-soft) 0%,
                var(--mm-bg-soft) 58%,
                rgba(11, 11, 11, 0.94) 66%,
                rgba(11, 11, 11, 0.66) 78%,
                rgba(11, 11, 11, 0.18) 100%
            ),
            linear-gradient(
                0deg,
                rgba(5, 5, 5, 0.34) 0%,
                rgba(5, 5, 5, 0.04) 60%,
                rgba(5, 5, 5, 0.15) 100%
            ),
            var(--category-image) right center / 38% 100% no-repeat;
    }
}

@media (max-width: 47.99rem) {
    .category-card {
        gap: 1.5rem;
    }

    .category-card::before {
        background:
            linear-gradient(
                90deg,
                var(--mm-bg-soft) 0%,
                rgba(11, 11, 11, 0.96) 48%,
                rgba(11, 11, 11, 0.7) 72%,
                rgba(11, 11, 11, 0.34) 100%
            ),
            linear-gradient(
                0deg,
                rgba(5, 5, 5, 0.5) 0%,
                rgba(5, 5, 5, 0.12) 58%,
                rgba(5, 5, 5, 0.2) 100%
            ),
            var(--category-image) right center / 58% 100% no-repeat;
    }

    .category-content {
        max-width: 72%;
    }

    .category-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 31.25rem) {
    .category-card::before {
        background:
            linear-gradient(
                90deg,
                var(--mm-bg-soft) 0%,
                rgba(11, 11, 11, 0.95) 52%,
                rgba(11, 11, 11, 0.76) 74%,
                rgba(11, 11, 11, 0.4) 100%
            ),
            linear-gradient(
                0deg,
                rgba(5, 5, 5, 0.58) 0%,
                rgba(5, 5, 5, 0.18) 62%,
                rgba(5, 5, 5, 0.24) 100%
            ),
            var(--category-image) right center / 64% 100% no-repeat;
    }

    .category-content {
        max-width: 80%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .category-card::before,
    .category-card::after,
    .category-title {
        transition: none;
    }
}





















.closing-cta {
    position: relative;
    overflow: hidden;
}

.closing-cta-media {
    position: absolute;
    inset: 0;
}

.closing-cta-media::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(5, 5, 5, 0.94) 0%,
            rgba(5, 5, 5, 0.72) 48%,
            rgba(5, 5, 5, 0.38) 100%
        ),
        linear-gradient(
            0deg,
            rgba(5, 5, 5, 0.72),
            rgba(5, 5, 5, 0.28)
        );
    content: "";
}

.closing-cta-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.closing-cta-grid {
    position: relative;
    z-index: 1;
}