/* ============================================================
   FAFFLY — Layout Utilities
   Container, grid, and spacing helpers
   ============================================================ */

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

.container--wide {
  max-width: var(--container-wide);
}

/* --- Grid system --- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --- Flex utilities --- */
.flex          { display: flex; }
.flex--center  { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--col     { flex-direction: column; }
.flex--wrap    { flex-wrap: wrap; }
.gap-2  { gap: var(--space-2);  }
.gap-4  { gap: var(--space-4);  }
.gap-6  { gap: var(--space-6);  }
.gap-8  { gap: var(--space-8);  }
.gap-12 { gap: var(--space-12); }

/* --- Text alignment --- */
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* --- Spacing helpers --- */
.mt-4  { margin-top: var(--space-4);  }
.mt-6  { margin-top: var(--space-6);  }
.mt-8  { margin-top: var(--space-8);  }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }

.mb-4  { margin-bottom: var(--space-4);  }
.mb-6  { margin-bottom: var(--space-6);  }
.mb-8  { margin-bottom: var(--space-8);  }
.mb-12 { margin-bottom: var(--space-12); }

/* --- Two-column section layout (text + visual) --- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.split--left-wide  { grid-template-columns: 5fr 6fr; }
.split--right-wide { grid-template-columns: 6fr 5fr; }

/* --- Section heading block (eyebrow + h2 + subtext) --- */
.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.section-header--center {
  align-items: center;
  text-align: center;
}

/* --- Visual / mockup frame --- */
.mockup-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.mockup-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Visually hidden (screen-reader only) --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}