/*
 * Joy Concept — Layout System
 * Containers, grid, section spacing, and responsive breakpoints.
 */


/* ─── Containers ────────────────────────────────────────────────────────── */

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

.jc-container--content {
    max-width: calc(var(--jc-content) + (var(--jc-gutter) * 2));
}

.jc-container--narrow {
    max-width: calc(var(--jc-narrow) + (var(--jc-gutter) * 2));
}

.jc-container--wide {
    max-width: 1400px;
}


/* ─── Section Spacing ───────────────────────────────────────────────────── */

.jc-section {
    padding-block: clamp(4rem, 8vw, 7rem);
}

.jc-section--sm  { padding-block: clamp(2rem, 4vw, 3.5rem); }
.jc-section--lg  { padding-block: clamp(5rem, 10vw, 9rem);  }
.jc-section--xl  { padding-block: clamp(6rem, 12vw, 11rem); }

/* Background variants */
.jc-section--cream      { background-color: var(--jc-cream);      }
.jc-section--cream-dark { background-color: var(--jc-cream-dark); }
.jc-section--white      { background-color: var(--jc-white);      }
.jc-section--green      { background-color: var(--jc-green);      }
.jc-section--gold-pale  { background-color: var(--jc-gold-pale);  }


/* ─── Grid System ───────────────────────────────────────────────────────── */

.jc-grid {
    display:               grid;
    gap:                   var(--jc-sp-6);
    grid-template-columns: repeat(var(--jc-cols, 1), 1fr);
}

/* Column count utilities */
.jc-grid--2 { --jc-cols: 1; }
.jc-grid--3 { --jc-cols: 1; }
.jc-grid--4 { --jc-cols: 1; }

.jc-grid--2-3 {
    grid-template-columns: 2fr 3fr;
}

.jc-grid--3-2 {
    grid-template-columns: 3fr 2fr;
}

@media (min-width: 640px) {
    .jc-grid--2 { --jc-cols: 2; }
    .jc-grid--4 { --jc-cols: 2; }
}

@media (min-width: 900px) {
    .jc-grid--3 { --jc-cols: 3; }
    .jc-grid--4 { --jc-cols: 4; }
}


/* ─── Flex Layouts ──────────────────────────────────────────────────────── */

.jc-split {
    display:         flex;
    gap:             var(--jc-sp-8);
    align-items:     flex-start;
}

.jc-split > * { flex: 1; }

.jc-split--center { align-items: center; }

@media (max-width: 768px) {
    .jc-split {
        flex-direction: column;
    }

    .jc-grid--2-3,
    .jc-grid--3-2 {
        grid-template-columns: 1fr;
    }
}


/* ─── Section Header (Eyebrow + Title + Body) ───────────────────────────── */

.jc-section-header {
    margin-bottom: var(--jc-sp-10);
}

.jc-section-header--center {
    text-align:    center;
    max-width:     var(--jc-narrow);
    margin-inline: auto;
    margin-bottom: var(--jc-sp-10);
}

.jc-section-header--center .jc-eyebrow {
    justify-content: center;
}

.jc-section-title {
    font-family:  var(--jc-serif);
    font-size:    var(--jc-text-4xl);
    font-weight:  300;
    line-height:  var(--jc-lh-tight);
    color:        var(--jc-green);
    margin-bottom: var(--jc-sp-4);
}

.jc-section-title em { font-style: italic; }

/* White variant — on dark green backgrounds */
.jc-section--green .jc-section-title { color: var(--jc-white); }

.jc-section-body {
    font-size:    var(--jc-text-md);
    color:        var(--jc-muted);
    line-height:  var(--jc-lh-relaxed);
    max-width:    var(--jc-content);
}

/* On green backgrounds */
.jc-section--green .jc-section-body { color: rgba(255, 255, 255, 0.62); }
.jc-section--green .jc-eyebrow { color: var(--jc-gold-light); }
.jc-section--green .jc-eyebrow::before { background-color: var(--jc-gold-light); }


/* ─── Page Wrapper ──────────────────────────────────────────────────────── */

.jc-site {
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
}

.jc-main {
    flex: 1;
    padding-top: var(--jc-nav-h);  /* Offset for sticky nav */
}

/* Pages where hero is full-height — no nav offset needed */
.jc-main--hero {
    padding-top: 0;
}