/* =========================================================
   LeCorch Photo · Categoría (Hero interno + Pills + Galería + Video)
   ========================================================= */

@layer plugins {

    /* ----- Hero interno de categoría ----- */

    .fp-cat-hero {
        position: relative;
        width: 100%;
        height: clamp(440px, 70vh, 720px);
        overflow: hidden;
        background: var(--color-oceano);
        color: #FFFFFF;
        isolation: isolate;
        margin-top: var(--header-height);
    }

    .fp-cat-hero__media {
        position: absolute;
        inset: 0;
        z-index: 1;
    }
    .fp-cat-hero__media .ad-picture,
    .fp-cat-hero__media .ad-picture img,
    .fp-cat-hero__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .fp-cat-hero__video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 2;
    }

    .fp-cat-hero__overlay {
        position: absolute;
        inset: 0;
        z-index: 3;
        background: linear-gradient(to top, rgba(15,47,68,0.7) 0%, rgba(15,47,68,0.15) 50%, transparent 100%);
        pointer-events: none;
    }

    .fp-cat-hero__content {
        position: relative;
        z-index: 4;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        height: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: clamp(48px, 6vw, 96px) var(--sp-lateral);
    }

    .fp-cat-hero__back {
        font-family: var(--font);
        font-size: var(--fs-small);
        font-weight: var(--peso-medium);
        text-transform: uppercase;
        letter-spacing: 0.2em;
        opacity: 0.9;
        margin-bottom: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .fp-cat-hero__eyebrow {
        font-size: var(--fs-eyebrow);
        font-weight: var(--peso-medium);
        text-transform: uppercase;
        letter-spacing: 0.3em;
        color: var(--color-dorado);
        margin: 0 0 16px;
    }

    .fp-cat-hero__title {
        margin: 0 0 16px;
        font-family: var(--font);
        font-size: var(--fs-h1);
        font-weight: var(--peso-thin);
        line-height: var(--altura-display);
        letter-spacing: -0.02em;
        text-shadow: var(--shadow-text-hero);
    }

    .fp-cat-hero__desc {
        margin: 0;
        font-family: var(--font);
        font-weight: var(--peso-light);
        font-size: var(--fs-lead);
        max-width: 56ch;
        opacity: 0.9;
        text-shadow: var(--shadow-text-hero);
    }

    /* ----- Pills de filtro ----- */

    .fp-cat-pills {
        padding: clamp(40px, 5vw, 72px) var(--sp-lateral);
        text-align: center;
        max-width: 100%;
        margin: 0 auto;
    }

    .ad-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
    }
    .ad-pills__pill,
    .pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 22px;
        font-family: var(--font);
        font-size: 12px;
        font-weight: var(--peso-medium);
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--color-tinta-secundaria);
        background: transparent;
        border: 1px solid var(--color-linea);
        border-radius: 999px;
        cursor: pointer;
        transition:
            color var(--d-fast) var(--ease),
            border-color var(--d-fast) var(--ease),
            background-color var(--d-fast) var(--ease);
    }
    @media (hover: hover) and (pointer: fine) {
        .ad-pills__pill:hover,
        .pill:hover {
            color: var(--color-oceano);
            border-color: var(--color-oceano);
        }
    }
    .ad-pills__pill.is-active,
    .pill.is-active,
    .pill.active {
        color: #FFFFFF;
        background: var(--pills-active-color);
        border-color: var(--pills-active-color);
    }
    .ad-pills__count,
    .pill__count {
        opacity: 0.6;
        font-weight: var(--peso-light);
    }

    /* Mobile · scroll horizontal */
    @media (max-width: 600px) {
        .ad-pills {
            flex-wrap: nowrap;
            overflow-x: auto;
            justify-content: flex-start;
            scrollbar-width: none;
            scroll-snap-type: x mandatory;
            padding: 0 var(--sp-lateral);
        }
        .ad-pills::-webkit-scrollbar { display: none; }
        .ad-pills__pill,
        .pill { flex: 0 0 auto; scroll-snap-align: start; }
    }

    /* ----- Galería de fotos · 2 columnas anchas ----- */

    .fp-cat-gallery__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(16px, 1.5vw, 24px);
    }
    .fp-cat-gallery__item {
        margin: 0;
        background: var(--color-fondo-arena);
        overflow: hidden;
    }
    .fp-cat-gallery__link {
        display: block;
        position: relative;
    }
    .fp-cat-gallery__link img,
    .fp-cat-gallery__link .ad-picture {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        transition: transform var(--d-slow) var(--ease), filter var(--d-med) var(--ease);
    }
    @media (hover: hover) and (pointer: fine) {
        .fp-cat-gallery__link:hover img {
            transform: scale(1.04);
            filter: brightness(1.05);
        }
    }
    @media (max-width: 600px) {
        .fp-cat-gallery__grid { grid-template-columns: 1fr; }
    }

    /* ----- Sección Videografía con fondo arena clara ----- */

    .fp-cat-videos {
        background: var(--color-fondo-suave);
    }

    .fp-cat-videos__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(20px, 3vw, 40px);
    }
    .fp-cat-videos__item {
        position: relative;
        background: var(--color-oceano);
        overflow: hidden;
        color: #FFFFFF;
    }
    .fp-cat-videos__link {
        display: block;
        position: relative;
    }
    .fp-cat-videos__media {
        position: relative;
        aspect-ratio: 16 / 9;
    }
    .fp-cat-videos__media .ad-picture,
    .fp-cat-videos__media .ad-picture img,
    .fp-cat-videos__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--d-slow) var(--ease), filter var(--d-med) var(--ease);
    }
    .fp-cat-videos__play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 72px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: var(--color-oceano-profundo);
        background: rgba(255, 255, 255, 0.95);
        border-radius: 999px;
        backdrop-filter: blur(8px);
        transition: transform var(--d-med) var(--ease), background-color var(--d-fast) var(--ease);
    }
    @media (hover: hover) and (pointer: fine) {
        .fp-cat-videos__link:hover .fp-cat-videos__play {
            transform: translate(-50%, -50%) scale(1.08);
            background: var(--color-dorado);
            color: #FFFFFF;
        }
        .fp-cat-videos__link:hover img {
            transform: scale(1.04);
            filter: brightness(0.85);
        }
    }
    .fp-cat-videos__title {
        margin: 20px 0 28px;
        padding: 0 28px;
        font-family: var(--font);
        font-size: var(--fs-h5);
        font-weight: var(--peso-medium);
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }
    @media (max-width: 768px) {
        .fp-cat-videos__grid { grid-template-columns: 1fr; }
    }

}