/* ==========================================================================
   hero-shell.css — the split hero (.login_content) + left branding column

   Written mobile-first, mirroring the original's own structure. Every rule
   below was read out of the site's stylesheet (main-4c120c8f.css, the
   [data-v-4bcb3b18] scope) rather than inferred from measurements.

   Breakpoints that matter here: 768px (the layout inversion), 1280px and
   1344px (watermark width + hero padding). There is NO 500px breakpoint.
   ========================================================================== */

/* ---------- base: below 768px — stacked, plain white, blue logo ---------- */
.login_content {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: unset;
  padding-top: 16px;
  overflow: hidden;
  z-index: 0;
}

/* The container sits above the ::before watermark.

   IMPORTANT — below 1004px this wrapper must NOT behave like a .container.
   The live site is a Vue SPA that *adds and removes the `container` class* by
   viewport width: at 1003px the element is `class=""`, at 1004px it is
   `class="container"`. No media query expresses this, which is why grepping the
   stylesheet never revealed it.

   It matters because .container caps at 720px from 768px up. If that cap applied
   here, the two 50% columns would be 360px each and would no longer line up with
   the 50/50 blue/white gradient split — the login form ends up crammed against
   the blue edge with dead white space to its right. Unsetting max-width below
   1004px lets the columns span the full width and meet the split exactly. */
.login_content > .container {
  flex: 1;
  z-index: 1;
  max-width: none;
  /* the site drops the side gutter below 1344px */
  padding-left: 0;
  padding-right: 0;
}

/* from 1004px the `container` class is present, so restore its real max-widths */
@media (min-width: 1004px) { .login_content > .container { max-width: 1080px; } }
@media (min-width: 1280px) { .login_content > .container { max-width: 1312px; } }

.login_content .login-cols {
  flex: 1;
  padding-bottom: 35px;
}

.login_content .login-col {
  display: flex;
  justify-content: center;
}

.login_content .login-col__inner {
  width: 344px;
  max-width: 100%;
}

/* `font: 0/0 a` is the site's own trick for hiding the h1 text node,
   which is kept in the markup for SEO / assistive tech. */
.login_content .logo {
  font: 0/0 a, sans-serif;
  margin: 0 0 13px;
}

.login_content .logo-link {
  display: inline-block;
}

.login_content h2 {
  font-size: 28px;
  line-height: 36px;
  font-weight: 400;
  margin: 0 0 30px;
  /* no colour here — inherits #242529, i.e. dark text on white */
}

/* The original is a Vue SPA and swaps the <use href> on a single <svg> between
   the blue and white wordmarks. A static clone ships both and toggles display;
   this pair of rules is the one deliberate structural deviation in this file. */
.logo__icon--mobile  { display: inline-block; }
.logo__icon--desktop { display: none; }

/* ---------- >=768px: the inversion into the blue split panel ---------- */
@media (min-width: 768px) {
  .login_content {
    flex-direction: row;
    background: linear-gradient(90deg, #00aff0 50%, transparent 50.01%);
    padding-top: 70px;
    padding-bottom: 70px;
  }

  /* The giant faint logo mark filling the blue half. A separate layered asset —
     easy to miss, and the hero looks empty without it. */
  .login_content::before {
    content: "";
    position: absolute;
    inset: 0 40% 0 0;
    background: url(../img/logo_icon_white.svg) 100% -6% no-repeat;
    background-size: auto 190%;
    opacity: .12;
    pointer-events: none;
  }

  .login_content .login-cols {
    display: flex;
    place-content: center center;
    align-items: stretch;
    padding-bottom: 0;
  }

  .login_content .login-col { width: 50%; }

  .login_content h2 {
    font-size: 32px;
    line-height: 40px;
    color: var(--of-white);
    margin-bottom: 31px;
  }

  .logo__icon--mobile  { display: none; }
  .logo__icon--desktop { display: inline-block; }
}

/* ---------- >=1280px: watermark narrows ---------- */
@media (min-width: 1280px) {
  .login_content::before { right: 47%; }
}

/* ---------- >=1344px: full hero padding, watermark meets the split ---------- */
@media (min-width: 1344px) {
  .login_content { padding-top: 94px; padding-bottom: 94px; }
  .login_content::before { right: 50%; }
  /* the side gutter comes back at the widest breakpoint */
  .login_content > .container { padding-left: 16px; padding-right: 16px; }
}