/* Miabella Global Styles */

/* ===========================================
   FONT LOADING OPTIMIZATION
   Ensure text is visible while fonts load
   =========================================== */

/* Font-display fallback for Google Fonts */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-display: swap;
    src: local('Space Grotesk');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-display: swap;
    src: local('Noto Sans');
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-display: swap;
    src: local('Material Symbols Outlined');
}

/* Fallback font stack to reduce layout shift */
.font-display {
    font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.font-body {
    font-family: 'Noto Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ===========================================
   CONTAINER SYSTEM
   Standard container for consistent margins
   =========================================== */

/* Component placeholders to reduce CLS before JS loads */
[data-component]:empty {
    display: block;
}

[data-component="header"]:empty {
    min-height: 64px;
}

@media (min-width: 768px) {
    [data-component="header-desktop"]:empty {
        min-height: 88px;
    }
}

[data-component="hero-mobile"]:empty {
    min-height: 60vh;
}

@media (min-width: 768px) {
    [data-component="hero-desktop"]:empty {
        min-height: 85vh;
    }
}

[data-component="video-player-mobile"]:empty {
    min-height: min(75vh, calc(100vw * 16 / 9));
}

/* Prevent video player layout shift */
.video-player-section {
    contain: layout;
}

@media (min-width: 768px) {
    [data-component="video-player-desktop"]:empty {
        min-height: 600px;
    }
}

[data-component="timeline-mobile"]:empty {
    min-height: 320px;
}

@media (min-width: 768px) {
    [data-component="timeline-desktop"]:empty {
        min-height: 100vh;
    }
}

[data-component="gig-calendar"]:empty {
    min-height: 520px;
}

[data-component="shows-slider"]:empty {
    min-height: 360px;
}

[data-component="footer"]:empty {
    min-height: 320px;
}
.container-site {
    width: 100%;
    max-width: 1280px; /* max-w-7xl - matches header */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* px-6 mobile */
    padding-right: 1.5rem;
}

@media (min-width: 768px) {
    .container-site {
        padding-left: 2rem; /* px-8 - matches header-desktop */
        padding-right: 2rem;
    }
}

/* Full-bleed sections that need edge-to-edge sliders */
.container-bleed {
    width: 100%;
    max-width: none;
}

.container-bleed .container-inner {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
    .container-bleed .container-inner {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* Custom scrollbar hide for clean mobile look */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Material Symbols default settings */
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

/* Vignette overlay for band section */
.vignette-overlay {
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.6) 100%);
}

/* Surface colors for cards */
.bg-surface-dark {
    background-color: #1a1010;
}

.bg-surface-accent {
    background-color: #34181a;
}