/* Sermon library and Events pages: filters, lists, calendar. */

/* ---------- Filters bar ---------- */
.filters { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); align-items: end; }
.filters .field label { font-size: var(--fs-xs); color: var(--charcoal); }
.filters--events { grid-template-columns: 2fr 1fr auto; }
@media (max-width: 900px) { .filters, .filters--events { grid-template-columns: 1fr 1fr; } .filters .field--search { grid-column: 1 / -1; } }
@media (max-width: 480px) { .filters, .filters--events { grid-template-columns: 1fr; } }
.result-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); color: var(--charcoal); font-size: var(--fs-sm); }
.btn--small { padding: .5rem .85rem; font-size: var(--fs-xs); }
.linkish { background: none; border: 0; padding: 0; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; cursor: pointer; }
.empty { text-align: center; padding: var(--sp-7) var(--sp-4); background: #fff; border: 1px dashed var(--line); border-radius: var(--r-lg); color: var(--charcoal); }

/* ---------- Sermon cards ---------- */
.sermon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5) var(--sp-4); }
.sermon-card .meta { margin: 0; }
.sermon-card h3 { font-size: 1.02rem; line-height: 1.3; }
.sermon-thumb--pm { background-image: linear-gradient(135deg, rgba(35,57,47,.92), rgba(76,107,85,.82)), url(../images/sanctuary.jpg); background-size: cover; background-position: center; }
.sermon-thumb--special { background-image: linear-gradient(135deg, rgba(58,42,30,.92), rgba(138,100,41,.82)), url(../images/sanctuary.jpg); background-size: cover; background-position: center; }
.sermon-thumb__title { overflow-wrap: anywhere; }
.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-5); align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-5); }
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; } }
.feature h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.more-row { text-align: center; margin-top: var(--sp-6); }

/* ---------- Sermon page ---------- */
.crumbs { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.sermon-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 900px) { .sermon-layout { grid-template-columns: 1fr; } }
.media-frame { position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; background: #000; }
.media-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-frame .sermon-thumb { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.audio-card { margin-top: var(--sp-3); }
.kv { margin: var(--sp-4) 0; }
.kv div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.kv span { color: var(--charcoal); }
.pager { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }

/* ---------- Events ---------- */
.tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.tabs button { border: 1px solid var(--line); background: #fff; border-radius: var(--r-pill); padding: .5rem 1.1rem; font-size: var(--fs-sm); color: var(--navy); }
.tabs button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.month-label { font-family: var(--font-head); font-size: var(--fs-lg); color: var(--navy); margin: var(--sp-6) 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--gold); }
.month-label:first-child { margin-top: 0; }
.event-row { display: grid; grid-template-columns: 62px 1fr; gap: var(--sp-4); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.event-row .date-chip { width: 58px; padding: 6px 0; }
.event-row .date-chip b { font-size: 1.6rem; }
.event-row h3 { font-size: 1.1rem; margin-bottom: 2px; }
.event-row p { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-sm); }
.event-row .meta { margin: 0; }
.event-row .meta + .meta { margin-top: 2px; }
.event-row .btn-row { gap: var(--sp-2); }
@media (max-width: 480px) { .event-row { grid-template-columns: 1fr; } .event-row .date-chip { display: flex; gap: 8px; width: auto; justify-content: center; align-items: baseline; padding: 6px 10px; } }

/* Month grid (wide screens) and month list (phones) */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.cal-head h2 { margin: 0; font-size: var(--fs-xl); }
.cal-head .btn-row { gap: var(--sp-2); }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; border: 1px solid var(--line); }
.cal-grid caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cal-grid th { background: var(--cream); font-size: var(--fs-xs); color: var(--charcoal); padding: 6px; text-align: left; border: 1px solid var(--line); }
.cal-grid td { height: 104px; vertical-align: top; padding: 4px; border: 1px solid var(--line); font-size: var(--fs-xs); }
.cal-grid td.out { background: #FAF8F3; }
.cal-grid td.today .num { background: var(--navy); color: #fff; }
.cal-grid .num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; font-weight: 600; color: var(--navy); font-size: var(--fs-sm); }
.cal-grid .chip-ev { display: block; margin-top: 3px; padding: 2px 5px; border-radius: 4px; background: rgba(27,45,69,.08); border-left: 3px solid var(--navy); color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-grid .chip-ev:hover { background: rgba(27,45,69,.16); }
.cal-grid .chip-ev--Worship { border-color: var(--gold-dark); background: rgba(197,150,74,.16); }
.cal-grid .chip-ev--Youth { border-color: #3F7A8C; }
.cal-grid .chip-ev--Women { border-color: #86566E; }
.cal-grid .chip-ev--Men { border-color: #5C7050; }
.cal-list { display: none; }
@media (max-width: 760px) { .cal-grid { display: none; } .cal-list { display: block; } }
.cal-list .day { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); }
.cal-list .day b { color: var(--navy); }
.cal-list a { display: block; padding: 4px 0; }
.legend { font-size: var(--fs-xs); color: var(--charcoal); margin-top: var(--sp-3); }

/* Event page */
.next-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.next-dates li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: .55rem .75rem; background: var(--cream); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.next-dates a { font-weight: 600; }

/* Call-to-action band at the bottom of a page */
.stay { background: #fff; border-top: 1px solid var(--line); padding: var(--sp-5) 0; }
.stay .container { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
/* Sort dropdown */
.result-bar select { padding: .5rem .7rem; border: 1px solid #C9C2B1; border-radius: var(--r-md); background: #fff; min-height: 40px; }

/* Polish */
.event-row .date-chip { align-self: start; }
.page-head .verse { max-width: 72ch; }

/* Sermon page: long "older / newer" titles wrap instead of pushing the page wider than the screen */
.pager .btn { white-space: normal; text-align: left; max-width: 100%; }
/* Small buttons are still a comfortable tap size on phones */
@media (max-width: 640px) { .btn--small { min-height: 40px; padding: .6rem .95rem; } .tabs button { min-height: 40px; } }