/* ----------------------------------
   Module: Discover Grid
   Shortcode: [klcc_discover_grid]
----------------------------------- */

/* ----------------------------------
   1) Design Tokens
----------------------------------- */
.klcc-discover-grid {
    --tvc-title-default: #ffffff;
    --tvc-title-hover: #f3c142;
    --tvc-copy: #ffffff;
    --tvc-overlay-from: rgba(0, 0, 0, 0.72);
    --tvc-overlay-mid: rgba(0, 0, 0, 0.42);
    --tvc-overlay-to: rgba(0, 0, 0, 0);
    /* Default (non-hover) desktop: dark band behind top title only */
    --tvc-top-shade-from: rgba(0, 0, 0, 0.62);
    --tvc-top-shade-mid: rgba(0, 0, 0, 0.22);
    --tvc-top-shade-to: rgba(0, 0, 0, 0);
    /* Tablet/mobile: dark bands top + bottom (same tokens as desktop bottom fade) so title and body copy both read clearly */
    --tvc-touch-overlay-gradient: linear-gradient(
        180deg,
        var(--tvc-overlay-from) 0%,
        var(--tvc-overlay-mid) 26%,
        var(--tvc-overlay-to) 42%,
        var(--tvc-overlay-to) 58%,
        var(--tvc-overlay-mid) 74%,
        var(--tvc-overlay-from) 100%
    );
}

/* ----------------------------------
   2) Card Base
----------------------------------- */
.klcc-discover-grid .tvc-category-card {
    position: relative;
    display: block;
    height: var(--tvc-card-height);
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--tvc-card-radius);
    background: #101010;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
    text-decoration: none !important;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
}

.klcc-discover-grid .tvc-card-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: center center;
    transition: transform 0.45s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.klcc-discover-grid .tvc-hover-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    transform: translateY(16px);
    background: linear-gradient(
        0deg,
        var(--tvc-overlay-from) 0%,
        var(--tvc-overlay-mid) 44%,
        var(--tvc-overlay-to) 78%
    );
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* ----------------------------------
   3) Content
