/* /css/home.css
 * Chimedics Exchange homepage presentation layer
 * Page-specific only; existing site.css remains the base stylesheet.
 */

.home-page {
    --home-ink: #16242f;
    --home-navy: #102f49;
    --home-navy-deep: #092438;
    --home-blue: #dff3fb;
    --home-blue-soft: #eef8fc;
    --home-line: #cbdce5;
    --home-red: #dd0000;
    --home-white: #ffffff;
    overflow: hidden;
}

.home-page .section {
    position: relative;
}

.home-page .section-heading,
.home-page .home-heading {
    max-width: 820px;
}

.home-page .home-heading h2,
.home-page .home-solution h2 {
    font-size: clamp(1.9rem, 2.7vw, 2.65rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */
.home-hero {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: center;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgb(8 28 43 / 14%) 0 52%, transparent 52%),
        linear-gradient(180deg, transparent 65%, rgb(6 25 39 / 28%));
    pointer-events: none;
}

.home-hero__content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding-block: 76px 98px;
}

.home-hero__content h1 {
    max-width: 760px;
    font-size: clamp(2.45rem, 4.2vw, 4rem);
    line-height: .98;
    letter-spacing: -0.045em;
}

.home-hero__content p {
    max-width: 650px;
    font-size: clamp(1.08rem, 1.6vw, 1.32rem);
    line-height: 1.65;
}

.home-hero__edge {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(38vw, 530px);
    height: 12px;
    background: var(--home-red);
}

/* ---------------------------------------------------------
   PROBLEM CARDS
--------------------------------------------------------- */
.home-problem {
    padding-block: clamp(72px, 8vw, 118px);
    background:
        linear-gradient(90deg, transparent 0 67%, rgb(214 237 247 / 32%) 67%),
        #f7fbfd;
}

.home-problem .problem-grid {
    gap: 20px;
}

.home-problem .problem-grid > * {
    position: relative;
    overflow: hidden;
    border: 1px solid #dfeaf0;
    background: #fff;
    box-shadow: 0 14px 38px rgb(24 56 76 / 6%);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.home-problem .problem-grid > *::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--home-red);
    transform: scaleY(.18);
    transform-origin: top;
    transition: transform .22s ease;
}

@media (hover: hover) and (pointer: fine) {
    .home-problem .problem-grid > *:hover {
        transform: translateY(-4px);
        border-color: #c5dce7;
        box-shadow: 0 20px 48px rgb(24 56 76 / 10%);
    }

    .home-problem .problem-grid > *:hover::before {
        transform: scaleY(1);
    }
}

/* ---------------------------------------------------------
   SOLUTION SPLIT
--------------------------------------------------------- */
.home-solution {
    padding-block: clamp(84px, 9vw, 132px);
    background: #fff;
}

.home-solution__grid {
    align-items: stretch;
    gap: clamp(45px, 7vw, 100px);
}

.home-solution__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-solution__media {
    position: relative;
    min-height: 520px;
    overflow: visible;
}

.home-solution__media::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: -32px;
    top: 34px;
    width: 72%;
    height: calc(100% - 12px);
    background: var(--home-blue);
}

.home-solution__media::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: -18px;
    bottom: -18px;
    width: 118px;
    height: 118px;
    border-right: 8px solid var(--home-red);
    border-bottom: 8px solid var(--home-red);
}

.home-solution__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    box-shadow: 0 22px 58px rgb(17 51 73 / 14%);
}

