/* ==========================================================================
   Cloudstore Central — Layout system (no framework)
   ========================================================================== */

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

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

/* Constrain FAQ/readable blocks to a comfortable measure while keeping them
   left-aligned within a standard .container (aligns under the section head). */
.faq-narrow { max-width: var(--width-narrow); }

.section { padding-block: var(--section-spacing); }
.section-tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

.section-inverse {
  position: relative;
  background-color: var(--bg-inverse);
  color: var(--text-on-inverse);
  overflow: hidden;
}
/* "Secure Signal" depth: layered cyan/teal glow + faint signal grid. */
.section-inverse::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(36rem 28rem at 100% 0%, color-mix(in srgb, var(--colour-cyan) 16%, transparent), transparent 70%),
    radial-gradient(32rem 26rem at 0% 100%, color-mix(in srgb, var(--colour-teal) 14%, transparent), transparent 72%);
  pointer-events: none;
}
.section-inverse::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, #fff 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #fff 4%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(48rem 30rem at 82% 50%, #000, transparent 78%);
  mask-image: radial-gradient(48rem 30rem at 82% 50%, #000, transparent 78%);
  pointer-events: none;
}
.section-inverse > .container { position: relative; z-index: 1; }
.section-inverse h1, .section-inverse h2,
.section-inverse h3, .section-inverse h4 { color: var(--colour-cloud-white); }
.section-inverse .lead { color: var(--text-on-inverse); }
.section-inverse .text-muted,
.section-inverse .text-secondary { color: var(--text-on-inverse-muted); }
.section-inverse a:not(.button) { color: var(--colour-cyan); }

.section-subtle { background-color: var(--bg-subtle); }
.section-muted { background-color: var(--bg-muted); }

.full-width { width: 100%; }

/* Flow / stack */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--space-sm); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.stack-xl > * + * { margin-top: var(--space-xl); }

/* Cluster (inline wrap) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* Multi-column grids */
.grid { display: grid; gap: var(--grid-gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* Split content (text + aside) */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-60-40 { grid-template-columns: 3fr 2fr; }
}

/* Sidebar layout */
.sidebar-layout {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 64rem) {
  .sidebar-layout { grid-template-columns: 16rem 1fr; }
  .sidebar-layout.sidebar-right { grid-template-columns: 1fr 18rem; }
}

@media (max-width: 59.99rem) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Visually hidden but available to assistive technology */
.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}