/* Components shared by two or more page templates. Single-page-only
   components live in assets/css/pages/*.css instead. */

/* --- horizontal scroller nav arrows --------------------------------------- */
.sfm-scroller-wrap { position: relative; }
.sfm-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sfm-white);
    border: 1px solid var(--sfm-color-border);
    box-shadow: var(--sfm-shadow-sm);
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--sfm-navy-700);
    z-index: 2;
}
.sfm-scroll-arrow--prev { left: -14px; }
.sfm-scroll-arrow--next { right: -14px; }
@media (min-width: 960px) {
    .sfm-scroll-arrow { display: flex; }
}

/* --- RJ / presenter card --------------------------------------------------- */
.sfm-rj-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; }
.sfm-rj-card__avatar { width: 84px; height: 84px; }
.sfm-rj-card__name { font-weight: 600; color: var(--sfm-color-heading); font-size: 0.92rem; }
.sfm-rj-card__subtitle { font-size: 0.78rem; color: var(--sfm-gray-400); margin-top: -0.4rem; }

/* --- podcast episode row --------------------------------------------------- */
.sfm-episode-row {
    display: grid;
    grid-template-columns: 72px 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding-block: 1rem;
    border-bottom: 1px solid var(--sfm-color-border);
}
.sfm-episode-row:last-child { border-bottom: none; }
.sfm-episode-row__play { position: relative; display: block; border-radius: var(--sfm-radius-sm); overflow: hidden; aspect-ratio: 1; background: var(--sfm-bg-blue-50); }
.sfm-episode-row__play img, .sfm-episode-row__play .sfm-artwork { width: 100%; height: 100%; object-fit: cover; }
.sfm-episode-row__play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 31, 58, 0.35);
    color: var(--sfm-white);
}
.sfm-episode-row__title { font-size: 0.95rem; margin: 0 0 0.2rem; }
.sfm-episode-row__host { font-size: 0.8rem; color: var(--sfm-blue-600); margin: 0 0 0.2rem; }
.sfm-episode-row__excerpt { font-size: 0.82rem; color: var(--sfm-gray-600); margin: 0; }
.sfm-episode-row__meta { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; color: var(--sfm-gray-400); white-space: nowrap; text-align: right; }
.sfm-episode-row__meta span { display: flex; align-items: center; gap: 0.3rem; justify-content: flex-end; }
@media (max-width: 699px) {
    .sfm-episode-row { grid-template-columns: 56px 1fr; }
    .sfm-episode-row__meta { grid-column: 2; flex-direction: row; justify-content: space-between; }
    .sfm-episode-row__actions { display: none; }
}

/* --- news / community story card ------------------------------------------- */
.sfm-story-card .sfm-card__title { font-size: 1.05rem; }
.sfm-story-card__excerpt { font-size: 0.85rem; color: var(--sfm-gray-600); }
.sfm-story-card--row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1rem;
    background: var(--sfm-white);
    border-radius: var(--sfm-radius-md);
    overflow: hidden;
}
.sfm-story-card--row .sfm-card__media { aspect-ratio: 1; }
.sfm-story-card--row .sfm-card__body { padding: 0; }
@media (max-width: 480px) {
    .sfm-story-card--row { grid-template-columns: 96px 1fr; }
}

