/* ============================================================
   SFS Theme — Layout, Grid & Spacing
   Structural utilities only. No colors.
   ============================================================ */

:root {
    --container-max:        1200px;
    --container-wide:       1400px;
    --container-narrow:     800px;
    --container-px:         1.5rem;

    --header-height:        72px;
    --footer-min-height:    200px;

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    --section-py:  var(--space-16);
    --card-p:      var(--space-6);
}

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

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

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

.sfs-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sfs-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sfs-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Flex helpers */
.sfs-flex         { display: flex; }
.sfs-flex--center { align-items: center; justify-content: center; }
.sfs-flex--between{ align-items: center; justify-content: space-between; }
.sfs-flex--gap    { gap: var(--space-4); }

/* Section */
.sfs-section {
    padding-block: var(--section-py);
}

.sfs-section--sm {
    padding-block: var(--space-12);
}

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