/* Single Variables */
:root {
    --single-width: 1490px;
}

/* Single layout background colors (for testing) */
/*
.single-layout__media { background: red; }
.single-layout__header { background: blue; }
.single-layout__sidebar { background: green; }
.single-layout__main { background: orange; }
*/

/* Single Layout */
.single-layout { 
    display: grid; 
    gap: 0;
    padding: 0;
    max-width: var(--single-width);
    margin: 0 auto;
}

/* Reading Wrap on Header and Main */
.single-layout__header, 
.single-layout__main { 
    width: 100%; 
    max-width: 700px; 
    margin: 0 0 0 auto;
}

/* Mobile: All items in single column, custom order */
@media (max-width: 767px) {
    .single-layout {
        grid-template-areas:
            "media"
            "header"
            "sidebar"
            "main";
    }
    
    /* Reset subgrid behavior on mobile */
    .single-layout__sidebar {
        display: contents;
    }
}

/* Desktop: Two columns */
@media (min-width: 768px) {
    .single-layout {
        grid-template-columns: 1fr clamp(100px, 25%, 450px);
        grid-template-areas:
            "media sidebar"
            "header sidebar"
            "main sidebar";
        row-gap: var(--space-s);
        column-gap: var(--space-xl);
        padding: 0 var(--space-l);
    }
    
    .single-layout__sidebar {
        grid-area: sidebar;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
}

/* Grid area assignments */
.single-layout__media { grid-area: media; }
.single-layout__header { grid-area: header; }
.single-layout__main { grid-area: main; }

/* Media Section */
.single-layout__media { 
    display: block; 
    line-height: 0; 
}

/* Breakout full width on mobile only */
@media (max-width: 768px) {
	.single-layout__media {
		align-self: flex-start;
		inline-size: 100vw !important;
		max-inline-size: 100vw !important;
		margin-inline: calc(50% - 50vw) !important;
	}
}

.single-layout__media img, 
.single-layout__media video { 
    width: 100%; 
    height: auto; 
    display: block; 
}

/* Featured Image Styling */
.single-layout__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-l);
}

/* Remove border-radius on mobile when it breaks out */
@media (max-width: 768px) {
	.single-layout__media img {
		border-radius: 0;
	}
}

/* Sidebar Sticky Behavior */
.single-layout__sidebar { 
    position: sticky; 
    top: 0; 
}

/* Mobile-specific styles */
@media (max-width: 767px) {
    .single-layout__sidebar { 
        position: static;
    }
}

/* Typography */

.single-layout__header {
    margin-block-start: var(--space-l, 2rem);
    margin-block-end: var(--space-s, .25rem);
}

.single-layout__header h1 {
    margin: 0;
    font-family: var(--heading-font-family, 'Crimson Pro', serif);
    font-size: var(--h1, 2.5rem);
    line-height: var(--heading-line-height, 1.2);
}

.single-layout__main p { 
    font-family: var(--heading-font-family);
    font-size: var(--text-l);
    font-weight: 350; 
}

.single-content__sermon-series-text p { 
    font-family: var(--body-font-family);
    font-size: var(--text-m);
    font-weight: 500; 
}

/* Sermon Series Card */
.single-content__sermon-series-card { 
    display: grid; 
    grid-template-columns: auto 1fr; 
    gap: var(--grid-gap); 
}

.single-content__sermon-series-image { 
    position: relative; 
    overflow: hidden; 
    max-width: 100px; 
    aspect-ratio: 1 / 1; 
}

.single-content__sermon-series-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

.single-content__sermon-series-text p { 
    font-family: var(--font-primary); 
    font-size: var(--text-m);
    font-weight: 500; 
}

/* ========================================
   PLAYER STYLES
   ======================================== */

.player { 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
}

/* YouTube Player */
.player__youtube { 
    position: relative; 
    width: 100%; 
    height: 0; 
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.player__youtube iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    border-radius: 0;
}

@media (min-width: 768px) {
    .player__youtube iframe {
        border-radius: var(--radius-m);
    }
}

/* Self-hosted Video Player */
.player__video { 
    position: relative; 
    width: 100%; 
    height: 0; 
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.player__video video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    border-radius: 0;
}

@media (min-width: 768px) {
    .player__video video {
        border-radius: var(--radius-m);
    }
}

/* Audio Player */
.player__audio { 
    position: relative; 
    width: 100%; 
    height: 0; 
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background-position: center; 
    background-size: cover; 
    backdrop-filter: blur(30px);
    border-radius: 0;
}

@media (min-width: 768px) {
    .player__audio {
        border-radius: var(--radius-m);
    }
}

.player__audio-backdrop { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,.25); 
    backdrop-filter: blur(5px); 
}

