/* =====================================
SERMON HERO
===================================== */

.sermon-hero{

padding:10rem 0 6rem;

background:
linear-gradient(
rgba(0,34,68,.85),
rgba(0,34,68,.85)
),
url("../assets/images/sermons/sermon-bg.jpg");

background-size:cover;

background-position:center;

text-align:center;

color:white;

}


.sermon-hero h1{

color:white;

font-size:clamp(2.5rem,5vw,4rem);

max-width:900px;

margin:1rem auto;

}


.sermon-hero p{

max-width:650px;

margin:auto;

font-size:1.15rem;

color:rgba(255,255,255,.85);

}



/* =====================================
FEATURED SERMON
===================================== */


.featured-sermon{

padding:6rem 0;

}



.sermon-feature{

display:grid;

grid-template-columns:1.1fr 1fr;

gap:4rem;

align-items:center;

}



.sermon-video{

position:relative;

height:450px;

border-radius:25px;

overflow:hidden;

box-shadow:
0 20px 50px rgba(0,0,0,.15);

}



.sermon-video img{

width:100%;

height:100%;

object-fit:cover;

}



.sermon-video button{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);


width:80px;

height:80px;


border-radius:50%;


background:rgba(255,255,255,.9);


display:flex;

align-items:center;

justify-content:center;


font-size:1.5rem;


color:var(--clr-secondary);

cursor:pointer;

}




.sermon-info span{

color:var(--clr-secondary);

font-weight:700;

text-transform:uppercase;

letter-spacing:1px;

}



.sermon-info h2{

font-size:2.5rem;

margin:1rem 0;

}



.sermon-info p{

line-height:1.8;

margin-bottom:2rem;

}





/* =====================================
SERMON LIBRARY
===================================== */


.sermon-library{

background:#f7f9fc;

padding:6rem 0;

}




.sermons-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:2rem;

}




.sermon-card{

background:white;

border-radius:22px;

overflow:hidden;

box-shadow:

0 10px 30px rgba(0,0,0,.08);

transition:.35s ease;

}



.sermon-card:hover{

transform:translateY(-10px);

box-shadow:

0 20px 45px rgba(0,0,0,.15);

}





.sermon-image{

height:240px;

position:relative;

overflow:hidden;

}




.sermon-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s ease;

}



.sermon-card:hover img{

transform:scale(1.08);

}





.play-button{

position:absolute;

top:50%;

left:50%;


transform:translate(-50%,-50%);


width:65px;

height:65px;


border-radius:50%;


background:rgba(255,255,255,.85);


display:flex;

align-items:center;

justify-content:center;


color:var(--clr-secondary);

font-size:1.2rem;

}





.sermon-content{

padding:1.8rem;

}



.sermon-content span{

font-size:.85rem;

font-weight:700;

color:var(--clr-secondary);

}



.sermon-content h3{

margin:1rem 0;

font-size:1.4rem;

}



.sermon-content p{

line-height:1.7;

margin-bottom:1.5rem;

}



.sermon-content a{

font-weight:700;

color:var(--clr-primary);

}



.sermon-content a:hover{

color:var(--clr-secondary);

}





/* =====================================
CTA
===================================== */


.sermon-cta{

padding:5rem 0;

}



.cta-box{

background:

linear-gradient(
135deg,
#002244,
#003b72
);


border-radius:30px;

padding:4rem 2rem;

text-align:center;

color:white;

}



.cta-box h2{

color:white;

margin-bottom:1rem;

}



.cta-box p{

color:white;

max-width:600px;

margin:0 auto 2rem;

}





.cta-box div{

display:flex;

justify-content:center;

gap:1rem;

}





/* =====================================
RESPONSIVE
===================================== */


@media(max-width:1000px){


.sermon-feature{

grid-template-columns:1fr;

}



.sermons-grid{

grid-template-columns:repeat(2,1fr);

}


}





@media(max-width:700px){


.sermon-video{

height:300px;

}



.sermons-grid{

grid-template-columns:1fr;

}



.cta-box div{

flex-direction:column;

align-items:center;

}



}