/* Login page landing content -- kept in its own file since this markup
   (hero/audience/benefits/contact sections) exists only on login.html,
   not reused by any other template. Uses only the existing :root
   variables from style.css (loaded first); no new colors introduced.

   .login-body/.login-card/.login-form/etc (the form itself, unchanged
   in markup/logic) still live in style.css -- overridden here only to
   stop force-centering the whole body as a single flex row, since the
   body now has two stacked children (the first-viewport fold, then
   the scrollable landing content) instead of one, and to switch the
   card from centered/boxed to a left-aligned, more spacious layout. */
.login-body {
  display: block;
  min-height: auto;
  padding: 0;
}
/* No min-height:100vh -- that forced this section to fill the whole
   first viewport on mobile, leaving a large dead gap between the
   scroll-hint chevron and .login-hero below it whenever the card's own
   content was shorter than the screen. Desktop already overrides this
   rule entirely (min-height:0, grid layout), so this only affects
   mobile. */
.login-fold {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
}
.login-card {
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
  box-shadow: none;
  border: 1px solid var(--line);
}
.login-wordmark { font-size: 22px; }
.login-inline-cta {
  margin: 0 0 20px;
  font-size: 13.5px;
  color: var(--ink-muted);
}
.login-inline-cta a {
  color: var(--accent);
  font-weight: 700;
}
/* .login-nav only exists as a desktop concept -- the mobile fold already
   carries the wordmark (inside .login-card) and the "not a client yet"
   link (.login-inline-cta), so this element is hidden below 1024px
   rather than duplicating them in a second place on a small screen. */
.login-nav { display: none; }
.login-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  color: var(--dark);
}
.login-nav-logo { flex: none; }
.login-nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.login-nav-brand-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.login-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
/* Dropdown: opened by real :hover (mouse) and by the .is-open class a
   click toggles in login.js (touch/keyboard) -- both drive the exact
   same visual state, so either path shows the identical menu. Closed
   by: leaving the trigger (hover simply stops matching), clicking the
   trigger again while open (login.js removes .is-open), or clicking
   anywhere outside any dropdown (a document-level listener in
   login.js clears .is-open from all of them). */
.login-nav-dropdown { position: relative; }
.login-nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  color: var(--dark);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.login-nav-dropdown-trigger span { color: var(--ink-muted); font-size: 11px; }
.login-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 220px;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 8px;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.login-nav-dropdown:hover .login-nav-dropdown-menu,
.login-nav-dropdown.is-open .login-nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.login-nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--dark);
  font-size: 14px;
  font-weight: 500;
}
.login-nav-dropdown-menu a:hover { background: var(--bg); }
.login-nav-dropdown-menu--lang .lang-options { margin: 0; box-shadow: none; }
/* "B2B додаток" trigger carries a small status badge next to its label
   -- more specific than the generic chevron-span rule above so it
   doesn't inherit the chevron's muted/11px styling. */
.login-nav-dropdown-trigger .login-nav-badge {
  background: var(--badge-bg);
  color: var(--badge-ink);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
/* Not a link list like the other dropdowns -- just one line of copy,
   since the app itself doesn't exist yet (no anchor, no navigation). */
.login-nav-dropdown-menu--app { min-width: 260px; }
.login-nav-dropdown-menu--app p {
  margin: 0;
  padding: 6px 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-muted);
}
/* Product line list -- descriptive only, not links (no per-category
   catalog filter exists), same non-link pattern as the app dropdown. */
.login-nav-dropdown-menu--products p {
  margin: 0;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark);
}
.login-nav-dropdown-menu--contacts a { font-variant-numeric: tabular-nums; }
.login-nav-cta {
  color: var(--accent);
  font-weight: 700;
  font-size: 14.5px;
}
/* Hero media (caption + carousel) is new desktop-only content (right
   column of the hero) -- no mobile equivalent existed before, so it
   stays hidden below 1024px to leave the mobile page exactly as-is. */
.login-hero-media { display: none; }
/* Caption card floats in FRONT of the phone frame, overlapping its
   left edge (negative margin pulls the frame under it, higher
   z-index keeps the caption on top) -- matches the reference's
   layered look. Same size/style on every slide -- only the text
   inside changes, toggled the same is-active way the slides/dots
   already are. */
/* .login-carousel-col stacks the phone frame and the nav row (arrows
   + dots) as two fixed-width (280px) siblings centered by the SAME
   flex container -- guarantees the nav lines up under the phone frame
   itself, not under the wider caption+phone composition. The caption
   is positioned absolutely against .login-carousel-frame (whose own
   box is sized only by the phone, since an absolutely-positioned
   child contributes nothing to its parent's size), so it can overlap
   the phone without shifting either the frame's or the nav's width/
   centering. */
