/*
 * Lakeart — Portfolio (filtros + cuadrícula + modal fullscreen).
 * Depende de los tokens definidos en style.css (se enqueda como
 * dependencia, así que @layer components ya existe en el orden
 * correcto: tokens, reset, base, layout, components).
 */

@layer components {

    /* --- Filtros --- */

    .lakeart-portfolio-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: var(--space-xl);
    }

    .lakeart-filter-pill {
        padding: 10px 20px;
        border: 2px solid var(--color-border);
        border-radius: var(--radius-full);
        background: var(--color-paper);
        color: var(--color-petrol);
        font-size: 14px;
        font-weight: 700;
        transition: background var(--duration-fast) var(--ease-premium),
                    color var(--duration-fast) var(--ease-premium),
                    border-color var(--duration-fast) var(--ease-premium);
    }

    .lakeart-filter-pill:hover {
        border-color: var(--color-orange);
    }

    .lakeart-filter-pill.is-active {
        background: var(--color-petrol);
        border-color: var(--color-petrol);
        color: var(--color-paper);
    }

    /* --- Cuadrícula --- */

    .lakeart-portfolio-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-lg);
    }

    .lakeart-portfolio-item.is-hidden {
        display: none;
    }

    .lakeart-portfolio-card {
        display: block;
        width: 100%;
        text-align: left;
        border: 2px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-paper);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        transition: transform var(--duration-base) var(--ease-premium),
                    box-shadow var(--duration-base) var(--ease-premium);
    }

    .lakeart-portfolio-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-md);
    }

    .lakeart-portfolio-media {
        position: relative;
        display: block;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: var(--color-cream-deep);
    }

    .lakeart-portfolio-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--duration-slow) var(--ease-premium);
    }

    .lakeart-portfolio-card:hover .lakeart-portfolio-media img {
        transform: scale(1.05);
    }

    .lakeart-portfolio-play {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-paper);
        background: rgba(15, 59, 69, 0.18);
    }

    .lakeart-portfolio-play svg {
        width: 56px;
        height: 56px;
        filter: drop-shadow(0 8px 20px rgba(15, 59, 69, 0.35));
    }

    .lakeart-portfolio-info {
        display: block;
        padding: var(--space-md) var(--space-lg) var(--space-lg);
    }

    .lakeart-portfolio-tag {
        display: block;
        margin-bottom: 8px;
        color: var(--color-orange);
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 700;
    }

    .lakeart-portfolio-title {
        display: block;
        color: var(--color-petrol);
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1.5rem;
        line-height: 1.1;
    }

    .lakeart-portfolio-empty {
        padding: var(--space-2xl);
        border: 2px dashed var(--color-border);
        border-radius: var(--radius-lg);
        color: var(--color-text-muted);
        font-size: 1.05rem;
        text-align: center;
    }

    @media (max-width: 1100px) {
        .lakeart-portfolio-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 640px) {
        .lakeart-portfolio-grid {
            grid-template-columns: 1fr;
        }
    }

    /* --- Modal fullscreen --- */

    html.lakeart-modal-open {
        overflow: hidden;
    }

    .lakeart-portfolio-modal {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }

    .lakeart-portfolio-modal[hidden] {
        display: none;
    }

    .lakeart-portfolio-modal-scrim {
        position: absolute;
        inset: 0;
        background: rgba(15, 59, 69, 0.72);
        opacity: 0;
    }

    .lakeart-portfolio-modal-panel {
        position: relative;
        z-index: 1;
        width: min(1200px, 100%);
        max-height: 92vh;
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        background: var(--color-paper);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }

    @media (prefers-reduced-motion: no-preference) {
        .lakeart-portfolio-modal-scrim {
            transition: opacity var(--duration-base) var(--ease-premium);
        }
        .lakeart-portfolio-modal-panel {
            transition: opacity var(--duration-base) var(--ease-premium),
                        transform var(--duration-base) var(--ease-premium);
        }
    }

    .lakeart-portfolio-modal.is-open .lakeart-portfolio-modal-scrim {
        opacity: 1;
    }

    .lakeart-portfolio-modal.is-open .lakeart-portfolio-modal-panel {
        opacity: 1;
        transform: none;
    }

    .lakeart-portfolio-modal-close {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 2;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 253, 248, 0.92);
        color: var(--color-petrol);
        box-shadow: var(--shadow-sm);
        transition: background var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
    }

    .lakeart-portfolio-modal-close:hover {
        background: var(--color-orange);
        color: var(--color-paper);
    }

    .lakeart-portfolio-modal-close svg {
        width: 18px;
        height: 18px;
    }

    .lakeart-portfolio-modal-media {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 320px;
        background: var(--color-cream-deep);
    }

    .lakeart-portfolio-modal-media-frame {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lakeart-portfolio-modal-media-frame img,
    .lakeart-portfolio-modal-media-frame video {
        width: 100%;
        height: 100%;
        max-height: 78vh;
        object-fit: contain;
        display: block;
    }

    .lakeart-modal-nav {
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-50%);
        border-radius: 50%;
        background: rgba(255, 253, 248, 0.88);
        color: var(--color-petrol);
        font-size: 22px;
        line-height: 1;
        box-shadow: var(--shadow-sm);
        transition: background var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
    }

    .lakeart-modal-nav:hover {
        background: var(--color-orange);
        color: var(--color-paper);
    }

    .lakeart-modal-nav[hidden] {
        display: none;
    }

    .lakeart-modal-nav--prev {
        left: 16px;
    }

    .lakeart-modal-nav--next {
        right: 16px;
    }

    .lakeart-portfolio-modal-counter {
        position: absolute;
        bottom: 14px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        padding: 6px 14px;
        border-radius: var(--radius-full);
        background: rgba(15, 59, 69, 0.7);
        color: var(--color-paper);
        font-size: 12px;
        font-weight: 700;
    }

    .lakeart-portfolio-modal-body {
        display: flex;
        flex-direction: column;
        padding: var(--space-xl);
        overflow-y: auto;
    }

    .lakeart-portfolio-modal-body .lakeart-portfolio-tag {
        margin-bottom: 10px;
    }

    .lakeart-portfolio-modal-title {
        margin: 0 0 var(--space-md);
        color: var(--color-petrol);
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 2rem;
        line-height: 1.05;
    }

    .lakeart-portfolio-modal-desc {
        margin: 0 0 var(--space-lg);
        color: var(--color-text-muted);
        font-size: 1rem;
        line-height: 1.6;
    }

    .lakeart-portfolio-modal-meta {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
        margin-bottom: var(--space-xl);
    }

    .lakeart-portfolio-modal-meta h4 {
        margin: 0 0 var(--space-xs);
        color: var(--color-text-muted);
        font-size: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 700;
    }

    .lakeart-portfolio-modal-credits ul {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .lakeart-portfolio-modal-credits li {
        color: var(--color-petrol);
        font-size: 14px;
    }

    .lakeart-portfolio-modal-tools ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .lakeart-portfolio-modal-tools li {
        padding: 6px 12px;
        border-radius: var(--radius-full);
        background: var(--color-cream-soft);
        color: var(--color-petrol);
        font-size: 12.5px;
        font-weight: 700;
    }

    .lakeart-portfolio-modal-project-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        margin-top: auto;
        padding-top: var(--space-lg);
        border-top: 2px solid var(--color-border);
    }

    .lakeart-portfolio-modal-project-nav button {
        color: var(--color-petrol);
        font-size: 13px;
        font-weight: 700;
        transition: color var(--duration-fast) var(--ease-premium);
    }

    .lakeart-portfolio-modal-project-nav button:hover:not(:disabled) {
        color: var(--color-orange);
    }

    .lakeart-portfolio-modal-project-nav button:disabled {
        opacity: 0.35;
        cursor: default;
    }

    @media (max-width: 900px) {
        .lakeart-portfolio-modal-panel {
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr;
        }

        .lakeart-portfolio-modal-media {
            min-height: 240px;
            max-height: 40vh;
        }

        .lakeart-portfolio-modal-body {
            max-height: 52vh;
        }
    }

    @media (max-width: 640px) {
        .lakeart-portfolio-modal {
            padding: 0;
        }

        .lakeart-portfolio-modal-panel {
            max-height: 100vh;
            height: 100%;
            border-radius: 0;
        }
    }
}