/*
 * JS-Builder – Globales Frontend-CSS
 *
 * Definiert:
 *  - CSS Custom Properties (werden via PHP/inline-style überschrieben)
 *  - Basis-Klassen für alle Blöcke (.jsb-block, .jsb-container, .jsb-btn, etc.)
 *  - Hintergrundstil-, Abstands- und Breitenvarianten
 */

/* ──────────────────────────────────────────────────────────────────────────────
   Standardwerte der CSS Custom Properties (Fallback ohne PHP-Einstellungen).
   Der :root-Block aus dem CSS-Generator überschreibt diesen.
   ────────────────────────────────────────────────────────────────────────────── */
:root {
    --jsb-color-primary:   #1a56db;
    --jsb-color-secondary: #6b7280;
    --jsb-color-accent:    #f59e0b;
    --jsb-color-text:      #111827;
    --jsb-color-bg:        #ffffff;
    --jsb-color-btn:       #1a56db;
    --jsb-color-btn-text:  #ffffff;
    --jsb-color-light-bg:  #f3f4f6;
    --jsb-color-dark-bg:   #1f2937;

    --jsb-spacing-compact: 3rem;
    --jsb-spacing-normal:  5rem;
    --jsb-spacing-large:   8rem;

    --jsb-btn-radius:  0.375rem;
    --jsb-btn-weight:  600;

    --jsb-max-narrow:  40rem;
    --jsb-max-normal:  72rem;
    --jsb-max-wide:    90rem;
}

/* ──────────────────────────────────────────────────────────────────────────────
   Basis-Block
   ────────────────────────────────────────────────────────────────────────────── */
.jsb-block {
    width: 100%;
    box-sizing: border-box;
    color: var(--jsb-color-text);
}

/* ──────────────────────────────────────────────────────────────────────────────
   Container / Inhaltsbreite
   ────────────────────────────────────────────────────────────────────────────── */
.jsb-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1.25rem;
    box-sizing: border-box;
}
.jsb-container--narrow { max-width: var(--jsb-max-narrow); }
.jsb-container--normal { max-width: var(--jsb-max-normal); }
.jsb-container--wide   { max-width: var(--jsb-max-wide);   }
.jsb-container--full   { max-width: 100%;                   }

/* ──────────────────────────────────────────────────────────────────────────────
   Hintergrundstile
   ────────────────────────────────────────────────────────────────────────────── */
.jsb-bg--white     { background-color: #ffffff; }
.jsb-bg--light     { background-color: var(--jsb-color-light-bg); }
.jsb-bg--dark      { background-color: var(--jsb-color-dark-bg); color: #ffffff; }
.jsb-bg--primary   { background-color: var(--jsb-color-primary);   color: #ffffff; }
.jsb-bg--secondary { background-color: var(--jsb-color-secondary); color: #ffffff; }
.jsb-bg--accent    { background-color: var(--jsb-color-accent); }

/* ──────────────────────────────────────────────────────────────────────────────
   Abstände (padding top + bottom)
   ────────────────────────────────────────────────────────────────────────────── */
.jsb-spacing--compact { padding-block: var(--jsb-spacing-compact); }
.jsb-spacing--normal  { padding-block: var(--jsb-spacing-normal);  }
.jsb-spacing--large   { padding-block: var(--jsb-spacing-large);   }

/* ──────────────────────────────────────────────────────────────────────────────
   Textausrichtung
   ────────────────────────────────────────────────────────────────────────────── */
.jsb-text--left   { text-align: left;   }
.jsb-text--center { text-align: center; }
.jsb-text--right  { text-align: right;  }

/* ──────────────────────────────────────────────────────────────────────────────
   Buttons
   ────────────────────────────────────────────────────────────────────────────── */
.jsb-btn {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: var(--jsb-btn-radius);
    font-weight: var(--jsb-btn-weight);
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    line-height: 1.2;
}
.jsb-btn:hover { opacity: 0.85; }

.jsb-btn--primary {
    background-color: var(--jsb-color-btn);
    color: var(--jsb-color-btn-text);
    border-color: var(--jsb-color-btn);
}
.jsb-btn--secondary {
    background-color: var(--jsb-color-secondary);
    color: #ffffff;
    border-color: var(--jsb-color-secondary);
}
.jsb-btn--outline {
    background-color: transparent;
    color: var(--jsb-color-primary);
    border-color: var(--jsb-color-primary);
}

/* ──────────────────────────────────────────────────────────────────────────────
   Typografie-Helfer
   ────────────────────────────────────────────────────────────────────────────── */
.jsb-block h1,
.jsb-block h2,
.jsb-block h3,
.jsb-block h4 {
    line-height: 1.2;
    margin-top: 0;
}

.jsb-eyebrow {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jsb-color-primary);
    margin-bottom: 0.75rem;
}

/* ──────────────────────────────────────────────────────────────────────────────
   Grid-Helfer
   ────────────────────────────────────────────────────────────────────────────── */
.jsb-grid {
    display: grid;
    gap: 2rem;
}
.jsb-grid--2 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.jsb-grid--3 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.jsb-grid--4 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

/* ──────────────────────────────────────────────────────────────────────────────
   Custom-Block-Wrapper
   ────────────────────────────────────────────────────────────────────────────── */
.jsb-custom-block {
    width: 100%;
    box-sizing: border-box;
}