.login-carousel-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.login-carousel-frame {
  position: relative;
}
.login-carousel-caption {
  position: absolute;
  z-index: 2;
  left: -164px;
  top: 66%;
  transform: translateY(-50%);
  width: 220px;
  padding: 24px;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  border-radius: var(--radius-card);
}
/* Second caption card mirrors the first (same size/style, same
   56px-ish overlap into the phone frame) but sits near the top and
   on the right instead. */
.login-carousel-caption--top {
  left: auto;
  right: -164px;
  top: 40px;
  transform: none;
}
.login-carousel-caption .login-icon-badge { margin-bottom: 14px; }
.login-carousel-caption p {
  display: none;
  margin: 0;
  color: var(--dark);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
}
.login-carousel-caption p.is-active { display: block; }
/* Both real slides are phone screenshots sharing the same aspect ratio
   (~0.557 -- 780x1399/780x1392), so the carousel is sized to that
   exact ratio and the images fill it via object-fit:cover -- edge to
   edge, no letterbox padding, only the sub-percent difference between
   the two screenshots' own ratios gets cropped (imperceptible). */
.login-carousel {
  position: relative;
  z-index: 1;
  flex: none;
  width: 280px;
  aspect-ratio: 780 / 1399;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  overflow: hidden;
}
.login-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.login-carousel-slide {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  padding: 24px 64px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 14.5px;
}
.login-carousel-slide.is-active { display: flex; }
.login-carousel-slide--media { padding: 0; }
.login-carousel-slide--media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Arrows + dots live below the phone frame (their own row, .login-
   carousel-nav), not overlaid on the image -- matches the reference.
   Equal-width arrow buttons either side of the dots in a
   space-between row keeps the dots exactly centered regardless of
   how many there are. */
.login-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login-carousel-arrow {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  color: var(--dark);
  cursor: pointer;
}
.login-carousel-dots {
  display: flex;
  gap: 8px;
}
.login-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}
.login-carousel-dot.is-active { background: var(--accent); }
.login-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ink-muted);
  border: 1px solid var(--line);
}
/* Explicit mobile ask: the chevron nudging users to scroll past the
   fold. Desktop already hides it separately (its own media query,
   grid layout has no fold to scroll past). */
@media (max-width: 1023px) {
  .login-scroll-hint { display: none; }
}

/* .landing-wrap is the ONE shared width container for the whole page --
   the login-fold (form) and .login-landing (hero onward) are both its
   direct children, so they can never drift to different max-widths/
   margins again. Deliberately unconditional (matches every breakpoint)
   with a mobile-only override right below that zeroes its own padding:
   below 1024px the existing per-section padding (.login-fold's own
   24px, .login-landing's own 20px) already does the job untouched, so
   this class contributes nothing there -- max-width/margin are already
   inert on a narrower-than-960 viewport regardless. */
.landing-wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 1023px) {
  .landing-wrap { padding: 0; }
}

/* Mobile nav bar: brand + burger, replacing the desktop's own
   flex-column layout (brand/links/cta row + trust strip) with a single
   compact row. The dropdown menus/trust strip/CTA link reuse the exact
   same markup as desktop (no duplicated translation keys) -- just
   hidden by default and, for the dropdown menus, switched from an
   absolute-positioned hover flyout to a static toggled accordion panel
   that pushes the rest of the drawer down instead of overlapping it. */
@media (max-width: 1023px) {
  .login-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 16px 20px;
  }
  .login-nav-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .login-nav-trust,
  .login-nav-cta {
    display: none;
  }
  .login-nav-links {
    display: none;
  }
  .login-nav.is-menu-open .login-nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    box-shadow: var(--shadow);
    padding: 8px;
    z-index: 30;
  }
  .login-nav.is-menu-open .login-nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 10px 8px;
  }
  .login-nav-dropdown-menu,
  .login-nav-dropdown-menu--app {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    min-width: 0;
    padding: 4px 0 4px 12px;
    display: none;
  }
  .login-nav-dropdown.is-open .login-nav-dropdown-menu {
    display: block;
  }
  .login-nav-burger {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    padding: 0;
    color: var(--dark);
    cursor: pointer;
  }
  .login-nav-burger-icon-close { display: none; }
  .login-nav.is-menu-open .login-nav-burger-icon-open { display: none; }
  .login-nav.is-menu-open .login-nav-burger-icon-close { display: block; }

  /* Mobile header brand: drop the "AGROSPHERA" wordmark next to the
     logo mark (the fold below already carries it) and promote "B2B"
     to the primary label, sized close to the logo mark's own 32px
     height instead of the small all-caps tag it is on desktop. */
  .login-nav-brand .wordmark { display: none; }
  .login-nav-brand-sub {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--dark);
  }
}
@media (min-width: 1024px) {
  .login-nav-burger { display: none; }
}

