/*
 * Design tokens. Theme-neutral defaults; theme integrations (e.g. Astra)
 * and the appearance settings override these via inline styles added in
 * includes/sermons-assets.php.
 */
.sermons-container,
.church-latest-posts {
    --sermon-primary: #2563eb;
    --sermon-primary-hover: #1e40af;
    --sermon-strong: #111827;
    --sermon-muted: #666;
    --sermon-soft: #f5f5f5;
    --sermon-border: #eee;
    --sermon-focus: var(--sermon-primary);
    --sermon-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --sermon-page-gap-top: clamp(28px, 4vw, 56px);
    --sermon-page-gap-bottom: clamp(36px, 5vw, 72px);
    --sermon-radius: 10px;
    --sermon-grid-columns: 3;
}

#primary.sermons-container {
    margin-top: var(--sermon-page-gap-top);
    margin-bottom: var(--sermon-page-gap-bottom);
}

.sermons-container :where(a, button, select, summary, audio):focus-visible {
    outline: 3px solid var(--sermon-focus);
    outline-offset: 3px;
    border-radius: 6px;
}

.sermons-description {
    max-width: 80%;
    margin-right: auto;
    margin-left: auto;
}

.sermons-description details {
    margin: 32px 0;
    border: 1px solid var(--sermon-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.sermons-description summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    color: var(--sermon-strong);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.sermons-description summary::-webkit-details-marker {
    display: none;
}

.sermons-description summary::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.sermons-description details[open] summary {
    border-bottom: 1px solid var(--sermon-border);
}

.sermons-description details[open] summary::after {
    transform: rotate(225deg);
}

.sermons-description summary:hover {
    color: var(--sermon-primary);
}

.sermons-description details > :not(summary) {
    margin-right: 22px;
    margin-left: 22px;
}

.sermons-description details > summary + * {
    margin-top: 22px;
}

.sermons-description details > :last-child {
    margin-bottom: 22px;
}

.sermons-transcript {
    margin: 32px 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--sermon-border);
}

.sermons-transcript-title {
    margin: 0 0 18px;
    color: var(--sermon-strong);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.25;
}

.sermons-transcript-content {
    position: relative;
    max-height: 210px;
    overflow: hidden;
}

.sermons-transcript-content::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 110px;
    pointer-events: none;
    background: linear-gradient( to bottom, rgba(255, 255, 255, 0), #fff 88% );
}

.sermons-transcript.is-expanded .sermons-transcript-content {
    max-height: none;
}

.sermons-transcript.is-expanded .sermons-transcript-content::after,
.sermons-transcript.is-short .sermons-transcript-content::after {
    display: none;
}

.sermons-transcript-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 16px;
    padding: 10px 18px;
    border: 1px solid var(--sermon-primary);
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    background: var(--sermon-primary);
}

.sermons-transcript-toggle:hover {
    background: var(--sermon-primary-hover);
    border-color: var(--sermon-primary-hover);
}

.sermons-transcript.is-short .sermons-transcript-toggle {
    display: none;
}

/* Player */

.sermons-player {
    border-radius: var(--sermon-radius, 12px);
    box-shadow: var(--sermon-shadow);
    overflow: hidden;
}

.sermons-video {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    background: #000;
    /* Match the .sermons-player clip radius so the black backdrop is rounded
       by itself — otherwise a dark rim bleeds through at the clipped corners. */
    border-radius: inherit;
    overflow: hidden;
}

.sermons-video:focus-within {
    box-shadow: 0 0 0 4px var(--sermon-focus);
}

.sermons-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* HD viewport: YouTube picks (and re-picks on every resize) the stream
   quality matching the player's internal size, so a ~800px player is stuck
   at 360p/480p. Rendering the iframe at 4/3 size and shrinking it back down
   pushes the internal height past the 480p tier, so YouTube serves 720p —
   permanently, because any later shrink would make it re-decide downwards.
   Cost: the player UI renders at 75%. Desktop only — on touch screens
   smaller controls hurt more than the quality gain, and high-DPI phones get
   decent quality anyway. Excludes the oEmbed fallback — non-YouTube providers
   gain nothing from the oversized viewport and only pay the 75% UI cost.

   The shrink has to be `transform`, and it only works because a transform is
   invisible to the framed document: YouTube still measures a 4/3 viewport at
   devicePixelRatio 1 and serves the matching stream. `zoom` cannot replace it
   — zoom propagates into the iframe, so the inner devicePixelRatio drops by
   the same factor, YouTube multiplies the two back into the real pixel count
   and falls to 360p. Measured, not assumed.

   The transform's cost is a composited layer, which Chrome rasterizes in
   tiles; the tiles meet at half the player height, and as soon as that row
   falls between device pixels the join shows as a hairline across the middle
   of the frame — visible whenever the picture is dimmed (hover or pause).
   Measured: any fractional geometry shows it, whole-pixel geometry does not,
   and will-change: transform makes no difference. Hence the snapping below. */
@media (min-width: 922px) {
    @supports (width: round(down, 100%, 32px)) {
        .sermons-video:not(.sermons-video-oembed) {
            /* Snap the box down to whole 32px units, which makes it 32k x 18k
               and puts the tile join on row 9k — always an exact device pixel.
               A fluid width (e.g. 787.19px) is what produced the hairline.
               min() is a guard: should round() ever resolve above 100%, the
               player stays fluid instead of overflowing its column. */
            width: min(100%, round(down, 100%, 32px));
            /* The padding-bottom ratio resolves against the *parent* width, so
               once the box is snapped it no longer matches and leaves a gap
               under the player. aspect-ratio follows the box itself. */
            height: auto;
            padding-bottom: 0;
            aspect-ratio: 16 / 9;
        }

        .sermons-video:not(.sermons-video-oembed) iframe {
            /* Exactly 4/3 — the rounded 133.334% reintroduces fractions. */
            width: calc(400% / 3);
            height: calc(400% / 3);
            /* The theme clamps iframes to max-width: 100%, which would crush
               the oversized viewport back down — undo it here. */
            max-width: none;
            max-height: none;
            transform: scale(0.75);
            transform-origin: top left;
        }

        /* Fullscreen needs no oversized viewport — the player already fills the
           screen. The Fullscreen UA styles neutralise transforms on their own;
           this is belt and braces. */
        .sermons-video:not(.sermons-video-oembed) iframe:fullscreen {
            width: 100%;
            height: 100%;
            transform: none;
        }
    }
}

.sermons-lite-youtube {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    /* Astra's global button styling rounds every <button> (pill radius); the
       full-bleed facade must follow the player's corner radius instead, so its
       black backdrop never peeks out at the clipped corners. */
    border-radius: inherit;
    overflow: hidden;
    cursor: pointer;
    background: #000;
}

.sermons-lite-youtube img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.88;
    border-radius: inherit;
}

.sermons-lite-youtube-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 192px;
    height: 192px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    color: var(--sermon-primary);
    background: transparent;
    transition: color 0.2s ease, transform 0.2s ease;
}

.sermons-lite-youtube-play::after {
    content: "";
    position: absolute;
    inset: 24px;
    border: 3px solid transparent;
    border-radius: 50%;
    pointer-events: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sermons-lite-youtube-play svg {
    width: 192px;
    height: 192px;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.32));
}

.sermons-lite-youtube:hover .sermons-lite-youtube-play,
.sermons-lite-youtube:focus-visible .sermons-lite-youtube-play {
    transform: translate(-50%, -50%) scale(1.05);
    color: var(--sermon-primary-hover);
}

.sermons-lite-youtube::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 4px solid transparent;
    pointer-events: none;
}

.sermons-lite-youtube:focus::after,
.sermons-lite-youtube:focus-visible::after {
    border-color: var(--sermon-focus);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.sermons-lite-youtube:focus-visible {
    outline: 0;
}

.sermons-lite-youtube:focus-visible .sermons-lite-youtube-play::after {
    border-color: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sermon-focus) 82%, transparent);
}

.sermons-audio {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 15px 25px;
    border-radius: 0 0 12px 12px;
    color: #fff;
    background: var(--sermon-primary);
}

.sermons-audio-label {
    flex-shrink: 0;
    font-size: 0.9em;
    font-weight: 700;
    white-space: nowrap;
}

.sermons-audio-wrapper {
    display: flex;
    flex-grow: 1;
    align-items: center;
}

.sermons-audio-wrapper audio {
    width: 100%;
    height: 40px;
}

.sermons-download {
    display: inline-flex;
    flex-shrink: 0;
    gap: 8px;
    align-items: center;
    padding: 10px 20px;
    border-radius: 8px;
    color: #fff !important;
    font-size: 0.9em;
    font-weight: 700;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, transform 0.2s ease;
}

.sermons-download:hover,
.sermons-download:focus-visible {
    background: rgba(0, 0, 0, 0.32);
    transform: translateY(-1px);
}

.sermons-download:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--sermon-focus);
}

.sermons-download-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.sermons-download-icon svg {
    width: 100%;
    height: 100%;
}

/* Single sermon meta */

.sermons-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    align-items: center;
    margin: 34px 0 40px;
    padding: 16px 20px;
    border-radius: 8px;
    background: var(--sermon-strong);
    color: #fff;
    font-size: 0.95em;
}

.sermons-meta-item {
    display: flex;
    flex: 0 1 auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 0;
    background: transparent;
    font-size: 0.92em;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: uppercase;
}

.sermons-meta-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: #fff;
    background: color-mix(in srgb, #fff 12%, transparent);
}

.sermons-meta-photos {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
}

.sermons-meta-photo {
    display: inline-flex;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, #fff 18%, transparent);
}

.sermons-meta-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sermons-meta-photo:hover {
    opacity: 0.88;
}

.sermons-meta-icon svg {
    width: 20px;
    height: 20px;
}

.sermons-meta-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sermons-meta-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.sermons-meta-link,
.sermons-meta-value {
    color: #fff;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    line-height: inherit;
    text-decoration: none;
    text-transform: inherit;
}

.sermons-meta-link:hover {
    color: color-mix(in srgb, #fff 82%, var(--sermon-primary));
}

.sermons-meta-speaker,
.sermons-meta-campus,
.sermons-meta-scripture {
    line-height: 1.5;
}

.sermons-meta-value {
    display: block;
}

.sermons-scripture-link {
    white-space: nowrap;
}

/* Related sermons */

.sermons-related {
    margin-top: 60px;
    padding-top: 50px;
    border-top: 1px solid var(--sermon-border);
}

.sermons-related-list {
    display: grid;
    gap: 14px;
}

.sermons-related-item {
    border: 1px solid var(--sermon-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s ease;
}

.sermons-related-item:not(.sermons-related-item-current):hover {
    border-color: var(--sermon-primary);
}

.sermons-related-item:focus-within {
    border-color: var(--sermon-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sermon-primary) 22%, transparent);
}

.sermons-related-item-current {
    border-color: var(--sermon-primary);
    background: color-mix(in srgb, var(--sermon-primary) 7%, #fff);
}

.sermons-related-link {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 12px;
    color: inherit;
    text-decoration: none;
}

a.sermons-related-link:hover {
    color: inherit;
}

a.sermons-related-link:focus-visible {
    outline: 0;
}

.sermons-related-thumb {
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--sermon-soft);
}

.sermons-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sermons-related-item-current .sermons-related-thumb img {
    opacity: 0.5;
}

.sermons-related-item-current .sermons-card-meta-item {
    background: #fff;
}

.sermons-related-title {
    margin: 0 0 6px;
    font-size: 1.08em;
}

.sermons-related-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: var(--sermon-muted);
    font-size: 0.88em;
}

