/* Residential Programmes page styles.
   Shared: page-hero, balance-cta-section (assets/css/custom.css). */

body.page-template-residential-page {
    --rp-olive: #50593c;
    --rp-olive-dark: #3f472f;
    --rp-rust: #96472b;
    --rp-heading: #250806;
    --rp-text: #606368;
    --rp-cream: #faf7f0;
}

/* ---- Shared bits ---- */
.rp-kicker {
    display: block;
    color: var(--rp-rust);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.rp-kicker--rule::after {
    content: '';
    display: block;
    width: 44px;
    height: 1px;
    margin: 18px 0 0;
    background: #b7826a;
}
.rp-title {
    margin: 14px 0 12px;
    color: var(--rp-heading);
    font-family: var(--font-secondary);
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: 1.1;
}
.rp-desc {
    margin: 0;
    color: var(--rp-text);
    font-size: var(--fs-body);
    line-height: 1.6;
}
.rp-heading {
    max-width: 980px;
    margin: 0 auto 38px;
    text-align: center;
}
.rp-heading .rp-kicker::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    margin: 12px auto 0;
    background: #b7826a;
}
.rp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 3px;
    background: var(--rp-olive);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 1.6px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .2s ease;
}
.rp-btn:hover {
    background: var(--rp-olive-dark);
    color: #fff;
}
.rp-leaf {
    position: absolute;
    width: 190px;
    fill: #e6e2d4;
    stroke: #d8d3c2;
    stroke-width: 1.2;
    opacity: .75;
    pointer-events: none;
}
.rp-leaf path:first-child {
    fill: none;
}

/* ---- Intro strip ---- */
.rp-intro {
    position: relative;
    overflow: hidden;
    padding: 48px 0;
    background: var(--rp-cream);
}
.rp-leaf--left {
    top: -20px;
    left: -40px;
    transform: rotate(160deg);
}
.rp-leaf--right {
    right: -50px;
    bottom: -90px;
    transform: rotate(-30deg);
}
.rp-intro__row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rp-intro__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 60px 0 0;
    border-right: 1px solid #c9917a;
}
.rp-intro__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #dfddce;
}
.rp-intro__icon svg {
    width: 52px;
    height: 52px;
    fill: none;
    stroke: #3b421b;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rp-intro__label {
    color: var(--rp-rust);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.rp-intro__label::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    margin: 12px auto 0;
    background: #c9917a;
}
.rp-intro__content {
    padding-left: 56px;
}
/* Residential Care intro - mirrors the About Us intro (about-us-page.css):
   gold icon and caps tagline on the left, a gold divider, text on the right,
   on white with the leaf sprays at both edges. */
