/* Global Responsive Utilities */
:root {
    /* Font Clamps */
    /* clamp(min, preferred, max) */
    --font-size-h1: clamp(2rem, 3vw + 0.5rem, 3rem);
    --font-size-h2: clamp(1.6rem, 2vw + 0.5rem, 2.2rem);
    --font-size-h3: clamp(1.4rem, 1.5vw + 0.5rem, 1.8rem);
    --font-size-h4: clamp(1.2rem, 1vw + 0.5rem, 1.4rem);
    --font-size-body: clamp(0.9rem, 0.3vw + 0.75rem, 1rem);
    --font-size-small: clamp(0.7rem, 0.2vw + 0.65rem, 0.8rem);

    /* Spacing Clamps */
    --space-xs: clamp(0.5rem, 1vw, 0.75rem);
    --space-sm: clamp(0.75rem, 2vw, 1.25rem);
    --space-md: clamp(1.25rem, 4vw, 2.5rem);
    --space-lg: clamp(2.5rem, 8vw, 5rem);
    --space-xl: clamp(4rem, 12vw, 8rem);

    /* Container Widths */
    --container-max-width: 1240px;
    --container-padding: clamp(1rem, 5vw, 2.5rem);
}

/* Helper Classes */
.fluid-h1 {
    font-size: var(--font-size-h1);
}

.fluid-h2 {
    font-size: var(--font-size-h2);
}

.fluid-h3 {
    font-size: var(--font-size-h3);
}

.fluid-p {
    font-size: var(--font-size-body);
}

.resp-container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.section-padding {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

/* Grid Utilities */
.resp-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

@media (max-width: 768px) {
    .resp-grid {
        grid-template-columns: 1fr;
    }
}