/* ======================================================
   HEALTH & BODY
   Loaded after main.css on Health & Body pages.

   Category colour:
   #a3475b
   ====================================================== */


/* ------------------------------------------------------
   CATEGORY VARIABLES
   ------------------------------------------------------ */

.health-body-page {
    --health-color: #a3475b;
    --health-dark: #84384a;
    --health-deep: #682b3b;
    --health-soft: #faeaee;
    --health-pale: #fdf6f8;
}


/* ======================================================
   HERO
   ====================================================== */

.health-body-page .topic-hero {
    min-height: 415px;
}

.health-body-page .topic-hero-inner {
    padding-top: 58px;
    padding-bottom: 58px;
}

.health-body-page .topic-hero-content {
    max-width: 800px;
}

.health-body-page .topic-hero h1 {
    font-size: clamp(46px, 5.2vw, 66px);
    line-height: 1.01;
}

.health-body-page .topic-hero h1 span {
    color: #efb8c4;
}

.health-body-page .topic-hero-media picture,
.health-body-page .topic-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
}

.health-body-page .topic-hero-media img {
    object-fit: cover;
    object-position: center center;
}

.health-body-page .topic-hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(91, 31, 47, 0.93) 0%,
            rgba(132, 56, 74, 0.81) 43%,
            rgba(153, 65, 86, 0.43) 72%,
            rgba(153, 65, 86, 0.16) 100%
        );
}


/* Category-coloured hero label */

.health-body-page .topic-kicker {
    display: inline-block;
    width: fit-content;
    padding: 9px 12px;
    border-radius: 6px;
    background: var(--health-color);
    color: #fff;
}


/* ======================================================
   CATEGORY INTRO
   ====================================================== */

.health-body-page .topic-intro-item {
    border-top-color: var(--health-color);
}

.health-body-page .topic-intro-icon {
    background: var(--health-soft);
    color: var(--health-color);
}

.health-body-page .topic-intro-item h2 {
    color: var(--health-deep);
}


/* ======================================================
   QUESTIONS
   ====================================================== */

.health-body-page .topic-questions {
    padding-top: 66px;
    padding-bottom: 70px;
}

.health-body-page .topic-section-heading .section-kicker {
    color: var(--health-color);
}

.health-body-page .topic-question-card {
    min-height: 275px;
    border-top-color: var(--health-color);
}

.health-body-page .topic-question-mark {
    background: var(--health-soft);
    color: var(--health-color);
}

.health-body-page .topic-question-label {
    color: var(--health-color);
}

.health-body-page .topic-question-body h3 a {
    color: inherit;
    text-decoration: none;
}

.health-body-page .topic-question-body h3 a:hover,
.health-body-page .topic-question-body h3 a:focus-visible {
    color: var(--health-color);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.health-body-page .topic-question-link {
    color: var(--health-color);
}

.health-body-page .topic-question-link:hover,
.health-body-page .topic-question-link:focus-visible {
    color: var(--health-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* ======================================================
   FOCUS
   ====================================================== */

.health-body-page .topic-question-card a:focus-visible {
    outline: 3px solid rgba(163, 71, 91, 0.30);
    outline-offset: 4px;
    border-radius: 3px;
}


/* ======================================================
   TABLET
   ====================================================== */

@media (max-width: 900px) {

    .health-body-page .topic-hero {
        min-height: 405px;
    }

    .health-body-page .topic-hero h1 {
        font-size: clamp(43px, 7vw, 57px);
    }

}


/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width: 760px) {

    .health-body-page .topic-hero {
        min-height: 0;
    }

    .health-body-page .topic-hero-inner {
        padding-top: 46px;
        padding-bottom: 48px;
    }

    .health-body-page .topic-hero-content {
        max-width: 100%;
    }

    .health-body-page .topic-hero h1 {
        font-size: clamp(39px, 9.5vw, 49px);
        line-height: 1.04;
        letter-spacing: -1.7px;
    }

    .health-body-page .topic-hero-desktop-break {
        display: none;
    }

    .health-body-page .topic-hero-content > p:last-child {
        margin-top: 18px;
        font-size: 16px;
        line-height: 1.5;
    }

    .health-body-page .topic-hero-media img {
        object-position: center center;
    }

    .health-body-page .topic-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(91, 31, 47, 0.92) 0%,
                rgba(132, 56, 74, 0.73) 56%,
                rgba(153, 65, 86, 0.30) 100%
            );
    }

    .health-body-page .topic-question-card {
        min-height: 0;
    }

    .health-body-page .topic-questions {
        padding-top: 48px;
        padding-bottom: 52px;
    }

}


/* ======================================================
   SMALL MOBILE
   ====================================================== */

@media (max-width: 520px) {

    .health-body-page .topic-hero-inner {
        padding-top: 40px;
        padding-bottom: 42px;
    }

    .health-body-page .topic-hero h1 {
        font-size: 40px;
        line-height: 1.05;
        letter-spacing: -1.4px;
    }

    .health-body-page .topic-hero-content > p:last-child {
        font-size: 16px;
        line-height: 1.48;
    }

    .health-body-page .topic-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(91, 31, 47, 0.94) 0%,
                rgba(132, 56, 74, 0.77) 58%,
                rgba(153, 65, 86, 0.30) 100%
            );
    }

}