/* ----------------------------------------------------------- */
/* --- section */
/* ----------------------------------------------------------- */

.wrapper > section {
    position: relative;
    background: var(--color-white);
    scroll-margin-top: 140px;

    @media (min-width: 680px) {
        scroll-margin-top: 150px;
    }

    @media (min-width: 820px) {
        scroll-margin-top: 158px;
    }

    @media (min-width: 960px) {
        scroll-margin-top: 162px;
    }

    .container {
        z-index: 10;
        position: relative;
        padding: var(--margin-xl) var(--margin-lg);
    }

    .content {
        @media (min-width: 680px) {
            padding: var(--margin-md) 0;
        }
    }

    .bg {
        z-index: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;

        &:empty {
            display: none;
        }
    }

    &.gray {
        background: var(--color-gray);
    }

    &.frame {
        .container {
            padding: var(--margin-sm) var(--margin-md);
        }

        .border {
            border-bottom: 2px solid var(--color-primary);
        }

        .content {
            background: var(--color-gray);
            padding: var(--margin-md) var(--margin-md);
            border-bottom: 1px solid var(--color-primary-lt);

            @media (min-width: 680px) {
                padding: var(--margin-md) var(--margin-xl);
            }

            @media (min-width: 960px) {
                padding: var(--margin-md) var(--margin-xxl);
            }
        }
    }

    h1 {
        font-size: clamp(1.8rem, 3vw, 3.3rem);
        line-height: calc(clamp(1.8rem, 3vw, 3.3rem) * 1.42);
        margin: clamp(var(--margin-md), 2.2vw, var(--margin-xl)) 0 var(--margin-sm);

        &:empty {
            display: none;
        }
    }

    h2 {
        font-size: clamp(1.6rem, 2.4vw, 3.2rem);
        line-height: calc(clamp(1.6rem, 2.4vw, 3.2rem) * 1.42);
        margin: clamp(var(--margin-md), 2.0vw, var(--margin-lg)) 0 var(--margin-xs);
    }

    h3 {
        font-size: clamp(1.5rem, 2.1vw, 2.8rem);
        line-height: calc(clamp(1.5rem, 2.1vw, 2.8rem) * 1.42);
        margin: clamp(var(--margin-sm), 2.0vw, var(--margin-md)) 0 var(--margin-xs);
    }

    p {
        em {
            font-style: normal;
            color: var(--color-secondary);
        }

        &.smaller {
            font-size: clamp(1.2rem, 2.4vw, 1.8rem);
            line-height: calc(clamp(1.2rem, 2.4vw, 1.8rem) * 1.62);
        }

        &.stronger {
            font-weight: 900;
            font-size: clamp(1.4rem, 2.4vw, 2.6rem);
            line-height: calc(clamp(1.4rem, 2.4vw, 2.6rem) * 1.48);
        }
    }

    .left {
        text-align: left;
    }

    ul {
        list-style: disc;
        padding-left: 1.4rem;

        li {
            padding: .9rem 0 0 0.34rem;
        }

        @media (min-width: 680px) {
            padding-left: 2.1rem;

            li {
                padding: 1rem 0 0 0.78rem;
            }
        }
    }

    ol {
        list-style: decimal;
        padding-left: 1.72rem;

        ::marker {
            font-weight: 700;
        }

        li {
            padding: .6rem 0 0 0.24rem;
        }

        @media (min-width: 680px) {
            padding-left: 2.5rem;

            li {
                padding: .8rem 0 0 0.68rem;
            }
        }
    }

    .with-margin-sm {
        margin-top: var(--margin-md);
    }

    .with-margin-md {
        margin-top: var(--margin-lg);
    }

    .with-margin-lg {
        margin-top: var(--margin-xxl);
    }

    .with-margin-xl {
        margin-top: var(--margin-xxxl);
    }

    img {
        &.fix {
            @media (min-width: 960px) {
                transform: translate(-8%, -6%);
            }
        }

        &.logo {
            max-height: 2rem;
            margin: var(--margin-lg) 0 0;

            @media (min-width: 820px) {
                margin: 0;
                max-height: 4.4rem;
            }
        }

        &.gfx-sm {
            max-height: 3.6rem;
            margin: var(--margin-xs) auto 0;

            @media (min-width: 820px) {
                max-height: 6rem;
            }

            @media (min-width: 960px) {
                max-height: none;
            }
        }

        &.gfx-md {
            max-width: 28%;
            margin: var(--margin-xs) auto;

            @media (min-width: 820px) {
                max-width: 24%;
            }

            @media (min-width: 960px) {
                margin: 0;
                max-width: 100%;
            }
        }
    }
}