/* --- gallery tile ------------------------------------------------------------ */
.sfm-gallery-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--sfm-radius-md);
    overflow: hidden;
    background: var(--sfm-bg-blue-50);
}
.sfm-gallery-tile img, .sfm-gallery-tile .sfm-artwork { width: 100%; height: 100%; object-fit: cover; }
.sfm-gallery-tile__date {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(11, 31, 58, 0.75);
    color: var(--sfm-white);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
.sfm-gallery-tile__date .sfm-icon { width: 12px; height: 12px; }

/* --- compact media list (video/story side-lists) ---------------------------- */
.sfm-media-list { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1rem; }
.sfm-media-list li { display: flex; align-items: center; gap: 0.75rem; }
.sfm-media-list__thumb { flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--sfm-radius-sm); overflow: hidden; background: var(--sfm-bg-blue-50); display: block; }
.sfm-media-list__thumb img, .sfm-media-list__thumb .sfm-artwork { width: 100%; height: 100%; object-fit: cover; }
.sfm-media-list li > span { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.sfm-media-list li a { font-size: 0.88rem; font-weight: 600; color: var(--sfm-color-heading); }
.sfm-media-list li a:hover { color: var(--sfm-blue-600); }
.sfm-media-list li small { font-size: 0.74rem; color: var(--sfm-gray-400); }

/* --- "On Air Now" widget (home hero, shows hero, podcasts sidebar) --------- */
.sfm-onair { background: var(--sfm-white); border-radius: var(--sfm-radius-lg); box-shadow: var(--sfm-shadow-lg); padding: 1.25rem; }
.sfm-onair__label { display: flex; align-items: center; gap: 0.4rem; color: var(--sfm-orange-600); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.85rem; }
.sfm-onair__label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sfm-onair__row { display: flex; align-items: center; gap: 0.85rem; }
.sfm-onair__avatar { width: 56px; height: 56px; flex-shrink: 0; }
.sfm-onair__title { font-size: 1rem; margin: 0; }
.sfm-onair__by { font-size: 0.8rem; color: var(--sfm-gray-600); margin: 0.15rem 0; }
.sfm-onair__time { font-size: 0.78rem; color: var(--sfm-gray-400); }
.sfm-onair__waveline { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.sfm-onair__wave { display: flex; align-items: center; gap: 2px; height: 22px; flex: 1; }
.sfm-onair__wave span { width: 3px; height: 35%; background: var(--sfm-blue-100); border-radius: 2px; transition: height 0.2s ease; }
.sfm-onair__wave span:nth-child(3n) { background: var(--sfm-blue-500); }
body.sfm-is-playing .sfm-onair__wave span { animation: sfm-wave 0.9s ease-in-out infinite; }
.sfm-onair__wave span:nth-child(odd) { animation-delay: 0.1s; }
.sfm-onair__wave span:nth-child(3n) { animation-delay: 0.25s; }
.sfm-onair__play {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--sfm-orange-600); color: var(--sfm-white);
    display: flex; align-items: center; justify-content: center; border: none;
}
.sfm-onair__upnext { border-top: 1px solid var(--sfm-color-border); margin-top: 1rem; padding-top: 1rem; }
.sfm-onair__upnext-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sfm-gray-400); margin-bottom: 0.5rem; }
.sfm-onair__upnext-row { display: flex; align-items: center; gap: 0.7rem; }
.sfm-onair__upnext-avatar { width: 36px; height: 36px; flex-shrink: 0; }
.sfm-onair__upnext-title { font-size: 0.88rem; font-weight: 600; margin: 0; }
.sfm-onair__upnext-time { font-size: 0.76rem; color: var(--sfm-gray-400); }

/* --- Sort-by dropdown (Podcasts, Gallery) ----------------------------------- */
.sfm-sort-select {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.82rem; color: var(--sfm-gray-600); flex-shrink: 0;
}
.sfm-sort-select__label { font-weight: 600; white-space: nowrap; }
.sfm-sort-select select {
    font: inherit; font-size: 0.82rem; padding: 0.4rem 0.7rem;
    border: 1px solid var(--sfm-color-border); border-radius: var(--sfm-radius-sm);
    background: var(--sfm-white); color: var(--sfm-color-heading);
}

/* --- "Today On Air" strip (home) -------------------------------------------- */
.sfm-todayonair__list { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.25rem; }
.sfm-todayonair__item {
    scroll-snap-align: start;
    flex: 0 0 200px;
    background: var(--sfm-white);
    border: 1px solid var(--sfm-color-border);
    border-radius: var(--sfm-radius-md);
    padding: 0.9rem;
}
.sfm-todayonair__item.is-onair { border-color: var(--sfm-orange-600); background: var(--sfm-orange-100); }
.sfm-todayonair__time { font-size: 0.78rem; font-weight: 700; color: var(--sfm-gray-600); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.sfm-todayonair__row { display: flex; align-items: center; gap: 0.6rem; }
.sfm-todayonair__avatar { width: 40px; height: 40px; flex-shrink: 0; }
.sfm-todayonair__title { font-size: 0.88rem; font-weight: 600; margin: 0; }
.sfm-todayonair__rj { font-size: 0.76rem; color: var(--sfm-gray-400); }

/* --- weekly schedule table (shows page) ------------------------------------- */
.sfm-day-tabs { display: flex; gap: 0.5rem; overflow-x: auto; margin-bottom: 1.5rem; }
.sfm-day-tab {
    flex: 0 0 auto;
    padding: 0.6rem 1.1rem;
    border-radius: var(--sfm-radius-sm);
    border: 1px solid var(--sfm-color-border);
    background: var(--sfm-white);
    color: var(--sfm-gray-700);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}
.sfm-day-tab small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--sfm-gray-400); }
.sfm-day-tab.is-active { background: var(--sfm-navy-700); border-color: var(--sfm-navy-700); color: var(--sfm-white); }
.sfm-day-tab.is-active small { color: rgba(255, 255, 255, 0.7); }

