/* ==========================================================================
   Baylan home page
   Loaded by extension/module/baylan_home only, after baylan-foundation.css and
   baylan-shell.css. Everything here is layout for the six home sections; the
   cards, buttons, tags and the blueprint frame all come from the foundation.

   Mobile first. Breakpoints stay on the theme's Bootstrap 4 stops
   (576 / 768 / 992 / 1200) so the two systems do not diverge.

     1. Home scope
     2. Section chrome
     3. Hero
     4. Categories
     5. Recommended
     6. Brands
     7. B2B
     8. Trust
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Home scope
   -------------------------------------------------------------------------- */

.bl-home {
  --bl-home-gap: 20px;
  --bl-home-section: 34px;
  --bl-home-card: 208px;
}

@media (min-width: 992px) {
  .bl-home {
    --bl-home-gap: 24px;
    --bl-home-section: 56px;
  }
}

.bl-home ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   2. Section chrome
   -------------------------------------------------------------------------- */

.bl-home-section { padding: var(--bl-home-section) 0; }

.bl-home-section + .bl-home-section { padding-top: 0; }

.bl-home-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--bl-home-gap);
}

.bl-home-h2 {
  margin: 0;
  font-size: var(--bl-h3);
}

@media (min-width: 768px) {
  .bl-home-h2 { font-size: var(--bl-h2); }
}

.bl-home-section > .bl-container > .bl-home-h2 { margin-bottom: var(--bl-home-gap); }

.bl-home-more {
  font-size: var(--bl-h5);
  white-space: nowrap;
}

.bl-home-more::after { content: ' \2192'; }

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */

/* No surface tint: the prototype's hero sits directly on the page ground and
   only the photo plate behind the product carries a light technical panel. */
.bl-home-hero {
  padding: var(--bl-home-section) 0;
}

.bl-home-hero-inner {
  display: grid;
  gap: var(--bl-home-gap);
}

@media (min-width: 992px) {
  /* Text first, figure second: the H1 should be the first thing read and the
     first thing painted, and the source order already puts it there. */
  .bl-home-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    /* `center` pushed the copy 62px below where the prototype starts it. The
       figure keeps its own centring so the plate stays optically balanced
       against the taller text column. */
    align-items: start;
    gap: calc(var(--bl-home-gap) * 2);
  }

  .bl-home-hero-figure { align-self: center; }
}

.bl-home-kicker {
  margin: 0 0 var(--bl-space-2);
  font-family: var(--bl-font-heading);
  font-size: var(--bl-h6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bl-color-accent-700);
}

.bl-home-hero-title {
  /* Below the token so the longest Ukrainian line still fits 320px without a
     hyphen or an overflow. */
  margin: 0 0 var(--bl-space-3);
  font-size: 30px;
}

@media (min-width: 576px) { .bl-root .bl-home-hero-title { font-size: 36px; } }
/* 52px and 345px are the prototype's own numbers, stated literally rather than
   through --bl-h1: that token also sizes the category and product H1s and must
   not move with this. max-width in px, not ch, so the wrap point does not drift
   when the font metrics change. */
@media (min-width: 992px) { .bl-root .bl-home-hero-title { font-size: 52px; line-height: 1.12; max-width: 345px; } }

.bl-home-hero-lead {
  margin: 0 0 var(--bl-home-gap);
  max-width: 52ch;
  color: var(--bl-alpha-text-70);
}

.bl-home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bl-space-3);
}

/* A CTA narrower than this stops being readable, so the pair wraps instead of
   shrinking. */
.bl-home-hero-actions > .bl-btn {
  flex: 1 1 auto;
  min-width: 170px;
  justify-content: center;
}

@media (min-width: 576px) {
  .bl-home-hero-actions > .bl-btn { flex: 0 0 auto; }
}

/* Scoped through .bl-home because the `.bl-home ul` reset above is (0,1,1) and
   would otherwise flatten the margin back to zero. */
.bl-home .bl-home-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bl-space-3) 26px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.bl-home-hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--bl-space-2);
  font-size: 13.5px;
}
.bl-home-hero-trust .bl-icon { flex: 0 0 auto; color: var(--bl-color-accent-700); }

