/* Resource Read More page (Pages/ResourceDetail.cshtml), laid out like the template's Service Details.
   The hero is in page-hero.css; the "More Resources" cards are in resources.css. */

.rd-section {
    padding: 100px 0;
    background: #f4f7f5;
}

/* ---------- Main column ---------- */
.rd-main-img img {
    display: block;
    width: 100%;
    height: 440px;
    border-radius: 16px;
    object-fit: cover;
}

.rd-main-img {
    border-radius: 16px;
}

.rd-title {
    margin: 32px 0 0;
    color: var(--brand-green);
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 400;
    line-height: 48px;
}

.rd-subtitle {
    margin: 40px 0 0;
    color: var(--brand-green);
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
}

.rd-text {
    margin: 16px 0 0;
    color: rgba(26, 86, 50, 0.8);
    font-size: 17px;
    line-height: 28px;
}

.rd-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.rd-highlight-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rd-highlight-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 60px;
    height: 60px;
    border: 1px solid var(--brand-green);
    border-radius: 50%;
    background: #fff;
    color: var(--brand-green);
    font-size: 26px;
}

.rd-highlight h3 {
    margin: 0;
    color: var(--brand-green);
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
}

.rd-highlight p {
    margin: 14px 0 0;
    color: rgba(26, 86, 50, 0.8);
    font-size: 16px;
    line-height: 26px;
}

/* Photo beside a short checklist. */
.rd-feature {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 30px;
    align-items: center;
    margin-top: 40px;
}

.rd-feature-img {
    border-radius: 16px;
}

.rd-feature-img img {
    display: block;
    width: 100%;
    height: 320px;
    border-radius: 16px;
    object-fit: cover;
}

.rd-feature-body h3 {
    margin: 0;
    color: var(--brand-green);
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
}

.rd-feature-body p {
    margin: 14px 0 0;
    color: rgba(26, 86, 50, 0.8);
    font-size: 16px;
    line-height: 26px;
}

.rd-checks {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.rd-checks li {
    display: flex;
    gap: 10px;
    color: var(--brand-green);
    font-size: 17px;
    line-height: 26px;
}

.rd-checks li + li {
    margin-top: 10px;
}

.rd-checks .bi {
    flex: none;
    font-size: 20px;
    line-height: 26px;
    -webkit-text-stroke: 0.6px;
}

.rd-checks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 30px;
}

.rd-checks-grid li + li {
    margin-top: 0;
}

/* ---------- Sidebar ---------- */
.rd-side {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.rd-box {
    padding: 24px;
    border-radius: 12px;
    background: #dfe8e2;
}

.rd-box h4,
.rd-help h4 {
    margin: 0 0 18px;
    color: var(--brand-green);
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
}

.rd-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rd-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    border-radius: 30px;
    background: #fff;
    color: var(--brand-green);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.rd-links a .bi {
    flex: none;
    font-size: 13px;
    -webkit-text-stroke: 0.6px;
}

.rd-links a:hover,
.rd-links a.is-active {
    background: var(--brand-green);
    color: #fff;
}

.rd-help {
    padding: 28px 24px;
    border-radius: 12px;
    background: var(--brand-lime);
}

.rd-help h4 {
    margin-bottom: 10px;
}

.rd-help p {
    margin: 0;
    color: rgba(26, 86, 50, 0.85);
    font-size: 16px;
    line-height: 24px;
}

.rd-help-btn {
    display: inline-block;
    margin-top: 18px;
    padding: 12px 22px;
    border: 1px solid var(--brand-green);
    border-radius: 30px;
    background: #fff;
    color: var(--brand-green);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.rd-help-btn:hover {
    background: var(--brand-green);
    color: #fff;
}

/* Shown instead of the article when the address doesn't match any resource. */
.rd-missing {
    text-align: center;
}

.rd-missing .rd-title {
    margin-top: 0;
}

.rd-missing .res-btn {
    margin-top: 24px;
}

/* ---------- More resources ---------- */
.rd-more {
    margin-top: 90px;
}

.rd-more-title {
    margin: 0 0 40px;
    color: var(--brand-green);
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 400;
    line-height: 52px;
    text-align: center;
}

/* Side by side: the sidebar stays in view below the fixed header (85px) while the article scrolls, and
   stops when the article ends, before "More Resources". On short screens the list scrolls inside its box
   so the Contact box is always visible. */
@media (min-width: 992px) {
    .rd-side {
        position: sticky;
        top: 109px;
        gap: 20px;
        max-height: calc(100vh - 133px);
    }

    /* Slightly tighter than on mobile so all twelve links fit on a typical laptop screen. */
    .rd-box {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 20px;
    }

    .rd-box h4 {
        margin-bottom: 14px;
    }

    .rd-links {
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .rd-help {
        flex: none;
        padding: 22px 24px;
    }
}

@media (max-width: 991.98px) {
    .rd-section {
        padding: 70px 0;
    }

    .rd-side {
        margin-top: 20px;
    }

    .rd-more {
        margin-top: 70px;
    }
}

@media (max-width: 767.98px) {
    .rd-main-img img {
        height: 300px;
    }

    .rd-title {
        font-size: 32px;
        line-height: 40px;
    }

    .rd-subtitle {
        font-size: 28px;
        line-height: 36px;
    }

    .rd-highlights,
    .rd-feature,
    .rd-checks-grid {
        grid-template-columns: 1fr;
    }

    .rd-feature-img img {
        height: 260px;
    }

    .rd-more-title {
        font-size: 34px;
        line-height: 42px;
    }
}