/* ============================================================================
 * GC Primitives — shared visual atoms ported from the showcase
 * (client/src/components/primitives.tsx). Use these everywhere so every
 * ported page looks visually identical to its showcase counterpart.
 *
 * Provided atoms:
 *   .gc-section            — page section wrapper (mx-auto 1280px)
 *   .gc-eyebrow            — subhead label with leading rule
 *   .gc-section-heading    — eyebrow + display title + lede
 *   .gc-card               — surface card
 *   .gc-statpill           — small numeric pill
 *   .gc-tag (+ tones)      — pill tag with brand tones
 *   .gc-rule               — visual divider
 *   .gc-btn (+ variants)   — buttons
 *
 * Brand colors come from ganjier-tokens.css.
 * ========================================================================== */

/* ---- Section -------------------------------------------------------- */
.gc-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.gc-section--narrow { max-width: 880px; }
.gc-section--wide   { max-width: 1440px; }

/* Vertical rhythm */
.gc-stack-1 > * + * { margin-top: 0.5rem; }
.gc-stack-2 > * + * { margin-top: 0.75rem; }
.gc-stack-3 > * + * { margin-top: 1rem; }
.gc-stack-4 > * + * { margin-top: 1.5rem; }
.gc-stack-6 > * + * { margin-top: 2.25rem; }
.gc-stack-8 > * + * { margin-top: 3rem; }

/* ---- Eyebrow -------------------------------------------------------- */
.gc-eyebrow {
    font-family: var(--font-display, "Inter Tight", "Inter", system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b6056;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}
.gc-eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.gc-subhead {
    font-family: var(--font-display, "Inter Tight", "Inter", system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b6056;
    margin: 0 0 0.5rem;
}

/* ---- Section heading ------------------------------------------------- */
.gc-section-heading {
    max-width: 38rem;
}
.gc-section-heading--center { margin-left: auto; margin-right: auto; text-align: center; }
.gc-section-heading__title {
    font-family: var(--font-display, "Inter Tight", "Inter", system-ui, sans-serif);
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
    line-height: 1.05;
    margin: 0.5rem 0 0;
    color: var(--mocha, #2a221b);
    letter-spacing: -0.02em;
    font-weight: 600;
}
.gc-section-heading__lede {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #5a5048;
    max-width: 58ch;
}
.gc-section-heading--center .gc-section-heading__lede { margin-left: auto; margin-right: auto; }

/* Display heading for hero pages */
.gc-display {
    font-family: var(--font-display, "Inter Tight", "Inter", system-ui, sans-serif);
    font-size: clamp(2rem, 1.6rem + 2vw, 3.25rem);
    line-height: 1.02;
    color: var(--mocha, #2a221b);
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0;
}
.gc-display--soft { color: #8a8079; font-weight: 500; }

/* ---- Card ----------------------------------------------------------- */
.gc-card {
    background: #fffdf9;
    border: 1px solid #ead9c0;
    border-radius: 14px;
    padding: 1.25rem;
    color: var(--mocha, #2a221b);
}
.gc-card--pad-lg { padding: 1.75rem; }
.gc-card--pad-sm { padding: 0.85rem; }
.gc-card--ghost  { background: transparent; }
.gc-card--gradient {
    background: linear-gradient(135deg, rgba(252, 178, 64, 0.10), transparent 55%, rgba(156, 102, 170, 0.10));
}
.gc-card--hover {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.gc-card--hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(82, 66, 53, 0.10);
    border-color: #d8c39d;
}

/* ---- StatPill -------------------------------------------------------- */
.gc-statpill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #ead9c0;
    border-radius: 999px;
    background: #fffdf9;
    padding: 0.35rem 0.8rem;
    font-size: 0.75rem;
}
.gc-statpill__value {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    color: var(--mocha, #2a221b);
    font-variant-numeric: tabular-nums;
}
.gc-statpill__label { color: #6b6056; }

/* ---- Tag (already partially in directory.css; harmonize here) ------- */
.gc-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.4;
    white-space: nowrap;
}
.gc-tag--honey    { background: #FEF7E8; color: #7a5410; border-color: #f4d999; }
.gc-tag--mint     { background: #EAF6EE; color: #2f6f4d; border-color: #b9dec7; }
.gc-tag--lavender { background: #F0EAF7; color: #5a3a72; border-color: #d2bce0; }
.gc-tag--mocha    { background: #f5efe7; color: #524235; border-color: #ddc9af; }
.gc-tag--red      { background: #fbe7e5; color: #8a1410; border-color: #f0b3ae; }
.gc-tag--muted    { background: transparent; color: #6b6056; border-color: #d8cebf; }

/* ---- Rule / divider -------------------------------------------------- */
.gc-rule {
    height: 1px;
    background: linear-gradient(to right, transparent, #d8cebf, transparent);
    border: 0;
    margin: 1rem 0;
}
.gc-rule--solid { background: #ead9c0; }

/* ---- Buttons --------------------------------------------------------- */
.gc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}
.gc-btn--solid {
    background: var(--mocha, #524235);
    color: #fff;
    border-color: var(--mocha, #524235);
}
.gc-btn--solid:hover { background: #3a2e25; color: #fff; }
.gc-btn--outline {
    background: transparent;
    color: var(--mocha, #524235);
    border-color: #d8cebf;
}
.gc-btn--outline:hover { border-color: var(--mocha, #524235); color: var(--mocha, #524235); }
.gc-btn--honey {
    background: var(--honey, #FCB240);
    color: #2a1c08;
    border-color: var(--honey, #FCB240);
}
.gc-btn--honey:hover { background: #f5a31f; color: #2a1c08; }
.gc-btn--ghost {
    background: transparent;
    color: #6b6056;
    border: 1px solid transparent;
}
.gc-btn--ghost:hover { color: var(--mocha, #524235); background: rgba(82, 66, 53, 0.05); }
.gc-btn--sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.gc-btn--lg { padding: 0.7rem 1.25rem; font-size: 1rem; }

/* ---- Generic grid helpers ------------------------------------------- */
.gc-grid {
    display: grid;
    gap: 1rem;
}
.gc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gc-grid--auto-280 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.gc-grid--auto-240 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

@media (max-width: 880px) {
    .gc-grid--2, .gc-grid--3, .gc-grid--4 { grid-template-columns: 1fr; }
}
@media (min-width: 881px) and (max-width: 1100px) {
    .gc-grid--3, .gc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Hero block ------------------------------------------------------ */
.gc-page-hero {
    padding: 2.5rem 0 1.5rem;
}
.gc-page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.5rem;
    align-items: end;
}
@media (max-width: 880px) {
    .gc-page-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
.gc-page-hero__copy {
    margin-top: 1rem;
    max-width: 58ch;
    font-size: 0.97rem;
    line-height: 1.6;
    color: #5a5048;
}
.gc-page-hero__tags {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---- Subnav (page TOC) ---------------------------------------------- */
.gc-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 0 1.5rem;
    border-bottom: 1px solid #ead9c0;
    margin-bottom: 1.5rem;
}
.gc-subnav__link {
    font-size: 0.8rem;
    color: #6b6056;
    text-decoration: none;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gc-subnav__link:hover {
    color: var(--mocha, #524235);
    border-color: #d8cebf;
}

/* ---- Utility text ---------------------------------------------------- */
.gc-text-muted { color: #6b6056; }
.gc-text-small { font-size: 0.85rem; }
.gc-text-mono  { font-family: var(--font-mono, "JetBrains Mono", monospace); }