/* ===== Section ===== */

.section{
padding:var(--space-xl) 0;
}

.section__header{
margin-bottom:var(--space-lg);
text-align:center;
}

.section__title{
font-size:28px;
font-weight:bold;
}

.section__lead{
margin-top:var(--space-sm);
color:#000;
}

/* ===== Hero ===== */

.hero{
position:relative;
}

.hero__image img{
width:100%;
object-fit:cover;
}

.hero__title{
position:absolute;
bottom:20px;
left:20px;
background:rgba(255,255,255,.85);
padding:16px 20px;
border-radius:var(--radius);
}

/* ===== Card ===== */

.card{
background:#fff;
border-radius:var(--radius);
box-shadow:0 10px 30px rgba(0,0,0,.08);
overflow:hidden;
}

.card__body{
padding:var(--space-md);
}

.card__title{
font-size:20px;
margin-bottom:var(--space-sm);
}

/* ===== Split (2 column) ===== */

.split{
display:grid;
gap:24px;
}

@media(min-width:768px){

.split{
grid-template-columns:1fr 1fr;
align-items:center;
}

}

/* ===== Step ===== */

.step{
display:grid;
gap:24px;
}

.step__item{
background:#fff;
padding:var(--space-md);
border-radius:var(--radius);
box-shadow:0 6px 20px rgba(0,0,0,.06);
}

.step__num{
font-weight:bold;
color:var(--color-main);
margin-bottom:var(--space-sm);
}

/* ===== FAQ ===== */

.faq{
display:grid;
gap:16px;
}

.faq__item{
background:#fff;
border-radius:var(--radius);
padding:16px 20px;
box-shadow:0 6px 20px rgba(0,0,0,.06);
}

.faq__question{
font-weight:bold;
cursor:pointer;
}

/* ===== Schedule ===== */

.schedule{
overflow-x:auto;
}

.schedule__table{
width:100%;
border-collapse:collapse;
text-align:center;
}

.schedule__table th,
.schedule__table td{
border:1px solid #ddd;
padding:10px;
}

/* ===== Buttons ===== */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:48px;
padding:0 24px;
border-radius:999px;
font-weight:bold;
}

.btn--primary{
background:var(--color-main);
color:#fff;
}

.btn--line{
background:var(--color-line);
color:#fff;
}

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

.cta{
background:#e9f4ff;
padding:var(--space-lg) 0;
text-align:center;
}

.cta__buttons{
display:flex;
flex-direction:column;
gap:16px;
margin-top:var(--space-md);
}

@media(min-width:768px){

.cta__buttons{
flex-direction:row;
justify-content:center;
}

}