/*
  Solutions hub — first-screen (hero) only.

  Scoped entirely to `.solutions-hero*` / `.solutions-grid` and loaded ONLY
  on /rishennya/ and /en/solutions/ via pages/solutions_hub.py -> render_page
  head_extra. Kept out of the shared components.css so no other page's markup
  or the shared stylesheet changes (the card grid, all later sections, header,
  footer and every other page are untouched). Uses the site's own design
  tokens (vars.css). No new fonts, no JavaScript, no external assets.
*/

/* Compact two-column hero: starts near the header, height driven by content
   (not a full-screen hero). The breadcrumb above it keeps its own spacing;
   the modest top padding here pulls the content up so there is no big gap. */
.solutions-hero {
  padding-block: var(--space-md) var(--space-2xl);
}

.solutions-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 64px;
  align-items: center;
}

/* ---- Left: text column ---- */
.solutions-hero__text {
  /* Wide enough that the H1's first two words ("Галузеві рішення" ~614px /
     "Industry Solutions" ~621px at the 72px cap) stay on one line, so the
     heading is exactly two lines on desktop in both languages. */
  max-width: 660px;
}

.solutions-hero__title {
  margin: var(--space-xs) 0 var(--space-md);
  /* 48px -> 72px, capped so the H1 stays two lines on desktop. */
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1.03;
  /* Words wrap at spaces only (opt out of the global break-word reset). */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.solutions-hero__lede {
  max-width: 34rem; /* ~544px */
  margin: 0 0 var(--space-lg);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--graphite-900); /* noticeably darker than the old grey lede */
}

/* ---- Right: asymmetric photo collage (1 large + 2 small) ---- */
.solutions-hero__visual {
  min-width: 0;
}

.solutions-hero__collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.32fr 0.68fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  aspect-ratio: 1.16 / 1; /* stable box before images load -> no CLS; keeps hero within ~560-680px */
}

.shv {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: var(--hairline) solid var(--border-hairline);
  box-shadow: var(--shadow-sm);
}

.shv--main {
  grid-column: 1;
  grid-row: 1 / 3;
}
.shv--a {
  grid-column: 2;
  grid-row: 1;
}
.shv--b {
  grid-column: 2;
  grid-row: 2;
}

/* Tighten only the gap before the (unchanged) industry card grid so the
   transition from hero to cards feels continuous. */
.solutions-grid {
  padding-top: var(--space-lg);
  /* Trim only the whitespace after the (unchanged) cards so the final
     program block follows without a large void. */
  padding-bottom: var(--space-lg);
  scroll-margin-top: calc(var(--mobile-header-height) + 16px);
}

/* Card layout: exact 5x2 / 2x5 / 1x10, scoped to THIS page only.
   The shared .grid--industries (layout.css) is a flex layout that caps
   at 4 columns and uses justify-content:center — which is what left
   cards 09/10 centered in a lonely third row (4+4+2). It is also used on
   the homepage and product pages, so it must stay unchanged; here a real
   CSS grid (higher specificity: .solutions-grid .grid--industries) takes
   over. Ten items over 5 columns fill exactly two rows, so there is never
   an incomplete trailing row to center. Cards keep their own internal
   flex-column layout, so grid stretch gives equal heights per row. */
.solutions-grid .grid--industries {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* mobile: 1 column x 10 */
  gap: 22px;
}

.solutions-grid .grid--industries > * {
  /* The shared flex-basis breakpoints are inert inside a grid; reset them
     explicitly and let each card fill (and not overflow) its track. */
  flex: initial;
  width: auto;
  max-width: none;
  min-width: 0;
}

