/* Sine Nomine Singers - the site's own styles on top of MudBlazor's. */

html, body { background: #FBFAF7; }

.sn-appbar { padding: 0 16px; }
.sn-brand { display: inline-flex; align-items: center; height: 72px; }
.sn-logo { height: 56px; width: auto; display: block; }
.sn-nav { align-items: center; gap: 4px; margin-right: 8px; }
.sn-nav-link {
    color: #FFFFFF; text-decoration: none; font-size: 0.95rem; letter-spacing: 0.02em; padding: 8px 12px;
    border-bottom: 2px solid transparent; transition: border-color .15s;
}
.sn-nav-link:hover { border-bottom-color: #0072B2; }
.sn-nav-active { border-bottom-color: #FFFFFF; }
.sn-signin { color: #FFD28A; }
.sn-drawer .mud-nav-link { color: #EEEEEE; }

.sn-main { min-height: 100vh; display: flex; flex-direction: column; }
.sn-main > *:first-child { flex: 1 0 auto; }

/* The hero: the next event, poster beside the words. */
.sn-hero { background: #111; color: #F4F1EA; padding: 48px 0; }
.sn-hero .mud-typography { color: inherit; }
.sn-hero-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 40px; align-items: center; }
.sn-hero-poster img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.sn-hero-kind { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: #FFD28A; margin-bottom: 8px; }
.sn-hero-date { font-size: 1.15rem; margin: 12px 0 4px; }
.sn-hero-venue a { color: #FFD28A; }
.sn-hero-strap { font-size: 1.1rem; margin: 16px 0 24px; max-width: 60ch; }
.sn-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 800px) { .sn-hero-grid { grid-template-columns: 1fr; } .sn-hero-poster { max-width: 320px; margin: 0 auto; } }

.sn-band { padding: 40px 0; }
.sn-band-alt { background: #F1EEE6; }
.sn-band-photo { background: #000 center/cover no-repeat; color: #fff; padding: 72px 0; }
.sn-band-photo .mud-typography { color: #fff; }
.sn-band-photo .sn-scrim { background: rgba(0,0,0,.55); padding: 24px; border-radius: 6px; max-width: 70ch; }

.sn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.sn-card { display: flex; flex-direction: column; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.12); text-decoration: none; color: inherit; }
.sn-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.sn-card-poster { aspect-ratio: 1 / 1.3; background: #e9e5db center/cover no-repeat; }
.sn-card-poster.sn-card-title-card { display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; font-weight: 600; color: #333; }
.sn-card-body { padding: 14px 16px 16px; }
.sn-card-date { font-size: .85rem; color: #555; margin-bottom: 4px; }
.sn-season { margin: 32px 0 12px; border-bottom: 1px solid #ddd; padding-bottom: 6px; }

/* Concert page */
.sn-concert-head { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 36px; align-items: start; margin: 24px 0 32px; }
.sn-concert-head img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
@media (max-width: 800px) { .sn-concert-head { grid-template-columns: 1fr; } .sn-concert-head .sn-poster { max-width: 320px; } }
.sn-facts { margin: 12px 0 16px; }
.sn-facts div { margin-bottom: 4px; }
.sn-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.sn-section { margin: 36px 0; }
.sn-section-title { margin-bottom: 12px; }
.sn-programme ol { list-style: none; padding: 0; margin: 0; }
.sn-programme li { padding: 10px 0; border-bottom: 1px solid #ebe7de; }
.sn-programme .sn-work-title { font-size: 1.08rem; }
.sn-programme .sn-work-meta { color: #555; font-size: .9rem; }
.sn-programme .sn-work-controls { margin-top: 4px; display: flex; gap: 8px; }
.sn-programme .sn-work-controls button { background: none; border: 0; color: #0072B2; cursor: pointer; padding: 2px 0; font-size: .9rem; }
.sn-words { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 10px 0 4px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.1rem; }
.sn-words.sn-words-single { grid-template-columns: 1fr; }
@media (max-width: 700px) { .sn-words { grid-template-columns: 1fr; } }
.sn-note { margin: 10px 0 4px; max-width: 70ch; }
.sn-half { margin: 18px 0 6px; font-variant: small-caps; letter-spacing: .08em; color: #555; }
.sn-choir { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.sn-choir h6 { margin-bottom: 4px; }
.sn-choir ul { list-style: none; padding: 0; margin: 0; }
.sn-bio { max-width: 70ch; }
.sn-prevnext { display: flex; justify-content: space-between; gap: 16px; margin: 40px 0 16px; }
.sn-prevnext a { text-decoration: none; }
audio { width: 100%; max-width: 560px; }
.sn-recording { padding: 8px 0; border-bottom: 1px solid #ebe7de; }
.sn-recording .mud-typography-caption { display: block; }
.sn-recording audio { display: block; margin-top: 4px; }
.mud-container ul:not([class]), .mud-container ol:not([class]) { padding-left: 1.5em; }

.sn-prose { max-width: 72ch; }
.sn-prose img { max-width: 100%; height: auto; }

.sn-footer { background: #111; color: #CFCBC2; padding: 32px 0; margin-top: 48px; }
.sn-footer .mud-typography { color: inherit; }
.sn-footer a { color: #FFD28A; text-decoration: none; }
.sn-footer-head { color: #fff; margin-bottom: 6px; }
.sn-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }

.sn-calendar td { padding: 6px 12px 6px 0; vertical-align: top; }
.sn-calendar .sn-break { color: #777; font-style: italic; }
.sn-calendar .sn-concert-day { font-weight: 600; }

#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }