/* =====================================================================
   WAIFI — Layout System (layout.css)
   ---------------------------------------------------------------------
   Responsibility: structural containers + layout utilities.
   Container, section rhythm, grid, flex, gap, display, position,
   overflow, aspect-ratio, image utilities, alignment helpers,
   visually-hidden. NO section-specific or component styling.
   Load order: 3rd. Mobile First — base = mobile, min-width overrides.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. CONTAINER — centered content width
   Default max 1200px; --narrow for text blocks (FAQ/contact).
   --------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.container--narrow {
    max-width: 48rem; /* 768px */
}

.container--wide {
    max-width: 80rem; /* 1280px */
}

/* Full width — no max-width cap; still honours horizontal padding */
.container--full-width {
    max-width: none;
}

/* ---------------------------------------------------------------------
   2. SECTION — vertical page rhythm
   Every <section> uses .section for consistent spacing.
   Alternate background via modifier (sections.css may extend).
   --------------------------------------------------------------------- */
.section {
    padding-block: var(--space-section);
}

.section--tight {
    padding-block: var(--space-8);
}

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

/* Section header block (title + subtitle) — centred on mobile */
.section__head {
    max-width: 42rem;
    margin-bottom: var(--space-6);
}

.section__title {
    margin-bottom: var(--space-2);
}

.section__subtitle {
    color: var(--color-muted);
    font-size: var(--font-size-body-lg);
}

/* ---------------------------------------------------------------------
   3. GRID — CSS Grid utility
   --------------------------------------------------------------------- */
.grid {
    display: grid;
    gap: var(--space-5);
}

.grid--cols-2 {
    grid-template-columns: 1fr;
}

.grid--cols-3 {
    grid-template-columns: 1fr;
}

.grid--cols-4 {
    grid-template-columns: 1fr;
}

/* Tablet: 2 columns for multi-column grids */
@media (min-width: 48rem) {
    .grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
    .grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
    .grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: full column count */
@media (min-width: 64rem) {
    .grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Auto-fit grid for flexible card layouts */
.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* ---------------------------------------------------------------------
   4. FLEX UTILITIES
   --------------------------------------------------------------------- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

.flex-1 { flex: 1 1 0%; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

/* ---------------------------------------------------------------------
   5. GAP UTILITIES
   --------------------------------------------------------------------- */
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* ---------------------------------------------------------------------
   6. DISPLAY UTILITIES
   --------------------------------------------------------------------- */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

/* ---------------------------------------------------------------------
   VISIBILITY HELPERS — responsive show/hide (Mobile First)
   --------------------------------------------------------------------- */
.hide-on-mobile {
    display: none;
}

@media (min-width: 48rem) {
    .hide-on-mobile {
        display: revert;
    }
    .hide-on-desktop {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   7. POSITION UTILITIES
   --------------------------------------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }

/* ---------------------------------------------------------------------
   8. OVERFLOW + ASPECT RATIO
   --------------------------------------------------------------------- */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-hidden { overflow-x: hidden; }

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }

/* ---------------------------------------------------------------------
   9. IMAGE UTILITIES — responsive + object-fit ready
   --------------------------------------------------------------------- */
.img-fluid {
    width: 100%;
    height: auto;
    display: block;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.img-rounded {
    border-radius: var(--radius-lg);
}

/* ---------------------------------------------------------------------
   10. TEXT & ALIGNMENT HELPERS
   --------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Opt prose lists back into bullets/numbers */
.prose ul { list-style: disc; padding-left: var(--space-5); }
.prose ol { list-style: decimal; padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-1); }
.prose p { margin-bottom: var(--space-4); }
.prose p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   11. SPACING HELPERS — margin/padding scale (light, on demand)
   Naming: .m{t|r|b|l|y|x}-{1..6}  /  .p{...}-{1..6}
   --------------------------------------------------------------------- */
.m-0 { margin: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }

/* ---------------------------------------------------------------------
   12. VISUALLY HIDDEN — screen-reader-only content (a11y)
   Hides visually but stays available to assistive tech.
   --------------------------------------------------------------------- */
.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;
}

/* Allow it to become visible when focused (e.g. skip targets) */
.visually-hidden:focus,
.visually-hidden:active {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}