/* ==========================================================================
   LCDP SERMONS PAGE
   ========================================================================== */

.lcdp-sermons-page {
    position: relative;

    min-height: 70vh;

    padding:
        44px
        0
        72px;

    background: transparent;
}


/* ==========================================================================
   MAIN SHELL
   ========================================================================== */

.lcdp-sermons-shell {
    padding:
        34px;

    background:
        rgba(255, 255, 255, 0.96);

    border:
        1px solid rgba(255, 255, 255, 0.72);

    border-radius:
        24px;

    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.24);
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.lcdp-sermons-header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        30px;
}


.lcdp-sermons-title {
    margin:
        0;

    color:
        #0f172a;

    font-size:
        clamp(2rem, 4vw, 3rem);

    font-weight:
        780;

    line-height:
        1.05;
}


.lcdp-sermons-subtitle {
    margin:
        10px
        0
        0;

    color:
        #64748b;

    font-size:
        0.98rem;

    line-height:
        1.55;
}


/* ==========================================================================
   EYEBROW
   ========================================================================== */

.lcdp-sermons-shell .lcdp-eyebrow {
    color:
        var(--lcdp-primary);
}


/* ==========================================================================
   VIEW CONTROL
   ========================================================================== */

.lcdp-sermons-view-control {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex:
        0
        0
        auto;
}


.lcdp-sermons-view-label {
    margin:
        0;

    color:
        #475569;

    font-size:
        0.8rem;

    font-weight:
        650;
}


.lcdp-sermons-view-control .form-select {
    min-width:
        84px;

    background:
        #f8fafc;

    border:
        1px solid #cbd5e1;

    border-radius:
        10px;

    color:
        #0f172a;

    box-shadow:
        none;
}


.lcdp-sermons-view-control .form-select:focus {
    border-color:
        var(--lcdp-primary);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.10);
}


/* ==========================================================================
   SERMON GRID
   ========================================================================== */

.lcdp-sermon-card-link {
    display:
        block;

    height:
        100%;

    color:
        inherit;

    text-decoration:
        none;
}


/* ==========================================================================
   SERMON CARD
   ========================================================================== */

.lcdp-sermon-card {
    height:
        100%;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid #e2e8f0;

    border-radius:
        18px;

box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.24),
    0 18px 38px rgba(15, 23, 42, 0.30);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}


.lcdp-sermon-card-link:hover .lcdp-sermon-card,
.lcdp-sermon-card-link:focus .lcdp-sermon-card {
    transform:
        translateY(-3px);

    border-color:
        #cbd5e1;

    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.14),
        0 24px 54px rgba(15, 23, 42, 0.18);
}


/* ==========================================================================
   SERMON IMAGE
   ========================================================================== */

.lcdp-sermon-card-image {
    position:
        relative;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        #0b1220;
}


.lcdp-sermon-card-image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 260ms ease;
}


.lcdp-sermon-card-link:hover .lcdp-sermon-card-image img,
.lcdp-sermon-card-link:focus .lcdp-sermon-card-image img {
    transform:
        scale(1.035);
}


/* ==========================================================================
   SERMON CARD BODY
   ========================================================================== */

.lcdp-sermon-card-body {
    padding:
        18px;
}


.lcdp-sermon-card-title {
    margin:
        0;

    color:
        #0f172a;

    font-size:
        1rem;

    font-weight:
        760;

    line-height:
        1.4;
}


.lcdp-sermon-card-action {
    margin-top:
        8px;

    color:
        var(--lcdp-primary);

    font-size:
        0.82rem;

    font-weight:
        700;
}


/* ==========================================================================
   COUNTS / SECONDARY TEXT
   ========================================================================== */

.lcdp-sermons-shell .text-secondary {
    color:
        #64748b !important;
}


/* ==========================================================================
   ALERTS
   ========================================================================== */

.lcdp-sermons-shell .alert {
    border-radius:
        14px;
}


/* ==========================================================================
   PAGINATION
   ========================================================================== */

.lcdp-sermons-shell .pagination {
    gap:
        5px;
}


.lcdp-sermons-shell .page-link {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        36px;

    min-height:
        36px;

    padding:
        6px
        10px;

    background:
        #0f172a;

    color:
        #ffffff;

    border:
        1px solid #0f172a;

    border-radius:
        9px !important;

    font-size:
        0.85rem;

    font-weight:
        650;

    box-shadow:
        none;
}


.lcdp-sermons-shell .page-link:hover,
.lcdp-sermons-shell .page-link:focus {
    background:
        #1e293b;

    color:
        #ffffff;

    border-color:
        #1e293b;
}


.lcdp-sermons-shell .page-item.active .page-link {
    background:
        var(--lcdp-primary);

    color:
        #ffffff;

    border-color:
        var(--lcdp-primary);
}


/*
 * Previous/Next disabled buttons should visually match
 * the rest of the dark pagination set.
 */

.lcdp-sermons-shell .page-item.disabled .page-link {
    background:
        #0f172a;

    color:
        rgba(255, 255, 255, 0.42);

    border-color:
        #0f172a;

    opacity:
        1;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767.98px) {

    .lcdp-sermons-page {
        padding:
            18px
            0
            34px;
    }


    .lcdp-sermons-shell {
        padding:
            20px;

        background:
            rgba(255, 255, 255, 0.96);

        border-radius:
            20px;
    }


    .lcdp-sermons-header {
        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            18px;

        margin-bottom:
            22px;
    }


    .lcdp-sermons-title {
        font-size:
            1.9rem;
    }


    .lcdp-sermons-subtitle {
        color:
            #64748b;
    }


    .lcdp-sermons-view-control {
        justify-content:
            space-between;

        width:
            100%;
    }


    .lcdp-sermons-view-control .form-select {
        width:
            auto;

        min-width:
            90px;
    }


    .lcdp-sermon-card {
        border-radius:
            16px;

box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.24),
    0 18px 38px rgba(15, 23, 42, 0.30);


    .lcdp-sermon-card-body {
        padding:
            16px;
    }


    .lcdp-sermons-shell
    .d-flex.flex-wrap.gap-2.align-items-center.justify-content-between.mt-4 {
        flex-direction:
            column;

        align-items:
            stretch !important;

        gap:
            12px !important;
    }


    .lcdp-sermons-shell nav {
        overflow-x:
            auto;

        padding-bottom:
            2px;
    }


    .lcdp-sermons-shell .pagination {
        width:
            max-content;
    }

}