/**
 * Student Projects Archive Styles
 * Program filter buttons with colors matching the design
 */

/* Force line break after program filters to separate them from enfoques */
.post-type-archive-proy_est .topics-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

/* Hide the divider between program and enfoques filters */
.post-type-archive-proy_est .filter-tax-divider {
    display: none !important;
}

/* Program filter button base styles */
.post-type-archive-proy_est .topic-button-filter[filter-type="programas"] {
    padding: 7.83px;
    min-width: 64.55px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 16.3px;
    color: #ffffff;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.post-type-archive-proy_est .topic-button-filter[filter-type="programas"]:hover,
.post-type-archive-proy_est .topic-button-filter[filter-type="programas"]:focus {
    outline: none;
}

/* Specific colors for each program based on design - DEFAULT STATE */
.post-type-archive-proy_est .topic-button-filter[filter-name="dis"]:not([status="active"]):not(:hover):not(:focus) {
    background-color: #00CED1; /* cyan/aqua */
}

.post-type-archive-proy_est .topic-button-filter[filter-name="arq"]:not([status="active"]):not(:hover):not(:focus) {
    background-color: #000000; /* black */
}

.post-type-archive-proy_est .topic-button-filter[filter-name="mdis"]:not([status="active"]):not(:hover):not(:focus) {
    background-color: #FF00FF; /* magenta */
}

.post-type-archive-proy_est .topic-button-filter[filter-name="marq"]:not([status="active"]):not(:hover):not(:focus) {
    background-color: #0000FF; /* blue */
}

.post-type-archive-proy_est .topic-button-filter[filter-name="mam"]:not([status="active"]):not(:hover):not(:focus) {
    background-color: #FF4500; /* orange-red */
}

/* Hover and Active states - WHITE background with colored outline and colored text */
.post-type-archive-proy_est .topic-button-filter[filter-type="programas"]:hover,
.post-type-archive-proy_est .topic-button-filter[filter-type="programas"]:focus,
.post-type-archive-proy_est .topic-button-filter[filter-type="programas"][status="active"] {
    background-color: #ffffff !important;
    opacity: 1;
}

.post-type-archive-proy_est .topic-button-filter[filter-name="dis"]:hover,
.post-type-archive-proy_est .topic-button-filter[filter-name="dis"]:focus,
.post-type-archive-proy_est .topic-button-filter[filter-name="dis"][status="active"] {
    color: #00CED1;
    outline: 2px solid #00CED1;
    outline-offset: -2px;
}

.post-type-archive-proy_est .topic-button-filter[filter-name="arq"]:hover,
.post-type-archive-proy_est .topic-button-filter[filter-name="arq"]:focus,
.post-type-archive-proy_est .topic-button-filter[filter-name="arq"][status="active"] {
    color: #000000;
    outline: 2px solid #000000;
    outline-offset: -2px;
}

.post-type-archive-proy_est .topic-button-filter[filter-name="mdis"]:hover,
.post-type-archive-proy_est .topic-button-filter[filter-name="mdis"]:focus,
.post-type-archive-proy_est .topic-button-filter[filter-name="mdis"][status="active"] {
    color: #FF00FF;
    outline: 2px solid #FF00FF;
    outline-offset: -2px;
}

.post-type-archive-proy_est .topic-button-filter[filter-name="marq"]:hover,
.post-type-archive-proy_est .topic-button-filter[filter-name="marq"]:focus,
.post-type-archive-proy_est .topic-button-filter[filter-name="marq"][status="active"] {
    color: #0000FF;
    outline: 2px solid #0000FF;
    outline-offset: -2px;
}

.post-type-archive-proy_est .topic-button-filter[filter-name="mam"]:hover,
.post-type-archive-proy_est .topic-button-filter[filter-name="mam"]:focus,
.post-type-archive-proy_est .topic-button-filter[filter-name="mam"][status="active"] {
    color: #FF4500;
    outline: 2px solid #FF4500;
    outline-offset: -2px;
}

/* Behance Stamped Box - Top Left Positioning (First 2 Columns) */
.post-type-archive-proy_est .student-projects-behance-box.stamped-content {
    border: 2px solid var(--arqdis-magenta);
    background-image: url('../assets/patron-grid-magenta.svg');
    background-size: 40px auto;
    padding: 1em;

    position: absolute;
    left: 0; /* Position on the left (first 2 columns) */

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content 1fr;
    grid-auto-flow: dense;
    grid-column-gap: 30px;
    grid-row-gap: 15px;
}

.post-type-archive-proy_est .student-projects-behance-box .grid-title {
    color: var(--arqdis-magenta);
    margin-top: 0 !important;
}

.post-type-archive-proy_est .student-projects-behance-box .grid-subtitle {
    color: var(--arqdis-blue);
}

.post-type-archive-proy_est .student-projects-behance-box p {
    grid-row: span 2;
}

.post-type-archive-proy_est .student-projects-behance-box a {
    background-color: var(--arqdis-blue);
    padding: 0.6em;
    display: block;
    transition: background-color 0.3s;
}

.post-type-archive-proy_est .student-projects-behance-box a:hover {
    background-color: var(--arqdis-magenta);
}

/* Responsive: make Behance box single-column at medium and smaller screens */
@media (max-width: 1500px) {
    /* Force stamped Behance box to single column width */
    .post-type-archive-proy_est .packery-layout-grid .stamped-content.double-width.student-projects-behance-box,
    .post-type-archive-proy_est .stamped-content.double-width.student-projects-behance-box {
        width: var(--grid-col-sz) !important; /* override global double-width rule */
    }

    /* Adjust internal layout to a single column */
    .post-type-archive-proy_est .student-projects-behance-box {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-column-gap: 16px;
    }

    .post-type-archive-proy_est .student-projects-behance-box p {
        grid-row: auto;
    }
}

/* When the stamped box takes only one grid column (medium and smaller screens),
   make it flow in document order and stack its internal elements. This
   uses 1500px to handle medium screens like 1400x900 properly.
*/
@media (max-width: 1500px) {
    /* Remove absolute positioning on narrower screens to allow normal flow */
    .post-type-archive-proy_est .student-projects-behance-box.stamped-content {
        position: relative;
        left: auto;
        width: 100% !important;
        margin-bottom: var(--grid-row-gap, 15px);
    }

    /* Ensure stamped box doesn't overlap and flows naturally */
    .post-type-archive-proy_est .student-projects-behance-box.stamped-content {
        position: static;
        left: auto;
        width: 100% !important;
        margin-bottom: 15px;
    }

    /* Reduce padding to match mobile grid-header */
    .post-type-archive-proy_est .student-projects-behance-box {
        padding: var(--min-side-margin);
        grid-column-gap: 12px;
        grid-row-gap: 12px;
    }
    /* Ensure stamped box doesn't overlap and flows naturally */
    .post-type-archive-proy_est .student-projects-behance-box.stamped-content {
        position: static;
        left: auto;
        width: 100% !important;
        margin-bottom: 15px;
    }
    
    /* Reduce padding to match mobile grid-header */
    .post-type-archive-proy_est .student-projects-behance-box {
        padding: var(--min-side-margin);
        grid-column-gap: 12px;
        grid-row-gap: 12px;
    }

    /* On very small screens, stack the Behance box content vertically (title, text, button)
       so it matches the layout of other stamped boxes */
    .post-type-archive-proy_est .student-projects-behance-box {
        /* switch from grid to column flow for stacking */
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .post-type-archive-proy_est .student-projects-behance-box .grid-title {
        order: 1;
        margin: 0 0 6px 0;
    }

    .post-type-archive-proy_est .student-projects-behance-box .grid-subtitle {
        order: 2;
        margin: 0 0 8px 0;
    }

    .post-type-archive-proy_est .student-projects-behance-box nav {
        order: 3;
        width: 100%;
    }

    /* Make the button appear as a normal block-level CTA under the text */
    .post-type-archive-proy_est .student-projects-behance-box nav .grid-button {
        display: block !important;
        width: 100% !important; /* fill the available width inside the stamped box padding */
        box-sizing: border-box; /* ensure padding doesn't push beyond container */
        padding: 0.9em 0 !important; /* vertical padding, no horizontal so the button fills width */
        text-align: center !important; /* center the CTA label */
    }
}

/* ===== STUDENT PROJECT THUMBNAIL CARDS ===== */
/* Note: Base card styles (.student-project-card, .student-thumb-image, .student-thumb-title) 
   are now in the main style.css to be available globally across all grids */

/* ===== STUDENT PROJECT DETAIL CARD ===== */
.post-type-archive-proy_est .student-project-detail-card {
    background-color: #ffffff;
    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.25);
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to top */
    
    /* Absolute positioning to place in top-right (last 2 columns) - will be overridden by JS for sticky behavior */
    position: absolute;
    right: 0;
    top: 0;
    
    /* Take up the full 2-column width (from Packery grid) - same as other double-width items */
    width: calc(var(--grid-col-sz)*2 + var(--grid-gutter-sz));
    
    /* Force card to always be full viewport height */
    height: 100vh;
    min-height: 100vh;
    
    /* When content overflows, allow scrolling but keep centering */
    overflow-y: auto;
    overflow-x: hidden; /* Hide horizontal scrollbar */
    
    /* Smooth transition when position changes */
    transition: none; /* We'll handle this with JS for better control */
    
    /* Z-index to keep it above grid content but below the navigation menu */
    z-index: 10;
}

/* Optional sticky mode (not enabled by default). Add class .sticky-mode via JS or markup to
   switch to CSS-native sticky positioning for resilience if absolute layout misbehaves. */
.post-type-archive-proy_est .student-project-detail-card.sticky-mode {
    position: sticky;
    top: 0;
    right: unset;
}
/* Low-risk stabilization styles */
.post-type-archive-proy_est .student-project-detail-card.pending-layout {
    opacity: 0;
}
.post-type-archive-proy_est .student-project-detail-card.layout-stable {
    opacity: 1;
    transition: opacity .35s ease;
}

/* Hide scrollbar for the detail card */
.post-type-archive-proy_est .student-project-detail-card::-webkit-scrollbar {
    display: none;
}

.post-type-archive-proy_est .student-project-detail-card {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Invisible blocker element that reserves space for Packery without visual white space */
.post-type-archive-proy_est .detail-card-spacer {
    position: absolute;
    right: 0;
    top: 0;
    /* Same width as the detail card - 2 columns + 1 gutter */
    width: calc(var(--grid-col-sz)*2 + var(--grid-gutter-sz));
    min-height: 120vh;
    pointer-events: none;
    z-index: -1;
    /* Invisible but takes up space for Packery stamping */
}

/* Inner wrapper for padding and gap - needed to maintain spacing when scrolling */
.post-type-archive-proy_est .student-project-detail-card > * {
    padding-left: 16px;
    padding-right: 16px;
}

/* Center the content vertically when it's shorter than the card.
   margin:auto (en vez de justify-content:center) mantiene alcanzable el tope
   del contenido cuando este desborda y la tarjeta hace scroll. */
.post-type-archive-proy_est .detail-card-results,
.post-type-archive-proy_est .detail-card-no-results {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 32px;
    padding-bottom: 32px;
}

.post-type-archive-proy_est .detail-card-gallery,
.post-type-archive-proy_est .detail-card-content {
    margin-bottom: 16px;
}

/* Gallery Section */
.detail-card-gallery {
    display: flex;
    gap: 10px;
    padding: 32px;
    align-items: center; /* Center thumbnails and main image vertically */
    justify-content: center; /* Center horizontally as well */
    margin-top: 0;
}

.detail-card-main-image {
    flex: 1;
    position: relative;
    max-width: 600px; /* Limit the width to make the image smaller */
    display: flex;
    align-items: center; /* Center image vertically within container */
    justify-content: center; /* Center image horizontally */
}

.detail-card-main-image img {
    width: 100%;
    height: auto;
    max-height: 600px; /* Limit height to match max-width for square aspect ratio */
    display: block;
    object-fit: contain; /* Changed from cover to contain to preserve aspect ratio */
    transition: opacity 0.3s ease-in-out;
}


/* Navigation Arrows */
.detail-card-nav-arrows {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.detail-card-main-image:hover .detail-card-nav-arrows {
    opacity: 1;
}

.detail-nav-arrow {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
    padding: 0;
}

.detail-nav-arrow:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.detail-nav-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.detail-nav-arrow svg {
    width: 24px;
    height: 24px;
}

.detail-card-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
}

/* Hide scrollbar for thumbnails */
.detail-card-thumbnails::-webkit-scrollbar {
    display: none;
}

.detail-card-thumbnails {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.detail-card-thumbnails img {
    width: 69px;
    height: auto;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
    border: 2px solid transparent;
}

.detail-card-thumbnails img:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

.detail-card-thumbnails img.active {
    opacity: 1;
    border-color: transparent; /* Remove black border */
    transform: scale(1.1); /* Slightly larger when active */
}

/* Content Section */
.detail-card-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 53px;
}

.detail-card-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Topics/Tags */
.detail-card-topics {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.detail-card-topic {
    background-color: var(--arqdis-blue);
    padding: 7.83px;
    color: #ffffff;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 16.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Title */
.detail-card-title {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    color: #000000;
    text-transform: uppercase;
    margin: 0;
}

/* Metadata - using global post-metadata styles matching h6.post-subtitle */
#detail-project-meta.post-metadata {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
    text-transform: uppercase;
    margin: 0;
}

/* Override separator to add space before the vertical bar */
#detail-project-meta.post-metadata span:not(:last-child):after {
    content: ' | ';
}

/* Remove any special styling from program and course spans */
#detail-project-meta.post-metadata .detail-meta-program,
#detail-project-meta.post-metadata .detail-meta-course {
    color: #000000;
    font-style: normal;
}

/* Make links inside the detail card italic, but do not change the CTA button */
.post-type-archive-proy_est .student-project-detail-card a:not(.detail-card-button) {
    font-style: italic;
}

/* Ensure all links in detail card are always blue - override visited states */
.post-type-archive-proy_est .student-project-detail-card a:not(.detail-card-button),
.post-type-archive-proy_est .student-project-detail-card a:not(.detail-card-button):link,
.post-type-archive-proy_est .student-project-detail-card a:not(.detail-card-button):visited,
.post-type-archive-proy_est .student-project-detail-card a:not(.detail-card-button):hover,
.post-type-archive-proy_est .student-project-detail-card a:not(.detail-card-button):focus,
.post-type-archive-proy_est .student-project-detail-card a:not(.detail-card-button):active {
    color: var(--arqdis-blue) !important;
}

/* Authors */
.detail-card-authors {
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 1.5em;
    line-height: 32px;
    color: #000000;
    text-transform: uppercase;
    font-style: italic;
}

/* Description */
.detail-card-description {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: #000000;
}

.detail-card-description p {
    margin: 0;
    white-space: pre-wrap;
}

/* Call to Action Button */
.detail-card-cta {
    width: 100%;
}

.detail-card-button {
    background-color: var(--arqdis-blue);
    color: #ffffff;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    text-transform: uppercase;
    transition: background-color 0.3s;
}

.detail-card-button:hover,
.detail-card-button:focus {
    cursor: pointer;
    opacity: 0.9;
}

/* Ensure CTA button stays blue in all states */
.detail-card-button,
.detail-card-button:link,
.detail-card-button:visited,
.detail-card-button:hover,
.detail-card-button:focus,
.detail-card-button:active {
    background-color: var(--arqdis-blue) !important;
    color: #ffffff !important;
}

/* Medium screen adjustments for 1400x900 and similar resolutions */
@media (max-width: 1500px) and (min-width: 1200px) {
    /* Detail card image size variables - adjust these to change all image sizes */
    .post-type-archive-proy_est .student-project-detail-card {
        --detail-image-width: 330px;
        --detail-image-height: 300px;
        --detail-image-min-width: 250px;
        --detail-thumbnail-size: 60px;
        --detail-thumbnail-height: 210px;
        --detail-image-top-padding: 32px;
    }
    
    /* Completely restructure gallery for smaller image */
    .detail-card-gallery {
        margin-top: 16px; /* Reduced from 32px */
        padding: 5px; /* Reduced from 10px */
        gap: 8px; /* Reduced from 10px */
    }
    
    /* Make main image container much smaller and remove flex growth */
    .detail-card-main-image {
        flex: 0 0 auto; /* Don't grow, don't shrink, auto basis */
        max-width: var(--detail-image-width);
        max-height: var(--detail-image-height);
        min-width: var(--detail-image-min-width);
        padding-top: var(--detail-image-top-padding);
    }
    
    /* Aggressively constrain image size - uses container variables */
    .detail-card-main-image img {
        max-height: var(--detail-image-height);
        max-width: var(--detail-image-width);
        width: auto; /* Don't force 100% width */
        height: auto;
        object-fit: cover; /* Use cover instead of contain for better space usage */
    }
    
    /* Reduce thumbnails significantly - uses variables */
    .detail-card-thumbnails {
        max-height: var(--detail-thumbnail-height);
        gap: 5px; /* Smaller gap */
    }
    
    .detail-card-thumbnails img {
        width: var(--detail-thumbnail-size);
    }
    
    /* Menos aire vertical en pantallas medianas; el centrado lo hace margin:auto */
    .post-type-archive-proy_est .detail-card-results,
    .post-type-archive-proy_est .detail-card-no-results {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .post-type-archive-proy_est .detail-card-gallery,
    .post-type-archive-proy_est .detail-card-content {
        margin-bottom: 8px; /* Reduced from 16px */
    }
    
    /* Reduce content gaps */
    .detail-card-content {
        gap: 16px; /* Much smaller gap */
        padding: 8px; /* Reduced padding */
    }
    
    .detail-card-info {
        gap: 8px; /* Smaller gaps between elements */
    }
    
    /* Make topics more compact */
    .detail-card-topics {
        gap: 8px; /* Smaller gap between topics */
    }
    
    .detail-card-topic {
        padding: 4px 6px; /* Smaller topic badges */
        font-size: 14px; /* Smaller font */
    }
}

/* Gallery counter and swipe carousel: only visible on the mobile sheet */
.detail-gallery-counter,
.detail-mobile-track {
    display: none;
}

/* ===== MOBILE / TABLET (≤1200px): detail card becomes a bottom sheet ===== */
@media (max-width: 1200px) {
    :root {
        --project-sheet-max-width: 560px;
    }

    .post-type-archive-proy_est .detail-card-spacer {
        display: none !important;
    }

    .post-type-archive-proy_est .student-project-detail-card {
        display: none; /* shown by JS when the sheet opens */
        position: fixed;
        top: 48px;
        left: 50%;
        right: auto;
        bottom: 0;
        width: 100%;
        max-width: var(--project-sheet-max-width, 560px);
        height: auto;
        min-height: 0;
        max-height: none;
        z-index: 9600;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
        transform: translate(-50%, 105%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.29, 1);
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Keep the slide transition even with .layout-stable, whose desktop rule
       (transition: opacity) has higher specificity and would cancel it */
    .post-type-archive-proy_est .student-project-detail-card.layout-stable {
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.29, 1);
    }

    .post-type-archive-proy_est .student-project-detail-card.sheet-visible {
        transform: translate(-50%, 0);
    }

    /* Lock page scroll while the sheet is open */
    body.project-sheet-open {
        overflow: hidden;
    }

    /* Dark scrim over the grid behind the sheet */
    .detail-sheet-scrim {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        z-index: 9590;
    }

    body.project-sheet-open .detail-sheet-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    /* Close button pinned to the sheet's top-right corner */
    .detail-sheet-close {
        display: none;
    }

    body.project-sheet-open .detail-sheet-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 48px;
        /* Align with the sheet's right edge (sheet is centered with a max width) */
        right: max(0px, calc(50vw - var(--project-sheet-max-width, 560px) / 2));
        width: 44px;
        height: 44px;
        padding: 12px;
        background: #ffffff;
        color: #000000;
        border: none;
        cursor: pointer;
        z-index: 9610;
    }

    .detail-sheet-close svg {
        width: 100%;
        height: 100%;
    }

    /* Content starts at the top instead of vertically centered */
    .post-type-archive-proy_est .detail-card-results,
    .post-type-archive-proy_est .detail-card-no-results {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 24px;
    }

    /* Gallery goes edge-to-edge; text keeps its own padding below */
    .post-type-archive-proy_est .student-project-detail-card > * {
        padding-left: 0;
        padding-right: 0;
    }

    .detail-card-gallery {
        position: relative;
        display: block;
        padding: 0;
        gap: 0;
        margin-top: 0;
    }

    /* Desktop gallery (main image + thumbnails) is replaced by the swipe carousel */
    .detail-card-thumbnails,
    .detail-card-main-image {
        display: none;
    }

    .detail-mobile-track {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .detail-mobile-track::-webkit-scrollbar {
        display: none;
    }

    .detail-mobile-track img {
        flex: 0 0 100%;
        width: 100%;
        max-height: 55vh;
        object-fit: contain;
        background-color: #ffffff;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        cursor: pointer;
    }

    /* Gallery counter "n / total" (JS leaves it empty for single-image galleries) */
    .post-type-archive-proy_est .detail-gallery-counter {
        display: block;
        position: absolute;
        bottom: 20px;
        left: 20px;
        background: rgba(0, 0, 0, 0.7);
        color: #ffffff;
        font-family: 'Roboto Mono', monospace;
        font-weight: 700;
        font-size: 12px;
        padding: 6px 9px;
    }

    .post-type-archive-proy_est .detail-gallery-counter:empty {
        display: none;
    }

    /* Content section */
    .detail-card-content {
        padding: 16px;
        gap: 24px;
    }

    .detail-card-title {
        font-size: 20px;
        line-height: 26px;
    }

    #detail-project-meta.post-metadata {
        font-size: 14px;
        line-height: 20px;
    }

    .detail-card-authors {
        font-size: 1.1em;
        line-height: 24px;
    }

    .detail-card-description {
        font-size: 16px;
        line-height: 26px;
    }

    /* CTA pinned to the bottom of the sheet while the content scrolls */
    .detail-card-cta {
        position: sticky;
        bottom: 0;
        background: #ffffff;
        padding: 10px 0 14px;
        border-top: 1px solid #e5e5e5;
    }

    .detail-card-button {
        font-size: 18px;
        line-height: 24px;
        padding: 12px 8px;
    }
}

@media (max-width: 1200px) and (prefers-reduced-motion: reduce) {
    .post-type-archive-proy_est .student-project-detail-card,
    .post-type-archive-proy_est .student-project-detail-card.layout-stable,
    .detail-sheet-scrim {
        transition: none;
    }
}

/* ===== LIGHTBOX STYLES ===== */
.detail-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.detail-lightbox.active {
    display: flex;
    opacity: 1;
}

/* Prevent body scroll when lightbox is open */
body.lightbox-open {
    overflow: hidden;
}

.lightbox-content {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 95vh;
    object-fit: contain;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    animation: lightboxZoomIn 0.3s ease;
}

@keyframes lightboxZoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Close button */
.lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: none;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-weight: 300;
}

.lightbox-close:hover {
    transform: scale(1.1);
}

/* Navigation arrows */
.lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background-color: transparent;
    border: none;
    color: #ffffff;
    font-size: 48px;
    line-height: 1;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-weight: 300;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-nav:hover {
    transform: translateY(-50%) scale(1.1);
}

/* Counter */
.lightbox-counter {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 20px;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    z-index: 10001;
}

/* Make images in detail card appear clickable */
#detail-main-image,
.detail-card-thumbnails img {
    cursor: pointer;
}

#detail-main-image:hover {
    opacity: 0.9;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
        font-size: 32px;
    }
    
    .lightbox-nav {
        width: 50px;
        height: 50px;
        font-size: 40px;
    }
    
    .lightbox-prev {
        left: 10px;
    }
    
    .lightbox-next {
        right: 10px;
    }
    
    .lightbox-counter {
        bottom: 20px;
        font-size: 12px;
        padding: 8px 16px;
    }
    
    .lightbox-content {
        max-width: 100vw;
        max-height: 100vh;
    }
    
    .lightbox-image {
        max-height: 100vh;
    }
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
    .lightbox-close,
    .lightbox-nav {
        background-color: rgba(255, 255, 255, 0.2);
    }
}