/* Tablet: 2 columns x 5 rows (768px .. desktop breakpoint). */
@media (min-width: 768px) {
  .solutions-grid .grid--industries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* Desktop: 5 columns x 2 rows. Breakpoint at 1280px (not 1200) because at
   1200px the container's five tracks (~205px each) are too narrow for the
   longest industry titles + product chips; 1280px gives ~221px tracks
   where all text/chips fit cleanly. 1200..1279px stays two-column (never
   four), so the 4+4+2 layout is gone at every width. */
@media (min-width: 1280px) {
  .solutions-grid .grid--industries {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
  }
  /* The category label is `white-space: nowrap` globally; in the narrow
     5-column tracks the two longest labels ("Одноразовий захист",
     "Вторинна сировина") would overflow their card. Allow it to wrap here
     only — same text, same size, just onto two right-aligned lines when
     it doesn't fit; where it fits (>=1440px) it still stays one line. */
  .solutions-grid .card--industry__badge {
    white-space: normal;
  }
}

/* ---- Tablet (<=1023px): stack — text above, collage below ---- */
@media (max-width: 1023px) {
  .solutions-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .solutions-hero__text {
    max-width: none;
  }
  /* Compact, centered collage so the stacked hero never gets too tall. */
  .solutions-hero__visual {
    max-width: 520px;
    margin-inline: auto;
  }
  .solutions-hero__collage {
    aspect-ratio: 1.6 / 1; /* wider/shorter when full-width */
  }
}

/* ---- Mobile (<=767px): single column, comfortable buttons ---- */
@media (max-width: 767px) {
  .solutions-hero {
    padding-block: var(--space-sm) var(--space-xl);
  }
  .solutions-hero__title {
    font-size: clamp(2.375rem, 8.5vw, 2.75rem); /* 38 -> 44px */
  }
  .solutions-hero__collage {
    aspect-ratio: 1.18 / 1;
    gap: 10px;
  }
  .solutions-hero .cta-row {
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
  }
  .solutions-hero .cta-row .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================
   Final block — "Solutions for recurring customers" (stock program).
   Same scope/isolation as the hero above (loaded only on the two
   solutions pages). Replaces the old .split + abstract square-dots
   visual with a real two-column B2B closing section. Light cool
   grey-green surface leads calmly into the dark footer.
   ============================================================ */
.solutions-program {
  margin-top: 0;
  padding-block: var(--space-2xl);
  background: linear-gradient(180deg, rgba(47, 111, 94, 0.06), rgba(47, 111, 94, 0.02));
  border-top: var(--hairline) solid var(--border-hairline);
  scroll-margin-top: calc(var(--mobile-header-height) + 16px);
}

.solutions-program__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 72px;
  align-items: stretch; /* image fills the column height -> no empty space right */
}

.solutions-program__content {
  min-width: 0;
  max-width: 620px;
}

.solutions-program__title {
  margin: var(--space-xs) 0 var(--space-sm);
  font-size: clamp(2rem, 2.2vw + 1.1rem, 3rem); /* ~42-54px, below the H1 */
  line-height: 1.08;
  overflow-wrap: normal;
  word-break: normal;
}

.solutions-program__lede {
  max-width: 40rem;
  margin: 0 0 var(--space-md);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.6;
  color: var(--graphite-900);
}

/* Three compact benefit rows with faint big numbers (no heavy cards). */
.solutions-program__benefits {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.solutions-program__benefit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
}
.solutions-program__benefit-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--brand-accent);
  opacity: 0.5;
}
.solutions-program__benefit-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--graphite-950);
  margin-bottom: 2px;
}
.solutions-program__benefit-desc {
  display: block;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--graphite-700);
}

/* Calm "Program terms" info block — light, thin border, not a warning. */
.solutions-program__terms {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-md);
}
.solutions-program__terms-title {
  margin: 0 0 var(--space-2xs);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--graphite-950);
}
.solutions-program__terms p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--graphite-700);
}

/* Right visual: real warehouse photo + small program panel. */
.solutions-program__visual {
  position: relative;
  min-width: 0;
  display: flex; /* let the photo stretch to the content column's height */
}
.solutions-program__photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 440px; /* never collapses if the left column is short */
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: var(--hairline) solid var(--border-hairline);
  box-shadow: var(--shadow-sm);
}
.solutions-program__panel {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  max-width: calc(100% - var(--space-md) * 2);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.solutions-program__panel-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--brand-accent);
  margin-bottom: var(--space-2xs);
}
.solutions-program__panel-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--graphite-900);
}
.solutions-program__panel-steps li {
  display: inline-flex;
  align-items: center;
}
.solutions-program__panel-steps li:not(:last-child)::after {
  content: "\2192"; /* → */
  margin-left: var(--space-xs);
  color: var(--brand-accent);
}

/* Tablet: single column — text/benefits/terms/CTA, then the image. */
/* Tablet/stacked below 1200px (desktop two-column starts at 1200px, per
   spec). Stacking also avoids the over-cropped portrait the stretched
   two-column image would become in narrow columns: here text / benefits /
   terms / CTA stack above a normal 5:4 photo. */
@media (max-width: 1199px) {
  .solutions-program {
    padding-block: var(--space-xl);
  }
  .solutions-program__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
  }
  .solutions-program__content {
    max-width: 720px; /* readable measure, not the full container width */
  }
  /* Compact, centered photo so the stacked block never gets excessively
     tall; normal 5:4 (not the desktop stretch). */
  .solutions-program__visual {
    display: block;
    max-width: 500px;
    margin-inline: auto;
  }
  .solutions-program__photo {
    height: auto;
    min-height: 0;
    aspect-ratio: 5 / 4;
  }
}

/* Mobile: comfortable buttons, panel drops below the image (never over it). */
@media (max-width: 767px) {
  .solutions-program {
    padding-block: var(--space-xl);
  }
  .solutions-program__title {
    font-size: clamp(2.125rem, 8vw, 2.5rem); /* 34-40px */
  }
  .solutions-program .cta-row {
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
  }
  .solutions-program .cta-row .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .solutions-program__panel {
    position: static;
    max-width: none;
    margin-top: var(--space-sm);
  }
}