/**
 * ==================================================================================
 * MASTER_INDEX.CSS (INDEX PAGE ONLY)
 * This file contains styles specific to the index page, including the
 * carousel and grid views.
 * ==================================================================================
 */

/*
 * ==================================================================================
 * SECTION 1: PAGE-SPECIFIC VIEWS (CAROUSEL & GRID)
 * ==================================================================================
 */

/* --- Carousel View --- */
#carousel-view { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
body.grid-view-active #carousel-view { display: none; }
.scroll-container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; perspective: 1500px; }
.project-section { width: 87.5vw; max-width: 700px; background-color: #1F2937; border-radius: 2rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7); overflow: hidden; position: absolute; top: 50%; left: 50%; transform-origin: center center; pointer-events: none; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), height 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.status-badge, .youtube-status-badge { position: absolute; top: 1.5rem; left: 1.5rem; background-color: var(--status-badge-bg-color, rgba(255, 193, 7, 0.9)); padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 700; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.3s ease-in-out; }
.youtube-status-badge { background-color: #FF0000; color: white; }
.project-section.badge-visible.is-in-progress .status-badge, .project-section.badge-visible:not(.is-in-progress) .youtube-status-badge { opacity: 1; }
.project-media-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: filter 0.3s ease; }
.project-video, .project-thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; border-radius: 2rem; border: none; }
.project-section .play-button-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 3; background-color: rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.3s ease; cursor: pointer; }
.project-section[data-video-id]:hover .play-button-overlay { opacity: 1; }
.project-section .play-button-overlay svg { width: 20%; height: 20%; max-width: 80px; }
.project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%); z-index: 2; border-radius: 2rem; }
.active-video-name, .active-video-description { position: fixed; left: 50%; text-align: center; z-index: 15; text-shadow: 0 4px 15px rgba(0,0,0,0.5); pointer-events: none; opacity: 0; transition: opacity 0.4s ease-in-out, font-size 0.4s ease-in-out, color 0.4s ease-in-out, text-transform 0.4s ease-in-out, white-space 0.4s ease-in-out; }
body.grid-view-active .active-video-name, body.grid-view-active .active-video-description { display: none; }
.active-video-name { font-size: 2.5rem; top: 78.75vh; transform: translate(-50%, -50%); color: white; font-weight: 900; white-space: nowrap; -webkit-text-stroke: 2px black; paint-order: stroke fill; }
.active-video-name.visible { opacity: 1; }
.active-video-description { top: 84vh; width: auto; max-width: 90%; margin: 0 auto; transform: translateX(-50%); color: #c7c7c7; font-weight: 400; font-size: 1rem; transition-delay: 0.1s; white-space: nowrap; }
.active-video-description.visible { opacity: 1; }

/* --- Grid View --- */
#desktop-filter-container { padding-top: 15vh; padding-bottom: 0rem; }
.grid-container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 2rem 2rem 4rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
#mobile-video-filter-container { display: none; }
.filter-btn { padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: #cbd5e1; background-color: rgba(31, 41, 55, 0.5); border: 1px solid rgba(100, 116, 139, 0.4); border-radius: 9999px; cursor: pointer; transition: all 0.2s ease-in-out; backdrop-filter: blur(5px); }
.filter-btn:hover { background-color: rgba(55, 65, 81, 0.7); color: #ffffff; }
.filter-btn.active { background-color: #38bdf8; color: #0B0B0F; border-color: #38bdf8; }
.grid-item { position: relative; aspect-ratio: 16 / 9; background-color: #1F2937; border-radius: 1rem; overflow: hidden; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, outline 0.3s ease, outline-offset 0.1s ease; outline: 3px solid transparent; outline-offset: 0px; }
.grid-item:hover, .grid-item:focus-visible { transform: scale(1.03); outline: 3px solid #38bdf8; outline-offset: 3px; box-shadow: 0 0 20px rgba(56, 189, 248, 0.7); }
.grid-item .project-media-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.grid-item-thumbnail, .grid-item-video { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; }
.grid-item-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); z-index: 2; }
.grid-item-title { color: white; font-weight: 700; font-size: 1.1rem; }
.grid-item .play-button-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 3; background-color: rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.3s ease; cursor: pointer; }
.grid-item .play-button-overlay svg { width: 60px; height: 60px; }
.grid-item[data-video-id]:hover .play-button-overlay, .grid-item[data-video-id]:focus-visible .play-button-overlay { opacity: 1; }
.grid-item:hover.is-in-progress .status-badge, .grid-item:focus-visible.is-in-progress .status-badge, .grid-item:hover:not(.is-in-progress) .youtube-status-badge, .grid-item:focus-visible:not(.is-in-progress) .youtube-status-badge { opacity: 1; }
body.js-keyboard-nav-active .grid-item:hover:not(:focus-visible) { transform: none; outline: 3px solid transparent; box-shadow: none; }
body.js-keyboard-nav-active .grid-item:hover:not(:focus-visible) .play-button-overlay { opacity: 0; }
body.js-keyboard-nav-active .grid-item:hover:not(:focus-visible) .status-badge { opacity: 0; }

/*
 * ==================================================================================
 * SECTION 2: RESPONSIVE STYLES (INDEX PAGE)
 * ==================================================================================
 */
@media (max-width: 768px) {
    /* --- Carousel View --- */
    .project-section { width: 90vw; border-radius: 1.5rem; }
    .project-video, .project-thumbnail, .project-overlay { border-radius: 1.5rem; }
    .status-badge, .youtube-status-badge { top: 1rem; left: 1rem; font-size: 0.7rem; }
    .active-video-name { top: 78.75vh; font-size: 1.8rem; width: 99%; white-space: normal; -webkit-text-stroke: 1px black; }
    .active-video-description { display: block; top: 84.5vh; font-size: 1rem; width: 85%; white-space: normal; max-width: 85%; }

    /* --- Grid View --- */
    body.grid-view-active #headline-container { position: static; transform: none; padding-top: 12vh; padding-bottom: 1rem; }
    .grid-container { grid-template-columns: 1fr; padding: 1rem 1rem 5rem; padding-top: 0; }
    #desktop-filter-container { display: none; }
    #mobile-video-filter-container {
        display: block;
        position: sticky;
        top: 10px; /* Adjust this value up or down by a few pixels if needed */
        z-index: 10;
        margin: 0 1rem 1.5rem 1rem;
}

    /* In master_index.css, inside the @media (max-width: 768px) block */

    .grid-item .grid-item-info-btn {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
    }

    /* --- Disable Grid Item Highlights on Mobile --- */
    .grid-item:hover,
    .grid-item:focus,
    .grid-item:focus-visible {
        /* Prevents the card from scaling up or showing a border */
        transform: none;
        outline: none;
        box-shadow: none;
    }

    /* --- Hide Desktop-Only Overlays on Mobile --- */
    .grid-item .play-button-overlay,
    .grid-item .status-badge,
    .grid-item .youtube-status-badge {
        display: none !important;
    }


}

/* --- NEW: Grid Flip Card Effect --- */
.grid-item {
    perspective: 1500px; /* Creates the 3D space for the flip */
    background-color: transparent; /* The background is now on the card faces */
}

.grid-item-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* This class is toggled by JavaScript to flip the card */
.grid-item.is-flipped .grid-item-inner {
    transform: rotateY(180deg);
}

.grid-item-front,
.grid-item-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: 1rem;
    overflow: hidden;
}

.grid-item-front {
    background-color: #1F2937; /* Original background color */
}

.grid-item-back {
    background-color: #020e1a;
    transform: rotateY(180deg) translateZ(1px);
    color: #ecf0f1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
    position: relative;
    cursor: pointer; /* <<< ADD THIS LINE */
}

/* --- UPDATED RULE --- */
.grid-item-info-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5;
    width: 32px;
    height: 32px;
    background-color: rgba(31, 41, 55, 0.7);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Hidden by default */
    pointer-events: none; /* Not clickable when hidden */
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

/* --- NEW RULE --- */
.grid-item:hover .grid-item-info-btn {
    opacity: 1; /* Visible on hover */
    pointer-events: auto; /* Clickable on hover */
    transform: scale(1);
}

.grid-item-info-btn:hover {
    background-color: rgba(55, 65, 81, 0.9);
    transform: scale(1.1); /* Keep the hover scale effect */
}

.grid-item-info-btn svg {
    width: 20px;
    height: 20px;
    fill: white;
}

.grid-item-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5;
    width: 32px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    border: none; /* Add this to ensure no default border */
    cursor: pointer; /* Explicitly set the cursor */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}


.grid-item-close-btn svg {
    width: 20px;
    height: 20px;
    fill: #ecf0f1;
}

.grid-item-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.4);
    transform: scale(1.1);
}

body.js-keyboard-nav-active .grid-item:hover .grid-item-info-btn {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
}