/* Student Work gallery (/gallery) */

/* ── Empty state ─────────────────────────────────────────── */
.work-empty-state {
    text-align: center; padding: 72px 28px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.work-empty-icon {
    width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; color: var(--gold); background: rgba(168, 114, 30, 0.1);
}
.work-empty-state h2 { margin-bottom: 14px; color: var(--s-ink); }
.work-empty-state p { max-width: 480px; margin: 0 auto 18px; }
.work-empty-note { font-size: 0.88rem; color: var(--text-muted); }
.work-empty-note strong { color: var(--s-ink); }
.work-empty-actions { margin-top: 28px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── Filters ─────────────────────────────────────────────── */
.work-filter { font-family: inherit; cursor: pointer; }
.work-filter:focus-visible { outline: 3px solid var(--gold-l); outline-offset: 3px; }
.work-count { opacity: 0.7; font-weight: 500; }
.work-status { text-align: center; font-size: 0.85rem; color: var(--text-muted); margin: -12px 0 24px; min-height: 1.2em; }
.work-none { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.work-none[hidden] { display: none; }

/* ── Grid ────────────────────────────────────────────────── */
.work-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px;
}
.work-grid[hidden], .work-item[hidden] { display: none; }
.work-card {
    display: block; height: 100%; color: inherit; text-decoration: none;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
    overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.work-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(30, 26, 21, 0.12); border-color: var(--gold-l); }
.work-card:focus-visible { outline: 3px solid var(--gold-l); outline-offset: 3px; }
.work-thumb { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--s-light, #faf6ef); overflow: hidden; }
.work-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-badge {
    position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: var(--r-pill);
    font-size: 0.72rem; font-weight: 600; color: #fff; background: rgba(30, 26, 21, 0.78);
}
.work-kind {
    position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: var(--r-pill);
    font-size: 0.72rem; font-weight: 600; color: #fff; background: rgba(168, 67, 26, 0.9);
}
/* play button drawn with CSS (no icon needed) */
.work-play {
    position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px;
    border-radius: 50%; background: rgba(30, 26, 21, 0.72); border: 2px solid rgba(255, 255, 255, 0.9);
    transition: transform 0.2s ease;
}
.work-play::after {
    content: ""; position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -6px;
    border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #fff;
}
.work-card:hover .work-play { transform: scale(1.08); }
.work-info { display: block; padding: 14px 16px 16px; }
.work-title { display: block; font-weight: 700; color: var(--s-ink); font-size: 0.98rem; line-height: 1.35; margin-bottom: 4px; }
.work-meta { display: block; font-size: 0.8rem; color: var(--text-muted); }
.work-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Lightbox ────────────────────────────────────────────── */
html.work-lb-open { overflow: hidden; }
.work-lightbox {
    width: min(1040px, 96vw); max-height: 96vh; padding: 0; border: 0; border-radius: var(--r-lg);
    background: #14110e; color: #fff; overflow: hidden;
}
.work-lightbox::backdrop { background: rgba(10, 8, 6, 0.86); }
.work-lb-inner { position: relative; display: flex; flex-direction: column; max-height: 96vh; }
.work-lb-close {
    position: absolute; top: 10px; right: 12px; z-index: 3; width: 44px; height: 44px;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff;
    font-size: 1.9rem; line-height: 1; cursor: pointer;
}
.work-lb-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 18px 56px 8px; }
.work-lb-media { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 200px; }
.work-lb-media img { display: block; max-width: 100%; max-height: 66vh; object-fit: contain; border-radius: 6px; }
.work-lb-media iframe { display: block; border: 0; border-radius: 8px; background: #000; }
.work-lb-media iframe.is-youtube { width: 100%; aspect-ratio: 16 / 9; max-height: 66vh; }
.work-lb-media iframe.is-reel { width: min(100%, 400px); height: min(66vh, 720px); background: #fff; }
.work-lb-nav {
    position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff;
    font-size: 1rem; cursor: pointer;
}
.work-lb-prev { left: 8px; }
.work-lb-prev i { display: inline-block; transform: scaleX(-1); }   /* mirrored chevron = "previous" */
.work-lb-next { right: 8px; }
.work-lb-close:hover, .work-lb-nav:hover { background: rgba(255, 255, 255, 0.28); }
.work-lb-close:focus-visible, .work-lb-nav:focus-visible, .work-lb-link:focus-visible { outline: 3px solid var(--gold-l); outline-offset: 2px; }
.work-lb-caption { padding: 8px 24px 20px; text-align: center; }
.work-lb-caption h2 { font-size: 1.15rem; color: #fff; margin: 0 0 4px; }
.work-lb-caption p { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); }
.work-lb-link { display: inline-block; margin-top: 10px; color: var(--gold-l); font-weight: 600; font-size: 0.9rem; }
.work-lb-link[hidden] { display: none; }
.work-lb-count { margin-top: 8px !important; font-size: 0.75rem !important; color: rgba(255, 255, 255, 0.5) !important; }

@media (max-width: 600px) {
    .work-grid { gap: 16px; }
    .work-lb-stage { padding: 56px 8px 8px; }
    .work-lb-nav { top: auto; bottom: -4px; margin-top: 0; }
    .work-lb-prev { left: 12px; }
    .work-lb-next { right: 12px; }
    .work-lb-close { top: 8px; right: 8px; }
    .work-lb-caption { padding: 6px 60px 18px; }
    .work-lb-media iframe.is-reel { height: min(58vh, 640px); }
}
@media (prefers-reduced-motion: reduce) {
    .work-card, .work-play { transition: none; }
    .work-card:hover { transform: none; }
}