/* ----------------------------------------------------------- */
/* --- section spacing */
/* ----------------------------------------------------------- */

.wrapper > section {
    &.spacing-bottom {
        .container {
            padding-bottom: var(--margin-xxxl);
        }
    }

    &.no-spacing {
        .container {
            padding-top: 0;
            padding-bottom: 0;
        }
    }

    &.no-spacing-top {
        .container {
            padding-top: 0;
        }
    }

    &.no-spacing-bottom {
        .container {
            padding-bottom: 0;
        }
    }
}

/* ----------------------------------------------------------- */
/* --- section cta */
/* ----------------------------------------------------------- */

.wrapper > section.cta {
    text-align: center;

    .content {
        padding: 0 0 var(--margin-lg);
    }

    .container {
        padding: var(--margin-sm) var(--margin-lg);

        @media (min-width: 820px) {
            padding: var(--margin-xl) var(--margin-lg);
        }
    }

    h1 {
        font-weight: 900;
        font-size: clamp(1.8rem, 4vw, 4.6rem);
        line-height: calc(clamp(1.8rem, 4vw, 4.6rem) * 1.48);
        margin: clamp(var(--margin-md), 3vw, var(--margin-xl)) 0;
    }
}

/* ----------------------------------------------------------- */
/* --- section bg-map */
/* ----------------------------------------------------------- */

.wrapper > section.bg-map {
    text-align: center;

    .content {
        padding: 0;
    }

    h1, h2 {
        font-weight: 900;
        color: var(--color-white);
        margin: 0 0 var(--margin-md);
        font-size: clamp(1.4rem, 3vw, 4.6rem);
        line-height: calc(clamp(1.4rem, 3vw, 4.6rem) * 1.48);
    }

    .container {
        padding: calc(var(--margin-xxl) * 1.6) var(--margin-lg);

        @media (min-width: 960px) {
            padding: calc(var(--margin-xxl) * 2) var(--margin-lg);
        }
    }

    .button {
        margin: var(--margin-lg) auto 0;

        @media (min-width: 960px) {
            margin: var(--margin-xl) auto 0;
        }
    }
}

/* ----------------------------------------------------------- */
/* --- section bg-waves */
/* ----------------------------------------------------------- */

.wrapper > section.bg-waves {
    text-align: center;
    background: url("../img/bg-section-waves-1dc5287293f65596eb9722e35148c59c.jpg") center top / cover no-repeat;

    .content {
        padding: 0;
    }

    h1 {
        margin: 0;
        font-weight: 900;
        font-size: clamp(1.3rem, 2.4vw, 3rem);
        line-height: calc(clamp(1.3rem, 2.4vw, 3rem) * 1.38);
    }

    h2 {
        font-weight: 600;
        margin: var(--margin-lg) 0 var(--margin-md);
        font-size: clamp(1.2rem, 1.4vw, 1.8rem);
        line-height: calc(clamp(1.2rem, 1.4vw, 1.8rem) * 1.32);
    }

    .container {
        padding: calc(var(--margin-xxl) * 1.2) var(--margin-lg) var(--margin-xxl);

        @media (min-width: 960px) {
            padding: calc(var(--margin-xxl) * 2) var(--margin-lg);
        }
    }

    .columns {
        gap: var(--margin-md);

        @media (min-width: 820px) {
            gap: var(--margin-xl);
        }

        img {
            max-width: 200px;

            @media (min-width: 960px) {
                max-width: 80%;
            }
        }

        .left {
            text-align: center;

            @media (min-width: 960px) {
                text-align: left;
            }
        }

        .right {
            text-align: center;

            @media (min-width: 960px) {
                text-align: right;
            }
        }
    }
}

/* ----------------------------------------------------------- */
/* --- section contact */
/* ----------------------------------------------------------- */