/* Mobile carousel: a static pair of the two app screenshots (catalog
   behind/top-left, cart in front/bottom-right, overlapping), no
   caption and no switching -- both screens are always visible at
   once, so there is nothing to switch between and no separate JS
   carousel instance is initialized for this block (no
   data-login-carousel attribute). Small/compact by design (each image
   ~1/3 of the old edge-to-edge width) rather than the desktop's own
   single-phone-frame treatment. Hidden at desktop, where
   .login-hero-media (its own separate DOM subtree) takes over. */
.login-mobile-carousel {
  display: flex;
  justify-content: center;
  padding: 0 20px 40px;
}
.login-mobile-carousel-pair {
  position: relative;
  width: 190px;
  height: 300px;
}
.login-mobile-carousel-img {
  position: absolute;
  width: 140px;
  aspect-ratio: 780 / 1399;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}
.login-mobile-carousel-img--back {
  top: 0;
  left: 0;
}
.login-mobile-carousel-img--front {
  bottom: 0;
  right: 0;
}
@media (min-width: 1024px) {
  .login-mobile-carousel { display: none; }
}

.login-landing {
  padding: 0 20px 56px;
}
.login-landing section {
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.login-landing h2 {
  font-size: 21px;
  margin: 0 0 20px;
}

/* ---- Hero: accent-bordered callout card, left-aligned ---- */
/* .login-hero now lives inside .hero-row (a sibling of .login-fold),
   not .login-landing -- it needs its own mobile horizontal padding
   (previously inherited from .login-landing's 0 20px) and its own
   bottom spacing (previously the shared .login-landing section rule's
   40px). Zeroed at desktop, where .hero-row's flex gap plus
   .landing-wrap's own padding handle spacing instead. */
.login-hero {
  padding: 8px 20px 40px;
}
.hero-block {
  background: var(--badge-bg);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-card);
  padding: 28px 28px 28px 24px;
}
.login-hero-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 20px;
}
.login-hero-brand .wordmark { font-size: 20px; }
.login-hero h1 {
  font-size: 26px;
  line-height: 1.3;
  margin: 0 0 12px;
}
.login-hero p {
  color: var(--ink-muted);
  font-size: 15px;
  max-width: 640px;
  margin: 0;
}

/* ---- Shared icon-badge pattern for audience/benefit cards -- same
   thin-outline SVG language already used in _sidebar.html's nav
   icons, wrapped in a colored circle instead of that file's plain
   currentColor treatment, to read as a distinct "feature" marker. ---- */
.login-icon-badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--badge-bg);
  color: var(--accent);
}
.login-icon-badge svg { width: 22px; height: 22px; }

.login-audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.login-audience-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 18px;
}
.login-audience-card h3 {
  font-size: 15px;
  margin: 0 0 4px;
}
.login-audience-card p {
  color: var(--ink-muted);
  font-size: 13.5px;
  margin: 0;
}

.login-benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.login-benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
.login-benefits-list h3 {
  font-size: 15px;
  margin: 0 0 4px;
}
.login-benefits-list p {
  color: var(--ink-muted);
  font-size: 13.5px;
  margin: 0;
}

.login-contact p {
  color: var(--ink-muted);
  font-size: 14px;
  max-width: 480px;
  margin: 0 0 20px;
}
.login-contact-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
}
/* .login-contact-main's heading/text/buttons stack flush left inside
   the page's own padding by default (same as every other section) --
   centering them here is a deliberate mobile-only request for this
   one block, not the general page alignment. */
@media (max-width: 1023px) {
  .login-contact-main { text-align: center; }
  .login-contact-buttons { margin: 0 auto; }
}
.login-contact-btn {
  display: block;
  text-align: center;
  padding: 13px 20px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 14.5px;
}
.login-contact-telegram {
  background: var(--accent);
  color: var(--accent-ink);
}
.login-contact-viber {
  background: var(--badge-bg);
  color: var(--badge-ink);
}

.login-contact-about { display: none; }

