/*=========================================================
    PROJECT : Hope & Harmony Spectrum Inc.
    FILE    : respite-programs.css
    PURPOSE : Weekend and Overnight Respite Programme cards
=========================================================*/

.respite-program{
    padding:100px 0;
    background:#f8fbff;
}

.respite-program-overnight{
    background:var(--white);
}

.respite-program-grid{
    display:grid;
    grid-template-columns:minmax(0, .9fr) minmax(0, 1fr);
    align-items:center;
    gap:70px;
}

.respite-program-poster{
    position:relative;
    padding:12px;
    border-radius:30px;
    background:linear-gradient(135deg, rgba(39,93,169,.16), rgba(247,193,83,.32));
    box-shadow:var(--shadow-lg);
}

.respite-program-poster img{
    display:block;
    width:100%;
    max-height:610px;
    object-fit:cover;
    object-position:top;
    border-radius:21px;
}

.respite-program-content h2{
    margin:16px 0;
    line-height:1.22;
}

.respite-program-content > p{
    max-width:590px;
    line-height:1.8;
}

.respite-feature-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    margin:28px 0;
}

.respite-feature-list div{
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px 15px;
    border-radius:14px;
    background:var(--white);
    box-shadow:var(--shadow-sm);
    font-weight:600;
}

.respite-feature-list i{
    color:var(--primary-color);
}

.respite-program-note{
    color:var(--primary-color);
    font-weight:700;
}

.respite-schedule{
    display:grid;
    gap:12px;
    margin:28px 0;
}

.respite-schedule-item{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:17px 20px;
    border-left:4px solid var(--accent-color);
    border-radius:0 14px 14px 0;
    background:#f8fbff;
}

.respite-schedule-item span{ font-weight:600; }
.respite-schedule-item strong{ color:var(--primary-color); white-space:nowrap; }

.respite-fees{
    margin:28px 0 32px;
    padding:23px 25px;
    border-radius:18px;
    background:rgba(39,93,169,.07);
}

.respite-fees h3{ margin-bottom:9px; color:var(--primary-color); }
.respite-fees p{ margin:0 0 9px; line-height:1.65; }
.respite-fees p:last-child{ margin-bottom:0; }

@media(max-width:991px){
    .respite-program{ padding:80px 0; }
    .respite-program-grid{ grid-template-columns:1fr; gap:42px; }
    .respite-program-grid-reverse .respite-program-content{ order:1; text-align:center; }
    .respite-program-grid-reverse .respite-program-poster{ order:2; }
    .respite-program-content{ text-align:center; }
    .respite-program-content > p{ margin-left:auto; margin-right:auto; }
    .respite-feature-list{ max-width:660px; margin-left:auto; margin-right:auto; text-align:left; }
    .respite-schedule{ max-width:650px; margin-left:auto; margin-right:auto; text-align:left; }
    .respite-fees{ max-width:650px; margin-left:auto; margin-right:auto; text-align:left; }
    .respite-program-poster{ width:min(100%, 660px); margin:auto; }
}

@media(max-width:576px){
    .respite-program{ padding:65px 0; }
    .respite-program-content h2{ font-size:2rem; }
    .respite-feature-list{ grid-template-columns:1fr; }
    .respite-schedule-item{ flex-direction:column; gap:5px; text-align:left; }
    .respite-schedule-item strong{ white-space:normal; }
    .respite-fees{ padding:20px; }
}