/* ==========================================================================
   Residential Care landing  (/aged-care-facilities/)
   --------------------------------------------------------------------------
   Loaded AFTER style-home-care-new.css from tp-residential-care.php. The page
   reuses every .rhc-* component; these rules only cover where the residential
   content differs in shape: 4 care types, 4 steps, a 6-card grid, FAQ answers
   that contain lists, and a two-button CTA banner. Scoped to .rrc-page.
   ========================================================================== */

/* --- Card grids ------------------------------------------------------------ */

.rrc-page .rhc-services-grid.rrc-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

.rrc-page .rhc-services-grid.rrc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.rrc-page .rhc-service-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

/* --- Four steps ------------------------------------------------------------ */

.rrc-page .rhc-steps-grid.rrc-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1200px;
    gap: 28px;
}

/* --- CTA banner with two actions ------------------------------------------ */

.rrc-page .rrc-banner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
}

/* --- CTA banner: one block with the steps above it ------------------------ */
/* style-home-care-new.css paints the band #95C970 with white text. Andrew
   (28 Sep 2026) wants it to read as part of the steps section: the same pale
   green as the tiles, near-black text, buttons that invert on hover. Home
   Care keeps its own treatment. */

.rrc-page .rhc-steps-grid {
    padding-bottom: 0;      /* the shared 70px now lives in the band's own top padding */
}

.rrc-page .rhc-steps-banner {
    background: #D6EAC7;
    padding: 64px 0 70px;   /* 64 under the tiles; 70 at the foot mirrors the section's top */
}

.rrc-page .rhc-steps-banner-title,
.rrc-page .rhc-steps-banner-text,
.rrc-page .rhc-steps-banner-text a,
.rrc-page .rhc-banner-phone,
.rrc-page .rhc-banner-phone a,
.rrc-page .rhc-banner-phone a:hover {
    color: #1c1c1c;
}

.rrc-page .rhc-banner-phone svg {
    fill: #1c1c1c;
}

.rrc-page .rhc-steps-banner .rhc-btn {
    color: #1c1c1c;
    border-color: #1c1c1c;
}

.rrc-page .rhc-steps-banner .rhc-btn:hover {
    background: #1c1c1c;
    color: #ffffff;
    border-color: #1c1c1c;
}

/* --- FAQ: breathing room above the heading -------------------------------- */
/* The shared sheet gives the FAQ section 20px on top; every other section on
   this page runs 60-70px, so the heading sat tight against the green band. */

.rrc-page .rhc-faq-section {
    padding-top: 60px;
}

/* --- FAQ answers that hold paragraphs and lists --------------------------- */

.rrc-page div.rhc-faq-answer p {
    margin: 0 0 12px;
}

.rrc-page .rhc-faq-answer ul {
    margin: 8px 0 0 1.25rem;
    padding: 0;
}

.rrc-page .rhc-faq-answer li {
    font-size: 1.125rem;
    line-height: 1.55;
    color: #333333;
    margin-bottom: 6px;
}

.rrc-page .rhc-faq-answer a {
    text-decoration: underline;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 900px) {

    .rrc-page .rhc-services-grid.rrc-grid-4,
    .rrc-page .rhc-services-grid.rrc-grid-3,
    .rrc-page .rhc-steps-grid.rrc-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {

    .rrc-page .rhc-services-grid.rrc-grid-4,
    .rrc-page .rhc-services-grid.rrc-grid-3,
    .rrc-page .rhc-steps-grid.rrc-grid-4 {
        grid-template-columns: 1fr;
    }

    .rrc-page .rrc-banner-actions {
        flex-direction: column;
        align-items: center;
    }
}