/* ==========================================================================
   JoomlaHelpNow — Layout
   Container widths, grid helpers, and vertical section rhythm.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

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

section {
  position: relative;
}

.section {
  padding-block: var(--space-24);
}
.section--tight { padding-block: var(--space-16); }
.section--soft { background: var(--color-bg-soft); }
.section--tint { background: linear-gradient(180deg, var(--purple-50) 0%, var(--white) 100%); }
.section--dark {
  background: var(--navy-900);
  color: var(--slate-300);
}
.section--dark h2, .section--dark h3 { color: var(--white); }

.section-heading {
  max-width: 680px;
  margin-bottom: var(--space-12);
}
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading__title { margin: 0; }
.section-heading__subtext {
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  color: var(--slate-500);
  line-height: var(--lh-snug);
}

/* ---- Grid helpers ------------------------------------------------------ */
.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); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; align-items: center; flex-wrap: wrap; }

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ---- Responsive breakpoints --------------------------------------------
   Mobile-first is assumed by default across component files;
   these three breakpoints are the canonical set for the whole site.
   sm: phones (≤540px) · md: tablets (≤860px) · lg: small laptops (≤1080px)
   -------------------------------------------------------------------- */

@media (max-width: 1080px) {
  :root { --container-pad: var(--space-5); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .section { padding-block: var(--space-16); }
  .section--tight { padding-block: var(--space-12); }
  .split { grid-template-columns: 1fr; gap: var(--space-10); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  :root { --container-pad: var(--space-4); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}