.wrapper > section.contact {
    text-align: center;

    .content {
        padding: var(--margin-md) 0;
    }

    .columns {
        text-align: left;
    }

    h5 {
        margin-bottom: var(--margin-sm);
    }

    h2 {
        font-weight: 600;
        font-size: clamp(1.3rem, 2.4vw, 2.8rem);
        line-height: calc(clamp(1.3rem, 2.4vw, 2.8rem) * 1.42);
        margin: clamp(var(--margin-sm), 2vw, var(--margin-lg)) 0;
    }

    h3 {
        font-weight: 900;
        font-size: clamp(1.6rem, 2.4vw, 2.5rem);
        line-height: calc(clamp(1.6rem, 2.4vw, 2.5rem) * 1.42);
        margin: clamp(var(--margin-md), 2vw, var(--margin-xl)) 0;
    }

    :is(h2, h3) br.perm {
        display: block;
    }

    a {
        font-weight: 900;
        color: var(--color-primary);
        font-size: clamp(2.0rem, 3.4vw, 4.0rem);
        line-height: calc(clamp(2.0rem, 3.4vw, 4.0rem) * 1.48);
    }

    p {
        &.info-sm, &.info-sm a {
            font-size: 1.0rem;
            line-height: 1.2rem;
        }

        &.info-md {
            font-size: 1.4rem;
            line-height: 1.68rem;
        }

        &.with-margin-md {
            margin-top: var(--margin-lg);
            margin-bottom: var(--margin-sm);
        }

        &.with-margin-lg {
            margin-top: var(--margin-xl);
            margin-bottom: var(--margin-md);
        }

        &.open-hours {
            font-weight: 600;
            font-size: clamp(1.2rem, 2vw, 2.4rem);
            line-height: calc(clamp(1.2rem, 2vw, 2.4rem) * 1.24);
            margin: var(--margin-xxs) 0 clamp(var(--margin-sm), 2.8vw, var(--margin-xl));
        }
    }

    form {
        &.with-margin {
            margin-top: var(--margin-xl);

            @media (min-width: 960px) {
                margin-top: 0;
            }
        }

        button[type=submit] {
            font-size: 2.7rem;
            color: var(--color-white);
            background: var(--color-tertiary);
            margin: var(--margin-sm) 0 var(--margin-xl);
        }
    }
}

/* ----------------------------------------------------------- */
/* --- section table */
/* ----------------------------------------------------------- */

.wrapper > section.table {
    .content {
        padding: var(--margin-md) 0;
    }

    .on-mobile {
        @media (min-width: 820px) {
            display: none;
        }
    }

    .on-desktop {
        @media (max-width: 819px) {
            display: none;
        }
    }

    table {
        width: 100%;
        overflow-x: auto;
        border-spacing: 0;
        margin: var(--margin-xxxl) 0 var(--margin-lg);

        th {
            font-weight: 700;
            font-size: clamp(1.4rem, 2vw, 2.1rem);
            line-height: calc(clamp(1.4rem, 2vw, 2.1rem) * 1.78);
            padding: var(--margin-sm) var(--margin-md) var(--margin-xs);
        }

        td {
            font-weight: 600;
            font-size: clamp(1.2rem, 1.6vw, 1.6rem);
            line-height: calc(clamp(1.2rem, 1.6vw, 1.6rem) * 1.72);
            padding: var(--margin-sm) var(--margin-md) var(--margin-xs);
        }

        th, td {
            border: 1px solid var(--color-white);

            @media (min-width: 820px) {
                width: 33.3%;
            }
        }

        tr {
            color: var(--color-primary);

            &:nth-child(even) {
                color: var(--color-white);
                background: var(--color-tertiary);
            }
        }
    }
}

/* ----------------------------------------------------------- */
/* --- section radiologist-list */
/* ----------------------------------------------------------- */

.wrapper > section.radiologist-list {
    .content {
        padding: 0;
    }

    .container {
        padding: 0 var(--margin-lg) var(--margin-xxl);

        @media (min-width: 820px) {
            padding: var(--margin-xxl) var(--margin-lg);
        }

        @media (min-width: 960px) {
            padding: var(--margin-xxxl) var(--margin-lg);
        }
    }

    .grid-list {
        display: grid;
        /* grid-row-gap: 2.4rem; */
        grid-row-gap: 2.8rem; /* fix for missing doctor photos */
        grid-column-gap: 0;
        grid-template-columns: 1fr;

        @media (min-width: 480px) {
            /* grid-row-gap: 1.2rem; */
            grid-row-gap: 3.2rem; /* fix for missing doctor photos */
            grid-column-gap: 1.8rem;
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: 680px) {
            /* grid-row-gap: 2.4rem; */
            grid-row-gap: 4.2rem; /* fix for missing doctor photos */
            grid-column-gap: 2.8rem;
            grid-template-columns: repeat(3, 1fr);
        }

        @media (min-width: 960px) {
            /* grid-row-gap: 2.6rem; */
            grid-row-gap: 4.6rem; /* fix for missing doctor photos */
            grid-column-gap: 3.2rem;
            grid-template-columns: repeat(4, 1fr);
        }

        > div {
            text-align: center;

            img {
                width: 100%;
            }

            div {
                display: none;
            }

            span {
                display: block;
                font-size: clamp(0.9rem, 1.2vw, 1.0rem);
                line-height: calc(clamp(0.9rem, 1.2vw, 1.0rem) * 1.32);
            }

            h3 {
                font-weight: 900;
                color: var(--color-secondary);
                font-size: clamp(1.4rem, 1.6vw, 1.6rem);
                line-height: calc(clamp(1.4rem, 1.6vw, 1.6rem) * 1.34);
                margin: var(--margin-sm) 0 var(--margin-xxs);
            }

            .button {
                font-weight: 700;
                margin: var(--margin-md) auto;
                padding: var(--margin-xs) var(--margin-md) var(--margin-xxs);
                font-size: clamp(1.2rem, 1.6vw, 1.4rem);
                line-height: calc(clamp(1.2rem, 1.6vw, 1.4rem) * 1.34);
            }
        }
    }
}

