/*
 * MarpaMail login variant -- layout/skin only.
 *
 * Mirrors the stock two-panel login: the card moves to the left panel (plain
 * theme surface, white in light mode) and the announcements carousel moves to
 * the right panel, which keeps the theme's own account-bg.jpg. Every rule is
 * scoped to body.wdes-page-login so the shared register / password-reset pages
 * are untouched, and the selectors are the theme's own -- no markup was added.
 */

/* Panel split. The background image leaves the wrapper and moves to the right
   panel; the wrapper keeps the theme surface colour so dark mode still works. */
body.wdes-page-login .wdes-wrap-account-page {
  background: var(--block-bg);
  padding: 0;
  gap: 0;
  /* Left panel a little wider than the right, as in the reference split. */
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto 1fr;
}

/* Logo -- top-left, now over the plain panel. */
body.wdes-page-login .wdes-wrap-account-page_header {
  grid-area: 1 / 1 / 2 / 2;
  padding: 28px 36px 0;
}

/* Login card -- left panel, centred in the space under the logo.
   The `.has-header*` height rules in core.css are overridden here. */
body.wdes-page-login .wdes-wrap-account-page_main {
  grid-area: 2 / 1 / 3 / 2;
  height: auto;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 32px 40px;
  justify-content: center;
}

/* No card: the form sits straight on the white panel, as in the reference.
   The stock surface, border, radius and fixed height all come off. */
body.wdes-page-login .wdes-wrap-account-page_main_article {
  height: auto;
  min-height: 0;
  padding: 0;
  background-color: transparent;
  border: 0;
  border-radius: 0;
}

/* The card is content-height now, so the form's own scroll area is not needed. */
body.wdes-page-login .wdes-wrap-account-page_main-article_heading {
  margin-bottom: 32px;
}

body.wdes-page-login .wdes-wrap-account-page_main-article_form {
  max-height: none;
  overflow: visible;
  margin-bottom: 0;
}

body.wdes-page-login .wdes-wrap-account-page_main-article_form_actions {
  margin-top: 24px;
}

body.wdes-page-login .wdes-wrap-account-page_main-article_form_actions .d-flex {
  justify-content: center;
  gap: 20px;
}

/* Announcements -- right panel, full height, keeps the stock background. */
body.wdes-page-login .wdes-wrap-account-page_footer {
  grid-area: 1 / 2 / 3 / 3;
  max-width: none;
  justify-content: center;
  padding: 40px 48px;
  background: var(--brand-primary) url("../../../../img/account-bg.jpg") no-repeat center center;
  background-size: cover;
}

/* Below 1024px the wrapper is a flex column (core.css); the panels stack in the
   theme's own order -- logo, card, announcements. */
@media (max-width: 1023.8px) {
  body.wdes-page-login .wdes-wrap-account-page {
    padding: 16px;
  }
  body.wdes-page-login .wdes-wrap-account-page_header {
    padding: 8px 0 0;
  }
  /* The stock glass treatment exists for the image background it used to sit on. */
  body.wdes-page-login .wdes-wrap-account-page_header .logo {
    padding: 0;
    border: 0;
    backdrop-filter: none;
  }
  body.wdes-page-login .wdes-wrap-account-page_main {
    padding: 0;
  }
  body.wdes-page-login .wdes-wrap-account-page_footer {
    width: 100%;
    padding: 24px;
    border-radius: var(--radius);
  }
}


/* ---------------------------------------------------------------------------
 * Announcements, restyled as the right panel's own headline block: the stock
 * frosted card chrome comes off so the text sits straight on the image, the
 * way the reference design does. Same markup, same carousel behaviour.
 * ------------------------------------------------------------------------ */
body.wdes-page-login .wdes-announcements-carousel {
  width: 100%;
  max-width: 440px;
}

body.wdes-page-login .wdes-announcements-carousel .carousel-inner {
  background-color: transparent;
  backdrop-filter: none;
  border-radius: 0;
}

body.wdes-page-login .wdes-announcements-carousel .wdes-account-page-announcement-single {
  padding: 0;
}

body.wdes-page-login .wdes-account-page-announcement-single_date {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

body.wdes-page-login .wdes-account-page-announcement-single_title {
  font-size: 28px;
  line-height: 1.25;
  font-weight: 600;
  margin: 14px 0 12px;
}

body.wdes-page-login .wdes-account-page-announcement-single_description {
  width: 100%;
  font-size: 15px;
  line-height: 24px;
}

body.wdes-page-login .wdes-account-page-announcement-single_btn {
  margin-top: 24px;
  padding: 10px 20px;
  font-weight: 600;
}

/* Indicators sit under the block, aligned with the text rather than centred. */
body.wdes-page-login .wdes-announcements-carousel ol.carousel-indicators {
  justify-content: flex-start;
  margin-top: 28px;
}

/* ---------------------------------------------------------------------------
 * Type scale: the stock account page is sized for a full-height card, which
 * reads oversized in the narrower two-panel split. Toned down a notch.
 * ------------------------------------------------------------------------ */
/* Logo size. Height drives it -- the PNG keeps its own aspect ratio, so the
   width follows. This is the single knob: raise/lower the height to taste. */
body.wdes-page-login .wdes-wrap-account-page_header .phox-logo--light {
  height: 52px;
  width: auto;
  max-width: 100%;
}

body.wdes-page-login .wdes-wrap-account-page_main-article_heading .header-lined h1 {
  font-size: 28px;
  font-weight: 700;
}

body.wdes-page-login .wdes-wrap-account-page_main-article_form .form-group {
  margin-bottom: 16px;
}

body.wdes-page-login .wdes-wrap-account-page_main-article_form .form-control {
  height: 46px;
  padding: 0 14px;
  font-size: 14px;
  border-radius: 6px;
  background-color: var(--input-bg);
  border: 1px solid var(--gray-lighter-3, #e2e2e2);
}

body.wdes-page-login .wdes-wrap-account-page_main-article_form .form-group label,
body.wdes-page-login .wdes-wrap-account-page_main-article_form .wdes-rememberme {
  font-size: 14px;
}

body.wdes-page-login .wdes-wrap-account-page_main-article_form .wdes-wrap-account-page_main-article_form_action {
  height: 46px;
  margin-top: 24px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
}

body.wdes-page-login .wdes-wrap-account-page_main-article_form_actions .wdes-register {
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
 * Legal line at the foot of the card.
 * ------------------------------------------------------------------------ */
body.wdes-page-login .wdes-wrap-account-page_main-article_legal {
  margin-top: 32px;
  color: var(--text-clr);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

body.wdes-page-login .wdes-wrap-account-page_main-article_legal a {
  color: inherit;
  text-decoration: underline;
}

body.wdes-page-login .wdes-wrap-account-page_main-article_legal a:hover {
  color: var(--brand-primary);
}

@media (max-width: 1023.8px) {
  body.wdes-page-login .wdes-wrap-account-page_main_article {
    padding: 0;
  }
  body.wdes-page-login .wdes-account-page-announcement-single_title {
    font-size: 24px;
  }
}