.sermons-related-current {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--sermon-primary);
    border-radius: 6px;
    color: #fff;
    background: var(--sermon-primary);
}

.sermons-related-current-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.sermons-related-current-icon svg {
    width: 16px;
    height: 16px;
}

.sermons-series-context {
    margin-top: 60px;
    margin-bottom: 0;
}

.sermons-series-context + .sermons-related {
    margin-top: 36px;
}

/* Archive and taxonomy headers */

.sermons-archive-header {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.sermons-archive-title {
    margin-bottom: 0;
}

.sermons-view-switch {
    flex: 0 0 auto;
    color: var(--sermon-strong);
    font-weight: 600;
    text-decoration: none;
}

.sermons-view-switch:hover {
    color: var(--sermon-primary);
}

.sermons-taxonomy-header {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    margin-bottom: 36px;
    padding: 24px;
    border: 1px solid var(--sermon-border);
    border-radius: 8px;
    background: var(--sermon-soft);
}

.sermons-taxonomy-header-no-image {
    grid-template-columns: 1fr;
}

.sermons-taxonomy-speaker .sermons-taxonomy-header {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
}

.sermons-taxonomy-speaker .sermons-taxonomy-header-no-image {
    grid-template-columns: 1fr;
}

.sermons-taxonomy-image {
    aspect-ratio: 16 / 9;
    border-radius: var(--sermon-radius, 10px);
    overflow: hidden;
    background: #fff;
}

.sermons-taxonomy-image:focus-within {
    box-shadow: 0 0 0 3px var(--sermon-focus);
}

.sermons-taxonomy-image a {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.sermons-taxonomy-image a:focus-visible {
    outline: 0;
}

.sermons-taxonomy-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sermons-taxonomy-image-speaker {
    width: min(220px, 100%);
    max-width: 220px;
    aspect-ratio: 1;
    border-radius: 999px;
    justify-self: center;
}

.sermons-taxonomy-title {
    margin-bottom: 10px;
}

.sermons-taxonomy-description {
    color: var(--sermon-muted);
}

/* Filters */

.sermons-filters-desktop {
    margin-bottom: 34px;
}

.sermons-filters-desktop:has(~ .sermons-active-filters) {
    margin-bottom: 14px;
}

.sermons-filters-mobile {
    display: none;
}

.sermons-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 34px;
}

.sermons-active-filter,
.sermons-active-filter-reset {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.82em;
    font-weight: 600;
    text-decoration: none;
}

.sermons-active-filter {
    gap: 4px;
    padding-right: 5px;
    color: var(--sermon-strong);
    background: var(--sermon-soft);
    border: 1px solid var(--sermon-border);
}

.sermons-active-filter-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--sermon-muted);
    text-decoration: none;
}

.sermons-active-filter-remove::before {
    content: "";
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.sermons-active-filter-remove:hover,
.sermons-active-filter-remove:focus-visible {
    color: var(--sermon-strong);
    background: var(--sermon-border);
}

.sermons-active-filter-reset {
    color: #fff;
    background: var(--sermon-primary);
}

.sermons-active-filter-reset:hover,
.sermons-active-filter-reset:focus-visible {
    color: #fff;
    background: var(--sermon-primary-hover);
    text-decoration: none;
}

.sermons-filters-summary {
    display: none;
}

.sermons-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
    border: 1px solid var(--sermon-border);
    border-radius: 8px;
    background: var(--sermon-soft);
}

.sermons-filter {
    display: grid;
    gap: 6px;
    margin: 0;
}

.sermons-filter-label {
    color: var(--sermon-muted);
    font-size: 0.82em;
    font-weight: 600;
	text-transform: uppercase;
}

.sermons-filter select {
    appearance: none;
    width: 100%;
    min-height: 42px;
    padding-right: 36px;
    /* Same filled triangle as the campus selector caret (12px, ink at 0.7),
       so every dropdown in the design carries the same icon. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316130F' fill-opacity='0.7'%3E%3Cpath d='M4.53 7.72h14.94a.9.9 0 0 1 .67 1.5l-7.47 8.06a.9.9 0 0 1-1.34 0L3.86 9.22a.9.9 0 0 1 .67-1.5Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
}

.sermons-filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    /* Pin to the last grid column so the submit stays at the right edge even
       when some filter selects are hidden. */
    grid-column: -2;
}

.sermons-filter-submit,
.sermons-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
}

.sermons-filter-submit {
    border: 1px solid var(--sermon-primary);
    color: #fff;
    background: var(--sermon-primary);
    cursor: pointer;
}

.sermons-filter-reset {
    min-height: auto;
    padding: 0;
    border: 0;
    color: var(--sermon-muted);
    background: transparent;
    font-size: 0.92em;
    font-weight: 600;
}

.sermons-filter-reset:hover,
.sermons-filter-reset:focus-visible {
    color: var(--sermon-strong);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Cards and grids */

.sermons-grid {
    display: grid;
    grid-template-columns: repeat(var(--sermon-grid-columns, 3), 1fr);
    gap: 24px;
    margin-top: 30px;
}

.sermons-card a,
.church-latest-post-card a {
    display: block;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.church-latest-posts .church-latest-post-card a,
.church-latest-posts .church-latest-post-card a:hover,
.church-latest-posts .church-latest-post-card a:focus {
    text-decoration: none;
}

.sermons-card a:focus-visible,
.church-latest-post-card a:focus-visible {
    outline: 3px solid var(--sermon-focus);
    outline-offset: 6px;
}

.sermons-card-thumb {
    aspect-ratio: 16 / 9;
    margin-bottom: 12px;
    border-radius: var(--sermon-radius, 10px);
    overflow: hidden;
    background: var(--sermon-soft);
}

.sermons-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sermons-card-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--sermon-muted);
    font-size: 10px;
    background: var(--sermon-soft);
}

.sermons-card-thumb-placeholder svg {
    width: 64px;
    height: 64px;
    color: var(--sermon-primary);
}

/* Backdrops on media boxes are the no-image state only. Once an <img> covers the
   box, the backdrop behind it can no longer be seen anywhere except as a rim
   bleeding out around the rounded corners — so drop it whenever an image is
   assigned. The dimmed current-related thumbnail is the one deliberate
   exception: its backdrop is what shows through the translucent image. */
.sermons-card-thumb:has(img),
.church-latest-post-thumb:has(img),
.sermons-taxonomy-image:has(img),
.sermons-related-item:not(.sermons-related-item-current) .sermons-related-thumb:has(img) {
    background: transparent;
}

.church-latest-posts-grid {
    display: grid;
    grid-template-columns: repeat(var(--sermon-grid-columns, 3), minmax(0, 1fr));
    gap: 24px;
}

.church-latest-post-thumb {
    aspect-ratio: 16 / 9;
    margin-bottom: 12px;
    border-radius: var(--sermon-radius, 10px);
    overflow: hidden;
    background: var(--sermon-soft);
}

.church-latest-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.church-latest-post-thumb-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--sermon-primary);
}

.church-latest-post-thumb-placeholder svg {
    width: 64px;
    height: 64px;
}

.church-latest-post-title {
    margin: 0 0 8px;
}

.church-latest-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.church-latest-post-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid var(--sermon-border);
    border-radius: 6px;
    background: var(--sermon-soft);
    color: var(--sermon-strong);
    font-size: 0.85em;
    line-height: 1.3;
}

.church-latest-post-meta-icon {
    display: inline-flex;
    color: var(--sermon-muted);
}

.church-latest-post-meta-icon svg {
    width: 16px;
    height: 16px;
}

.church-latest-post-excerpt {
    margin: 10px 0 0;
    color: var(--sermon-muted);
    font-size: 0.95em;
    line-height: 1.5;
}

.church-latest-posts-empty {
    color: var(--sermon-muted);
}

.sermons-card-title {
    margin: 0 0 5px;
}

.sermons-card-no-thumb .sermons-card-title {
    margin-top: 0;
}

.sermons-listing-intro {
    margin-bottom: 30px;
}

.sermons-series-year-filter,
.sermons-filters-single {
    grid-template-columns: minmax(180px, 260px) auto;
    justify-content: start;
    margin-bottom: 34px;
}

/* Odstepy jak miedzy kartami kampusow na stronie glownej. */
.sermons-campuses-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.sermons-campus-card a {
    position: relative;
    display: flex;
    aspect-ratio: 4 / 5;
    min-height: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: hidden;
    padding: 22px;
    border: 1px solid var(--sermon-border);
    border-radius: 20px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--sermon-primary) 10%, #fff), #fff 56%, color-mix(in srgb, var(--sermon-primary) 16%, #fff));
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.15s ease;
}

.sermons-campus-card-has-image a {
    border-color: transparent;
    color: #fff;
}

/* Ta sama nakladka co na kartach kampusow na stronie glownej. */
.sermons-campus-card-has-image a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(22, 19, 15, 0.12) 0%, rgba(22, 19, 15, 0.25) 40%, rgba(22, 19, 15, 0.92) 100%);
    pointer-events: none;
}

.sermons-campus-card-image {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}

.sermons-campus-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .sermons-campus-card-image img {
        transition: none;
    }
}

/* Uniesienie o 3px, jak karty-linki motywu (sekcja "Ruch" w style.css). */
@media (prefers-reduced-motion: no-preference) {
    .sermons-campus-card a {
        transition: transform var(--dur-base, 350ms) var(--ease-out, cubic-bezier(0.2, 0.6, 0.2, 1));
    }

    .sermons-campus-card a:hover,
    .sermons-campus-card a:focus-visible {
        transform: translateY(-3px);
    }
}

.sermons-campus-card .sermons-card-title,
.sermons-campus-card .sermons-card-meta {
    position: relative;
    z-index: 2;
}

/* Kolor kampusu przed nazwa - ta sama kropka co na kartach strony glownej,
   nazwa w tym samym rozmiarze co tam. Kropka trzyma sie pierwszej linii, gdy
   nazwa sie lamie - margines centruje ja w pierwszym wierszu (fallback w em
   dla przegladarek bez jednostki lh). */
.sermons-campus-card .sermons-card-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 28px;
    line-height: 1.1;
}

/* Obwodka w kolorze papieru i cien pod nia: na karcie ze zdjeciem kolor
   kampusu lezy na nieznanym tle i sam potrafi sie z nim zlac; na jasnej
   karcie bez zdjecia obwodka po prostu znika w tle. */
.sermons-campus-card-dot {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 0.3em;
    margin-top: calc((1lh - 14px) / 2);
    border-radius: 999px;
    box-shadow: 0 0 0 2px #faf7f2, 0 1px 5px 2px rgba(22, 19, 15, 0.3);
}

.sermons-campus-card .sermons-card-meta-item {
    border-radius: 8px;
}

/* Cien po najechaniu - ten sam co na kartach kazan. */
.sermons-campus-card a:hover {
    border-color: var(--sermon-primary);
    background: linear-gradient(160deg, color-mix(in srgb, var(--sermon-primary) 14%, #fff), #fff 50%, color-mix(in srgb, var(--sermon-primary) 22%, #fff));
    box-shadow: 0 22px 50px -34px rgba(22, 19, 15, 0.5);
}

.sermons-campus-card-has-image a:hover {
    border-color: transparent;
}

.sermons-campus-card-has-image a:hover .sermons-campus-card-image img {
    transform: scale(1.05);
}

.sermons-campus-card a:focus-visible {
    outline: 0;
    border-color: var(--sermon-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sermon-primary) 22%, transparent);
}

.sermons-campus-card-has-image a:focus-visible {
    border-color: #fff;
    box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--sermon-focus);
}

.sermons-campus-card-has-image .sermons-card-title {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.sermons-campus-card .sermons-card-meta-item {
    border-color: color-mix(in srgb, var(--sermon-primary) 28%, transparent);
    background: color-mix(in srgb, var(--sermon-primary) 9%, #fff);
}

.sermons-campus-card-has-image .sermons-card-meta {
    color: rgba(255, 255, 255, 0.92);
}

.sermons-campus-card-has-image .sermons-card-meta-item {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.14);
}

.sermons-campus-card-has-image .sermons-card-meta-icon {
    color: rgba(255, 255, 255, 0.8);
}

.sermons-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 9px;
    color: var(--sermon-muted);
    font-size: 0.83em;
    line-height: 1.45;
}

.sermons-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--sermon-primary) 14%, transparent);
    border-radius: 6px;
    background: var(--sermon-soft);
}

.sermons-card-meta-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--sermon-muted);
}

.sermons-card-meta-icon svg {
    width: 16px;
    height: 16px;
}

.sermons-empty {
    padding: 32px;
    border: 1px solid var(--sermon-border);
    border-radius: 8px;
    color: var(--sermon-muted);
    background: var(--sermon-soft);
}

.sermons-pagination {
    margin-top: 40px;
}

.sermons-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sermons-pagination li > a,
.sermons-pagination li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--sermon-border);
    border-radius: 6px;
    color: var(--sermon-strong);
    text-decoration: none;
}

.sermons-pagination .current,
.sermons-pagination a:hover {
    border-color: var(--sermon-primary);
    color: #fff;
    background: var(--sermon-primary);
}

/* Responsive */

@media (max-width: 921px) {
    .sermons-description {
        max-width: 100%;
    }

    .sermons-taxonomy-header {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sermons-filters-desktop {
        display: none;
    }

    .sermons-filters-mobile {
        display: block;
        border: 1px solid var(--sermon-border);
        border-radius: 8px;
        background: var(--sermon-soft);
        margin-bottom: 12px;
    }

    .sermons-filters-summary {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        min-height: 48px;
        padding: 0 16px;
        color: var(--sermon-strong);
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }

    .sermons-filters-summary::after {
        content: "";
        width: 20px;
        height: 20px;
        background-color: currentColor;
        opacity: 0.7;
        /* Same filled triangle as the campus selector caret. */
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4.53 7.72h14.94a.9.9 0 0 1 .67 1.5l-7.47 8.06a.9.9 0 0 1-1.34 0L3.86 9.22a.9.9 0 0 1 .67-1.5Z'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4.53 7.72h14.94a.9.9 0 0 1 .67 1.5l-7.47 8.06a.9.9 0 0 1-1.34 0L3.86 9.22a.9.9 0 0 1 .67-1.5Z'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    }

    .sermons-filters-mobile[open] .sermons-filters-summary::after {
        transform: rotate(180deg);
    }

    .sermons-filters-active {
        margin-left: auto;
        color: var(--sermon-muted);
        font-size: 0.82em;
        font-weight: 600;
    }

    .sermons-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0;
        padding: 0 16px 16px;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .sermons-series-year-filter,
    .sermons-filters-single {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sermons-filter-actions {
        grid-column: 1 / -1;
    }

    .sermons-audio {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        padding: 15px;
    }

    .sermons-lite-youtube-play {
        width: 96px;
        height: 96px;
    }

    .sermons-lite-youtube-play svg {
        width: 96px;
        height: 96px;
    }

    .sermons-lite-youtube-play::after {
        inset: 12px;
        border-width: 2px;
    }

    .sermons-audio-label {
        width: 100%;
        text-align: center;
    }

    .sermons-audio-wrapper {
        flex: 1;
        min-width: 0;
    }

    .sermons-download-text {
        display: none;
    }

    .sermons-download {
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
    }

    .sermons-grid,
    .church-latest-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .sermons-campuses-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sermons-campus-card a {
        aspect-ratio: 16 / 10;
    }

    .sermons-related-link {
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 14px;
    }

    .sermons-meta-campus,
    .sermons-meta-scripture {
        word-wrap: break-word;
    }
}

@media (max-width: 544px) {
    .sermons-grid,
    .church-latest-posts-grid {
        grid-template-columns: 1fr;
    }

    .sermons-campuses-grid {
        grid-template-columns: 1fr;
    }

    .sermons-filters {
        grid-template-columns: 1fr;
    }

    .sermons-series-year-filter,
    .sermons-filters-single {
        grid-template-columns: 1fr;
    }

    .sermons-filter-actions {
        flex-wrap: wrap;
    }

    .sermons-related-list {
        gap: 10px;
    }

    .sermons-related-link {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 12px;
        padding: 10px;
    }

    .sermons-related-title {
        font-size: 0.98em;
    }

    .sermons-related-meta {
        font-size: 0.82em;
    }

    .sermons-meta {
        align-items: stretch;
        gap: 10px;
        padding: 14px;
    }

    .sermons-meta-item {
        flex-basis: 100%;
        padding: 5px 0;
        font-size: 0.98em;
    }

    .sermons-meta-photo {
        width: 44px;
        height: 44px;
    }

    .sermons-meta-icon {
        width: 36px;
        height: 36px;
    }
}

/* Latest sermon hero + recent sermons shortcodes */

.church-recent-sermons,
.sermons-hero {
    margin: 32px 0;
}

.sermons-hero {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
    align-items: center;
}

.sermons-hero-label {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--sermon-primary);
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sermons-hero-title {
    margin: 0 0 14px;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.2;
}

.sermons-hero-title a {
    color: var(--sermon-strong);
    text-decoration: none;
}

.sermons-hero-title a:hover,
.sermons-hero-title a:focus-visible {
    color: var(--sermon-primary);
}

.sermons-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 18px;
    color: var(--sermon-muted);
}

.sermons-hero-meta-item {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.sermons-hero-meta-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.sermons-hero-meta-icon svg {
    width: 100%;
    height: 100%;
}

.sermons-hero-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--sermon-primary);
    font-weight: 700;
    text-decoration: none;
}

.sermons-hero-link:hover,
.sermons-hero-link:focus-visible {
    color: var(--sermon-primary-hover);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

@media (max-width: 921px) {
    .sermons-hero {
        grid-template-columns: 1fr;
    }
}

/*
 * Shortcodes render inside the page content, where themes (e.g. Astra)
 * underline links via `.entry-content a`. Match that specificity for the
 * sermon cards and the hero so they keep the archive look.
 */
.sermons-container .sermons-card a,
.sermons-container .sermons-card a:hover,
.sermons-container .sermons-card a:focus,
.sermons-container .sermons-hero-title a,
.sermons-container .sermons-hero-title a:hover,
.sermons-container .sermons-hero-link {
    text-decoration: none;
}

.sermons-container .sermons-hero-link:hover,
.sermons-container .sermons-hero-link:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* =========================================================================
   Design v2 (Claude Design "SCh Tomy")
   Scoped to body.sermons-design: sermon archive, single, taxonomies and
   sermon page templates. Shortcodes on other pages keep the old look.
   ========================================================================= */

body.sermons-design {
    --sermon-paper: #FAF7F2;
    --sermon-ink: #16130F;
    --sermon-body-text: #4A4640;
    --sermon-font-heading: "Libre Franklin", system-ui, sans-serif;
    --sermon-font-body: "IBM Plex Sans", system-ui, sans-serif;

    background-color: var(--sermon-paper);
}

body.sermons-design .sermons-container {
    /* Retint the legacy tokens so every existing rule inherits the palette. */
    --sermon-primary: #16130F;
    --sermon-primary-hover: #2C2620;
    --sermon-strong: #16130F;
    --sermon-muted: #6B6560;
    --sermon-soft: #FFFFFF;
    --sermon-border: rgba(22, 19, 15, 0.1);
    --sermon-grid-columns: 3;

    box-sizing: border-box;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    font-family: var(--sermon-font-body);
    color: var(--sermon-ink);
    -webkit-font-smoothing: antialiased;
}

/* Astra targets the content column with id-based selectors (#primary
   { margin: 4em 0 } and .ast-page-builder-template .site .site-content
   #primary { margin: 0; padding: 0 }) — restate the centering and side
   padding above their specificity. margin-top included: the page templates
   (series, speakers, campuses listings) render as ast-plain-container, where
   Astra adds 60px above #primary at >=1200px — the archives render as
   ast-page-builder-template with margin 0, and every view should start at
   the same height. */
body.sermons-design .site .site-content #primary.sermons-container {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    /* Uniform breathing room above the footer on every sermon view. */
    padding-bottom: 64px;
}

/* Side gutters only when the viewport is narrower than the 1200px container
   (plus breathing room) — on wide screens the centering provides the gap. */
@media (max-width: 1248px) {
    body.sermons-design .site .site-content #primary.sermons-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    body.sermons-design .sermons-campus-hero-inner {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Astra adds its own article padding on singles (.ast-single-post
   .ast-page-builder-template .site-main > article { padding: 2em 20px 0 })
   which would stack with the container padding above — the container is the
   single source of side spacing here. */
body.sermons-design .sermons-container .site-main > article {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Same story on page templates: Astra pads the .ast-container wrapper on
   narrow screens, doubling the gutters. */
body.sermons-design .site-content .ast-container {
    padding-left: 0;
    padding-right: 0;
}

/* Astra gives plain posts its "narrow" container (~750px) by default, which
   squeezes the article+sidebar grid; the design views run the full 1200px
   column that .sermons-container itself enforces. */
body.sermons-design.ast-narrow-container .site-content .ast-container {
    max-width: 100%;
}

body.sermons-design .sermons-container h1,
body.sermons-design .sermons-container h2,
body.sermons-design .sermons-container h3,
body.sermons-design .sermons-container h4 {
    font-family: var(--sermon-font-heading);
}

body.sermons-design .sermons-container :focus-visible {
    outline: 2px solid var(--campus-accent, var(--sermon-ink));
    outline-offset: 2px;
}

/* --- Breadcrumbs ----------------------------------------------------------- */

body.sermons-design .sermons-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 20px 0 0;
    font: 500 13.5px/1.4 var(--sermon-font-body);
    color: var(--sermon-muted);
}

body.sermons-design .sermons-breadcrumbs a {
    color: var(--sermon-muted);
    text-decoration: none;
}

body.sermons-design .sermons-breadcrumbs a:hover,
body.sermons-design .sermons-breadcrumbs a:focus-visible {
    color: var(--sermon-ink);
}

body.sermons-design .sermons-breadcrumbs-current {
    color: var(--sermon-ink);
    font-weight: 600;
}

/* --- Archive header ------------------------------------------------------ */

body.sermons-design .sermons-archive-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 26px 0 34px;
}

body.sermons-design .sermons-archive-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font: 600 12px/1 var(--sermon-font-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sermon-ink);
}

body.sermons-design .sermons-archive-eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    background: currentColor;
}

body.sermons-design .sermons-archive-title {
    margin: 14px 0 0;
    font: 700 clamp(38px, 5vw, 64px)/0.98 var(--sermon-font-heading);
}

body.sermons-design .sermons-archive-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
}

body.sermons-design .sermons-archive-sub {
    margin: 0;
    font: 400 16px/1.55 var(--sermon-font-body);
    color: var(--sermon-muted);
    max-width: 44ch;
}

/* Link states across the design layer: the rule at rest is dimmed and hover
   closes it to full strength, while the text colour never moves. The plain
   `border-bottom` first is the fallback for engines without `color-mix`;
   accents sit at 35%, not the 25% the theme uses for ink, because a campus
   colour washes out faster than near-black. */
body.sermons-design .sermons-view-switch {
    font: 600 13.5px/1 var(--sermon-font-body);
    color: var(--sermon-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--campus-accent, var(--sermon-ink));
    border-bottom-color: color-mix(in srgb, var(--campus-accent, var(--sermon-ink)) 35%, transparent);
    padding-bottom: 5px;
}

body.sermons-design .sermons-view-switch:hover,
body.sermons-design .sermons-view-switch:focus-visible {
    border-bottom-color: var(--campus-accent, var(--sermon-ink));
    color: var(--sermon-ink);
}

/* --- Filters ------------------------------------------------------------- */

body.sermons-design .sermons-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.sermons-design .sermons-filter {
    display: flex;
    flex: 1 1 160px;
    min-width: 150px;
    margin: 0;
}

body.sermons-design .sermons-filter-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body.sermons-design .sermons-filter select {
    min-height: 0;
    padding: 11px 34px 11px 16px;
    border-radius: 999px;
    border: 1px solid rgba(22, 19, 15, 0.16);
    background-color: #fff;
    background-position: right 12px center;
    font: 600 13.5px/1.2 var(--sermon-font-body);
    color: var(--sermon-ink);
    cursor: pointer;
}

body.sermons-design .sermons-filter-actions {
    flex: 0 0 auto;
    margin-left: 0;
}

body.sermons-design .sermons-filter-submit {
    min-height: 0;
    padding: 12px 24px;
    border-radius: 999px;
    font: 600 13.5px/1 var(--sermon-font-body);
}

body.sermons-design .sermons-filter-submit:hover,
body.sermons-design .sermons-filter-submit:focus-visible {
    background: #CDAA68;
    border-color: #CDAA68;
    color: var(--sermon-ink);
}

/* --- Active filter chips -------------------------------------------------- */

body.sermons-design .sermons-active-filters {
    margin: 18px 0 0;
}

body.sermons-design .sermons-active-filter {
    background: #fff;
    border-color: rgba(22, 19, 15, 0.14);
    font: 600 13px/1.2 var(--sermon-font-body);
}

body.sermons-design .sermons-active-filter-reset {
    min-height: 0;
    padding: 6px 4px;
    border-radius: 0;
    background: transparent;
    color: var(--sermon-body-text);
    font: 600 13.5px/1 var(--sermon-font-body);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

body.sermons-design .sermons-active-filter-reset:hover,
body.sermons-design .sermons-active-filter-reset:focus-visible {
    background: transparent;
    color: var(--sermon-ink);
}

/* --- Count label ---------------------------------------------------------- */

body.sermons-design .sermons-count {
    margin: 30px 0 -10px;
    font: 600 13px/1 var(--sermon-font-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sermon-muted);
}

/* --- Sermon card ----------------------------------------------------------- */

body.sermons-design .sermons-archive-grid {
    gap: 20px;
}

body.sermons-design .sermons-card-design {
    background: #fff;
    border: 1px solid rgba(22, 19, 15, 0.1);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.sermons-design .sermons-card-design:hover,
body.sermons-design .sermons-card-design:focus-within {
    border-color: rgba(22, 19, 15, 0.22);
    box-shadow: 0 22px 50px -34px rgba(22, 19, 15, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
    body.sermons-design .sermons-card-design {
        transition: border-color 0.15s ease, box-shadow 0.15s ease, transform var(--dur-base, 350ms) var(--ease-out, cubic-bezier(0.2, 0.6, 0.2, 1));
    }

    body.sermons-design .sermons-card-design:hover,
    body.sermons-design .sermons-card-design:focus-within {
        transform: translateY(-3px);
    }

    body.sermons-design .sermons-cta-primary:active {
        transform: scale(0.97);
    }
}

body.sermons-design .sermons-card-design > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 0;
    color: inherit;
}

body.sermons-design .sermons-card-design .sermons-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: repeating-linear-gradient(135deg, #ECE5D9 0 14px, #E3DBCB 14px 28px);
}

body.sermons-design .sermons-card-design .sermons-card-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.sermons-design .sermons-campus-chips {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

body.sermons-design .sermons-campus-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(22, 19, 15, 0.14);
    font: 600 11.5px/1.6 var(--sermon-font-body);
    letter-spacing: 0.005em;
    color: var(--sermon-ink);
    white-space: nowrap;
}

body.sermons-design .sermons-campus-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex: 0 0 auto;
}

body.sermons-design .sermons-card-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    padding: 18px 18px 20px;
}

body.sermons-design .sermons-card-eyebrow {
    font: 600 12px/1 var(--sermon-font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sermon-muted);
}

body.sermons-design .sermons-card-design .sermons-card-title {
    margin: 0;
    padding: 0;
    font: 700 20px/1.16 var(--sermon-font-heading);
    color: var(--sermon-ink);
    text-wrap: balance;
}

body.sermons-design .sermons-card-design .sermons-card-meta {
    margin-top: auto;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font: 500 13.5px/1.4 var(--sermon-font-body);
    color: var(--sermon-muted);
}

body.sermons-design .sermons-card-speaker {
    color: var(--sermon-ink);
    font-weight: 600;
}

/* Optional lead under the title, opt-in per call site. Same values as the
   news card's excerpt - one "description in a tile" across the site. */
body.sermons-design .sermons-card-design .sermons-card-excerpt {
    margin: 0;
    font: 400 13.5px/1.5 var(--sermon-font-body);
    color: var(--sermon-body-text);
}

/* --- News / events card ------------------------------------------------------
   The [church_latest_posts] design variant. The section root is
   .church-latest-posts, not .sermons-container, so the palette retint from
   the container has to be restated here. */

body.sermons-design .church-latest-posts {
    --sermon-primary: #16130F;
    --sermon-primary-hover: #2C2620;
    --sermon-strong: #16130F;
    --sermon-muted: #6B6560;
    --sermon-soft: #FFFFFF;
    --sermon-border: rgba(22, 19, 15, 0.1);

    font-family: var(--sermon-font-body);
    color: var(--sermon-ink);
    -webkit-font-smoothing: antialiased;
}

body.sermons-design .church-latest-posts-grid {
    gap: 20px;
}

body.sermons-design .church-latest-post-card-design {
    background: #fff;
    border: 1px solid rgba(22, 19, 15, 0.1);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.sermons-design .church-latest-post-card-design:hover,
body.sermons-design .church-latest-post-card-design:focus-within {
    border-color: rgba(22, 19, 15, 0.22);
    box-shadow: 0 22px 50px -34px rgba(22, 19, 15, 0.5);
}

/* Uniesienie jak karty kazan; po regule bazowej, bo ta nadpisuje transition. */
@media (prefers-reduced-motion: no-preference) {
    body.sermons-design .church-latest-post-card-design {
        transition: border-color 0.15s ease, box-shadow 0.15s ease, transform var(--dur-base, 350ms) var(--ease-out, cubic-bezier(0.2, 0.6, 0.2, 1));
    }

    body.sermons-design .church-latest-post-card-design:hover,
    body.sermons-design .church-latest-post-card-design:focus-within {
        transform: translateY(-3px);
    }
}

body.sermons-design .church-latest-post-card-design a {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 0;
    color: inherit;
}

body.sermons-design .church-latest-post-card-design .church-latest-post-thumb {
    /* Anchor for the absolutely positioned campus chips. */
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 0;
    border-radius: 0;
    background: repeating-linear-gradient(135deg, #ECE5D9 0 14px, #E3DBCB 14px 28px);
}

body.sermons-design .church-latest-post-body {
    display: flex;
    flex-direction: column;
    /* Content sits at the bottom: a plain news card (no kicker) then lines
       its title up with the event cards in the same row. */
    justify-content: flex-end;
    gap: 9px;
    flex: 1;
    padding: 18px 18px 20px;
}

body.sermons-design .church-latest-post-kicker {
    font: 600 12px/1.4 var(--sermon-font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sermon-muted);
}

body.sermons-design .church-latest-post-card-design .church-latest-post-title {
    margin: 0;
    font: 700 20px/1.16 var(--sermon-font-heading);
    color: var(--sermon-ink);
    text-wrap: balance;
}

/* --- Pagination ------------------------------------------------------------ */

body.sermons-design .sermons-pagination {
    margin-top: 36px;
}

body.sermons-design .sermons-pagination ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.sermons-design .sermons-pagination a,
body.sermons-design .sermons-pagination .current,
body.sermons-design .sermons-pagination .dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(22, 19, 15, 0.2);
    border-radius: 999px;
    background: none;
    font: 600 14px/1 var(--sermon-font-body);
    color: var(--sermon-ink);
    text-decoration: none;
}

body.sermons-design .sermons-pagination .dots,
body.sermons-design .sermons-pagination .prev,
body.sermons-design .sermons-pagination .next {
    border: none;
}

body.sermons-design .sermons-pagination .current {
    background: var(--sermon-ink);
    border-color: var(--sermon-ink);
    color: var(--sermon-paper);
}

body.sermons-design .sermons-pagination a:hover,
body.sermons-design .sermons-pagination a:focus-visible {
    background: rgba(22, 19, 15, 0.07);
    color: var(--sermon-ink);
}

/* --- Empty state ------------------------------------------------------------ */

body.sermons-design .sermons-empty {
    text-align: center;
    padding: 72px 24px;
    border: 1.5px dashed rgba(22, 19, 15, 0.18);
    border-radius: 20px;
    font: 400 15px/1.5 var(--sermon-font-body);
    color: var(--sermon-muted);
}

/* --- Single sermon ------------------------------------------------------------ */

body.sermons-design .sermons-single-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    padding: 24px 0 40px;
}

body.sermons-design .sermons-single-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

/* In the design, video and audio are two separate rounded blocks with a gap —
   the base .sermons-player wrapper must stop clipping them into one slab. */
body.sermons-design .sermons-single .sermons-player {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

body.sermons-design .sermons-single .sermons-video {
    border-radius: 20px;
    overflow: hidden;
    /* No dark backdrop: the thumbnail covers the whole 16:9 box, so anything
       behind it only ever bleeds through as a dark rim on the rounded corners. */
    background: transparent;
    box-shadow: 0 26px 60px -38px rgba(22, 19, 15, 0.6);
}

body.sermons-design .sermons-single .sermons-lite-youtube {
    background: transparent;
}

body.sermons-design .sermons-single .sermons-lite-youtube img {
    opacity: 1;
}

body.sermons-design .sermons-single .sermons-audio {
    background: var(--sermon-ink);
    border: 0;
    border-radius: 16px;
    padding: 14px 20px;
    color: var(--sermon-paper);
}

body.sermons-design .sermons-single .sermons-audio-label {
    font: 600 12px/1 var(--sermon-font-body);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(250, 247, 242, 0.65);
}

body.sermons-design .sermons-single .sermons-download {
    color: var(--sermon-paper);
    font: 600 13.5px/1 var(--sermon-font-body);
}

body.sermons-design .sermons-single .sermons-download:hover,
body.sermons-design .sermons-single .sermons-download:focus-visible {
    color: rgba(250, 247, 242, 0.75);
}

body.sermons-design .sermons-single-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    /* Astra centers .entry-header on the page-builder template (auto side
       margins + width cap) — the column layout owns the spacing here. */
    margin: 0;
    width: 100%;
    max-width: none;
}

body.sermons-design .sermons-single .sermons-title,
body.sermons-design .church-post-single .sermons-title {
    margin: 0;
    font: 700 clamp(30px, 3.6vw, 46px)/1.04 var(--sermon-font-heading);
    text-wrap: balance;
}

body.sermons-design .sermons-single-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
    font: 500 14.5px/1.4 var(--sermon-font-body);
    color: var(--sermon-muted);
}

body.sermons-design .sermons-single-meta .sermons-campus-chip {
    text-decoration: none;
}

body.sermons-design a.sermons-campus-chip:hover,
body.sermons-design a.sermons-campus-chip:focus-visible {
    border-color: var(--sermon-ink);
}

body.sermons-design .sermons-single-speaker {
    color: var(--sermon-ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--campus-accent, var(--sermon-ink));
    border-bottom-color: color-mix(in srgb, var(--campus-accent, var(--sermon-ink)) 35%, transparent);
    padding-bottom: 2px;
}

body.sermons-design .sermons-single-speaker:hover,
body.sermons-design .sermons-single-speaker:focus-visible {
    border-bottom-color: var(--campus-accent, var(--sermon-ink));
    color: var(--sermon-ink);
}

body.sermons-design .sermons-excerpt,
body.sermons-design .sermons-single .sermons-description {
    /* Astra centers .entry-content on the page-builder template. */
    margin: 0;
    width: 100%;
    max-width: none;
    font: 400 16.5px/1.65 var(--sermon-font-body);
    color: var(--sermon-body-text);
}

body.sermons-design .sermons-single-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

body.sermons-design .sermons-single-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: 999px;
    background: transparent;
    color: var(--sermon-ink);
    border: 1.5px solid rgba(22, 19, 15, 0.2);
    font: 600 14px/1 var(--sermon-font-body);
    text-decoration: none;
    cursor: pointer;
}

body.sermons-design .sermons-single-action:hover,
body.sermons-design .sermons-single-action:focus-visible {
    border-color: var(--sermon-ink);
    color: var(--sermon-ink);
    background: transparent;
}

body.sermons-design .sermons-single-action-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

body.sermons-design .sermons-single-action-icon svg {
    width: 15px;
    height: 15px;
}

/* --- Single sermon sidebar ------------------------------------------------------ */

body.sermons-design .sermons-single-aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

body.sermons-design .sermons-aside-card {
    background: #fff;
    border: 1px solid rgba(22, 19, 15, 0.1);
    border-radius: 20px;
    padding: 22px;
}

body.sermons-design .sermons-aside-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 11.5px/1 var(--sermon-font-body);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--sermon-muted);
}

body.sermons-design .sermons-aside-label-dash {
    color: var(--sermon-ink);
}

body.sermons-design .sermons-aside-label-dash::before {
    content: "";
    width: 20px;
    height: 2px;
    background: currentColor;
}

body.sermons-design .sermons-aside-scripture {
    background: linear-gradient(180deg, #F6EEDD, #FBF6EC);
}

body.sermons-design .sermons-aside-speaker-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}

body.sermons-design .sermons-aside-speaker-photo {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(22, 19, 15, 0.16);
}

body.sermons-design .sermons-aside-speaker-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sermon-ink);
    color: var(--sermon-paper);
    font: 700 21px/1 var(--sermon-font-heading);
}

body.sermons-design .sermons-aside-speaker-name {
    font: 700 16.5px/1.2 var(--sermon-font-heading);
    color: var(--sermon-ink);
}

body.sermons-design .sermons-aside-speaker-role {
    margin-top: 4px;
    font: 500 13px/1.4 var(--sermon-font-body);
    color: var(--sermon-muted);
}

body.sermons-design .sermons-aside-speaker .sermons-view-switch {
    display: inline-block;
    margin-top: 16px;
}

body.sermons-design .sermons-aside-passages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

body.sermons-design .sermons-aside-passage {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(22, 19, 15, 0.14);
    color: var(--sermon-ink);
    font: 600 14px/1.2 var(--sermon-font-body);
    text-decoration: none;
}

body.sermons-design .sermons-aside-passage:hover,
body.sermons-design .sermons-aside-passage:focus-visible {
    border-color: var(--sermon-ink);
    color: var(--sermon-ink);
}

body.sermons-design .sermons-aside-passage-icon {
    flex: 0 0 auto;
    display: inline-flex;
}

body.sermons-design .sermons-aside-passage-icon svg {
    width: 15px;
    height: 15px;
}

body.sermons-design .sermons-aside-passage-label {
    flex: 1;
    min-width: 0;
}

body.sermons-design .sermons-aside-passage-arrow {
    flex: 0 0 auto;
    font-size: 12px;
}

body.sermons-design .sermons-aside-support {
    background: linear-gradient(180deg, #F6EEDD, #FBF6EC);
}

body.sermons-design .sermons-aside-text {
    margin: 12px 0 16px;
    font: 400 13.5px/1.55 var(--sermon-font-body);
    color: var(--sermon-body-text);
}

body.sermons-design .sermons-aside-button {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--sermon-ink);
    color: var(--sermon-paper);
    font: 600 13.5px/1 var(--sermon-font-body);
    text-decoration: none;
}

/* Hover przyciskow-pigulek jak przycisk naglowka: zloto + atrament. */
body.sermons-design .sermons-aside-button:hover,
body.sermons-design .sermons-aside-button:focus-visible {
    background: #CDAA68;
    color: var(--sermon-ink);
}

body.sermons-design .sermons-aside-welcome {
    background: var(--sermon-ink);
    border-color: var(--sermon-ink);
    padding: 24px;
    color: var(--sermon-paper);
}

body.sermons-design .sermons-aside-welcome-title {
    margin: 0;
    font: 700 20px/1.15 var(--sermon-font-heading);
    color: var(--sermon-paper);
}

body.sermons-design .sermons-aside-welcome .sermons-aside-text {
    margin: 10px 0 18px;
    color: rgba(250, 247, 242, 0.72);
}

body.sermons-design .sermons-aside-welcome .sermons-aside-button {
    display: block;
    text-align: center;
    padding: 13px 20px;
    background: var(--sermon-paper);
    color: var(--sermon-ink);
    font-size: 14px;
}

body.sermons-design .sermons-aside-welcome .sermons-aside-button:hover,
body.sermons-design .sermons-aside-welcome .sermons-aside-button:focus-visible {
    background: #CDAA68;
    color: var(--sermon-ink);
}

/* --- Single post (news / event) ---------------------------------------------- */

body.sermons-design .church-post-single .sermons-single-layout {
    gap: 44px;
}

/* The container owns no bottom spacing here: the full-bleed "more" panel
   ends the page flush against the footer. No overflow clipping on the
   container - it would cut the panel's 50vw breakout at the 1200px box;
   Astra's `body { overflow-x: clip }` already swallows the scrollbar-width
   sliver the breakout can add.

   margin-top: plain posts get Astra's ast-plain-container (sermons do not),
   which pushes #primary 60px down on desktop - zeroed so the breadcrumb
   sits under the header exactly like on a single sermon. */
body.sermons-design .site .site-content #primary.sermons-container.church-post-single {
    margin-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

body.sermons-design .church-post-single .site-main > article {
    /* Astra's article bottom margin would peek between the band and the footer. */
    margin-bottom: 0;
}

body.sermons-design .church-post-image {
    /* No margins - the single-main flex column's gap spaces the graphic,
       header and content, same as on a single sermon. */
    margin: 0;
}

/* Astra's dynamic CSS drops a soft shadow on the figure; it stays square
   behind the rounded image and reads as a pale backdrop in the corners. */
body.sermons-design .church-post-single .church-post-image {
    box-shadow: none;
}

body.sermons-design .church-post-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 18px;
}

body.sermons-design .church-post-content {
    font: 400 16.5px/1.7 var(--sermon-font-body);
    color: #3D3831;
}

body.sermons-design .church-post-content p {
    margin: 0 0 18px;
}

body.sermons-design .church-post-content h2 {
    margin: 28px 0 14px;
    font: 700 22px/1.2 var(--sermon-font-heading);
    color: var(--sermon-ink);
}

body.sermons-design .church-post-content h3 {
    margin: 24px 0 12px;
    font: 700 18px/1.25 var(--sermon-font-heading);
    color: var(--sermon-ink);
}

body.sermons-design .church-post-content ul,
body.sermons-design .church-post-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

body.sermons-design .church-post-content li + li {
    margin-top: 8px;
}

/* `under` measures from the bottom of the glyph box, the way a border does,
   so this lands where `border-bottom` + `padding-bottom: 2px` lands on the
   theme's links. Plain `text-underline-offset` sits noticeably tighter. */
body.sermons-design .church-post-content a {
    color: var(--sermon-ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--sermon-ink);
    text-decoration-color: color-mix(in srgb, var(--sermon-ink) 25%, transparent);
    text-underline-position: under;
    text-underline-offset: 2px;
}

body.sermons-design .church-post-content a:hover,
body.sermons-design .church-post-content a:focus-visible {
    color: var(--sermon-ink);
    text-decoration-color: var(--sermon-ink);
}

body.sermons-design .church-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

body.sermons-design .church-post-content blockquote {
    margin: 0 0 18px;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--campus-accent, var(--sermon-ink));
}

/* Recent posts card in the sidebar. */

body.sermons-design .church-post-recent-list {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}

body.sermons-design .church-post-recent-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(22, 19, 15, 0.08);
    border-radius: 0;
    color: inherit;
    text-decoration: none;
}

body.sermons-design .church-post-recent-item:last-child {
    border-bottom: 0;
}

body.sermons-design .church-post-recent-thumb {
    flex: 0 0 auto;
    width: 76px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
}

body.sermons-design .church-post-recent-thumb-placeholder {
    background: repeating-linear-gradient(135deg, #ECE5D9 0 12px, #E3DBCB 12px 24px);
}

body.sermons-design .church-post-recent-text {
    min-width: 0;
}

body.sermons-design .church-post-recent-title {
    display: block;
    font: 600 14px/1.35 var(--sermon-font-body);
    color: var(--sermon-ink);
}

body.sermons-design .church-post-recent-kicker {
    display: block;
    margin-top: 4px;
    font: 600 11px/1.3 var(--sermon-font-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sermon-muted);
}

body.sermons-design .church-post-aside-recent .sermons-view-switch {
    margin-top: 8px;
}

/* "More from church life": a full-bleed tinted band closing the page.
   The 50vw margins break out of the centered container; the matching
   padding puts the content back on the container's grid. */

body.sermons-design .church-post-more {
    margin: 48px calc(50% - 50vw) 0;
    padding: 48px calc(50vw - 50%) 64px;
    background: #F1EBDF;
    border-top: 1px solid rgba(22, 19, 15, 0.08);
}

body.sermons-design .church-post-more-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

body.sermons-design .church-post-more-title {
    margin: 12px 0 0;
    padding: 0;
    font: 700 clamp(24px, 3vw, 34px)/1.02 var(--sermon-font-heading);
    color: var(--sermon-ink);
}

body.sermons-design .church-post-more-link {
    padding: 12px 22px;
    border-radius: 999px;
    border: 1.5px solid rgba(22, 19, 15, 0.2);
    color: var(--sermon-ink);
    font: 600 14px/1 var(--sermon-font-body);
    text-decoration: none;
    white-space: nowrap;
}

body.sermons-design .church-post-more-link:hover,
body.sermons-design .church-post-more-link:focus-visible {
    border-color: var(--sermon-ink);
}

/* --- Posts archive (news and events listing) --------------------------------- */

body.sermons-design .church-latest-post-card-design .church-latest-post-excerpt {
    margin: 0;
    font: 400 13.5px/1.5 var(--sermon-font-body);
    color: var(--sermon-body-text);
}

/* The whole card is the link; this is its visible affordance, pinned to the
   bottom edge (the auto margin wins over the body's flex-end packing). */
body.sermons-design .church-latest-post-readmore {
    margin-top: auto;
    align-self: flex-start;
    padding: 8px 0 5px;
    font: 600 13.5px/1 var(--sermon-font-body);
    color: var(--sermon-ink);
    border-bottom: 2px solid var(--campus-accent, var(--sermon-ink));
    border-bottom-color: color-mix(in srgb, var(--campus-accent, var(--sermon-ink)) 35%, transparent);
}

/* The card, not the word, is what gets hovered here. */
body.sermons-design .church-latest-post-card-design:hover .church-latest-post-readmore,
body.sermons-design .church-latest-post-card-design:focus-within .church-latest-post-readmore {
    border-bottom-color: var(--campus-accent, var(--sermon-ink));
}

/* Past events close the list dimmed: the photo drops to gray so the eye
   reads them as history at a glance; hover brings the color back. */
body.sermons-design .church-latest-post-card-past .church-latest-post-thumb img {
    filter: grayscale(1) opacity(0.75);
    transition: filter 0.2s ease;
}

body.sermons-design .church-latest-post-card-past:hover .church-latest-post-thumb img,
body.sermons-design .church-latest-post-card-past:focus-within .church-latest-post-thumb img {
    filter: none;
}

body.sermons-design .church-latest-post-card-past .church-latest-post-title {
    color: var(--sermon-muted);
}

body.sermons-design .church-post-filter-clear {
    align-self: center;
    padding: 12px 4px;
    font: 600 13.5px/1 var(--sermon-font-body);
    color: var(--sermon-body-text);
    text-decoration: none;
}

body.sermons-design .church-post-filter-clear:hover,
body.sermons-design .church-post-filter-clear:focus-visible {
    color: var(--sermon-ink);
}

body.sermons-design .church-post-archive-empty {
    margin-top: 36px;
    padding: 72px 24px;
    text-align: center;
    border: 1.5px dashed rgba(22, 19, 15, 0.18);
    border-radius: 20px;
}

body.sermons-design .church-post-archive-empty-title {
    font: 700 20px/1.2 var(--sermon-font-heading);
    color: var(--sermon-ink);
}

body.sermons-design .church-post-archive-empty p {
    margin: 10px 0 20px;
    font: 400 15px/1.5 var(--sermon-font-body);
    color: var(--sermon-muted);
}

/* --- Series panel (series context + related list) ------------------------------- */

body.sermons-design .sermons-series-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 0 40px;
    background: var(--sermon-ink);
    border-radius: 24px;
    overflow: hidden;
    color: var(--sermon-paper);
    padding: 40px;
}

body.sermons-design .sermons-series-panel .sermons-series-context {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

body.sermons-design .sermons-series-panel .sermons-archive-eyebrow {
    color: var(--sermon-paper);
    margin-bottom: 14px;
}

body.sermons-design .sermons-series-panel .sermons-taxonomy-title {
    margin: 0 0 18px;
    font: 700 clamp(28px, 3.6vw, 42px)/1 var(--sermon-font-heading);
    /* Explicit: the theme paints headings ink, invisible on the dark panel. */
    color: var(--sermon-paper);
}

body.sermons-design .sermons-series-context-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 22px;
}

body.sermons-design .sermons-series-context-cta {
    padding: 13px 24px;
    border-radius: 999px;
    background: var(--sermon-paper);
    color: var(--sermon-ink);
    font: 600 14px/1 var(--sermon-font-body);
    text-decoration: none;
}

body.sermons-design .sermons-series-context-cta:hover,
body.sermons-design .sermons-series-context-cta:focus-visible {
    background: #CDAA68;
    color: var(--sermon-ink);
}

body.sermons-design .sermons-series-context-count {
    font: 500 13.5px/1 var(--sermon-font-body);
    color: rgba(250, 247, 242, 0.6);
}

body.sermons-design .sermons-series-panel .sermons-taxonomy-title a {
    color: var(--sermon-paper);
    text-decoration: none;
}

body.sermons-design .sermons-series-panel .sermons-taxonomy-image {
    margin: 0 0 18px;
    /* Must match the image radius: the wrapper clips with overflow: hidden, so a
       smaller radius here would cut the corners short of the image's own curve
       and expose the dark panel behind it. */
    border-radius: 14px;
}

body.sermons-design .sermons-series-panel .sermons-taxonomy-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: inherit;
}

body.sermons-design .sermons-series-panel .sermons-taxonomy-description {
    font: 400 14.5px/1.6 var(--sermon-font-body);
    color: rgba(250, 247, 242, 0.8);
}

body.sermons-design .sermons-series-panel .sermons-series-context {
    align-self: center;
}

body.sermons-design .sermons-series-panel .sermons-related {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    align-self: center;
    min-width: 0;
    width: 100%;
}

body.sermons-design .sermons-series-panel .sermons-related h3 {
    margin: 0 0 10px;
    font: 600 11.5px/1 var(--sermon-font-body);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(250, 247, 242, 0.6);
}

body.sermons-design .sermons-related-list {
    position: relative;
    display: flex;
    flex-direction: column;
    counter-reset: sermons-related;
    /* Long series stay compact — the list scrolls and JS centers the
       current sermon in view. */
    max-height: 540px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(250, 247, 242, 0.35) transparent;
}

body.sermons-design .sermons-related-item {
    counter-increment: sermons-related;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    /* Column flex + max-height: without this the rows shrink to fit instead
       of letting the list scroll. */
    flex-shrink: 0;
}

body.sermons-design .sermons-related-link {
    display: flex;
    gap: 14px;
    align-items: center;
    /* Uniform side padding: the highlighted row's background then insets its
       content by the same amount with no negative-margin tricks. */
    padding: 13px 14px;
    border-bottom: 1px solid rgba(250, 247, 242, 0.12);
    border-radius: 0;
    text-decoration: none;
    color: var(--sermon-paper);
}

body.sermons-design .sermons-related-link::before {
    content: counter(sermons-related, decimal-leading-zero);
    flex: 0 0 auto;
    font: 700 12px/1 var(--sermon-font-heading);
    font-variant-numeric: tabular-nums;
    color: rgba(250, 247, 242, 0.45);
}

body.sermons-design .sermons-related-item-current .sermons-related-link {
    background: rgba(250, 247, 242, 0.09);
    border-radius: 14px;
    border-bottom-color: transparent;
}

body.sermons-design .sermons-related-item-current .sermons-related-link::before {
    color: var(--sermon-paper);
}

body.sermons-design .sermons-related-thumb {
    flex: 0 0 auto;
    width: 92px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: repeating-linear-gradient(135deg, #211C16 0 12px, #2A241C 12px 24px);
}

body.sermons-design .sermons-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.sermons-design .sermons-related-content {
    min-width: 0;
    flex: 1;
}

body.sermons-design .sermons-related-title {
    margin: 0;
    font: 600 15px/1.3 var(--sermon-font-body);
    color: var(--sermon-paper);
}

body.sermons-design .sermons-related-meta {
    margin-top: 4px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 13px/1.3 var(--sermon-font-body);
    color: rgba(250, 247, 242, 0.62);
}

body.sermons-design .sermons-related-current {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: center;
    border: 0;
    font: 600 10.5px/1 var(--sermon-font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sermon-ink);
    background: var(--sermon-paper);
    padding: 6px 10px;
    border-radius: 999px;
}

body.sermons-design .sermons-transcript-title {
    font-family: var(--sermon-font-heading);
}

/* --- Taxonomy pages (series / speaker / campus) --------------------------------- */

body.sermons-design .sermons-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 40px 0 22px;
}

body.sermons-design .sermons-section-title {
    margin: 12px 0 0;
    font: 700 clamp(26px, 3.4vw, 38px)/1.02 var(--sermon-font-heading);
    color: var(--sermon-ink);
}

body.sermons-design .sermons-taxonomy .sermons-taxonomy-title {
    margin: 14px 0 0;
    font: 700 clamp(38px, 5vw, 60px)/0.98 var(--sermon-font-heading);
    color: var(--sermon-ink);
}

body.sermons-design .sermons-taxonomy-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    font: 500 14.5px/1.4 var(--sermon-font-body);
    color: var(--sermon-muted);
}

body.sermons-design .sermons-taxonomy-meta-strong {
    color: var(--sermon-ink);
    font-weight: 600;
}

body.sermons-design .sermons-taxonomy-meta-link {
    color: var(--sermon-ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--campus-accent, var(--sermon-ink));
    border-bottom-color: color-mix(in srgb, var(--campus-accent, var(--sermon-ink)) 35%, transparent);
    padding-bottom: 2px;
}

body.sermons-design .sermons-taxonomy-meta-link:hover,
body.sermons-design .sermons-taxonomy-meta-link:focus-visible {
    border-bottom-color: var(--campus-accent, var(--sermon-ink));
    color: var(--sermon-ink);
}

body.sermons-design .sermons-speaker-profile-bio {
    margin: 18px 0 0;
    max-width: 60ch;
    font: italic 400 15px/1.6 var(--sermon-font-body);
    color: var(--sermon-muted);
}

body.sermons-design .sermons-speaker-profile-bio p {
    margin: 0 0 8px;
}

body.sermons-design .sermons-speaker-profile-bio p:last-child {
    margin-bottom: 0;
}

body.sermons-design .sermons-taxonomy .sermons-taxonomy-description {
    margin-top: 20px;
    max-width: 56ch;
    font: 400 16.5px/1.65 var(--sermon-font-body);
    color: var(--sermon-body-text);
}

body.sermons-design .sermons-taxonomy-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}

body.sermons-design .sermons-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 24px;
    border-radius: 999px;
    background: var(--sermon-ink);
    color: var(--sermon-paper);
    font: 600 14.5px/1 var(--sermon-font-body);
    text-decoration: none;
}

body.sermons-design .sermons-cta-primary:hover,
body.sermons-design .sermons-cta-primary:focus-visible {
    background: #CDAA68;
    color: var(--sermon-ink);
}