.sfm-schedule-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.sfm-schedule-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sfm-gray-400); padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--sfm-color-border); }
.sfm-schedule-table td { padding: 0.75rem; border-bottom: 1px solid var(--sfm-color-border); vertical-align: middle; }
.sfm-schedule-table tr.is-onair { background: var(--sfm-orange-100); }
.sfm-schedule-table__show { display: flex; align-items: center; gap: 0.6rem; }
.sfm-schedule-table__show img, .sfm-schedule-table__show .sfm-artwork { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; }
.sfm-status { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: var(--sfm-radius-pill); }
.sfm-status--on-air { background: var(--sfm-orange-600); color: var(--sfm-white); }
.sfm-status--up-next { background: var(--sfm-blue-100); color: var(--sfm-blue-600); }
.sfm-status--upcoming { background: var(--sfm-gray-100); color: var(--sfm-gray-600); }
.sfm-status--past { background: var(--sfm-gray-100); color: var(--sfm-gray-400); }
.sfm-schedule-table-scroll { overflow-x: auto; }
@media (max-width: 800px) {
    .sfm-schedule-table { min-width: 640px; }
}

/* --- community poll -------------------------------------------------------- */
.sfm-poll-card .sfm-eyebrow { display: block; margin-bottom: 0.75rem; }
.sfm-poll__question { font-size: 1rem; margin-bottom: 0.85rem; }
.sfm-poll__form { display: flex; flex-direction: column; gap: 0.6rem; }
.sfm-poll__option {
    text-align: left;
    padding: 0.65rem 1rem;
    border-radius: var(--sfm-radius-sm);
    border: 1px solid var(--sfm-color-border);
    background: var(--sfm-white);
    color: var(--sfm-color-heading);
    font-size: 0.88rem;
    font-weight: 500;
}
.sfm-poll__option:hover { border-color: var(--sfm-blue-500); color: var(--sfm-blue-600); }
.sfm-poll__results { display: flex; flex-direction: column; gap: 0.75rem; }
.sfm-poll__result-row { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.3rem; }
.sfm-poll__result.is-picked .sfm-poll__result-row span:first-child { font-weight: 700; color: var(--sfm-blue-600); }
.sfm-poll__result.is-picked .sfm-poll__bar-fill { background: var(--sfm-blue-600); }
.sfm-poll__your-vote {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--sfm-radius-pill);
    background: var(--sfm-bg-blue-50);
    color: var(--sfm-blue-600);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.sfm-poll__your-vote .sfm-icon { width: 12px; height: 12px; }
.sfm-poll__bar { height: 8px; border-radius: var(--sfm-radius-pill); background: var(--sfm-gray-100); overflow: hidden; }
.sfm-poll__bar-fill { height: 100%; background: var(--sfm-blue-500); border-radius: var(--sfm-radius-pill); transition: width 0.4s ease; }
.sfm-poll__total { margin-top: 0.85rem; font-size: 0.78rem; color: var(--sfm-gray-400); }

/* --- listener story submission form (opens in the global modal) ------------- */
.sfm-story-form h2 { font-size: 1.2rem; margin-bottom: 0.35rem; }
.sfm-story-form__lede { font-size: 0.88rem; color: var(--sfm-gray-600); margin-bottom: 1rem; }
.sfm-story-form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--sfm-color-heading); margin-bottom: 1rem; }
.sfm-story-form .sfm-field { margin-top: 0.4rem; }
.sfm-story-form textarea.sfm-field { resize: vertical; min-height: 7rem; }
.sfm-story-form__success h2 { font-size: 1.2rem; }
.sfm-story-form__success p { color: var(--sfm-gray-600); }

