/* NexStore landing page (nexstore.landing).
 *
 * Layout only: every control keeps its SAP Horizon look, the same as in the app.
 * The few page colours below mirror Horizon theme parameters (Horizon's
 * library.css has them compiled in, there are no CSS variables to read) and
 * switch on html[data-theme], which landing.html sets before boot and the
 * controller keeps in step with the theme.
 */

/* sap_horizon */
:root {
  --lp-band-bg: #fff;          /* sapObjectHeader_Background */
  --lp-band-border: #d9d9d9;   /* sapObjectHeader_BorderColor */
  --lp-shell-bg: #eaecee;      /* .sapTntToolPage background */
}

/* sap_horizon_dark */
html[data-theme="dark"] {
  --lp-band-bg: #1d232a;
  --lp-band-border: #2e3742;
  --lp-shell-bg: #0a0d10;
}

/* Same full-height chain as index.html, so the ToolPage fills the window. */
html, body, body > div, #container, #container-uiarea {
  height: 100%;
}

/* what shows before UI5 has rendered the ToolPage (beats Horizon's .sapUiBody) */
.sapUiBody.lpBody { background: var(--lp-shell-bg); }

/* ── Layout ── */
/* longhands only, so a section class on the same element can set the vertical padding */
.lpBody .lpContainer {
  box-sizing: border-box;
  width: 100%;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
.lpBody .lpSection { padding-top: 3rem; padding-bottom: 3rem; }
.lpBody .lpSectionTight { padding-top: 0; }
/* a full-width white band, like an object page header */
.lpBody .lpBand {
  background: var(--lp-band-bg);
  border-top: 1px solid var(--lp-band-border);
  border-bottom: 1px solid var(--lp-band-border);
}
/* two bands in a row (hero + key facts) share one divider, not a doubled line */
.lpBody .lpBand + .lpBand { border-top: none; }
.lpBody .lpLead.sapMText { font-size: 1rem; line-height: 1.5; }
.lpBody .lpSectionSub { max-width: 40rem; margin: 0.5rem 0 1.5rem; }

/* FlexBoxes laid out as grids (out-ranks .sapMFlexBox's display:flex); cards
   stretch to the tallest one in their row */
.lpBody .lpGrid { display: grid; gap: 1rem; }
.lpBody .lpGrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lpBody .lpGrid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lpBody .lpGrid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lpBody .lpSpanAll { grid-column: 1 / -1; }

/* Horizon lays out a card's content area as a row flexbox (.sapFCard
   .sapFCardContent { display: flex }), so the content control would shrink to
   its natural width; a form then stops well short of the card's edge. */
.lpBody .lpCardBody { flex: 1 1 auto; min-width: 0; }

/* page header band on sub-pages (Contact): breadcrumbs, title, lead */
.lpBody .lpPageHead { gap: 0.75rem; padding-top: 2rem; padding-bottom: 2rem; }

/* ── Hero ── */
.lpBody .lpHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem 3rem;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.lpBody .lpHeroText { gap: 1rem; }
/* Horizon's H1 is a fixed 3rem; let it shrink on small screens */
.lpBody .lpHeroTitle.sapMTitle { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; }
.lpBody .lpActions { gap: 0.5rem; margin-top: 0.5rem; }
/* two 11rem tiles per row plus the launchpad's 0.5rem gap; one per row on phones,
   where Horizon widens the tiles */
.lpBody .lpTiles { width: 22.5rem; max-width: 100%; gap: 0.5rem; }

/* ── Highlight cards ── */
.lpBody .lpKv { gap: 1rem; margin-top: 0.75rem; }
.lpBody .lpTags { gap: 0.5rem; margin-top: 1rem; }

/* ── Key facts ── */
.lpBody .lpFacts { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.lpBody .lpFact { gap: 0.25rem; }
/* "72" ships a real 700 weight, so this is not a synthesised bold */
.lpBody .lpFactValue.sapMText { font-size: 2.5rem; font-weight: 700; line-height: 3rem; }
/* same box height as a .lpFactValue line, so the four labels line up */
.lpBody .lpFactIcon.sapUiIcon { display: flex; align-items: center; height: 3rem; font-size: 2.25rem; }

/* ── Call to action (Home) ── */
.lpBody .lpCta { gap: 1.5rem 3rem; }
.lpBody .lpCtaText { gap: 0.5rem; max-width: 40rem; }

/* ── Contact ── */
.lpBody .lpContact { align-items: start; gap: 2rem 3rem; }
.lpBody .lpPoint { gap: 1rem; margin-top: 1.25rem; }
.lpBody .lpForm { gap: 0.75rem; }
.lpBody .lpFormRow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.lpBody .lpField { gap: 0.25rem; min-width: 0; }

/* ── Footer ── */
.lpBody .lpFooter { border-bottom: none; }
.lpBody .lpFooterInner { gap: 0.75rem 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.lpBody .lpFooterLinks { gap: 1.5rem; }

/* ── Feedback pill: same as the app's .nexFeedbackFab (css/style.css) ── */
.lpBody .lpFab.sapMBtn { position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 90; }
.lpBody .lpFab .sapMBtnInner {
  border-radius: 999px;
  height: 2.5rem;
  padding: 0 0.9rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
/* 2.5rem minus the 1px borders, as Horizon does for its own button heights */
.lpBody .lpFab .sapMBtnContent { line-height: 2.375rem; }
.lpBody .lpFab.sapMBtn:hover .sapMBtnInner { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .lpBody .lpGrid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lpBody .lpGrid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lpBody .lpHero { grid-template-columns: minmax(0, 1fr); }
  .lpBody .lpGrid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .lpBody .lpContainer { padding-left: 1rem; padding-right: 1rem; }
  .lpBody .lpSection { padding-top: 2rem; padding-bottom: 2rem; }
  .lpBody .lpSectionTight { padding-top: 0; }
  .lpBody .lpHero { padding-top: 2rem; padding-bottom: 2rem; }
  .lpBody .lpGrid3 { grid-template-columns: minmax(0, 1fr); }
  .lpBody .lpFormRow { grid-template-columns: minmax(0, 1fr); }
  .lpBody .lpFooterInner { flex-direction: column; align-items: flex-start; }
}