/* ==========================================================================
   Patient / doctor gateway, Canva layout  (pages/gateway-canva.php)

   The second of the two landing pages the client is choosing between. The
   first one (gateway.css) divides the screen straight down the middle; this
   one follows her own Canva page: a sentence of explanation above each side,
   two curved sweeps that meet at a circle, white pill buttons, and the logo
   underneath on white.

   Same rule as the other sheet: every colour is declared on .gw2 rather than
   on :root, so nothing here can reach the rest of the site.
   ========================================================================== */

.gw2-page {
    margin: 0;
    padding: 0;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

.gw2-page * {
    box-sizing: border-box;
}

.gw2-page a {
    text-decoration: none;
}

.gw2-page :focus-visible {
    outline: 3px solid var(--gw2-indigo);
    outline-offset: 3px;
}

.gw2 {
    --gw2-magenta-deep: #7A0B3C;
    --gw2-magenta: #960362;
    --gw2-magenta-lit: #AE1F5D;
    --gw2-indigo-deep: #0A1A6E;
    --gw2-indigo: #1903AB;
    --gw2-indigo-lit: #2638B8;
    --gw2-ink: #1B1B2F;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(14px, 2.2vw, 30px);
    min-height: 100vh;
    padding: clamp(18px, 3vw, 38px) 0;
    background: #fff;
    font-family: var(--font-body);
}

/* ---- the two sentences above the sweeps ---- */

.gw2-heads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 4vw, 70px);
    padding: clamp(10px, 1.6vw, 22px) clamp(16px, 4vw, 60px) 0;
}

.gw2-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 1.6vw, 22px);
}

.gw2-head p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(14px, 1.22vw, 19px);
    line-height: 1.45;
    text-align: center;
    text-wrap: balance;
}

.gw2-head.is-patient p {
    color: #1B1B1B;
}

.gw2-head.is-doctor p {
    color: #1B1B1B;
}

/* The courses side is a plain blue link on her page, not a pill. */
.gw2-link {
    font-family: var(--font-heading);
    font-size: clamp(13px, 1.1vw, 17px);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gw2-indigo);
}

.gw2-link:hover {
    text-decoration: underline;
}

/* The logo sits inside the band, top left, on the white of the sweep. */
.gw2-brand {
    position: absolute;
    z-index: 5;
    top: clamp(6px, 1vw, 16px);
    left: clamp(14px, 3vw, 54px);
    pointer-events: none;
}

.gw2-brand img {
    width: clamp(140px, 17vw, 260px);
    height: auto;
}

/* ---- the band that holds both sweeps ---- */