/* Capped rather than fluid: between 576 and 992 the figure is the full column,
   and a 700px square of meter pushes the whole catalogue off the first screen. */
.bl-home-hero-figure {
  margin: 0 auto;
  max-width: 420px;
}

/* Tinted plate rather than white: it separates the product from the page and
   is what makes the framed figure read as a plate instead of a gap. */
.bl-home-hero-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: var(--bl-color-accent-100);
}

.bl-home-hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Карусель героя.

   Кадр лишається тим самим «кресленням», що й раніше: рамка bl-blueprint
   переїхала на .bl-hero-car-view, бо саме її треба обрізати по слайдах, а
   стрілки й крапки живуть зовні й не мають ховатися під overflow. */
.bl-hero-car { position: relative; }

.bl-hero-car-view { overflow: hidden; }

.bl-hero-car-track {
  display: flex;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .bl-hero-car-track { transition: none; }
}

.bl-root .bl-hero-car-slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: block;
  color: var(--bl-color-text);
  text-decoration: none;
}

.bl-root .bl-hero-car-slide:hover { text-decoration: none; }

.bl-hero-car-body {
  display: block;
  padding: var(--bl-space-2) var(--bl-space-3) var(--bl-space-3);
  border-top: var(--bl-hairline);
  background: var(--bl-color-photo-bg);
}

.bl-hero-car-cat {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bl-alpha-text-55);
}

/* Дві сходинки назви: щоб висота слайда не стрибала при гортанні. */
.bl-hero-car-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  min-height: 2.7em;
  font-size: 13.5px;
  line-height: 1.35;
}

.bl-hero-car-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bl-space-2);
  margin-top: var(--bl-space-2);
}

.bl-hero-car-price { font-size: 17px; font-weight: 700; white-space: nowrap; }
.bl-hero-car-old { margin-right: 6px; font-size: 13px; font-weight: 400; color: var(--bl-alpha-text-55); }
.bl-hero-car-new { color: var(--bl-color-logo); }

.bl-hero-car-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--bl-color-accent);
}

.bl-root .bl-hero-car-slide:hover .bl-hero-car-more { color: var(--bl-color-accent-700); }

.bl-hero-car-nav {
  position: absolute;
  top: 34%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: var(--bl-hairline);
  background: var(--bl-color-photo-bg);
  color: var(--bl-color-text);
  cursor: pointer;
  z-index: 2;
}

.bl-hero-car-nav:hover { background: var(--bl-color-accent); border-color: var(--bl-color-accent); color: #fff; }
.bl-hero-car-prev { left: -18px; }
.bl-hero-car-next { right: -18px; }

/* На вузьких екранах стрілки не виносимо за кадр: там для них немає місця. */
@media (max-width: 575.98px) {
  .bl-hero-car-prev { left: 4px; }
  .bl-hero-car-next { right: 4px; }
}

.bl-hero-car-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--bl-space-2);
}

.bl-hero-car-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  background: rgba(29, 31, 32, .25);
  cursor: pointer;
  transition: width .18s ease, background .18s ease;
}

.bl-hero-car-dot.is-active { width: 20px; background: var(--bl-color-accent); }

.bl-home-hero-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bl-space-3);
  padding: var(--bl-space-2) var(--bl-space-3);
  border-top: var(--bl-hairline);
  background: var(--bl-color-photo-bg);
  font-size: 12.5px;
}

.bl-home-hero-fig { flex: 0 0 auto; color: var(--bl-alpha-text-55); }

/* --------------------------------------------------------------------------
   4. Categories
   -------------------------------------------------------------------------- */

/* Two columns is a hard floor on phones: the prototype's 390px screen shows a
   pair, and one column would push the ninth tile far below the fold. */
.bl-home-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bl-home-gap);
}

