/*
   WUME — Account / Sign-In page Stage-2 DESKTOP layout overrides.

   SCOPE: every desktop rule is prefixed `body.is-account-page` AND lives inside
   the `@media (min-width: 992px)` block, so the synced MOBILE view (<992px) is
   left to stack naturally. Only the photo gets a base (all-viewport) sizing rule
   so it never overflows on phones.

   Figma ref: figma-final/screens/desktop/account.png (1440x1570). Left column:
   kicker + "Sign In" serif + email/password fields + full-width SAGE Sign In
   button + uppercase FORGOT PASSWORD on its own line. Right column: editorial
   photo (account/04.png) ~714px tall. Below: a 3-column links row (new to wume /
   patient portal / questions -> request invite / sign in / visit FAQ).

   STAGE 2b MOBILE (<=991.98px, target 393px): a single @media(max-width:991.98px)
   block, appended below, restyles the page to the figma mobile screen
   (figma-final/screens/mobile/account.png, 393x2120). Mobile order: kicker ->
   Sign In serif -> email/password -> full-width sage button -> FORGOT PASSWORD
   uppercase -> 2-col links grid -> inset editorial photo. The desktop photo lives
   in the split pane (.d-none.d-lg-block); a mobile-only photo block
   (.wume-account-photo-mobile, .d-lg-none) is rendered AFTER the links so the
   photo follows the links per figma. Desktop (>=992px) rules are untouched.
   V02
   V03 mobile kicker max-width forces the figma 2-line wrap. ?v 5->6.
   V04 kicker max-width 175->150 so the break lands after "COLLECTIVE"
       ("A NEW COLLECTIVE" / "OF INTEGRATED CARE") per figma. ?v 6->7.
   V05 kicker max-width 150->145 (rendered "A NEW COLLECTIVE OF"=149px just
       fit at 150; 145 sits between 143 and 149 so "OF" drops to line 2). ?v 7->8.
   V06 Mobile gaps tightened to the figma: kicker->signin 102->52, forgot->links
       123->62, links->photo 44->28 (the gaps ran ~18% long). ?v 8->9.
   V07 DESKTOP split 563px 1fr -> 563px 563px + gap 141->242 so the photo is 563
       wide like figma (the 1fr right column made the photo 664 = too big). ?v 9->10.
   V08 DESKTOP split overflow fix: the fixed 563px 563px + 242px gap (=1368px, sized for the 1440
       figma width) overflowed ~380px between 992-1440px -> tablet shrink-to-fit ("everything tiny").
       Now minmax(0,1fr) columns + a clamp gap: still 563px each at 1440, but shrinks to fit below.
       ?v 10->1 (also back into the single-digit 0-9 cycle per directive 32).
   V09 Sign-in failure message rule (.wume-account-error) — base/all-viewport,
       shown above the form now that the form is a real Sylius login
       (template V08). ?v 1->2.
   V10 Store-notice + lead-paragraph rules (.wume-account-notice brown,
       .wume-account-lead) for the flash rendering added in template V09 and
       the new resend-verification page (resend_verification.html.twig V01).
       ?v 2->3.
   V11 "Remember me" row (.wume-account-remember) — base/all-viewport rule for
       the label-wrapped _remember_me checkbox added between the password
       field and Sign In (template V10); sage native check via accent-color.
       ?v 3->4.
*/

/* base (all viewports): keep the photo responsive so phones don't overflow */
body.is-account-page .wume-account-photo {
    width: 100%;
    height: auto;
    display: block;
}

/* Sign-in failure message (rendered above the form; template V08). */
body.is-account-page .wume-account-error {
    color: #8a3a2e;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 18px;
    text-align: left;
}

/* Store notices (non-error flash messages: resend confirmations, reworded
   verification guidance; template V09). Brown per the brand palette. */