/* ----------------------------------------------------------- */
/* --- section chatbot */
/* ----------------------------------------------------------- */

.wrapper > section.chatbot {
    text-align: center;

    .content {
        padding: var(--margin-md) 0;
    }

    .columns {
        text-align: left;
    }

    p {
        margin: 3rem 0 3.2rem;
        font-size: clamp(1.3rem, 1.5vw, 1.9rem);
        line-height: calc(clamp(1.3rem, 1.5vw, 1.9rem) * 1.48);
    }

    a.button {
        width: auto;
        background: none;
        margin: 2rem 0 0;
        color: var(--color-primary);
        border-color: var(--color-primary);
        font-size: clamp(1.4rem, 1.6vw, 1.6rem);
        line-height: calc(clamp(1.4rem, 1.6vw, 1.6rem) * 1.34);

        img {
            height: 3rem;
            margin: 0 .4rem .2rem;
            vertical-align: middle;
        }

        &.disabled {
            border-color: #ccc;
            color: #aaa;
            background-color: #f9f9f9;
            cursor: not-allowed;
            opacity: 0.6;
        }
    }
}

/* ----------------------------------------------------------- */
/* --- section teleradiology */
/* ----------------------------------------------------------- */

.wrapper > section.teleradiology {
    text-align: center;

    .content {
        padding: var(--margin-md) 0;
    }

    .columns {
        text-align: left;
    }

    h5 {
        margin-bottom: var(--margin-sm);
    }

    h2 {
        font-weight: 600;
        font-size: clamp(1.6rem, 2.4vw, 2.5rem);
        line-height: calc(clamp(1.6rem, 2.4vw, 2.5rem) * 1.42);
        margin: clamp(var(--margin-md), 2vw, var(--margin-xl)) 0 0;
    }

    :is(h2, h3) br.perm {
        display: block;
    }

    a {
        font-weight: 900;
        color: var(--color-primary);
        font-size: clamp(2.0rem, 3.4vw, 4.0rem);
        line-height: calc(clamp(2.0rem, 3.4vw, 4.0rem) * 1.48);
    }

    ul {
        li {
            font-size: clamp(1.0rem, 2.4vw, 1.7rem);
            line-height: calc(clamp(1.0rem, 2.4vw, 1.7rem) * 1.68);
        }
    }

    p {
        &.info-sm {
            font-size: 1.0rem;
            line-height: 1.2rem;
        }

        &.info-md {
            font-size: 1.4rem;
            line-height: 1.68rem;
        }

        &.with-margin-md {
            margin-top: var(--margin-lg);
            margin-bottom: var(--margin-sm);
        }

        &.with-margin-lg {
            margin-top: var(--margin-xl);
            margin-bottom: var(--margin-md);
        }

        &.open-hours {
            font-weight: 600;
            font-size: clamp(1.2rem, 2vw, 2.4rem);
            line-height: calc(clamp(1.2rem, 2vw, 2.4rem) * 1.24);
            margin: var(--margin-xxs) 0 clamp(var(--margin-sm), 2.8vw, var(--margin-xl));
        }
    }

    form {
        &.with-margin {
            margin-top: var(--margin-xl);

            @media (min-width: 960px) {
                margin-top: 0;
            }
        }

        button[type=submit] {
            font-size: 2.7rem;
            color: var(--color-white);
            background: var(--color-tertiary);
            margin: var(--margin-sm) 0 var(--margin-xl);
        }
    }
}