/* Archive-specific styles. Shared site styles come from styles.css. */

.archive-page-hero .page-subtitle { max-width: 68ch; }

.archive-controls-section { padding: 2rem 0 0; }
.archive-controls { padding: clamp(1.4rem, 2.5vw, 2rem); }
.archive-controls-heading { margin-bottom: 1.4rem; }
.archive-filter-grid { display: grid; grid-template-columns: minmax(180px, .5fr) minmax(0, 1.5fr); gap: 1.5rem; align-items: end; }
.control-group { display: grid; gap: .65rem; }
.control-group label, .control-label { color: var(--brown); font-weight: 800; }
#yearSelect { width: 100%; max-width: 260px; padding: .8rem .95rem; border: 1px solid rgba(91,51,40,.18); border-radius: 14px; background: rgba(255,250,242,.85); color: var(--ink); }
.tab-row { display: flex; flex-wrap: wrap; gap: .65rem; }
.archive-tab { border: 1px solid rgba(91,51,40,.18); background: rgba(255,250,242,.75); color: var(--brown); border-radius: 999px; padding: .65rem .95rem; cursor: pointer; font-family: "BunClo", "Book Antiqua", Georgia, serif; font-weight: 800; }
.archive-tab:hover, .archive-tab:focus-visible { background: rgba(233,122,124,.16); }
.archive-tab.active { background: var(--rose); color: var(--brown-deep); border-color: var(--rose); }

.archive-result-heading-section { padding: 2.4rem 0 1rem; }
.archive-results-heading .section-title { margin-bottom: 0; }
.archive-content-section { padding: 0 0 5rem; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.gallery-card { margin: 0; background: rgba(255,250,242,.84); border: 1px solid rgba(91,51,40,.08); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gallery-image-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.gallery-card img { width: 100%; height: 260px; object-fit: cover; transition: transform .25s ease; }
.gallery-image-button:hover img { transform: scale(1.03); }
.gallery-card figcaption { padding: .9rem 1rem; color: var(--muted); font-weight: 700; }

.lightbox[hidden] { display: none; }
.lightbox { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.9); z-index: 5000; padding: 2rem; }
.lightbox-img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.lightbox-close, .lightbox-arrow { position: absolute; border: 0; background: rgba(255,255,255,.12); color: white; cursor: pointer; border-radius: 999px; }
.lightbox-close { top: 1.2rem; right: 1.2rem; width: 48px; height: 48px; font-size: 2rem; }
.lightbox-arrow { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2.4rem; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
body.lightbox-open { overflow: hidden; }

.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.2rem; }
.video-card h3 { margin-top: 0; color: var(--brown); }
.video-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 18px; background: var(--brown-deep); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.detail-grid { display: grid; grid-template-columns: minmax(280px,.85fr) minmax(0,1.15fr); gap: 2rem; align-items: start; }
.detail-image-wrap img { width: 100%; border-radius: 18px; }
.detail-text h2 { margin: 0 0 .8rem; color: var(--brown); font-size: clamp(2rem,3vw,3rem); }
.detail-text p { color: var(--muted); line-height: 1.75; }
.lyrics { white-space: pre-wrap; font-family: inherit; line-height: 1.65; color: var(--muted); margin: 0; }

.archive-programme-card { display: grid; grid-template-columns: minmax(0,.7fr) minmax(320px,1.3fr); gap: 2rem; align-items: start; }
.archive-programme-copy h2 { margin: 0 0 .6rem; color: var(--brown); font-size: clamp(2rem,3vw,3rem); }
.archive-programme-copy p { color: var(--muted); }
.archive-programme-image img { width: 100%; max-width: 760px; margin-left: auto; border-radius: 18px; }

.empty-state { text-align: center; }
.empty-state h2 { margin-top: 0; color: var(--brown); }
.empty-state p { margin-bottom: 0; color: var(--muted); }

@media (max-width: 980px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .video-grid, .detail-grid, .archive-programme-card, .archive-filter-grid { grid-template-columns: 1fr; }
  #yearSelect { max-width: none; }
  .archive-programme-image img { margin: 0 auto; }
}

@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .archive-tab { flex: 1 1 auto; text-align: center; }
  .lightbox { padding: 1rem; }
  .lightbox-arrow { width: 44px; height: 44px; font-size: 2rem; }
}
\n\n/* Mobile & tablet archive improvements */\n@media (max-width: 700px) {\n  .archive-controls-section { padding-top: 1.25rem; }\n  .archive-result-heading-section { padding-top: 1.8rem; }\n  .archive-content-section { padding-bottom: 3.5rem; }\n\n  .archive-controls { padding: 1.15rem; }\n  .archive-filter-grid { gap: 1.1rem; }\n  #yearSelect { min-height: 48px; font-size: 16px; }\n\n  .tab-row {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: .5rem;\n  }\n\n  .archive-tab {\n    min-height: 46px;\n    padding: .7rem .6rem;\n  }\n\n  .gallery-card img {\n    height: auto;\n    aspect-ratio: 4 / 3;\n  }\n\n  .detail-grid, .archive-programme-card { gap: 1.25rem; }\n  .detail-text p, .lyrics { line-height: 1.6; }\n  .lyrics { font-size: .96rem; overflow-wrap: anywhere; }\n\n  .lightbox { padding: .75rem; }\n  .lightbox-img { max-width: 96vw; max-height: 78vh; }\n  .lightbox-close { top: .65rem; right: .65rem; }\n  .lightbox-prev { left: .4rem; }\n  .lightbox-next { right: .4rem; }\n}\n\n@media (max-width: 420px) {\n  .tab-row { grid-template-columns: 1fr; }\n}\n