/* ==========================================================================
   Landing page two  (pages/gateway-canva2.php)

   Page 2 of the client's Canva file, the one titled "Second landing page".
   A different proposal from page 1 rather than a variation on it: the site's
   header across the top, two square cards, a row of four reasons, and a
   maroon-and-navy palette on cream instead of the logo's magenta and indigo.

   Every colour below was sampled from her own page rather than guessed.
   They are declared on .gw3-page so nothing here reaches the rest of the site.
   ========================================================================== */

.gw3-page {
    --gw3-maroon: #67031E;
    --gw3-maroon-lit: #8C1436;
    --gw3-navy: #022545;
    --gw3-navy-lit: #0A3A66;
    --gw3-cream: #F6F0EB;
    --gw3-paper: #FDFBF9;
    --gw3-pink: #F6E3E6;
    --gw3-sky: #D6ECFE;
    --gw3-ink: #1F1F24;

    margin: 0;
    padding: 0;
    background: var(--gw3-paper);
    color: var(--gw3-ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

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

.gw3-page a {
    text-decoration: none;
    color: inherit;
}

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

/* ---- the bar across the top ---- */

.gw3-bar {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 40px);
    padding: clamp(10px, 1.1vw, 16px) clamp(16px, 3vw, 46px);
    background: #fff;
}

.gw3-logo img {
    width: clamp(150px, 15vw, 215px);
    height: auto;
    display: block;
}

.gw3-nav {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 1.5vw, 26px);
    font-size: clamp(12px, 0.95vw, 14px);
    color: #2B2B33;
}

.gw3-nav a {
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
}

.gw3-nav a:hover {
    border-bottom-color: var(--gw3-maroon);
}

.gw3-nav a.is-here {
    color: var(--gw3-maroon);
    border-bottom-color: var(--gw3-maroon);
}

.gw3-page .gw3-enquire {
    flex: 0 0 auto;
    padding: clamp(9px, 0.9vw, 13px) clamp(16px, 1.7vw, 26px);
    border-radius: 999px;
    background: var(--gw3-maroon);
    color: #fff;
    font-size: clamp(12px, 0.95vw, 14px);
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background 0.18s ease;
}

.gw3-page .gw3-enquire:hover {
    background: var(--gw3-maroon-lit);
    color: #fff;
}

/* ---- the two cards ---- */

/* With the header and the sections below it gone, the choice is the whole
   page, so it fills the screen rather than floating at the top of it. The
   styles for the header, the four reasons and the closing line are left below
   on purpose: restoring any of them is a matter of restoring the markup. */
.gw3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: clamp(12px, 2.6vw, 42px);
}

.gw3-split {
    display: grid;
    /* minmax(0, 1fr) so a long course line cannot push a card wider than
       half the screen. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(8px, 0.9vw, 14px);
}

.gw3-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(460px, 48vw, 760px);
    overflow: hidden;
    border-radius: 4px;
}

.gw3-card.is-patient {
    background: var(--gw3-cream);
}

.gw3-card.is-doctor {
    background: var(--gw3-navy);
    color: #fff;
}

/* The photograph holds the right of the card and the panel colour fades
   across it, which is how her page blends the two. It is deliberately not
   the whole card: the part of her artwork that carries no lettering is the
   only part that can be reused. */
.gw3-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 38%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* The theme's own photographs, which are the clean originals. Her page 2
   uses different stock, but her own lettering is printed across it in the
   Canva file, so it cannot be lifted out cleanly - and using the same two
   pictures on both landing pages means she is comparing the designs rather
   than the photographs. */
.gw3-card.is-patient .gw3-photo {
    background-image: url(../img/gateway/patients.jpg);
}

.gw3-card.is-doctor .gw3-photo {
    background-image: url(../img/gateway/doctors.jpg);
}

.gw3-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gw3-card.is-patient::after {
    background: linear-gradient(90deg, var(--gw3-cream) 0%, var(--gw3-cream) 38%, rgba(246, 240, 235, 0.74) 50%, rgba(246, 240, 235, 0) 66%);
}

.gw3-card.is-doctor::after {
    background: linear-gradient(90deg, var(--gw3-navy) 0%, var(--gw3-navy) 38%, rgba(2, 37, 69, 0.78) 50%, rgba(2, 37, 69, 0.06) 70%);
}

.gw3-fill {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 62%;
    padding: clamp(22px, 3vw, 48px) clamp(20px, 2.6vw, 44px);
    pointer-events: none;
}

.gw3-eyebrow {
    margin: 0 0 clamp(10px, 1.2vw, 18px);
    font-size: clamp(8px, 0.72vw, 11px);
    font-weight: 700;
    letter-spacing: 0.15em;
    white-space: nowrap;
}

.gw3-card.is-patient .gw3-eyebrow {
    color: var(--gw3-maroon);
}

.gw3-card.is-doctor .gw3-eyebrow {
    color: rgba(255, 255, 255, 0.82);
}

.gw3-brand {
    margin: 0 0 clamp(6px, 0.8vw, 12px);
    font-size: clamp(14px, 1.28vw, 20px);
    font-weight: 600;
}

.gw3-card.is-patient .gw3-brand {
    color: var(--gw3-maroon);
}

.gw3-for {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(16px, 1.5vw, 24px);
    line-height: 1;
}

.gw3-fill h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(34px, 4vw, 62px);
    line-height: 1.04;
    letter-spacing: 0.01em;
}