@media (min-width: 1024px) {
  /* Root cause of the "content pushed left, unequal margins" bug this
     block fixes: style.css's own desktop rule (`body { max-width:1200px;
     margin-left:240px }`, in the block above this file) assumes every
     desktop page reserves the left 240px for templates/_sidebar.html.
     login.html never renders that sidebar, so this page's <body> was
     silently getting a 240px left offset it has no matching sidebar
     for, throwing off screen-relative centering for every child no
     matter how their own widths were set. Cancelling it here (scoped
     to .login-body only) is what actually fixes centering -- not the
     .landing-wrap width math below, which was already correct. */
  .login-body { max-width: none; margin-left: 0; }

  /* Real nav bar exists only at desktop -- mobile shows the wordmark
     and "not a client yet" link inside the fold card instead, so this
     stays display:none (set above) below this breakpoint. Two rows:
     .login-nav-main (brand/links/CTA) and a smaller .login-nav-trust
     strip below it -- kept as a second row rather than squeezed into
     the main row so the header doesn't get crowded. */
  .login-nav {
    display: flex;
    flex-direction: column;
    padding: 24px 0 16px;
  }
  .login-nav-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .login-nav-trust {
    display: flex;
    gap: 28px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--ink-muted);
  }
  .login-nav-trust span { display: flex; align-items: center; gap: 6px; }
  .login-nav-trust-check {
    color: var(--accent);
    font-style: normal;
    font-weight: 700;
  }

  /* Mobile keeps .login-fold's own 100vh/24px-padding fold, the
     scroll-hint chevron, and .login-hero stacking below it via plain
     block flow -- none of that is touched here (same DOM order: form
     first, hero second, media placeholder last). At this breakpoint
     .hero-row becomes a real two-column CSS grid: column 1 holds both
     .login-hero (row 1: headline+subtitle) and .login-fold (row 2:
     the compact card) stacked on top of each other, column 2 holds
     the new .login-hero-media placeholder spanning both rows. This
     reaches a genuine side-by-side layout via grid placement alone --
     no DOM reordering, so mobile (which has no CSS for .hero-row at
     all) is completely unaffected. */
  .hero-row {
    display: grid;
    grid-template-columns: minmax(340px, 440px) minmax(320px, 1fr);
    column-gap: 56px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 0 72px;
    text-align: left;
  }
  .login-hero {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    max-width: none;
  }
  .login-fold {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    padding: 0;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
  }
  .login-hero-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    grid-column: 2;
    grid-row: 1 / 3;
  }
  /* Matches .login-carousel's own width (280px) rather than the full
     available column -- keeps the arrows close to the phone frame's
     actual edges instead of spread across empty side space. */
  .login-carousel-nav { width: 280px; }
  /* .login-card's own max-width:420px is only a ceiling -- inside
     .login-fold's own flex column (now align-items:flex-start above)
     a child with no definite width shrink-wraps to its content's
     natural size instead of actually reaching a set width. An
     explicit width keeps it a fixed compact size. The wordmark/
     subtitle/inline-cta inside the card are mobile-only now that the
     nav bar (brand) and hero copy (marketing message) cover the same
     ground at desktop -- hidden here, untouched on mobile. */
  .login-card { width: 100%; max-width: 420px; text-align: left; }
  .login-card .login-wordmark,
  .login-card .login-sub,
  .login-card .login-inline-cta { display: none; }
  .login-landing { padding-left: 0; padding-right: 0; }
  .login-scroll-hint { display: none; }

  /* Headline is the dominant element of the left column -- large,
     bold, left-aligned, on the plain page background (no boxed
     callout), sized to read well in a ~440px-wide column rather than
     wrapping awkwardly the way a page-wide 52px headline would. */
  .login-hero-brand { display: none; }
  .login-hero h1 { font-size: 38px; line-height: 1.2; margin: 0 0 16px; }
  .login-hero p { font-size: 16px; margin: 0 0 28px; max-width: none; }
  .hero-block {
    background: none;
    border-left: 0;
    border-radius: 0;
    padding: 0;
  }

  /* Sections below get more breathing room to match the airier first
     screen -- same content, just a bigger type scale and more
     vertical/inner padding than the mobile defaults above. */
  .login-landing section { padding: 64px 0; }
  .login-landing h2 { font-size: 26px; margin: 0 0 28px; }
  .login-audience-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .login-audience-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; }
  .login-benefits-list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .login-benefits-list li { padding: 20px 24px; }
  .login-contact-buttons { flex-direction: row; max-width: none; }
  .login-contact-btn { flex: 0 1 220px; }
  .login-contact-telegram:hover,
  .login-contact-viber:hover { filter: brightness(0.94); }

  .login-contact {
    display: grid;
    grid-template-columns: 520px 1fr;
    align-items: center;
    gap: 48px;
  }
  .login-contact-main { max-width: 520px; }
  .login-contact-about {
    display: block;
    justify-self: center;
    width: 100%;
    max-width: 400px;
    background: var(--card-bg);
    box-shadow: var(--shadow);
    border-radius: var(--radius-card);
    padding: 28px 32px;
  }
  .login-contact-about h3 { font-size: 17px; margin: 0 0 12px; }
  .login-contact-about p {
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    max-width: none;
  }
}

.login-contact-telegram:focus-visible,
.login-contact-viber:focus-visible,
.login-scroll-hint:focus-visible,
.login-inline-cta a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}