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

/* Single page layout background colors (for testing) */
/*
.single-page-layout__media-section { background: red; }
.single-page-layout__title { background: blue; }
.single-page-layout__meta { background: green; }
.single-page-layout__content { background: orange; }
.single-page-layout__cta { background: purple; } */

/* Single Page Styles */
.single-page-container { max-width:var(--single-page-width) !important; margin:0 auto; }

/* Reading Wrap on Content and Title */
.single-page-layout__title, .single-page-layout__content, .single-page-layout__meta { width:100%; max-width:700px; margin:0 0 0 auto;}

/* Single Page Layout */ 
.single-page-layout { display: grid; gap: 1rem; }

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

/* Desktop: Two columns */
@media (min-width: 768px) {
    .single-page-layout {
        grid-template-columns: 1fr clamp(100px, 25%, 450px);
        grid-template-areas:
            "media sidebar"
            "title sidebar"
            "content sidebar";
        row-gap: 0;
        column-gap: 8%;
    }
    
    .single-page-layout__sidebar {
        grid-area: sidebar;
        display: flex;
        flex-direction: column;
        gap: 0;
        /* Meta and CTA will stack naturally without grid alignment */
    }
}

/* Grid area assignments */
.single-page-layout__media { grid-area: media; }
.single-page-layout__title { grid-area: title; }
.single-page-layout__content { grid-area: content; }

/* Media Section */
.single-page-layout__media { display: block; line-height: 0; }
.single-page-layout__media img, .single-page-layout__media video { width: 100%; height: auto; display: block; }

/* CTA Section */
.single-page-layout__cta { position: sticky; top: 0; }

/* Mobile-only grid areas (overridden by subgrid container on desktop) */
@media (max-width: 767px) {
    .single-page-layout__meta { grid-area: meta; }
    .single-page-layout__cta { background:white; padding: 0 0 1em; position: fixed; bottom:0; top: auto; width:100%; box-shadow: 0 0 30px rgba(0,0,0,.125); }
    .single-page-layout__cta .button { margin:0; }
}

/* Typography */
.single-page-layout__title h1 { font-size:var(--largest-text); font-family: var(--serif); font-weight:100; text-wrap: balance; line-height:1.1; }
.single-page-layout__content p { font-family: var(--serif); font-size:25px; font-weight:350; line-height: 1.4; }

/* Meta */
.single-meta__container p { font-size:16px; }
.single-meta__leader { display: grid; grid-template-columns: 3.5em 1fr; grid-gap: 1em; }
.single-meta__leader div { display:flex; align-self:center; flex-direction: column; }
.single-meta__leader p { line-height:1.2; margin:.25em; }
.single-meta__leader-name { font-size: 100%; }
.single-meta__leader-bio { font-size: 13px; }

/* Sermon Series */
.single-content__sermon-series-card { display: grid; grid-template-columns: auto 1fr; grid-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: 17px; font-weight: 500; }