/* ==========================================================================
   layout.css — Structure: containers, sections, grids, responsive rules
   Owns WHERE things sit. components.css owns what they look like.
   Mobile-first: base rules target the smallest screen, media queries add up.
   ========================================================================== */

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container--narrow {
  max-width: 820px;
}

/* ---------- Sections ---------- */
.section {
  position: relative;
  padding-block: var(--section-padding);
}

.section--light {
  background-color: var(--color-light);
}

.section--alt {
  background-color: var(--color-surface-alt);
}

.section--dark {
  background: var(--gradient-dark);
  color: var(--color-text-invert);
}

.section--dark h2,
.section--dark h3 {
  color: var(--color-text-invert);
}

.section--dark p {
  color: var(--color-text-invert-soft);
}

/* Section header block */
.section-header {
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: clamp(var(--space-3xl), 6vw, var(--space-5xl));
  text-align: center;
}

.section-header h2 {
  margin-bottom: var(--space-lg);
}

.section-header p {
  color: var(--color-text-soft);
}

.section--dark .section-header p {
  color: var(--color-text-invert-soft);
}

/* ---------- Navigation layout ---------- */
.site-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  display: flex;
  align-items: center;
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  width: 100%;
}

.site-nav__links {
  display: none;                      /* shown from tablet up */
  align-items: center;
  gap: var(--space-2xl);
}

.site-nav__cta {
  display: none;                      /* shown from tablet up */
}

.mobile-menu {
  position: fixed;
  inset-block-start: var(--nav-height);
  inset-inline: 0;
  z-index: var(--z-menu);
  display: grid;
  grid-template-rows: 0fr;            /* animates to 1fr when open */
  overflow: hidden;
  transition: grid-template-rows var(--transition-base) var(--ease-out);
}

.mobile-menu.is-open {
  grid-template-rows: 1fr;
}

.mobile-menu__inner {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-inline: var(--container-gutter);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;                 /* avoids mobile URL-bar jump */
  padding-block: calc(var(--nav-height) + var(--space-4xl)) var(--space-5xl);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4xl);
  align-items: center;
  width: 100%;
  text-align: center;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  max-width: 340px;
  margin-block: var(--space-2xl);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xl);
  width: 100%;
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.hero__visual {
  order: -1;                          /* visual above copy on mobile */
  display: grid;
  place-items: center;
  min-height: 260px;
}

/* ---------- Process ---------- */
.process__track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
}

/* The connecting line only makes sense once the steps sit in a row.

   It is inset to 12.5% — one half-column — so it starts and ends at the
   centre of the first and last icon rather than running past them, and it
   sits behind the steps (z-index) while the icon badges paint an opaque
   background over it. Previously the line crossed straight through every
   circle, which read as a strike-through. */
.process__track::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block-start: 38px;
  inset-inline: 12.5%;
  height: 2px;
  background: var(--gradient-warm);
  opacity: 0.45;
  display: none;
}

.process__note {
  max-width: 820px;
  margin-inline: auto;
  margin-block-start: clamp(var(--space-3xl), 6vw, var(--space-4xl));
}

/* ---------- Card grids ----------
   auto-fit + minmax lets the browser choose the column count, so these
   reflow at every width without a breakpoint of their own. */
.grid {
  display: grid;
  gap: clamp(var(--space-xl), 2.5vw, var(--space-2xl));
  /* Cards in a row match the tallest, so the row has one clean bottom edge
     instead of a ragged one set by each card's copy length. */
  align-items: stretch;
}

.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid--memory {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.grid--pillars {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.grid--testimonials {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* ---------- CTA ---------- */
.cta {
  text-align: center;
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  margin-inline: auto;
}

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--color-dark);
  color: var(--color-text-invert-soft);
  padding-block: var(--space-4xl) var(--space-2xl);
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border-invert);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  font-size: var(--font-size-xs);
}

/* ---------- Flex utilities ---------- */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-lg); }
.gap-lg { gap: var(--space-xl); }
.text-center { text-align: center; }

/* ==========================================================================
   Responsive — mobile-first, each query adds to the last
   ========================================================================== */

/* ---------- Tablet: 640px+ ---------- */
@media (min-width: 640px) {
  .hero__actions {
    flex-direction: row;
    max-width: none;
    width: auto;
  }

  .process__track {
    grid-template-columns: repeat(2, 1fr);
  }

  /* flex-start, not center: the credit side is now two lines (copyright
     plus the motto beneath it), and centring would float the single line on
     the right against the middle of that block. Aligning to the top keeps
     both first lines on the same baseline. */
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

/* ---------- Tablet landscape: 768px+ ---------- */
@media (min-width: 768px) {
  .site-nav__links,
  .site-nav__cta {
    display: flex;
  }

  /* .nav-toggle is hidden in components.css, which loads after this file. */

  .mobile-menu {
    display: none;
  }

  .site-footer__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

/* ---------- Desktop: 1024px+ ---------- */
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    text-align: left;
  }

  .hero__content {
    align-items: flex-start;
  }

  /* The three stats measure 494px together against a 609px column, leaving
     only ~115px for two gaps. The old flat 64px gap asked for 622px and
     dropped the third stat onto its own row, which reads as a layout bug
     rather than a choice. 32-40px fits at every desktop width with room to
     spare. */
  .hero__stats {
    justify-content: flex-start;
    gap: clamp(var(--space-2xl), 2.8vw, 2.5rem);
  }

  .hero__visual {
    order: 0;
    min-height: 420px;
  }

  .process__track {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
  }

  .process__track::before {
    display: block;
  }
}

/* ---------- Large desktop: 1440px+ ---------- */
@media (min-width: 1440px) {
  :root {
    --container-max: 1320px;
  }

  .hero__grid {
    gap: var(--space-5xl);
  }
}