/* ---------------------------------------------------------
   WORKFORCE / METRICS
--------------------------------------------------------- */
.home-workforce {
    position: relative;
    padding-block: clamp(80px, 9vw, 132px);
    background:
        linear-gradient(100deg, #103d5d 0%, #0d3652 56%, #092b43 100%);
    overflow: hidden;
}

.home-workforce::after {
    content: "";
    position: absolute;
    right: -110px;
    top: -130px;
    width: 390px;
    height: 390px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 50%;
    box-shadow: 0 0 0 65px rgb(255 255 255 / 2%), 0 0 0 130px rgb(255 255 255 / 2%);
}

.home-workforce .container {
    position: relative;
    z-index: 1;
}

.home-heading--light h2,
.home-heading--light p {
    color: #fff;
}

.home-workforce .metric-grid {
    gap: 18px;
}

.home-workforce .metric-grid > * {
    background: rgb(255 255 255 / 10%);
    border: 1px solid rgb(255 255 255 / 22%);
    backdrop-filter: blur(4px);
    box-shadow: 0 16px 42px rgb(0 0 0 / 10%);
}

/* Keep all metric content high-contrast on the dark workforce section. */
.home-workforce .metric-card strong {
    color: #ffffff;
    text-shadow: 0 1px 0 rgb(0 0 0 / 8%);
}

.home-workforce .metric-card span {
    color: #d9f1fb;
}

.home-workforce .metric-card p {
    color: #d5e4ec;
}

.home-workforce .eyebrow {
    color: #9edcf5;
}

@media (hover: hover) and (pointer: fine) {
    .home-workforce .metric-card {
        transition: transform .22s ease, background-color .22s ease, border-color .22s ease;
    }

    .home-workforce .metric-card:hover {
        transform: translateY(-4px);
        background: rgb(255 255 255 / 14%);
        border-color: rgb(255 255 255 / 32%);
    }
}

/* ---------------------------------------------------------
   DISCIPLINES
--------------------------------------------------------- */
.home-disciplines {
    padding-block: clamp(78px, 8vw, 120px);
    background: linear-gradient(180deg, #eff8fc 0%, #f9fcfd 100%);
}

.home-disciplines .specialty-grid {
    gap: 18px;
}

.home-disciplines .specialty-grid > * {
    border: 1px solid #dce9ef;
    box-shadow: 0 9px 30px rgb(20 54 75 / 5%);
    transition: transform .22s ease, box-shadow .22s ease;
}

@media (hover: hover) and (pointer: fine) {
    .home-disciplines .specialty-grid > *:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 42px rgb(20 54 75 / 10%);
    }
}

/* ---------------------------------------------------------
   DEVELOPMENT PROGRAMME TEASER
--------------------------------------------------------- */
.home-development {
    position: relative;
    background: var(--home-white);
}

.home-development__problem {
    position: relative;
    padding-block: clamp(76px, 8vw, 122px);
    background:
        linear-gradient(90deg, #fff 0 64%, #edf7fb 64% 100%);
}

.home-development__problem::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32%;
    height: 5px;
    background: var(--home-red);
}

.home-development__problem-grid {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: clamp(28px, 5vw, 76px);
    align-items: start;
}

.home-development__index {
    display: grid;
    justify-items: start;
    gap: 16px;
    padding-top: 10px;
    color: var(--home-navy);
}

.home-development__index span {
    font-size: 3.2rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.06em;
}

.home-development__index i {
    display: block;
    width: 2px;
    height: 92px;
    background: var(--home-red);
}

.home-development__index small {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .2em;
    color: #6f8593;
}

.home-development__problem-copy {
    max-width: 960px;
}

.home-development__problem-copy .eyebrow {
    margin-bottom: 24px;
}

.home-development__problem-copy h2 {
    max-width: 820px;
    margin: 0 0 28px;
    font-size: clamp(1.95rem, 3vw, 2.85rem);
    line-height: 1.04;
    letter-spacing: -.045em;
    color: var(--home-ink);
}

.home-development__lead {
    max-width: 840px;
    margin: 0 0 26px;
    font-size: clamp(1.1rem, 1.6vw, 1.28rem);
    line-height: 1.72;
    color: #415765;
}

.home-development__consequence {
    max-width: 820px;
    margin: 0;
    padding: 20px 24px 20px 28px;
    border-left: 4px solid var(--home-red);
    background: #f4f9fb;
    font-weight: 700;
    font-size: clamp(1.02rem, 1.4vw, 1.17rem);
    line-height: 1.65;
    color: var(--home-ink);
}

.home-development__possibility {
    position: relative;
    padding-block: clamp(72px, 8vw, 112px);
    color: #fff;
    background:
        radial-gradient(circle at 84% 22%, rgb(103 175 210 / 16%), transparent 25%),
        linear-gradient(110deg, var(--home-navy-deep) 0%, var(--home-navy) 100%);
    overflow: hidden;
}

.home-development__possibility::before {
    content: "";
    position: absolute;
    left: -80px;
    bottom: -180px;
    width: 420px;
    height: 420px;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgb(255 255 255 / 2%), 0 0 0 140px rgb(255 255 255 / 2%);
}

.home-development__possibility-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(46px, 8vw, 120px);
    align-items: center;
}

.home-development__dream strong {
    display: block;
    max-width: 520px;
    font-size: clamp(2rem, 3.3vw, 3.25rem);
    line-height: .98;
    letter-spacing: -.05em;
}

.home-development__red-line {
    width: 90px;
    height: 8px;
    margin-top: 34px;
    background: var(--home-red);
}

.home-development__answer {
    position: relative;
    padding: clamp(30px, 4vw, 52px);
    border: 1px solid rgb(255 255 255 / 14%);
    background: rgb(255 255 255 / 7%);
}

.home-development__answer::before {
    content: "“";
    position: absolute;
    right: 28px;
    top: 3px;
    font-family: Georgia, serif;
    font-size: 7rem;
    line-height: 1;
    color: rgb(255 255 255 / 8%);
}

.home-development__answer p {
    position: relative;
    margin: 0 0 30px;
    max-width: 760px;
    font-size: clamp(1.22rem, 2vw, 1.62rem);
    line-height: 1.62;
    color: #fff;
}

