/* ===================================
   Hayeon Archive Gallery v3
=================================== */

.archive-container{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
}

/* ==========================================
   GALLERY STATS
========================================== */

.gallery-stats{

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:24px;

    margin:40px 0;

}

.gallery-stat-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:18px;

    padding:28px 20px;

    text-align:center;

    transition:.25s;

}

.gallery-stat-card:hover{

    transform:translateY(-4px);

    border-color:var(--mint);

    box-shadow:0 8px 24px rgba(0,0,0,.15);

}

.gallery-stat-icon{

    font-size:30px;

    margin-bottom:14px;

}

.gallery-stat-card h3{

    font-size:34px;

    color:var(--mint);

    margin-bottom:6px;

}

.gallery-stat-card p{

    color:var(--text-light);

    font-weight:600;

}

@media (max-width:768px){

    .gallery-stats{

        grid-template-columns:repeat(2,1fr);

    }

}

/* ==========================================
   FILTER BAR
========================================== */

.gallery-filter{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:16px;

    margin:40px 0 56px;

}

.filter-btn{

    min-width:120px;

    padding:12px 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    border-radius:999px;

    border:1px solid var(--border);

    background:var(--card);

    color:var(--text);

    cursor:pointer;

    transition:.25s;

}

.filter-btn:hover{

    border-color:var(--mint);

    transform:translateY(-2px);

}

.filter-btn.active{

    background: var(--mint) !important;
    color: #111827 !important;
    border-color: var(--mint) !important;

    font-weight: 700;

}

.filter-btn.active *{

    color: #111827 !important;

}

/* ==========================
   YEAR
========================== */

.archive-year{

    background:var(--card,#1f2634);

    border-radius:14px;

    margin-bottom:18px;

    overflow:hidden;

    border:1px solid rgba(82,217,187,.15);

}

.archive-year-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 24px;

    cursor:pointer;

    user-select:none;

    transition:.25s;

}

.archive-year-header:hover{

    background:rgba(82,217,187,.08);

}

.archive-year-title{

    font-size:28px;

    font-weight:700;

}

.archive-count{

    color:#52D9BB;

    font-weight:bold;

}

/* ==========================
   MONTH
========================== */

.archive-month{

    margin:18px 0 0 24px;

    border-left:2px solid rgba(82,217,187,.18);

}

.archive-month-header{

    padding:16px 20px;

    cursor:pointer;

    transition:.25s;

    display:flex;

    justify-content:space-between;

}

.archive-month-header:hover{

    background:rgba(82,217,187,.06);

}

.archive-month-title{

    font-size:20px;

    font-weight:600;

}

/* ==========================
   DAY
========================== */

.archive-day{

    background:#1b2433;

    border-radius:16px;

    padding:16px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    border:1px solid rgba(255,255,255,.05);

    transition:.25s;

}
.archive-date{

    font-size:18px;

    font-weight:700;

    color:white;

    margin-bottom:10px;

}

.archive-title{

    margin-top:6px;

    margin-bottom:18px;

    color:#52D9BB;

    font-size:15px;

}
.archive-day-header{

    margin-bottom:12px;

}
.archive-album-title{

    margin-top:12px;

    text-align:center;

    color:#52D9BB;

    font-size:14px;

    font-weight:600;

    line-height:1.4;

    min-height:38px;

}
.archive-content{

    display:none;

    padding:20px 0 20px;
}
.archive-day:hover{

    transform:translateY(-6px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.35);

    border-color:#52D9BB;

}
.archive-day-header:hover{

    background:rgba(82,217,187,.08);

}

.archive-day-title{

    font-size:17px;

    font-weight:600;

}

.archive-day-subtitle{

    color:#8f9aaa;

    margin-top:4px;

    font-size:14px;

}

/* ==========================
   CONTENT
========================== */

.archive-content{

    display:none;

    padding:10px 0 18px;

}

.archive-content.open{

    display:block;

}

/* ==========================
   THUMBNAILS
========================== */

.media-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:8px;

    margin-top:10px;

}

.media-grid img,
.media-grid video{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:10px;

    cursor:pointer;

    transition:.25s;

}
.media-grid img:hover,
.media-grid video:hover{

    transform:scale(1.08);

    filter:brightness(1.08);

}
.preview-last{

    position:relative;

}
.preview-last::after{

    content:attr(data-more);

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:22px;

    font-weight:bold;

    border-radius:10px;

}

