/* Loaded only on the front page via page--front.html.twig */

/* Subtle infinite grid using pure CSS (no image asset) */
html, body {
  min-height: 100%;
}

body {
  background-color: #ffffff;
  background-image:
    linear-gradient(to right, rgba(17, 24, 39, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 24, 39, 0.06) 1px, transparent 1px);
  background-size: 40px 40px; /* adjust spacing to taste */
}

/* Center the landing content */
.landing-wrap {
  min-height: calc(70vh - var(--cm-header-height, 0px) - var(--cm-footer-height, 0px));
  display: flex;
  align-items: center;
  justify-content: center;

  /* Mobile-first: zero side padding */
  padding: 4rem 0;
}

/* >= 640px (Tailwind's sm) */
@media (min-width: 640px) {
  .landing-wrap {
    padding-left: 1.5rem;  /* sm:px-6 */
    padding-right: 1.5rem;
  }
}

/* >= 1024px (Tailwind's lg) */
@media (min-width: 1024px) {
  .landing-wrap {
    padding-left: 2rem;    /* lg:px-8 */
    padding-right: 2rem;
  }
}


/* A simple container we’ll replace next step */
.landing-slot {
  width: 100%;
  max-width: 64rem; /* ~1024px */
  text-align: center;
}