/* --- generic decorative photo block (design-image() call sites) ------------- */
.sfm-photo-block {
    /* height:auto matters here — see the matching note on
       .sfm-about-hero__image in pages/about.css. design_image() outputs
       real width/height attributes, which otherwise override aspect-ratio's
       own height computation and leave the box stuck at the image's own
       intrinsic height (stretching or squashing it) regardless of this
       aspect-ratio. Applies to every real photo using this class:
       about1-story.jpg, about2-building.jpg, about2-onair.jpg. */
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--sfm-radius-lg);
}

/* --- generic content panel (About page) ------------------------ */
.sfm-align-center { align-items: center; }
/* --bordered is meant as a variant of this (white card + border) on top of
   a shared base — but the base itself had no padding of its own, so every
   bare .sfm-panel (Vision/Mission/Objectives, Why Us, Impact, Testimonials,
   the podcasts sidebar's "Share a Story" card, ...) rendered content flush
   against its container with zero breathing room. */
.sfm-panel { padding: 1.5rem; }
.sfm-panel h3 { font-size: 1.1rem; }
.sfm-panel p:last-child { margin-bottom: 0; }
.sfm-panel--bordered {
    background: var(--sfm-white);
    border: 1px solid var(--sfm-color-border);
    border-radius: var(--sfm-radius-lg);
}
.sfm-checklist { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.sfm-checklist li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.9rem; }
.sfm-checklist .sfm-icon { color: var(--sfm-blue-600); flex-shrink: 0; margin-top: 0.1rem; width: 18px; height: 18px; }
.sfm-philosophy__label { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sfm-navy-700); margin-top: 1.25rem; margin-bottom: 0; }

.sfm-category-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 1.25rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sfm-color-heading);
}
.sfm-category-tile:hover { border-color: var(--sfm-blue-500); }

.sfm-award { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.5rem 1rem; }
.sfm-award p { font-size: 0.85rem; font-weight: 600; margin: 0; }
.sfm-award .sfm-stat__icon { background: var(--sfm-orange-100); color: var(--sfm-orange-600); width: 52px; height: 52px; }

.sfm-testimonial { position: relative; }
.sfm-testimonial__mark { color: var(--sfm-blue-100); display: block; margin-bottom: 0.5rem; }
.sfm-testimonial__mark .sfm-icon { width: 32px; height: 32px; }
.sfm-testimonial p { font-style: italic; color: var(--sfm-gray-700); }
.sfm-testimonial__author { display: flex; align-items: center; gap: 0.7rem; margin-top: 1rem; }
.sfm-testimonial__avatar { width: 40px; height: 40px; }
.sfm-testimonial__author small { color: var(--sfm-gray-400); }

/* --- numbered "trending" list ------------------------------------------------- */
.sfm-trending { position: relative; }
.sfm-trending__rank {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sfm-orange-600);
    color: var(--sfm-white);
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* --- event card (News & Stories' Upcoming Events + the standalone Events page) --- */
.sfm-event-card { text-align: left; padding: 0; overflow: hidden; }
.sfm-event-card__media {
    /* .sfm-panel--bordered's padding pushes everything in by 1.5rem; pull
       the photo back out to the card edges so it reads as a cover image
       rather than an inset thumbnail. */
    margin: -1px -1px 1rem;
    width: calc(100% + 2px);
    aspect-ratio: 16 / 9;
}
.sfm-event-card__date {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--sfm-radius-sm);
    background: var(--sfm-white);
    color: var(--sfm-blue-600);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: var(--sfm-shadow-sm);
    z-index: 1;
}
.sfm-event-card__date strong { font-size: 1.05rem; color: var(--sfm-navy-900); line-height: 1; }
.sfm-event-card h3, .sfm-event-card p { padding-inline: 1.5rem; }
.sfm-event-card h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.sfm-event-card p { font-size: 0.85rem; }
.sfm-event-card p:last-child { padding-bottom: 1.5rem; }