/* ==========================
   IMAGE EXPAND ON HOVER
========================== */

.archive-day{

    overflow:hidden;

}

.archive-day .media-grid{

    max-height:320px;

    overflow:hidden;

    transition:
        max-height .45s ease;

}

/* Expand image albums */

.archive-day:hover .media-grid{

    max-height:3000px;

}

/* Smooth reveal */

.media-grid img{

    transition:
        transform .25s ease,
        opacity .35s ease;

}

/* Fade hidden images */

.media-grid img:nth-child(n+5){

    opacity:0;

    transform:translateY(20px);

}

/* Reveal */

.archive-day.expanded .media-grid img:nth-child(n+5){

    opacity:1;

    transform:translateY(0);

}

/* Remove +X overlay while expanded */

.archive-day.expanded .preview-last::after{

    display:none;

}

/* Mobile */

@media(max-width:700px){

.archive-day.expanded .media-grid{

    max-height:3000px;

}

}
.media-grid img:hover,

.media-grid video:hover{

    transform:scale(1.04);

    box-shadow:0 0 18px rgba(82,217,187,.35);

}

/* ==========================
   MOBILE
========================== */

@media(max-width:700px){

.archive-year-title{

    font-size:22px;

}

.archive-month-title{

    font-size:18px;

}

.media-grid{

    grid-template-columns:repeat(2,1fr);

}

}
.archive-meta{

    margin-top:8px;

    font-size:14px;

    color:#52D9BB;

    display:flex;

    gap:18px;

}

.archive-day-subtitle{

    margin-top:6px;

    color:#aab4c5;

}
.album-viewer{

    display:grid;

    grid-template-columns:60px 1fr 60px;

    align-items:center;

    gap:20px;

    margin-top:20px;

}

.album-preview{

    width:100%;

    aspect-ratio:1;

    overflow:hidden;

    border-radius:16px;

    background:#111;

}

.album-preview img,

.album-preview video{

    width:100%;

    height:100%;

    object-fit:contain;

    cursor:pointer;

}

.album-arrow{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#52D9BB;

    color:#111;

    font-size:26px;

    cursor:pointer;

    transition:.25s;

}

.album-arrow:hover{

    transform:scale(1.1);

}

.album-counter{

    text-align:center;

    margin-top:12px;

    color:#52D9BB;

    font-weight:bold;

}
.archive-day-count{

    margin-top:6px;

    font-size:14px;

    color:#52D9BB;

    font-weight:600;

}
/* ==========================================
   Day Grid
========================================== */

.archive-days{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}
@media (max-width:1400px){

    .archive-days{

        grid-template-columns:repeat(3,1fr);

    }

}

@media (max-width:1000px){

    .archive-days{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:650px){

    .archive-days{

        grid-template-columns:1fr;

    }

}
/* ==========================
   YOUTUBE
========================== */

.youtube-player{

    width:100% !important;

    height:600px !important;

    border:none;

    border-radius:16px;

    grid-column:1 / -1;

    background:#000;

}

.media-grid iframe{

    aspect-ratio:16 / 9;

}

/* MOBILE */

@media(max-width:700px){

.youtube-player{

    height:300px !important;

}

}
/* ==========================
   YOUTUBE HOVER EXPAND
========================== */

.archive-day:has(.youtube-player){

    transition:
        transform .35s ease,
        z-index .35s ease;

}

.archive-day:has(.youtube-player):hover{

    transform:scale(1.08);

    z-index:100;

}

.archive-day:has(.youtube-player):hover iframe{

    height:600px !important;

}

.youtube-player{

    width:100% !important;

    height:240px !important;

    transition:
        height .35s ease,
        transform .35s ease;

    border-radius:16px;

}

/* MOBILE */

@media(max-width:700px){

.archive-day:has(.youtube-player):hover{

    transform:none;

}

.youtube-player{

    height:240px !important;

}

}

/* MOBILE */

@media(max-width:1000px){

.archive-day:has(.youtube-player){

    grid-column:auto;

}

.archive-day:has(.youtube-player) iframe{

    height:400px !important;

}

}
@media (hover:hover){

.archive-day:hover .media-grid{

    max-height:3000px;

}

.archive-day:hover .preview-last::after{

    display:none;

}

.archive-day:hover .media-grid img:nth-child(n+5){

    opacity:1;

    transform:translateY(0);

}

};