/* ===========================================
   Frontend2 Base CSS
   Minimal, Bootstrap-first design system
   =========================================== */

/* CSS Variables */
:root {
    --section-padding-y: 3rem;
    --section-padding-y-lg: 5rem;
    --container-max-width: 1280px;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Images responsive by default */
img {
    max-width: 100%;
    height: auto;
}

/* ===========================================
   Section Base
   =========================================== */
.section {
    padding-block: var(--section-padding-y);
}

@media (min-width: 992px) {
    .section {
        padding-block: var(--section-padding-y-lg);
    }
}

/* Section Modifiers */
.section--no-padding {
    padding-block: 0;
}

.section--py-sm {
    padding-block: 2rem;
}

.section--bg-light {
    background-color: var(--bs-light);
}

.section--bg-dark {
    background-color: var(--bs-dark);
    color: #fff;
}

.section--bg-primary {
    background-color: var(--bs-primary);
    color: #fff;
}

/* ===========================================
   Typography
   =========================================== */
.section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0;
}

.section-lead {
    font-size: 1.125rem;
    color: var(--bs-secondary-color);
    max-width: 65ch;
}

/* ===========================================
   Utilities
   =========================================== */
.text-balance {
    text-wrap: balance;
}

.max-w-prose {
    max-width: 65ch;
}

.max-w-lg {
    max-width: 800px;
}