@media (min-width: 576px) {
  .bl-home-cat-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* The prototype's desktop row is a fixed four; auto-fill produced five at 1440
   and made every tile narrower and taller than the target. The tile COUNT
   differs too (nine live categories against the prototype's seven) but that is
   real data, not a layout defect. */
@media (min-width: 992px) {
  .bl-home-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* A square media box made the tile 315px tall against the prototype's 196px.
     The image is already object-fit: contain, so it letterboxes rather than
     crops. */
  .bl-home-cat-media { aspect-ratio: auto; height: 128px; }
}

/* Scoped through .bl-home so `color: inherit` actually holds: the base
   `.bl-root a` colour is (0,1,1) and beats a single-class rule, which turned
   every tile heading accent blue. */
.bl-home .bl-home-cat {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bl-color-bg);
  color: inherit;
  text-decoration: none;
}

.bl-home-cat:hover { border-color: var(--bl-color-accent); }

.bl-home-cat-media {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--bl-color-photo-bg);
  overflow: hidden;
}

/* `.bl-root` prefix is load-bearing. `.bl-root img { height: auto }` in the
   foundation is specificity (0,1,1) and beats a bare `.bl-home-cat-img`, so
   `height: 100%` never applied: a 320px source rendered 284px tall inside a
   128px band and overflow:hidden cropped the meter top and bottom. This is the
   same caskade defect as the card title, the shell links and the hero H1 —
   fifth instance in this codebase. */
.bl-root .bl-home-cat-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The two categories with no picture get a mark, not a borrowed product photo:
   one product cannot stand in for a whole category. */
.bl-home-cat-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--bl-color-neutral-100);
  color: var(--bl-alpha-text-45);
}

.bl-home-cat-empty > svg {
  width: 44px;
  height: 44px;
}

.bl-home-cat-body {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--bl-space-2);
  padding: var(--bl-space-3) 14px;
}

.bl-home-cat-text { flex: 1; }

.bl-home-cat-arrow {
  flex: 0 0 auto;
  color: var(--bl-color-accent-600);
}

.bl-home-cat-name {
  /* Clamped to two lines so a long category name cannot make its tile taller
     than the rest of the row — «Одноструменеві мокрохідні лічильники води»
     wrapped to three and pushed its tile to 214px against the others' 194px.
     The full name stays in the DOM for search engines and for the link's
     accessible name. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Always reserve both lines, so a one-line name and a two-line name produce
     the same tile height. Without this the grid row holding
     «Одноструменеві мокрохідні лічильники води» stood 20px taller than the row
     above it and the block read as ragged. */
  min-height: 2.5em;
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-font-heading-weight);
  font-size: var(--bl-h5);
  line-height: 1.25;
}

.bl-home-cat-count {
  display: block;
  margin-top: var(--bl-space-1);
  font-size: var(--bl-h6);
  color: var(--bl-alpha-text-55);
}

/* --------------------------------------------------------------------------
   5. Recommended
   -------------------------------------------------------------------------- */

/* A scroll container, not a slider. `scroll-snap` gives the prototype's
   behaviour with no script, and the cards stay reachable by keyboard and by
   find-in-page, which a slider's off-screen slides are not.

   The negative margin lets the row bleed past the container padding so the
   next card is visibly cut off at the edge; the matching padding puts the
   first card back in line and leaves room for the blueprint corner ticks,
   which overhang their box by 5.5px and would otherwise be clipped. */
.bl-home-rail {
  display: flex;
  gap: var(--bl-home-gap);
  margin: 0 calc(var(--bl-space-4) * -1);
  padding: 6px var(--bl-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.bl-home-rail-item {
  flex: 0 0 var(--bl-home-card);
  scroll-snap-align: start;
}

.bl-home-rail-item > .bl-card { height: 100%; }

@media (min-width: 992px) {
  /* Wide enough for the whole row: scrolling for content that already fits is
     just a way to hide half of it. */
  .bl-home-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 6px 0;
    overflow: visible;
  }

  .bl-home-rail-item { flex: none; }
}

/* --------------------------------------------------------------------------
   6. Brands
   -------------------------------------------------------------------------- */

.bl-home-brand-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bl-home-gap);
}

@media (min-width: 576px) {
  .bl-home-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Typographic tiles. None of the three manufacturers has an uploaded logo and
   none may be drawn for them. */
.bl-home .bl-home-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 24px;
  background: var(--bl-color-bg);
  color: inherit;
  text-decoration: none;
}

.bl-home-brand:hover { border-color: var(--bl-color-accent); }

