/* ==========================================================================
   Johfra Regio Blocks — Master Stylesheet
   CSS Custom Properties + shared layout
   ========================================================================== */

:root {
    /* Brand */
    --rb-blue:        #006eb7;
    --rb-blue-dark:   #005a96;
    --rb-blue-light:  #e8f4fc;
    --rb-text:        #212529;
    --rb-text-muted:  #555a60;
    --rb-white:       #ffffff;
    --rb-gray-50:     #f8f9fa;
    --rb-gray-100:    #f1f3f5;
    --rb-gray-200:    #e9ecef;
    --rb-gray-300:    #dee2e6;
    --rb-border:      #dee2e6;

    /* Typography */
    --rb-font:        'Muli', sans-serif;
    --rb-font-heading:'Roboto Slab', serif;

    /* Spacing */
    --rb-section-y:   64px;
    --rb-gap:         24px;
    --rb-radius:      6px;

    /* Container */
    --rb-container:   1140px;
}

/* ── Shared section reset ─────────────────────────────────────────────── */

.johfra-regio-blocks {
    font-family: var(--rb-font);
    color: var(--rb-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.regio-block {
    padding: var(--rb-section-y) 0;
}

.regio-block__inner {
    max-width: var(--rb-container);
    margin: 0 auto;
    padding: 0 15px;
}

/* ── Shared heading style ─────────────────────────────────────────────── */

.regio-block h2 {
    font-family: var(--rb-font-heading);
    font-size: 30px;
    font-weight: 700;
    color: var(--rb-text);
    margin: 0 0 12px;
    line-height: 1.3;
}

.regio-block h3 {
    font-family: var(--rb-font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--rb-text);
    margin: 0 0 8px;
    line-height: 1.35;
}

/* ── Shared button ────────────────────────────────────────────────────── */

.regio-block .btn,
.regio-block .btn--cta {
    display: inline-block;
    font-family: var(--rb-font);
    font-weight: 700;
    font-size: 16px;
    color: var(--rb-white);
    background: var(--rb-blue);
    padding: 12px 28px;
    border-radius: var(--rb-radius);
    text-decoration: none;
    transition: background .25s ease, transform .15s ease;
}

.regio-block .btn:hover,
.regio-block .btn--cta:hover {
    background: var(--rb-blue-dark);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--rb-white);
}

/* ── Alternating section backgrounds ──────────────────────────────────── */

.regio-block:nth-child(even) {
    background: var(--rb-gray-50);
}

.regio-block:nth-child(odd) {
    background: var(--rb-white);
}

/* ── Responsive base ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
    :root {
        --rb-section-y: 40px;
    }

    .regio-block h2 {
        font-size: 24px;
    }
}