/* --- STYLES FOR ARCHIVE-CARNIVAL.PHP --- */

/* 1. HERO - FORCE FULL WIDTH AND HEIGHT */
.hero {
    position: relative;
    min-height: 70vh; /* Increased height for impact */
    display: block; /* Removed grid to simplify structure for full width */
    place-items: initial;
    border-bottom: 1px solid rgba(255,255,255, .06);
    overflow: hidden;
    padding: 0;
    width: 100%; /* Ensure full width */
}

/* 2. HERO CONTENT - REMOVE MAX-WIDTH */
.hero .content {
    position: relative;
    z-index: 1;
    max-width: none; /* REMOVE MAX-WIDTH RESTRICTION */
    width: 100%; /* Ensure full width */
    height: 100%; /* Ensure full height */
    margin: 0;
    padding: 0; /* Remove existing padding */
    text-align: center;
}

/* 3. HERO CARD/IMG - FORCE FULL WIDTH AND HEIGHT */
.up-card {
    position: relative;
    margin-top: 0; /* Remove top margin */
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255, .06);
    width: 100%;
    height: 100%;
}

.up-img {
    position: relative;
    aspect-ratio: auto; /* Allow height to be set by parent hero */
    width: 100%;
    height: 100%;
}

.up-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.up-img video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity .4s ease
}

.up-img video.is-active {
    opacity: 1
}

/* 4. OVERLAY - Position content at the very bottom */
.up-overlay {
    position: absolute;
    inset: 0;
    display: grid; /* CHANGE TO GRID for L/C/R layout */
    grid-template-columns: 1fr 1.5fr 1fr; /* 3 Columns for L, C, R */
    grid-template-rows: 1fr auto; /* Row 1 for space, Row 2 for content */
    align-items: end; /* Push everything to the bottom */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .65) 85%);
    padding: 30px 40px; /* Add internal padding */
    gap: 10px;
}

.badge-on-image {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3
}

/* 5. NEW STRUCTURE MAPPING */
.up-body {
    grid-area: 2 / 1 / 3 / 2; /* Bottom Left Column (Title & Meta) */
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    color: #fff;
    text-align: left;
}

.loc-chip {
    grid-area: 2 / 3 / 3 / 4; /* Bottom Right Column */
    position: relative;
    right: 0;
    bottom: 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18);
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end; /* Align chip content to the right */
    gap: 8px;
    box-shadow: 0 0 0 2px rgba(245, 183, 0, .12), 0 10px 24px rgba(0, 0, 0, .35);
    z-index: 4;
    text-align: right;
    margin: 0; /* Remove any default margins */
}

.loc-chip::before {
    content: '📍';
    opacity: .9;
    margin-right: 6px
}

.countdown {
    grid-area: 2 / 2 / 3 / 3; /* Bottom Center Column */
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    background: transparent; /* Remove background here as it's in the tick */
    backdrop-filter: none;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.up-title {
    font-size: clamp(20px, 3vw, 30px);
    margin: 0 0 4px
}

.up-meta {
    color: var(--muted);
    font-size: 13px
}

.tick {
    min-width: 70px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .55); /* Darker background for visibility */
    text-align: center;
    /* INLINE STYLES ARE STILL NEEDED FOR .LBL IN PHP FOR MAX PRIORITY */
}

.tick .num {
    font-size: 20px;
    font-weight: 800
}

.tick .lbl {
    font-size: 11px;
    color: #eaeaf3;
    line-height: 1.2;
    opacity: 1;
}

/* REST OF CSS REMAINS THE SAME, ENSURING FULL VISIBILITY */
.wrap {
    max-width: 1200px;
    margin: auto;
    padding: 24px 16px
}

.section {
    padding: 10px 0 30px
}

.section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0
}

.section h2 {
    margin: 0;
    font-size: clamp(20px, 3.5vw, 30px)
}

.filters {
    display: grid;
    grid-template-columns: 1.2fr .9fr .9fr .7fr .6fr;
    gap: 10px
}

@media (max-width:1000px) {
    .filters {
        grid-template-columns: 1fr 1fr 1fr
    }
}

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

.field {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.field label {
    font-size: 12px;
    color: var(--muted)
}

.input, select {
    appearance: none;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: #fff
}

.tools {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px
}

.listwrap {
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden
}

.list-head, .row {
    display: grid;
    grid-template-columns: 100px 1.6fr 1.1fr 1.2fr;
    gap: 12px;
    align-items: center
}

.list-head {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px
}

.row {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.row:last-child {
    border-bottom: 0
}

.mcell {
    display: flex;
    align-items: center;
    gap: 10px
}

.mbadge {
    display: inline-block;
    min-width: 64px;
    text-align: center;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
    font-weight: 700
}

.cname {
    font-weight: 700
}

.location {
    color: var(--muted)
}

.date {
    color: #e9e9f3
}

@media (max-width:800px) {
    .list-head {
        display: none
    }

    .row {
        grid-template-columns: 1fr;
        gap: 6px
    }

    .mcell {
        order: 1
    }

    .cname {
        order: 2
    }

    .location {
        order: 3
    }

    .date {
        order: 4
    }
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

@media (max-width:1000px) {
    .grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

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

.gcard {
    border-radius: 16px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: var(--shadow)
}

.gthumb {
    position: relative;
    aspect-ratio: 16/9;
    background: #0b0d12
}

.gthumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.gfooter {
    padding: 12px 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    gap: 4px
}

.gfooter .name {
    font-weight: 800
}

.gfooter .meta {
    color: var(--muted);
    font-size: 12px
}

.play-btn {
    position: absolute;
    inset: auto 16px 16px auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .18);
    font-weight: 800;
    font-size: 12px;
    cursor: pointer
}

#videoModal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(4px);
    z-index: 60
}

#videoModal.active {
    display: flex
}

#videoModal .box {
    width: min(92vw, 1000px);
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, .12)
}

#videoModal header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(0, 0, 0, .6);
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

#videoModal header h3 {
    margin: 0;
    font-size: 16px
}

#videoModal button.close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 20px;
    cursor: pointer
}

#videoModal video {
    width: 100%;
    height: auto;
    display: block
}

@media (max-width: 768px) {
    /* Stack the Hero Overlay Grid */
    .up-overlay {
        grid-template-columns: 1fr; /* 1 Column */
        grid-template-rows: auto auto auto; /* 3 Rows */
        justify-items: center; /* Center everything */
        text-align: center;
        padding-bottom: 60px; /* Space for bottom bar if any */
    }

    /* Reset Grid Areas to stack vertically */
    .content-left, .content-center, .content-right {
        grid-area: auto; /* Remove specific placement */
        text-align: center;
        margin-bottom: 20px;
    }

    /* Order: Title first, then Countdown, then Location */
    .content-left { order: 1; }   /* Title */
    .content-center { order: 2; } /* Countdown */
    .content-right { order: 3; }  /* Location */

    /* Adjust Font Sizes */
    .up-title { font-size: 2rem; }
    .loc-chip { font-size: 0.8rem; }
    
    /* Make countdown smaller */
    .tick { padding: 5px 10px; min-width: 50px; }
    .tick .num { font-size: 1.2rem; }
}