.player__audio-thumbnail { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -60%); 
    width: 250px; 
    height: 250px; 
    background-position: center; 
    background-size: cover;
    border-radius: 0;
}

@media (min-width: 768px) {
    .player__audio-thumbnail {
        border-radius: var(--radius-m);
    }
}

@media (max-width: 1199.98px) {
    .player__audio-thumbnail { 
        width: 150px; 
        height: 150px; 
    }
}

@media (max-width: 767.98px) {
    .player__audio-thumbnail { 
        width: 90px; 
        height: 90px; 
    }
}

.player__audio-controls { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    padding: var(--space-m);
}

.player__audio-controls h2 { 
    color: var(--base-light);
    text-align: center; 
    margin-bottom: var(--space-s);
}

.player__audio-controls audio { 
    width: 100%; 
}

/* Fallback Notice */
.player__fallback-notice { 
    background: var(--accent);
    color: var(--base-light);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
    font-size: var(--text-xs);
    display: none; 
    margin-top: var(--space-xs);
}

/* No Media Notice */
.player__no-media { 
    padding: var(--space-l);
    text-align: center; 
    background: var(--neutral-light);
    border-radius: var(--radius-m);
}

/* Post Meta Items with Icons */
.post-meta__item {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

@media (max-width: 767px) {
	.post-meta__item {
		gap: calc(var(--space-xs) * .5);
	}
}

.post-meta__icon {
	flex-shrink: 0;
	fill: currentColor;
	color: var(--text-ultra-dark, currentColor);
}

.post-meta__value {
	/* Any additional styling for the value text */
}

/* Main container - always sticky */
.sermon-sticky {
    position: sticky; 
    top: 0; 
    z-index: 100; 
    background-color: var(--body-bg-color, var(--white));
    display: flex;
    flex-direction: column;
}

/* Player controls - hidden by default on desktop */
.sermon-sticky__player-controls {
    display: none;
}

/* Show player controls when video plays */
.sermon-sticky__player-controls.is-visible {
    display: flex;
    flex-direction: column;
}

.sermon-sticky__player-controls__buttons {
    display: flex;
    flex-direction: row;
    padding-block: var(--space-s);
    justify-content: center;
    gap: var(--space-xs);
}

.sermon-sticky__player-controls__buttons .btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sermon-sticky__player-controls__buttons .btn svg {
    flex-shrink: 0;
}

.sermon-sticky__player-controls__buttons button,
.sermon-sticky__player-controls__buttons a.btn {
    width: 50px;
    height: 50px;
    padding-inline: 0;
    padding-block: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-inline-size: 50px !important;
    min-block-size: 50px !important;
    border-color: var(--body-bg-color) !important;
    color: var(--text-ultra-dark, currentColor) !important;
}
    
.sermon-sticky__player-controls__buttons button:hover,
.sermon-sticky__player-controls__buttons a.btn:hover {
    background-color: var(--neutral-ultra-light) !important;
    border-color: var(--neutral-ultra-light) !important;
}


/* Give section - always visible */
.sermon-sticky__give {
    text-align: center;
    padding-block:var(--space-xs);
}

.sermon-sticky__give p {
    font-size: calc(var(--text-m) * .85);
    line-height: var(--text-line-height);
    margin-block-end: var(--space-m);
}

.sermon-sticky__give a.btn {
    margin-block-end: var(--space-s);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--space-xs)*.35);
}

@media (max-width: 767px) {
    .sermon-sticky {
        position: fixed; 
        bottom: 0; 
        left: 0; 
        right: 0; 
        top: auto;
        border-top-left-radius: var(--radius-m);
        border-top-right-radius: var(--radius-m);
        box-shadow: var(--box-shadow-m);
        padding-inline: var(--space-xs)
    }
    
    /* Always show player controls on mobile */
    .sermon-sticky__player-controls {
        display: flex;
        flex-direction: column;
    }

    .sermon-sticky__give p {
        display: none;
    }
}

.sermon-sticky button {
    width: 50px;
    height: 50px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-ultra-dark, currentColor);
    cursor: pointer;
}

svg {
    fill: currentColor;
}

.sermon-sticky__player-controls__buttons button svg,
.sermon-sticky__player-controls__buttons a.btn svg {
    fill: currentColor !important;
    color: inherit;
}

.sermon-sticky__player-controls__buttons .watchlist-toggle__icon svg {
    fill: currentColor !important;
}

.sermon-sticky__player-controls__buttons .watchlist-toggle svg path {
    fill: currentColor !important;
}

.sermon-sticky__player-controls__buttons .watchlist-toggle svg {
    fill: currentColor;
}

.sermon-sticky__player-controls__buttons .watchlist-toggle svg path {
    fill: currentColor;
}