/**
 * Utility Classes
 * Juliana y Fadi Tango Website
 * 
 * Reusable single-purpose classes
 * Uses CSS Variables from variables.css
 */

/* ==================== SPACING ==================== */

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

/* Fluid, mit Boden bei 1rem statt hartem Sprung - für punktuelle Stellen,
   an denen der gleiche Abstand wie bei .divider (Desktop 6rem) gebraucht
   wird, ohne die Komponente selbst anzufassen. */
.mb-fluid-divider { margin-bottom: clamp(1rem, 8vw, 6rem); }

/* ==================== COLORS ==================== */

.text-gold   { color: var(--color-primary); }
.text-white  { color: var(--color-white); }
.text-light  { color: var(--color-text-secondary); }
.text-muted  { color: var(--color-gray-300); }
.bg-black    { background: var(--color-black); }
.bg-dark     { background: var(--color-gray-750); }

/* ==================== LAYOUT ==================== */

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.hidden       { display: none; }
.block        { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.grid         { display: grid; }

/* ==================== ACCESSIBILITY ==================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-black);
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* ==================== TYPOGRAPHY ==================== */

/* .page-title liegt zentral in components/sections.css. */

.section-title {
    color: var(--color-primary);
    font-size: var(--font-size-5xl);
    margin-bottom: 2rem;
    text-align: center;
    letter-spacing: 2px;
}

.section-title--large {
    font-size: var(--font-size-6xl);
    margin-bottom: 3rem;
    letter-spacing: 3px;
}

/* ==================== PRICING SPECIFIC ==================== */

/* ==================== RESPONSIVE ==================== */