.gw2-band {
    position: relative;
    display: grid;
    /* minmax(0, 1fr) rather than 1fr: a grid item will not shrink below the
       width of its own content unless it is told it may, and the longest
       course line is wide enough to push the band past the screen. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    isolation: isolate;
}

.gw2-side {
    position: relative;
    min-height: clamp(380px, 42vw, 560px);
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* The photograph sits at the outer edge and the sweep covers the rest of it,
   which is how her page is put together. */
.gw2-photo {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.gw2-side.is-patient .gw2-photo {
    background-image: url(../img/gateway/patients.jpg);
    background-position: left center;
}

.gw2-side.is-doctor .gw2-photo {
    background-image: url(../img/gateway/doctors.jpg);
    background-position: right center;
}

/* The sweep itself. preserveAspectRatio is off on the element, so the one
   path fills a wide desktop and a narrow phone without being redrawn. */
.gw2-sweep {
    position: absolute;
    inset: -2px -1px;
    width: calc(100% + 2px);
    height: calc(100% + 4px);
    pointer-events: none;
}

.gw2-veil {
    position: absolute;
    inset: -2px -1px;
    width: calc(100% + 2px);
    height: calc(100% + 4px);
    pointer-events: none;
}

.gw2-veil path {
    fill: #fff;
}

.gw2-side.is-doctor .gw2-veil {
    transform: scaleX(-1);
}

.gw2-side.is-patient .gw2-sweep path {
    fill: var(--gw2-magenta);
}

.gw2-side.is-doctor .gw2-sweep {
    transform: scaleX(-1);
}

.gw2-side.is-doctor .gw2-sweep path {
    fill: var(--gw2-indigo);
}

/* ---- the words on each side ---- */

.gw2-fill {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(34px, 5vw, 70px) clamp(18px, 3.4vw, 54px) clamp(20px, 3vw, 44px);
    color: #fff;
    pointer-events: none;
}

.gw2-side.is-patient .gw2-fill {
    padding-left: clamp(40px, 13%, 150px);
    padding-right: clamp(80px, 17%, 190px);
}

.gw2-side.is-doctor .gw2-fill {
    padding-left: clamp(80px, 17%, 190px);
    padding-right: clamp(40px, 13%, 150px);
}

.gw2-for {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(13px, 1.1vw, 17px);
    letter-spacing: 0.16em;
}

.gw2-fill h2 {
    margin: 2px 0 clamp(12px, 1.6vw, 22px);
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(30px, 3.2vw, 50px);
    line-height: 1;
    letter-spacing: 0.02em;
}

.gw2-fill ul {
    margin: 0 0 clamp(16px, 2.2vw, 28px);
    padding: 0;
    list-style: none;
    display: grid;
    gap: clamp(8px, 1vw, 14px);
}

.gw2-fill li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(12px, 1.02vw, 15px);
    line-height: 1.3;
}

.gw2-icon {
    flex: 0 0 auto;
    width: clamp(26px, 2.3vw, 34px);
    height: clamp(26px, 2.3vw, 34px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
}

.gw2-icon svg {
    width: 58%;
    height: 58%;
    fill: none;
    stroke: #fff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The white pill from her page: white fill, the side's own colour as text. */
.gw2-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: clamp(10px, 1.1vw, 15px) clamp(22px, 2.4vw, 34px);
    border-radius: 999px;
    background: #fff;
    font-size: clamp(11px, 0.92vw, 13px);
    font-weight: 700;
    letter-spacing: 0.1em;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.gw2-head.is-patient .gw2-cta {
    color: var(--gw2-magenta);
}

.gw2-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

/* The whole side is the link; the pill is there to be seen, not to be aimed
   at. Same behaviour as the other layout. */
.gw2-hit {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* ---- the circle where the two sweeps meet ---- */

.gw2-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5), 0 14px 34px rgba(10, 26, 110, 0.28);
    pointer-events: none;
}

.gw2-core img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- the two taglines, in the corners of the band ---- */

.gw2-tags {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(10px, 1.4vw, 18px) clamp(14px, 3vw, 46px) 0;
    font-size: clamp(9px, 0.78vw, 12px);
    font-weight: 700;
    letter-spacing: 0.12em;
}

.gw2-tags span {
    max-width: 48%;
}

.gw2-tags .is-left {
    color: var(--gw2-magenta-deep);
}

.gw2-tags .is-right {
    color: var(--gw2-indigo-deep);
}

/* ==========================================================================
   Narrow screens

   The sweeps stop being side by side and stack, each keeping its own curve.
   The centre circle has nothing to sit between once they do, so it goes and
   the logo at the foot does that job alone.
   ========================================================================== */

@media (max-width: 860px) {

    /* Both sentences stack above the two choices rather than sitting in a
       pair too narrow to read. */
    .gw2-heads {
        grid-template-columns: 1fr;
        gap: clamp(18px, 5vw, 26px);
    }

    .gw2-head p {
        font-size: clamp(13px, 3.4vw, 16px);
    }

    .gw2-brand {
        position: static;
        padding: clamp(12px, 4vw, 20px) 16px 0;
        text-align: center;
    }

    .gw2-brand img {
        width: clamp(160px, 52vw, 230px);
    }

    .gw2-band {
        grid-template-columns: 1fr;
    }

    .gw2-side {
        min-height: 0;
        padding: clamp(26px, 7vw, 40px) 0;
    }

    .gw2-side.is-patient .gw2-fill,
    .gw2-side.is-doctor .gw2-fill {
        padding: clamp(18px, 5vw, 30px) clamp(20px, 6vw, 34px);
    }

    /* Upright, the sweep reads better as a soft corner than as a lens. */
    .gw2-sweep,
    .gw2-veil {
        display: none;
    }

    .gw2-side.is-patient {
        background: linear-gradient(145deg, var(--gw2-magenta-deep) 0%, var(--gw2-magenta) 58%, var(--gw2-magenta-lit) 100%);
    }

    .gw2-side.is-doctor {
        background: linear-gradient(145deg, var(--gw2-indigo-deep) 0%, var(--gw2-indigo) 58%, var(--gw2-indigo-lit) 100%);
    }

    .gw2-photo {
        opacity: 0.2;
    }

    .gw2-core {
        display: none;
    }

    .gw2-tags {
        flex-direction: column;
        gap: 4px;
        align-items: center;
        padding: clamp(14px, 4vw, 22px) 16px 0;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {

    .gw2-cta {
        transition: none;
    }
}