----------------------------------- */
.klcc-discover-grid .tvc-card-content {
    position: absolute;
    inset: 0;
    z-index: 4;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.klcc-discover-grid .tvc-card-title {
    margin: 0 !important;
    color: var(--tvc-title-default) !important;
    font-size: 1.57rem;
    line-height: 1.08;
    font-weight: 700;
    transition: color 0.3s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.klcc-discover-grid .tvc-card-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.klcc-discover-grid .tvc-desc {
    margin: 0;
    max-width: calc(100% - 44px);
    color: var(--tvc-copy);
    font-size: 1.32rem;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.klcc-discover-grid .tvc-discover-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    color: #ffffff !important;
    font-size: 1.9rem;
    line-height: 1;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

/* ----------------------------------
   4) Desktop Hover + Row Expand
----------------------------------- */

/* Grid layout — width only, no hover condition */
@media (min-width: 951px) {
    .klcc-discover-grid.tvc-main-container {
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: var(--tvc-grid-gap);
    }

    .klcc-discover-grid .tvc-category-card {
        flex: 0 0 calc((100% - (2 * var(--tvc-grid-gap))) / 3);
    }

    /* Always-on top fade so the title reads before hover (hover overlay stays off until hover) */
    .klcc-discover-grid .tvc-category-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        border-radius: inherit;
        background: linear-gradient(
            180deg,
            var(--tvc-top-shade-from) 0%,
            var(--tvc-top-shade-mid) 42%,
            var(--tvc-top-shade-to) 70%
        );
    }
}

/* Hover animations — pointer devices only */
@media (hover: hover) and (min-width: 951px) {
    .klcc-discover-grid .tvc-category-card {
        transition: flex-basis 0.45s ease, box-shadow 0.3s ease;
    }

    /* Top row only (cards 1-3): 25 / 25 / 50 */
    .klcc-discover-grid.tvc-main-container:has(.tvc-category-card:nth-child(-n+3):hover) .tvc-category-card:nth-child(-n+3) {
        flex-basis: calc((100% - (2 * var(--tvc-grid-gap))) * 0.25);
    }
    .klcc-discover-grid.tvc-main-container:has(.tvc-category-card:nth-child(-n+3):hover) .tvc-category-card:nth-child(-n+3):hover {
        flex-basis: calc((100% - (2 * var(--tvc-grid-gap))) * 0.5);
    }

    /* Bottom row only (cards 4-6): 25 / 25 / 50 */
    .klcc-discover-grid.tvc-main-container:has(.tvc-category-card:nth-child(n+4):hover) .tvc-category-card:nth-child(n+4) {
        flex-basis: calc((100% - (2 * var(--tvc-grid-gap))) * 0.25);
    }
    .klcc-discover-grid.tvc-main-container:has(.tvc-category-card:nth-child(n+4):hover) .tvc-category-card:nth-child(n+4):hover {
        flex-basis: calc((100% - (2 * var(--tvc-grid-gap))) * 0.5);
    }

    .klcc-discover-grid .tvc-category-card:hover,
    .klcc-discover-grid .tvc-category-card:focus-visible {
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
    }

    /* Scope + !important so theme rules (e.g. on last column/link) cannot zero out the zoom */
    .klcc-discover-grid.tvc-main-container .tvc-category-card:hover .tvc-card-bg,
    .klcc-discover-grid.tvc-main-container .tvc-category-card:focus-visible .tvc-card-bg {
        transform: scale3d(1.05, 1.05, 1) !important;
    }

    .klcc-discover-grid .tvc-category-card:hover .tvc-hover-overlay,
    .klcc-discover-grid .tvc-category-card:focus-visible .tvc-hover-overlay {
        opacity: 1;
        transform: translateY(0);
    }

    .klcc-discover-grid .tvc-category-card:hover .tvc-card-title,
    .klcc-discover-grid .tvc-category-card:focus-visible .tvc-card-title {
        color: var(--tvc-title-hover) !important;
    }

    .klcc-discover-grid .tvc-category-card:hover .tvc-desc,
    .klcc-discover-grid .tvc-category-card:focus-visible .tvc-desc,
    .klcc-discover-grid .tvc-category-card:hover .tvc-discover-icon,
    .klcc-discover-grid .tvc-category-card:focus-visible .tvc-discover-icon {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------
   5) Tablet — two columns, 15px gap, hover visuals always on (no hover on touch)
----------------------------------- */
@media (max-width: 950px) and (min-width: 651px) {
    .klcc-discover-grid {
        --tvc-tablet-gap: 15px;
    }

    .klcc-discover-grid.tvc-main-container {
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: var(--tvc-tablet-gap);
    }

    .klcc-discover-grid .tvc-category-card {
        flex: 0 0 calc((100% - var(--tvc-tablet-gap)) / 2);
        max-width: calc((100% - var(--tvc-tablet-gap)) / 2);
        width: auto;
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
    }

    .klcc-discover-grid .tvc-card-bg {
        transform: scale(1.05);
    }

    .klcc-discover-grid .tvc-hover-overlay {
        opacity: 1;
        transform: translateY(0);
        background: var(--tvc-touch-overlay-gradient);
    }

    .klcc-discover-grid .tvc-card-title {
        color: var(--tvc-title-default) !important;
    }

    .klcc-discover-grid .tvc-desc,
    .klcc-discover-grid .tvc-discover-icon {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------
   6) Mobile — one column, 15px gap, hover visuals always on, 18px title / 16px desc
----------------------------------- */
@media (max-width: 650px) {
    .klcc-discover-grid {
        --tvc-mobile-gap: 15px;
    }

    .klcc-discover-grid.tvc-main-container {
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: var(--tvc-mobile-gap);
    }

    .klcc-discover-grid .tvc-category-card {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        height: 300px;
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
    }

    .klcc-discover-grid .tvc-card-bg {
        transform: scale(1.05);
    }

    .klcc-discover-grid .tvc-hover-overlay {
        opacity: 1;
        transform: translateY(0);
        background: var(--tvc-touch-overlay-gradient);
    }

    .klcc-discover-grid .tvc-card-content {
        padding: 16px;
    }

    .klcc-discover-grid .tvc-card-title {
        font-size: 18px;
        line-height: 1.15;
        color: var(--tvc-title-default) !important;
    }

    .klcc-discover-grid .tvc-desc {
        font-size: 16px;
        line-height: 1.35;
        max-width: calc(100% - 44px);
        opacity: 1;
        transform: translateY(0);
    }

    .klcc-discover-grid .tvc-discover-icon {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------
   7) Reveal-in animation states (see module-discover-grid.js)
----------------------------------- */
.klcc-discover-grid .tvc-category-card.tvc-reveal-init {
    opacity: 0;
    transform: translateY(24px);
}

.klcc-discover-grid .tvc-category-card.tvc-reveal-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease, flex-basis 0.45s ease, box-shadow 0.3s ease;
}

/* ----------------------------------
   8) Motion Safety
----------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .klcc-discover-grid .tvc-category-card,
    .klcc-discover-grid .tvc-card-bg,
    .klcc-discover-grid .tvc-hover-overlay,
    .klcc-discover-grid .tvc-card-title,
    .klcc-discover-grid .tvc-desc,
    .klcc-discover-grid .tvc-discover-icon {
        transition: none !important;
    }
}