body.is-account-page .wume-account-notice {
    color: var(--wume-brown, #4D3D2D);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 18px;
    text-align: left;
}

/* Lead paragraph on the resend-verification page (V01). */
body.is-account-page .wume-account-lead {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 24px;
    text-align: left;
    max-width: 420px;
}

/* "Remember me" row (template V10): label-wrapped _remember_me checkbox
   between the password field and Sign In. The label wraps the input so the
   text itself is clickable; sits in the fields' 12px margin rhythm. */
body.is-account-page .wume-account-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--wume-black);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
body.is-account-page .wume-account-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--wume-sage);
    cursor: pointer;
}

@media (min-width: 992px) {

    body.is-account-page .wume-account-section {
        max-width: 1440px;
        margin: 0 auto;
        padding: 64px 36px 0;
    }

    /* Two-column split: form (563px) left + photo right. */
    body.is-account-page .wume-account-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* was 563px 563px — fixed cols overflowed 992-1440px; flexible cols still render 563px each at the 1440 figma width but shrink below it */
        column-gap: clamp(48px, 17vw, 242px);                   /* was 242px fixed — scales down on narrower screens, caps at the figma 242 at 1440 */
        align-items: start;
        margin: 0;
    }
    body.is-account-page .wume-account-split-pane {
        padding: 0;
        background: transparent;
    }
    /* Form pane is the photo's height; the kicker sits at the top and a gap
       drops the Sign In + form block to the upper third, per figma. */
    body.is-account-page .wume-account-form-pane {
        min-height: 714px;
    }

    /* Left form pane. */
    body.is-account-page .wume-account-kicker {
        margin: 0 0 44px;
        text-align: left;
    }
    body.is-account-page .wume-account-title {
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading-display);
        font-size: 3rem;
        line-height: 1.1;
        letter-spacing: var(--wume-tracking-heading);
        color: var(--wume-black);
        margin: 0 0 32px;
        text-align: left;
    }
    body.is-account-page .wume-account-form .form-control {
        border: 1px solid #7a7875;
        border-radius: 0;
        background: transparent;
        padding: 15px 16px;
        margin-bottom: 12px;
        font-family: var(--wume-font-body);
        font-size: 0.95rem;
        color: var(--wume-black);
    }
    body.is-account-page .wume-account-form .form-control::placeholder {
        color: #7a7875;
    }
    /* Sign In button -> full-width sage. */
    body.is-account-page .wume-account-signin {
        display: block;
        width: 100%;
        margin-top: 12px;
        padding: 15px;
        background: var(--wume-sage);
        border-color: var(--wume-sage);
        color: var(--wume-cream);
        text-transform: uppercase;
        letter-spacing: var(--wume-tracking-caps);
        font-size: 0.78rem;
    }
    /* Forgot password -> own line, uppercase. */
    body.is-account-page .wume-account-forgot {
        display: block;
        margin-top: 18px;
        text-transform: uppercase;
        letter-spacing: var(--wume-tracking-caps);
        font-size: 0.72rem;
        font-weight: var(--wume-w-sub);
        color: var(--wume-black);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* Right photo pane (full pane height). */
    body.is-account-page .wume-account-photo {
        height: 714px;
        object-fit: cover;
    }

    /* 3-column links row: cols start at x37 / x272 / x505. */
    body.is-account-page .wume-account-links-section {
        max-width: 1440px;
        margin: 56px auto 0;
        padding: 0 36px;
    }
    body.is-account-page .wume-account-links {
        display: grid;
        grid-template-columns: 235px 233px 1fr;
        column-gap: 0;
        align-items: start;
    }
    body.is-account-page .wume-account-links-col .wume-hero-tagline {
        margin: 0 0 12px;
        text-align: left;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   STAGE 2b — MOBILE (<= 991.98px, pixel-matched to 393px figma screen).
   figma-final/screens/mobile/account.png (393x2120). Everything below is
   scoped `body.is-account-page` so it cannot leak to other pages.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* ── Section frame: 24px side gutters, 54px top from navbar (figma) ── */
    body.is-account-page .wume-account-section {
        padding: 54px 24px 0;
        margin: 0;
    }

    /* Single column: form pane only (the desktop photo pane is .d-none on
       mobile, so the split collapses to one column automatically). */
    body.is-account-page .wume-account-split {
        display: block;
        margin: 0;
    }
    body.is-account-page .wume-account-split-pane {
        padding: 0;
        background: transparent;
    }
    /* No min-height on mobile — the form sizes to its content. */
    body.is-account-page .wume-account-form-pane {
        min-height: 0;
    }

    /* ── Kicker (2-line uppercase) -> big gap -> Sign In serif (figma 102px).
       max-width forces the 2-line wrap ("A NEW COLLECTIVE" / "OF INTEGRATED
       CARE") seen in the figma (line widths ~129px / ~144px). ── */
    body.is-account-page .wume-account-kicker {
        margin: 0 0 52px;
        text-align: left;
        line-height: 1.35;
        max-width: 145px;
    }
    body.is-account-page .wume-account-title {
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading-display);
        font-size: 2.5rem;        /* ~40px, cap-height 29px in figma */
        line-height: 1.1;
        letter-spacing: var(--wume-tracking-heading);
        color: var(--wume-black);
        margin: 0 0 27px;
        text-align: left;
    }

    /* ── Email / Password fields: full-width, 49px tall, 12px apart ── */
    body.is-account-page .wume-account-form .form-control {
        display: block;
        width: 100%;
        border: 1px solid #7a7875;
        border-radius: 0;
        background: transparent;
        padding: 14px 16px;
        margin-bottom: 12px;
        font-family: var(--wume-font-body);
        font-size: 0.95rem;
        color: var(--wume-black);
    }
    body.is-account-page .wume-account-form .form-control::placeholder {
        color: #7a7875;
    }

    /* ── Sign In button: full-width sage, ~51px tall, 14px above (figma) ── */
    body.is-account-page .wume-account-signin {
        display: block;
        width: 100%;
        margin-top: 14px;
        padding: 16px;
        background: var(--wume-sage);
        border-color: var(--wume-sage);
        color: var(--wume-cream);
        text-transform: uppercase;
        letter-spacing: var(--wume-tracking-caps);
        font-size: 0.78rem;
    }

    /* ── FORGOT PASSWORD: own line, uppercase, underlined, 21px above ── */
    body.is-account-page .wume-account-forgot {
        display: block;
        margin-top: 21px;
        text-transform: uppercase;
        letter-spacing: var(--wume-tracking-caps);
        font-size: 0.72rem;
        font-weight: var(--wume-w-sub);
        color: var(--wume-black);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* ── Links section: 24px gutters, ~123px below FORGOT PASSWORD ── */
    body.is-account-page .wume-account-links-section {
        max-width: none;
        margin: 62px 0 0;
        padding: 0 24px;
    }
    /* 2-column grid (figma): col1 ~180px, col2 starts ~x180. QUESTIONS/VISIT
       FAQ flows into col1 row 2; col2 row 2 stays empty. */
    body.is-account-page .wume-account-links {
        display: grid;
        grid-template-columns: 180px 1fr;
        column-gap: 0;
        row-gap: 25px;
        align-items: start;
    }
    body.is-account-page .wume-account-links-col .wume-hero-tagline {
        margin: 0 0 0;
        text-align: left;
    }
    /* link-underline base margin-top is 28px; figma kicker->link is 27px. */
    body.is-account-page .wume-account-links-col .wume-link-underline {
        margin-top: 27px;
    }

    /* ── Mobile-only editorial photo: rendered AFTER the links per figma.
       Inset 24px each side, portrait (figma 344x428 => aspect ~0.804). ── */
    body.is-account-page .wume-account-photo-mobile {
        margin: 28px 0 0;
        padding: 0 24px;
    }
    body.is-account-page .wume-account-photo-mobile img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 344 / 428;
        object-fit: cover;
    }
}