/* css/show-page.css — compact show page (shows/single_show.php). Loaded after css.css, so these win.
   Order on a phone: details, flyer, video, lineup, photos, notes, links/merch. Two columns from 992px up.
   Site palette: #161C1D bg, #2a3133 panels, #EDC78A accent. */

.show-page.sp { margin-top: .75rem; }
.sp .sp-k { color: #9aa3a5; }

/* ---- header: date line, title, venue, one meta line, tickets ---- */
.sp-head { margin-bottom: .75rem; }
.sp-datebar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sp .sp-date { font-size: .95rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #EDC78A; margin: 0; font-family: 'Oswald', sans-serif; }
.sp .sp-edit { padding: 0 .4rem; font-size: .75rem; line-height: 1.5; }
.sp .sp-history { font-size: .75rem; }
.sp .sp-title { font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: #E6E6E6; margin: .15rem 0 0; font-family: 'Oswald', sans-serif; }
.sp .sp-venue { font-size: 1rem; color: #CACACA; line-height: 1.25; }
.sp .sp-addr { font-size: .8rem; color: #9aa3a5; line-height: 1.25; }
.sp .sp-meta { display: flex; flex-wrap: wrap; gap: 0 .9rem; font-size: .85rem; color: #E6E6E6; margin-top: .25rem; }
.sp .sp-tickets { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }

/* ---- layout: one column (phone), wrappers dissolve so sections keep DOM order ---- */
.sp-grid { display: flex; flex-direction: column; gap: .85rem; }
.sp-col { display: contents; }
.sp .sp-h { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9aa3a5; margin: 0 0 .25rem; font-family: 'Oswald', sans-serif; }

@media (min-width: 992px) {
    .sp-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.25rem 1.75rem; align-items: start; }
    .sp-col { display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
    .sp .sp-title { font-size: 1.8rem; }
}

/* ---- flyer ---- */
.sp .sp-flyer .media-gallery { text-align: center; }
.sp .primary-media-container { background: transparent; min-height: 0; margin-bottom: .4rem !important; }
.sp .primary-media-container img.mediaImage,
.sp .primary-media-container .mediaImage { width: auto; max-width: 100%; max-height: 50vh; margin: 0 auto; border-radius: 6px; box-shadow: none; }
@media (min-width: 992px) { .sp .primary-media-container img.mediaImage, .sp .primary-media-container .mediaImage { max-height: 560px; } }
.sp .media-thumbnails { margin-top: .25rem; }
.sp .media-thumbnail { width: 52px !important; height: 52px !important; min-width: 52px; min-height: 52px; }
.sp .thumbnail-row { gap: .3rem; justify-content: flex-start; }
.sp .mobile-media-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 0; }
.sp .media-nav-dots { display: flex; align-items: center; gap: .15rem; }
.sp .media-nav-dots .nav-dot { padding: 5px; width: 8px; height: 8px; }
.sp .media-nav-arrows { display: flex; gap: .4rem; }
.sp .media-nav-arrows .nav-arrow { width: 34px; height: 34px; min-width: 34px; min-height: 34px; font-size: 1.2rem; }

/* with photos on the page the flyer steps back to about a social-post size on desktop; alone it stays prominent */
@media (min-width: 992px) {
    .sp-has-photos .primary-media-container img.mediaImage, .sp-has-photos .primary-media-container .mediaImage { max-height: 480px; }
}

/* ---- video ---- */
.sp-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0a0e0f; }
.sp-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-video-more { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.sp-video-pick { background: #2a3133; color: #E6E6E6; border: 1px solid transparent; border-radius: 4px; font-size: .78rem; padding: .15rem .5rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.sp-video-pick.active, .sp-video-pick:hover { border-color: #EDC78A; }

/* ---- lineup ---- */
.sp-bands { list-style: none; margin: 0; padding: 0; }
.sp-bands .lineup-item { padding: .1rem 0; font-size: 1.05rem; line-height: 1.3; border: 0; }
.sp-bands-2col { column-count: 2; column-gap: 1.5rem; }
.sp-bands-2col .lineup-item { break-inside: avoid; }

/* ---- photos, notes, request box ---- */
.sp .pg-section { margin-top: 0; }
.sp .pg-head { margin-bottom: .25rem; }
.sp .pg-head h2 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #9aa3a5; font-family: 'Oswald', sans-serif; }
.sp .pg-mosaic { aspect-ratio: 16 / 9; }
.sp .pg-mosaic--n5, .sp .pg-mosaic--n4 { aspect-ratio: 16 / 10; }
/* "Manage photos" (only for people who may manage this show's photos): small toggle in the Photos head, manager below */
.sp .pg-head .sp-pm-toggle { margin-left: auto; padding: 0 .4rem; font-size: .75rem; line-height: 1.5; align-self: center; white-space: nowrap; }
.sp .sp-pm { margin-top: .35rem; }
.sp .sp-pm .pm-add { margin-top: .25rem; }
.sp .show-notes { font-size: .95rem; line-height: 1.45; }
.sp .lineup-request { margin-top: 0 !important; font-size: .85rem; }

/* ---- links and merch: small, last ---- */
.sp-extras { margin-top: 1rem; padding-top: .6rem; border-top: 1px solid #2a3133; font-size: .8rem; }
.sp-links { display: flex; flex-wrap: wrap; gap: .1rem .9rem; align-items: baseline; }
.sp-links a { color: #CACACA; text-decoration: none; }
.sp-links a:hover { color: #FEE7BE; text-decoration: underline; }
.sp-merch { margin-top: .5rem; }
.sp-merch summary { cursor: pointer; color: #9aa3a5; }
.sp-merch[open] summary { margin-bottom: .5rem; }