/* Trojkat odtwarzania przechodzi w atrament razem z tekstem. */
body.sermons-design .sermons-cta-primary:hover .sermons-cta-play,
body.sermons-design .sermons-cta-primary:focus-visible .sermons-cta-play {
    border-color: transparent transparent transparent var(--sermon-ink);
}

body.sermons-design .sermons-cta-play {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--sermon-paper);
}

body.sermons-design .sermons-cta-secondary {
    display: inline-flex;
    align-items: center;
    padding: 14px 22px;
    border-radius: 999px;
    background: transparent;
    color: var(--sermon-ink);
    border: 1.5px solid rgba(22, 19, 15, 0.2);
    font: 600 14.5px/1 var(--sermon-font-body);
    text-decoration: none;
}

body.sermons-design .sermons-cta-secondary:hover,
body.sermons-design .sermons-cta-secondary:focus-visible {
    border-color: var(--sermon-ink);
    color: var(--sermon-ink);
}

/* Series intro */

body.sermons-design .sermons-series-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    align-items: center;
    padding: 30px 0 8px;
}

body.sermons-design .sermons-series-intro-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 26px 60px -38px rgba(22, 19, 15, 0.5);
}

/* Sermon rows */

body.sermons-design .sermons-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: sermons-rows;
}

body.sermons-design .sermons-row {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid rgba(22, 19, 15, 0.1);
    border-radius: 16px;
    text-decoration: none;
    color: var(--sermon-ink);
    counter-increment: sermons-rows;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.sermons-design .sermons-row:hover,
body.sermons-design .sermons-row:focus-visible {
    border-color: rgba(22, 19, 15, 0.3);
    box-shadow: 0 14px 34px -26px rgba(22, 19, 15, 0.5);
    color: var(--sermon-ink);
}

body.sermons-design .sermons-taxonomy-series .sermons-row::before {
    content: counter(sermons-rows, decimal-leading-zero);
    flex: 0 0 auto;
    width: 30px;
    font: 700 13px/1 var(--sermon-font-heading);
    font-variant-numeric: tabular-nums;
    color: #B4AC9E;
}

body.sermons-design .sermons-row-thumb {
    flex: 0 0 auto;
    width: 118px;
    height: 66px;
    border-radius: 10px;
    overflow: hidden;
    background: repeating-linear-gradient(135deg, #ECE5D9 0 14px, #E3DBCB 14px 28px);
}

body.sermons-design .sermons-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.sermons-design .sermons-row-body {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}

body.sermons-design .sermons-row-title {
    display: block;
    font: 700 17px/1.25 var(--sermon-font-heading);
}

body.sermons-design .sermons-row-meta {
    display: block;
    margin-top: 5px;
    font: 500 13.5px/1.3 var(--sermon-font-body);
    color: var(--sermon-muted);
}

body.sermons-design .sermons-row-badge {
    flex: 0 0 auto;
    font: 600 10.5px/1 var(--sermon-font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sermon-paper);
    background: var(--sermon-ink);
    padding: 6px 10px;
    border-radius: 999px;
}

body.sermons-design .sermons-row-chips {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

body.sermons-design .sermons-row-arrow {
    flex: 0 0 auto;
    font: 600 16px/1 var(--sermon-font-body);
    color: var(--sermon-muted);
}

/* Compact series rows (the series listing's archive) */

/* Rows with a description keep the title column compact so the inline
   description preview gets the remaining width, with the toggle at the
   right edge of the row. */
body.sermons-design .sermons-series-row:has(.sermons-row-description) .sermons-row-main {
    flex: 0 1 auto;
    max-width: 40%;
}

body.sermons-design .sermons-row-main {
    display: flex;
    flex: 1;
    gap: 18px;
    align-items: center;
    min-width: 0;
    text-decoration: none;
    color: var(--sermon-ink);
    /* Pinned to the top like the toggle: in a closed row the main column is
       the tallest child, so nothing moves - only an opened description
       grows past it instead of centering it mid-row. */
    align-self: flex-start;
}

body.sermons-design .sermons-row-main:hover,
body.sermons-design .sermons-row-main:focus-visible {
    color: var(--sermon-ink);
}

body.sermons-design .sermons-row-main .sermons-row-arrow {
    margin-left: auto;
}

body.sermons-design .sermons-row-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(22, 19, 15, 0.2);
    background: transparent;
    color: var(--sermon-muted);
    cursor: pointer;
    /* Pinned to the top of the row, so the open description grows past it
       instead of dragging it down; the offset lands the button exactly
       where the centered row used to hold it - mid-thumb (66px). */
    align-self: flex-start;
    margin-top: 15px;
}

body.sermons-design .sermons-row-toggle:hover,
body.sermons-design .sermons-row-toggle:focus-visible {
    border-color: var(--sermon-ink);
    color: var(--sermon-ink);
    background: transparent;
}

body.sermons-design .sermons-row-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

body.sermons-design .sermons-row-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

body.sermons-design .sermons-row-description {
    flex: 1 1 0;
    min-width: 0;
    align-self: center;
    margin: 0;
    font: 400 14.5px/1.6 var(--sermon-font-body);
    color: var(--sermon-body-text);
    /* Collapsed: only the first line shows; the toggle reveals the rest. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* line-clamp itself cannot transition, so the script drives max-height
       between the clamped height and the full one - the same technique as
       the theme's current-series description. */
    transition: max-height 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Open: no clamp. `overflow` stays hidden so the animated max-height clips
   the text while it moves; the script drops max-height once the transition
   settles, so nothing ends up cut off. */
body.sermons-design .sermons-series-row.is-open .sermons-row-description {
    display: block;
    -webkit-line-clamp: unset;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    body.sermons-design .sermons-row-description {
        transition: none;
    }
}

body.sermons-design .sermons-row-description p {
    margin: 0 0 8px;
}

body.sermons-design .sermons-row-description p:last-child {
    margin-bottom: 0;
}

/* Speaker profile */

body.sermons-design .sermons-speaker-profile {
    display: flex;
    gap: 36px;
    align-items: center;
    flex-wrap: wrap;
    padding: 34px 0 8px;
}

/* The photo's own backdrop is a pale warm gradient, so on the cream paper the
   disc edge lands near 1.3:1 and dissolves. A hairline gives it the edge the
   rest of the design language has. Ring via box-shadow, not border: these are
   sized <img> elements, and a border would eat into the width instead of
   sitting outside it. The initials fallback shares the class but fills with
   --sermon-ink, where the ring cannot show.

   0.16 rather than the 0.1 the cards use: a card border separates a white fill
   from cream paper, while here both sides of the line are pale warm, so 0.1
   disappears. Kept at 1px across all three sizes - a hairline reads as a
   hairline whatever the diameter, same as the row borders. */
body.sermons-design .sermons-speaker-profile-photo {
    flex: 0 0 auto;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(22, 19, 15, 0.16);
}

body.sermons-design .sermons-speaker-profile-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sermon-ink);
    color: var(--sermon-paper);
    font: 700 48px/1 var(--sermon-font-heading);
}

body.sermons-design .sermons-speaker-profile-body {
    flex: 1 1 380px;
    min-width: 0;
}

/* Other speakers */

body.sermons-design .sermons-other-speakers {
    margin-top: 48px;
    padding: 8px 28px 28px;
    background: #F1EBDF;
    border: 1px solid rgba(22, 19, 15, 0.08);
    border-radius: 24px;
}

/* Three columns where they fit, otherwise two, otherwise one - decided by the
   track, not by breakpoints. 365px is the width at which the longest surname
   still shares a line with the count badge; below it the name starts wrapping
   and the card grows for the wrong reason. The min() is not decoration: a bare
   minmax(365px, 1fr) refuses to go under 365px, so on a 375px phone the track
   overflowed the container and ate the right gutter. */
body.sermons-design .sermons-other-speakers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(365px, 100%), 1fr));
    gap: 16px;
}

body.sermons-design .sermons-other-speaker {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(22, 19, 15, 0.1);
    border-radius: 16px;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--sermon-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.sermons-design .sermons-other-speaker:hover,
body.sermons-design .sermons-other-speaker:focus-visible {
    border-color: rgba(22, 19, 15, 0.3);
    box-shadow: 0 14px 34px -26px rgba(22, 19, 15, 0.5);
    color: var(--sermon-ink);
}

body.sermons-design .sermons-other-speaker-photo {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(22, 19, 15, 0.16);
}

body.sermons-design .sermons-other-speaker-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sermon-ink);
    color: var(--sermon-paper);
    font: 700 21px/1 var(--sermon-font-heading);
}

body.sermons-design .sermons-other-speaker-body {
    flex: 1 1 auto;
    min-width: 0;
}

body.sermons-design .sermons-other-speaker-name {
    display: block;
    font: 700 15.5px/1.2 var(--sermon-font-heading);
}

/* The role is never truncated: it is the reason the card exists, and cutting
   "Pastor Pomocniczy SCh Tomy ds. duszpasterstwa rodzin i mezczyzn" in half
   tells the reader less than the name alone. A role wrapping to a third row
   raises the card by 7px, and only in the few grid rows that hold one - the
   minmax() track above is what keeps that rare. */
body.sermons-design .sermons-other-speaker-role {
    display: block;
    overflow-wrap: anywhere;
    margin-top: 4px;
    font: 500 12.5px/1.3 var(--sermon-font-body);
    color: var(--sermon-muted);
}

/* Hidden label for the count badge. The plugin defines its own class instead
   of borrowing the parent theme .screen-reader-text: if the theme ever stops
   shipping it, the full phrase would show up next to the number. */
.sermons-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Sermon count as a badge pinned to the right edge - the same component as on
   the campus and sermon cards, rounded into a pill because a 6px rectangle
   next to the round photo reads as a foreign body. The badge shows the bare
   number (the word goes to screen readers only): spelling it out costs about
   45px of the line, which is the difference between a role that fits and a
   role cut in half. */
body.sermons-design .sermons-other-speaker-meta {
    flex: 0 0 auto;
    margin-top: 0;
    margin-left: auto;
    font-size: 12.5px;
}

body.sermons-design .sermons-other-speaker-meta .sermons-card-meta-item {
    padding: 4px 10px;
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--sermon-ink) 20%, transparent);
    /* The fill of the "Other speakers" panel, not a neutral grey: the card is
       white and the page is warm, so a grey pill is the one cold thing on the
       screen. Reusing the panel colour keeps the palette closed. */
    background: #F1EBDF;
    color: var(--sermon-ink);
    font-weight: 600;
    white-space: nowrap;
}

body.sermons-design .sermons-speakers-listing-grid {
    margin-top: 34px;
}

/* Campus hero (full-bleed, per the Kampus design) */

body.sermons-design {
    overflow-x: clip;
}

body.sermons-design .sermons-campus-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background-color: var(--sermon-ink);
    background-size: cover;
    background-position: center;
    color: var(--sermon-paper);
}

body.sermons-design .sermons-campus-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(22, 19, 15, 0.84) 0%, rgba(22, 19, 15, 0.52) 42%, rgba(22, 19, 15, 0.16) 72%), linear-gradient(180deg, rgba(22, 19, 15, 0.2) 0%, rgba(22, 19, 15, 0.6) 100%);
}

body.sermons-design .sermons-campus-hero-inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 84px 0 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 44px;
    align-items: flex-end;
}