.home-development__answer strong {
    position: relative;
    display: block;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    line-height: 1.35;
    color: #fff;
}

.home-development__programme {
    background: var(--home-blue);
    border-bottom: 1px solid #c9e3ee;
}

.home-development__programme-inner {
    min-height: 210px;
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) auto;
    gap: clamp(22px, 4vw, 58px);
    align-items: center;
}

.home-development__programme-mark {
    position: relative;
    width: 72px;
    height: 72px;
}

.home-development__programme-mark span {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    border: 2px solid var(--home-navy);
    border-radius: 50%;
}

.home-development__programme-mark span:nth-child(1) { left: 0; top: 16px; }
.home-development__programme-mark span:nth-child(2) { right: 0; top: 16px; }
.home-development__programme-mark span:nth-child(3) { left: 16px; bottom: 0; border-color: var(--home-red); }

.home-development__programme-title small {
    display: block;
    margin-bottom: 7px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .2em;
    color: #687e8c;
}

.home-development__programme-title h3 {
    max-width: 800px;
    margin: 0;
    font-size: clamp(1.65rem, 2.4vw, 2.45rem);
    line-height: 1.04;
    letter-spacing: -.04em;
    color: var(--home-navy-deep);
}

.home-development__button {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    min-height: 54px;
    padding-inline: 26px;
    border: 1px solid var(--home-red);
    background: var(--home-red);
    color: #fff;
    white-space: nowrap;
    box-shadow: none;
}

.home-development__button span {
    font-size: 1.35rem;
    transition: transform .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .home-development__button:hover {
        background: #bb0000;
        border-color: #bb0000;
        color: #fff;
    }

    .home-development__button:hover span {
        transform: translateX(5px);
    }
}

/* ---------------------------------------------------------
   FINAL CTA
--------------------------------------------------------- */
/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 900px) {
    .home-hero {
        min-height: 540px;
    }

    .home-solution__media,
    .home-solution__media img {
        min-height: 420px;
    }

    .home-development__problem-grid {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .home-development__possibility-grid {
        grid-template-columns: 1fr;
    }

    .home-development__programme-inner {
        grid-template-columns: 72px minmax(0, 1fr);
        padding-block: 38px;
    }

    .home-development__button {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .home-hero {
        min-height: 510px;
        background-position: 62% center;
    }

    .home-hero__content {
        padding-block: 58px 72px;
    }

    .home-hero__edge {
        width: 42%;
        height: 7px;
    }

    .home-solution__media {
        min-height: 330px;
    }

    .home-solution__media img {
        min-height: 330px;
    }

    .home-solution__media::before {
        left: -14px;
        top: 18px;
    }

    .home-solution__media::after {
        width: 72px;
        height: 72px;
        right: -8px;
        bottom: -8px;
        border-width: 5px;
    }

    .home-development__problem {
        background: #fff;
    }

    .home-development__problem::after {
        width: 42%;
    }

    .home-development__problem-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .home-development__index {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0;
    }

    .home-development__index span {
        font-size: 1.4rem;
    }

    .home-development__index i {
        width: 54px;
        height: 2px;
    }

    .home-development__index small {
        writing-mode: initial;
        transform: none;
    }

    .home-development__consequence {
        padding: 18px 18px 18px 20px;
    }

    .home-development__dream strong {
        font-size: clamp(2.35rem, 13vw, 4rem);
    }

    .home-development__answer {
        padding: 26px 22px;
    }

    .home-development__programme-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .home-development__programme-mark {
        width: 62px;
        height: 62px;
    }

    .home-development__programme-mark span {
        width: 35px;
        height: 35px;
    }

    .home-development__programme-mark span:nth-child(3) {
        left: 14px;
    }

    .home-development__button {
        grid-column: 1;
        width: 100%;
        justify-content: space-between;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page *,
    .home-page *::before,
    .home-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* ---------------------------------------------------------
   LIGHTHOUSE ACCESSIBILITY — HOMEPAGE CONTRAST
   Alleen selectors die op de homepage door Lighthouse zijn gemeld.
--------------------------------------------------------- */

/* Eyebrows op witte achtergrond: was #8fd3f1 (1.64:1). */
.home-development__problem-copy .eyebrow,
.home-solution .eyebrow {
    color: #397996;
}

/* Programme-label op #dff3fb: was #687e8c (3.70:1). */
.home-development__programme-title small {
    color: #526a78;
}

/* Specialty-code op wit: was #d64045 (4.48:1). */
.home-disciplines .specialty-card__code {
    color: #d23c42;
}

/* Footer-bottom op #062f51: was #7e93a5 (4.30:1).
   home.css wordt alleen op de homepage geladen. */
.site-footer .footer-bottom > span {
    color: #8ca2b3;
}