.rp-about {
    position: relative;
    background-color: #fff;
    background-image: url('../assets/images/lef-background-left.webp'), url('../assets/images/lef-background-right.webp');
    background-position: left center, right center;
    background-repeat: no-repeat;
    background-size: 130px auto;
}
.rp-about__grid {
    display: grid;
    grid-template-columns: 0.85fr 1.3fr;
    align-items: center;
    gap: 80px;
}
.rp-about__brand {
    padding: 15px 55px 15px 0;
    text-align: center;
    border-right: 1px solid #bba270;
}
.rp-about__icon {
    display: block;
    width: 58px;
    height: 58px;
    margin: 0 auto;
    fill: var(--page-gold);
}
.rp-about__brand .about-section__tagline {
    color: var(--page-gold);
    line-height: 1.6;
}
.rp-about__subtitle {
    margin: 26px 0 12px;
    color: var(--color-primary);
    font-family: var(--font-secondary);
    font-size: var(--fs-h3);
    font-weight: 500;
    line-height: 1.25;
}
@media (max-width: 991px) {
    .rp-about__grid { gap: 45px; }
}
@media (max-width: 767px) {
    .rp-about { background-size: 65px auto; }
    .rp-about__grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .rp-about__brand { padding: 0 0 30px; border: 0; border-bottom: 1px solid #bba270; }
}
.rp-intro__title {
    margin: 0 0 14px;
    color: var(--rp-heading);
    font-family: var(--font-secondary);
    font-size: var(--fs-h3);
    font-weight: 600;
}
.rp-intro__desc {
    margin: 0;
    color: var(--rp-text);
    font-size: var(--fs-body);
    line-height: 1.6;
}

/* ---- Four pathway cards ---- */
.rp-pathways {
    padding: 64px 0 70px;
    background: #fff;
}

.rp-pathway-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.rp-card {
    display: flex;
    flex-direction: column;
    padding: 22px 22px 18px;
    border-radius: 4px;
    color: #3a2821;
}
.rp-card--sage  { background: #e8e8de; --rp-card-ink: #3d441d; --rp-card-circle: #d8d7c5; --rp-card-foot: #efefe7; }
.rp-card--blush { background: #f5ece3; --rp-card-ink: #8e3a1d; --rp-card-circle: #eadacb; --rp-card-foot: #efe3d7; }
.rp-card--stone { background: #ebe8e1; --rp-card-ink: #3d441d; --rp-card-circle: #dcd8cd; --rp-card-foot: #f1efea; }
/* Rejuvenate: a warm clay tint in the same light family as the other cards
   (was a dark rust card with white text), with rust as its accent. */
.rp-card--rust  { background: #f1dfd3; --rp-card-ink: #8e3a1d; --rp-card-circle: #e6c7b4; --rp-card-foot: #f8ece4; }
.rp-card__top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.rp-card__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--rp-card-circle);
}
.rp-card__icon svg,
.rp-card__foot-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--rp-card-ink);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rp-card__num {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    color: var(--rp-card-ink);
    font-size: 14px;
}
.rp-card__num::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .45;
}
.rp-card__label {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: var(--fs-h3);
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.rp-card__duration {
    margin: 2px 0 18px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.rp-card__title {
    margin: 0 0 8px;
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-weight: 600;
}
.rp-card__desc {
    margin: 0 0 18px;
    color: #6c6e6b;
    font-size: var(--fs-small);
    line-height: 1.5;
}
/* Narrow cards: justified text leaves wide gaps between words, so keep
   these left-aligned (justify.js justifies paragraphs site-wide). */
.rp-card .rp-card__desc.is-justified {
    text-align: left;
}
.rp-card__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding: 10px 12px;
    border-radius: 3px;
    background: var(--rp-card-foot);
}
.rp-card__foot-icon {
    display: flex;
    flex: none;
    padding-right: 12px;
    border-right: 1px solid rgb(0 0 0 / 15%);
}
.rp-card__foot-icon svg {
    width: 26px;
    height: 26px;
}
.rp-card__foot p {
    margin: 0;
    color: #515542;
    font-size: var(--fs-xs);
    line-height: 1.45;
}
.rp-card--blush .rp-card__foot p { color: #623a2a; }
.rp-card--rust .rp-card__foot p { color: #623a2a; }

/* ---- What your stay may include ---- */
.rp-includes {
    padding: 60px 0 64px;
    background: var(--rp-olive);
}
.rp-heading--light .rp-kicker {
    color: rgb(255 255 255 / 85%);
}
.rp-heading--light .rp-kicker::after {
    display: none;
}
.rp-heading--light .rp-title {
    color: #fff;
}
.rp-heading--light .rp-desc {
    color: rgb(255 255 255 / 82%);
}
.rp-includes__row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.rp-includes__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.rp-includes__item + .rp-includes__item {
    border-left: 1px solid rgb(255 255 255 / 30%);
}
.rp-includes__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin-bottom: 14px;
    border: 1.5px solid rgb(255 255 255 / 85%);
    border-radius: 50%;
}
.rp-includes__icon svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rp-includes__label {
    color: #fff;
    font-family: var(--font-secondary);
    font-size: var(--fs-lead);
    line-height: 1.2;
}

/* ---- The residential experience ---- */
.rp-experience {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--rp-cream);
}
.rp-experience__figure {
    position: relative;
    min-height: 480px;
}
.rp-experience__figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rp-experience__content {
    align-self: center;
    max-width: 640px;
    padding: 60px clamp(32px, 5vw, 90px);
}
.rp-experience__content .rp-title {
    margin-top: 26px;
    font-size: var(--fs-h2);
}
.rp-experience__content .rp-desc {
    margin-bottom: 30px;
}
/* Photo removed: one centred column of text. */
.rp-experience--text {
    grid-template-columns: 1fr;
}
.rp-experience--text .rp-experience__content {
    max-width: 760px;
    margin: 0 auto;
    padding: 64px 24px;
    text-align: center;
}
.rp-experience--text .rp-kicker--rule::after {
    margin-right: auto;
    margin-left: auto;
}

/* ---- Responsive ---- */
@media (max-width: 1199px) {
    .rp-pathway-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .rp-includes__row {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 36px;
    }
    .rp-includes__item:nth-child(4) {
        border-left: 0;
    }
}
@media (max-width: 991px) {
    .rp-intro__row {
        flex-direction: column;
        text-align: center;
    }
    .rp-intro__badge {
        padding: 0 0 24px;
        border-right: 0;
    }
    .rp-intro__content {
        padding: 24px 0 0;
    }
    .rp-experience {
        grid-template-columns: 1fr;
    }
    .rp-experience__figure {
        min-height: 340px;
    }
    .rp-experience__content {
        max-width: none;
        padding: 48px 24px;
    }
}
@media (max-width: 575px) {
    .rp-pathway-grid {
        grid-template-columns: 1fr;
    }
    .rp-includes__row {
        grid-template-columns: repeat(2, 1fr);
    }
    .rp-includes__item:nth-child(odd) {
        border-left: 0;
    }
    .rp-includes__item:nth-child(4) {
        border-left: 1px solid rgb(255 255 255 / 30%);
    }
}

/* Desktop sizing for icons and cards */
.rp-intro { padding: 60px 0; }
.rp-intro__icon { width: 120px; height: 120px; }
.rp-intro__icon svg { width: 64px; height: 64px; }
.rp-intro__label { font-size: var(--fs-body); }
.rp-intro__title { font-size: var(--fs-h2); }
.rp-intro__desc { font-size: var(--fs-lead); }
.rp-heading .rp-kicker { font-size: var(--fs-xs); }
.rp-heading .rp-title { font-size: var(--fs-h2); }
.rp-heading .rp-desc { font-size: var(--fs-lead); }
.rp-card { padding: 26px 24px 20px; }
.rp-card__icon { width: 66px; height: 66px; }
.rp-card__icon svg { width: 38px; height: 38px; }
.rp-card__num { font-size: 16px; }
.rp-card__label { font-size: var(--fs-h2); }
.rp-card__duration { font-size: var(--fs-small); }
.rp-card__title { font-size: var(--fs-h4); }
.rp-card__desc { font-size: var(--fs-body); }
.rp-card__foot p { font-size: var(--fs-small); }
.rp-card__foot-icon svg { width: 30px; height: 30px; }
.rp-includes__icon { width: 100px; height: 100px; }
.rp-includes__icon svg { width: 52px; height: 52px; }
.rp-includes__label { font-size: var(--fs-h4); }
.rp-experience__content .rp-desc { font-size: var(--fs-lead); }
.rp-experience__figure { min-height: 560px; }