body.sermons-design .sermons-campus-hero-body {
    flex: 1 1 340px;
    min-width: 0;
}

body.sermons-design .sermons-campus-hero .sermons-archive-eyebrow,
body.sermons-design .sermons-campus-hero .sermons-taxonomy-title {
    color: var(--sermon-paper);
}

body.sermons-design .sermons-campus-hero .sermons-taxonomy-description {
    color: rgba(250, 247, 242, 0.85);
    max-width: 46ch;
    font-size: 18px;
    line-height: 1.6;
}

body.sermons-design .sermons-campus-hero-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font: 600 13px/1.6 var(--sermon-font-body);
    letter-spacing: 0.005em;
    white-space: nowrap;
    margin-bottom: 20px;
}

body.sermons-design .sermons-campus-hero-cta {
    display: inline-flex;
    align-items: center;
    padding: 15px 26px;
    border-radius: 999px;
    background: var(--sermon-paper);
    color: var(--sermon-ink);
    font: 600 15px/1 var(--sermon-font-body);
    text-decoration: none;
}

body.sermons-design .sermons-campus-hero-cta:hover,
body.sermons-design .sermons-campus-hero-cta:focus-visible {
    background: #CDAA68;
    color: var(--sermon-ink);
}

body.sermons-design .sermons-campus-hero-directions {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 24px;
    border-radius: 999px;
    background: rgba(250, 247, 242, 0.1);
    color: var(--sermon-paper);
    border: 1.5px solid rgba(250, 247, 242, 0.35);
    font: 600 15px/1 var(--sermon-font-body);
    text-decoration: none;
}

body.sermons-design .sermons-campus-hero-directions:hover,
body.sermons-design .sermons-campus-hero-directions:focus-visible {
    border-color: var(--sermon-paper);
    color: var(--sermon-paper);
}

body.sermons-design .sermons-campus-hero-pin {
    display: inline-flex;
}

body.sermons-design .sermons-campus-hero-pin svg {
    width: 15px;
    height: 15px;
}

body.sermons-design .sermons-campus-hero-card {
    flex: 0 1 340px;
    min-width: 300px;
    box-sizing: border-box;
    background: rgba(22, 19, 15, 0.5);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(250, 247, 242, 0.16);
    border-radius: 20px;
    padding: 26px;
}

body.sermons-design .sermons-campus-hero-card-label {
    font: 600 12px/1 var(--sermon-font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(250, 247, 242, 0.6);
}

body.sermons-design .sermons-campus-hero-time {
    font: 700 56px/1 var(--sermon-font-heading);
    margin: 14px 0 4px;
}

body.sermons-design .sermons-campus-hero-address {
    margin: 6px 0 0;
    font: 400 15px/1.55 var(--sermon-font-body);
    color: rgba(250, 247, 242, 0.82);
}

/* The campus's own profiles plus the shared YouTube channel - profiles are
   campus metadata, so they live in the service card next to time and
   address. Same circle treatment as the footer icons. */
body.sermons-design .sermons-campus-hero-socials {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

body.sermons-design .sermons-campus-hero-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(250, 247, 242, 0.28);
    border-radius: 999px;
    color: rgba(250, 247, 242, 0.85);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body.sermons-design .sermons-campus-hero-social svg {
    width: 15px;
    height: 15px;
}

body.sermons-design .sermons-campus-hero-social:hover,
body.sermons-design .sermons-campus-hero-social:focus-visible {
    border-color: var(--sermon-paper);
    color: var(--sermon-paper);
    background: rgba(250, 247, 242, 0.08);
}

body.sermons-design .sermons-campus-grid {
    /* Three latest sermons in one row. */
    --sermon-grid-columns: 3;

    margin-top: 0;
}

body.sermons-design .sermons-campus-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

body.sermons-design .sermons-campus-expect-card {
    background: #fff;
    border: 1px solid rgba(22, 19, 15, 0.1);
    border-radius: 18px;
    padding: 26px;
}

body.sermons-design .sermons-campus-expect-title {
    margin: 0 0 8px;
    font: 700 20px/1.1 var(--sermon-font-heading);
    color: var(--sermon-ink);
}

body.sermons-design .sermons-campus-expect-text {
    margin: 0;
    font: 400 14px/1.55 var(--sermon-font-body);
    color: var(--sermon-body-text);
}

/* Campus description past its first paragraph, which leads the hero. */
body.sermons-design .sermons-campus-about-text {
    max-width: 68ch;
    font: 400 17px/1.65 var(--sermon-font-body);
    color: var(--sermon-body-text);
}

body.sermons-design .sermons-campus-about-text p {
    margin: 0 0 1em;
}

body.sermons-design .sermons-campus-about-text p:last-child {
    margin-bottom: 0;
}

body.sermons-design .sermons-campus-about-text a {
    color: inherit;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--campus-accent, var(--sermon-ink));
    border-bottom: 2px solid color-mix(in srgb, var(--campus-accent, var(--sermon-ink)) 35%, transparent);
}

body.sermons-design .sermons-campus-about-text a:hover,
body.sermons-design .sermons-campus-about-text a:focus-visible {
    color: inherit;
    border-bottom-color: var(--campus-accent, var(--sermon-ink));
}

body.sermons-design .sermons-campus-posts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

body.sermons-design .sermons-campus-post {
    background: #fff;
    border: 1px solid rgba(22, 19, 15, 0.1);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.sermons-design .sermons-campus-post:hover,
body.sermons-design .sermons-campus-post:focus-within {
    border-color: rgba(22, 19, 15, 0.22);
    box-shadow: 0 22px 50px -34px rgba(22, 19, 15, 0.5);
}

body.sermons-design .sermons-campus-post > a {
    display: block;
    color: inherit;
    text-decoration: none;
}

body.sermons-design .sermons-campus-post .sermons-card-thumb {
    aspect-ratio: 16 / 9;
    margin: 0;
    border-radius: 0;
    background: #EDE6D2;
}

body.sermons-design .sermons-campus-post .sermons-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.sermons-design .sermons-campus-post-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

body.sermons-design .sermons-campus-post-title {
    margin: 0;
    font: 700 18px/1.18 var(--sermon-font-heading);
    color: var(--sermon-ink);
}

/* Series listing: current series panel + archive cards */

body.sermons-design .sermons-current-series {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    background: var(--sermon-ink);
    border-radius: 24px;
    overflow: hidden;
    color: var(--sermon-paper);
    margin-top: 34px;
}

body.sermons-design .sermons-current-series-media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
}

body.sermons-design .sermons-current-series-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
}

body.sermons-design .sermons-current-series-body {
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.sermons-design .sermons-current-series-body .sermons-archive-eyebrow {
    color: var(--sermon-paper);
}

body.sermons-design .sermons-current-series-title {
    margin: 14px 0 12px;
    font: 700 clamp(32px, 4vw, 48px)/1 var(--sermon-font-heading);
    color: var(--sermon-paper);
}

body.sermons-design .sermons-current-series-description {
    max-width: 54ch;
    font: 400 16px/1.6 var(--sermon-font-body);
    color: rgba(250, 247, 242, 0.82);
}

body.sermons-design .sermons-current-series-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* The base-layer counterpart of this rule cannot reach the design layer's own
   striped/solid backdrops, which sit on more specific selectors — repeat it here
   so an assigned image never leaves a rim of pattern on the rounded corners. */
body.sermons-design .sermons-card-design .sermons-card-thumb:has(img),
body.sermons-design .church-latest-post-card-design .church-latest-post-thumb:has(img),
body.sermons-design .sermons-row-thumb:has(img),
body.sermons-design .sermons-campus-post .sermons-card-thumb:has(img),
body.sermons-design .sermons-related-item:not(.sermons-related-item-current) .sermons-related-thumb:has(img) {
    background: transparent;
}

/* --- Mobile ------------------------------------------------------------------ */

@media (max-width: 921px) {
    body.sermons-design .sermons-single-layout {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 16px;
    }

    body.sermons-design .sermons-series-panel {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 24px 20px;
    }

    body.sermons-design .church-post-more {
        margin-top: 32px;
        padding-top: 28px;
        padding-bottom: 36px;
    }

    body.sermons-design .sermons-container {
        --sermon-grid-columns: 2;
    }

    body.sermons-design .sermons-filters-mobile {
        border: 1px solid rgba(22, 19, 15, 0.14);
        border-radius: 12px;
        background: #fff;
    }

    body.sermons-design .sermons-filters-summary {
        font: 600 15px/1 var(--sermon-font-body);
        justify-content: flex-start;
    }

    body.sermons-design .sermons-filters-summary::after {
        margin-left: auto;
    }

    body.sermons-design .sermons-filters-count {
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--sermon-ink);
        color: #fff;
        font: 600 12px/20px var(--sermon-font-body);
        text-align: center;
    }

    body.sermons-design .sermons-filters {
        padding: 0 16px 16px;
    }

    body.sermons-design .sermons-filter {
        flex-basis: 100%;
    }

    body.sermons-design .sermons-filter-actions {
        flex-basis: 100%;
    }

    body.sermons-design .sermons-filter-submit {
        width: 100%;
    }

    body.sermons-design .sermons-archive-header {
        padding-bottom: 22px;
    }

    body.sermons-design .sermons-series-intro {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    body.sermons-design .sermons-series-intro-image {
        order: -1;
    }

    body.sermons-design .sermons-campus-hero-inner {
        padding: 44px 24px 36px;
        gap: 26px;
    }

    body.sermons-design .sermons-campus-hero-card {
        flex-basis: 100%;
        min-width: 0;
    }

    body.sermons-design .sermons-current-series {
        grid-template-columns: 1fr;
    }

    body.sermons-design .sermons-current-series-body {
        padding: 4px 26px 32px;
    }

    body.sermons-design .sermons-campus-grid,
    body.sermons-design .sermons-campus-cards,
    body.sermons-design .sermons-campus-posts {
        grid-template-columns: 1fr;
    }

    body.sermons-design .sermons-campus-grid {
        --sermon-grid-columns: 1;
    }
}

@media (max-width: 767px) {
    body.sermons-design .sermons-row {
        gap: 12px;
        padding: 12px 14px;
    }

    /* Narrow screens: the description drops below the row, full width. */
    body.sermons-design .sermons-series-row {
        flex-wrap: wrap;
    }

    body.sermons-design .sermons-series-row:has(.sermons-row-description) .sermons-row-main {
        flex: 1;
        max-width: none;
    }

    body.sermons-design .sermons-row-description {
        flex: 1 1 100%;
        order: 5;
        margin-top: 4px;
    }

    /* The smaller thumb (47px) moves the toggle's resting middle up. */
    body.sermons-design .sermons-row-toggle {
        margin-top: 5px;
    }

    body.sermons-design .sermons-row-thumb {
        width: 84px;
        height: 47px;
    }

    body.sermons-design .sermons-row-arrow,
    body.sermons-design .sermons-row-chips {
        display: none;
    }

    body.sermons-design .sermons-taxonomy-series .sermons-row::before {
        display: none;
    }
}

@media (max-width: 544px) {

    /* Phones: the highlighted background already marks the current sermon —
       the badge would squeeze the title into a sliver. */
    body.sermons-design .sermons-related-current {
        display: none;
    }

    body.sermons-design .sermons-related-thumb {
        width: 72px;
        height: 40px;
    }
}