.gw3-card.is-patient .gw3-for,
.gw3-card.is-patient h2 {
    color: var(--gw3-maroon);
}

.gw3-rule {
    width: clamp(90px, 11vw, 165px);
    height: 1px;
    margin: clamp(10px, 1.1vw, 16px) 0 clamp(12px, 1.3vw, 18px);
    background: currentColor;
    opacity: 0.45;
}

.gw3-lede {
    margin: 0 0 clamp(16px, 1.8vw, 26px);
    max-width: 30ch;
    font-family: var(--font-heading);
    font-size: clamp(14px, 1.2vw, 19px);
    line-height: 1.45;
}

.gw3-fill ul {
    margin: 0 0 clamp(18px, 2vw, 30px);
    padding: 0;
    list-style: none;
    display: grid;
    gap: clamp(7px, 0.85vw, 13px);
}

.gw3-fill li {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1vw, 16px);
    font-family: var(--font-heading);
    font-size: clamp(12px, 1.05vw, 16px);
    line-height: 1.3;
}

.gw3-icon {
    flex: 0 0 auto;
    width: clamp(30px, 2.7vw, 42px);
    height: clamp(30px, 2.7vw, 42px);
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.gw3-card.is-patient .gw3-icon {
    background: var(--gw3-pink);
}

.gw3-card.is-doctor .gw3-icon {
    background: var(--gw3-sky);
}

.gw3-icon svg {
    width: 56%;
    height: 56%;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gw3-card.is-patient .gw3-icon svg {
    stroke: var(--gw3-maroon);
}

.gw3-card.is-doctor .gw3-icon svg {
    stroke: var(--gw3-navy);
}

/* The card is the link, so the button is drawn rather than clickable on its
   own - the same as the other gateway. */
.gw3-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: clamp(11px, 1.1vw, 17px) clamp(20px, 2.2vw, 34px);
    border-radius: 999px;
    font-size: clamp(11px, 0.95vw, 14px);
    font-weight: 700;
    letter-spacing: 0.08em;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.gw3-card.is-patient .gw3-cta {
    background: var(--gw3-maroon);
    color: #fff;
}

.gw3-card.is-doctor .gw3-cta {
    background: var(--gw3-sky);
    color: var(--gw3-navy);
}

.gw3-card:hover .gw3-cta {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.gw3-hit {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* ---- the four reasons ---- */

.gw3-reasons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: clamp(16px, 2vw, 30px) 0 clamp(10px, 1.2vw, 18px);
    list-style: none;
}

.gw3-reasons li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.1vw, 18px);
    padding: 0 clamp(10px, 1.4vw, 24px);
    border-right: 1px solid rgba(2, 37, 69, 0.14);
}

.gw3-reasons li:last-child {
    border-right: 0;
}

.gw3-reason-icon {
    flex: 0 0 auto;
    width: clamp(36px, 3.1vw, 50px);
    height: clamp(36px, 3.1vw, 50px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #EFEFEF;
}

.gw3-reason-icon svg {
    width: 56%;
    height: 56%;
    fill: none;
    stroke: var(--gw3-navy);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gw3-reason-text {
    font-family: var(--font-heading);
    font-size: clamp(12px, 1.05vw, 16px);
    line-height: 1.35;
    color: var(--gw3-ink);
}

/* Her page marks the first one in maroon and the rest in navy. */
.gw3-reasons li::after {
    content: none;
}

/* ---- the line at the foot ---- */

.gw3-strip {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 30px);
    margin: 0;
    padding: 0 clamp(16px, 3vw, 46px) clamp(16px, 2vw, 28px);
    color: var(--gw3-maroon);
    font-size: clamp(9px, 0.78vw, 12px);
    font-weight: 600;
    letter-spacing: 0.17em;
    text-align: center;
}

.gw3-strip::before,
.gw3-strip::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(103, 3, 30, 0.3);
}

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

@media (max-width: 900px) {

    .gw3-bar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .gw3-nav {
        order: 3;
        flex: 1 0 100%;
        justify-content: center;
    }

    .gw3-split {
        grid-template-columns: 1fr;
    }

    .gw3-card {
        min-height: 0;
    }

    /* Upright there is no room beside the photograph, so the panel colour
       covers it and the photograph stays as texture underneath. */
    .gw3-fill {
        max-width: none;
    }

    .gw3-photo {
        left: 0;
    }

    .gw3-card.is-patient::after {
        background: linear-gradient(180deg, var(--gw3-cream) 0%, rgba(246, 240, 235, 0.92) 70%, rgba(246, 240, 235, 0.86) 100%);
    }

    .gw3-card.is-doctor::after {
        background: linear-gradient(180deg, var(--gw3-navy) 0%, rgba(2, 37, 69, 0.93) 70%, rgba(2, 37, 69, 0.88) 100%);
    }

    .gw3-lede {
        max-width: none;
    }

    .gw3-eyebrow {
        white-space: normal;
    }

    .gw3-reasons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(14px, 4vw, 22px);
    }

    .gw3-reasons li {
        justify-content: flex-start;
        border-right: 0;
    }
}

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

    .gw3-cta,
    .gw3-enquire {
        transition: none;
    }
}