.bl-home-brand-name {
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-font-heading-weight);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bl-home-brand-count {
  margin-top: var(--bl-space-1);
  font-size: var(--bl-h6);
  color: var(--bl-alpha-text-55);
}

/* --------------------------------------------------------------------------
   7. Selling points
   -------------------------------------------------------------------------- */

/* The B2B panel that follows brings its own top padding, and two full section
   gaps stacked left the navy band floating away from the page. */
.bl-home-usp-section { padding-bottom: 0; }

/* Scoped through .bl-home: the `.bl-home ul` reset is (0,1,1) and would
   otherwise win over this single-class rule. */
.bl-home .bl-home-usp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bl-home-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 576px) {
  .bl-home .bl-home-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .bl-home .bl-home-usp { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.bl-home-usp-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.bl-home-usp-mark {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--bl-color-accent-700);
}

.bl-home-usp-body { display: block; }

.bl-home-usp-title {
  display: block;
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-font-heading-weight);
  font-size: var(--bl-h5);
  line-height: 1.25;
}

.bl-home-usp-text {
  display: block;
  margin-top: 2px;
  font-size: var(--bl-h6);
  color: var(--bl-alpha-text-55);
}

/* --------------------------------------------------------------------------
   8. B2B
   -------------------------------------------------------------------------- */

.bl-home-b2b {
  padding: var(--bl-home-section) 0;
  background: var(--bl-color-accent-900);
  color: var(--bl-color-neutral-100);
}

.bl-home-b2b-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bl-home-gap);
  max-width: 760px;
}

@media (min-width: 992px) {
  .bl-home-b2b-inner {
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: var(--bl-container);
  }
}

.bl-home-b2b-kicker {
  margin: 0 0 var(--bl-space-2);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bl-color-accent-400);
}

.bl-home-b2b-title {
  margin: 0 0 var(--bl-space-3);
  max-width: 22ch;
  color: var(--bl-color-bg);
}

.bl-home-b2b-text {
  margin: 0 0 22px;
  max-width: 56ch;
  color: var(--bl-color-accent-200);
}

.bl-home-b2b-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bl-space-3);
}

/* One per line on phones: two buttons of unequal label length wrapping into a
   375px row leave one of them alone and full width, which reads as an error. */
.bl-home-b2b-actions > .bl-btn {
  flex: 1 1 100%;
  min-width: 150px;
  justify-content: center;
  padding: 11px 22px;
  font-size: 15px;
}

@media (min-width: 576px) {
  .bl-home-b2b-actions > .bl-btn { flex: 0 0 auto; }
}

/* The primary button's accent fill disappears into the navy panel, so the
   channel that should lead is the one drawn in the page background instead.

   Written as `a.` for the same reason the foundation restates its anchor
   buttons: `.bl-root a` is (0,1,1) and beats a bare class. */
.bl-root a.bl-home-b2b-cta {
  border-color: var(--bl-color-bg);
  background: var(--bl-color-bg);
  color: var(--bl-color-text);
}

.bl-root a.bl-home-b2b-cta:hover {
  border-color: var(--bl-color-accent-100);
  background: var(--bl-color-accent-100);
  color: var(--bl-color-text);
}

.bl-root a.bl-home-b2b-alt {
  border-color: var(--bl-color-accent-400);
  color: var(--bl-color-bg);
}

.bl-root a.bl-home-b2b-alt:hover {
  background: var(--bl-color-accent-800);
  color: var(--bl-color-bg);
}

.bl-home .bl-home-b2b-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
}

.bl-home-b2b-list li {
  display: flex;
  align-items: center;
  gap: var(--bl-space-2);
}

.bl-home-b2b-list .bl-icon {
  flex: 0 0 auto;
  color: var(--bl-color-accent-400);
}

/* --------------------------------------------------------------------------
   9. Closing copy
   -------------------------------------------------------------------------- */

.bl-home-seo { padding: var(--bl-home-section) 0 var(--bl-space-2); }

.bl-home-seo-title {
  margin: 0 0 var(--bl-space-3);
  font-size: var(--bl-h4);
}

.bl-home-seo-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bl-home-gap);
  font-size: 13.5px;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .bl-home-seo-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

.bl-home-seo-body p { margin: 0; }