/* Studio Details Page Fixes - ADD MAIN CONTAINER PADDING */
#studio-details-main {
    margin: 0;
    padding: 0 var(--container-padding);
}

/* Reset container margins and padding */
.studio-details-skeleton .container,
#content-container .container {
    margin: 0 auto;
    padding: var(--space-8) 0;
    max-width: 1200px;
}

/* Gallery section - ALSO NEEDS MARGINS */
.studio-gallery,
.skeleton-gallery {
    margin: 0 auto var(--space-8) auto;
    padding: 0;
    width: 100%;
    max-width: 1200px;
}

/* Ensure gallery containers have consistent margins */
.studio-gallery .container,
.skeleton-gallery .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* Main content grid - proper spacing */
.studio-content-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}

/* Left column - studio details */
.studio-details-left {
    flex: 2;
    min-width: 300px;
    padding: 0;
}

/* Right column - booking card */
.studio-details-right {
    flex: 1;
    min-width: 280px;
    padding: 0;
}

/* Section spacing within content */
.studio-section {
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
}

/* Remove extra padding from skeleton sections */
.studio-details-skeleton > div:not(.container) {
    margin-bottom: var(--space-8);
}

/* Error container spacing */
#error-container .container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}

/* Breadcrumb styling */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.breadcrumb a {
    color: var(--color-primary-600);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    transition: var(--transition-colors);
}

.breadcrumb a:hover {
    color: var(--color-primary-800);
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--color-neutral-400);
    flex-shrink: 0;
}

.breadcrumb-current {
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .studio-content-grid {
        flex-direction: column;
        gap: var(--space-6);
        padding: var(--space-8) 0;
    }

    .studio-details-skeleton .container,
    #content-container .container {
        padding: var(--space-8) 0;
    }

    .studio-section {
        padding: var(--space-4);
    }

    /* Smaller title on mobile */
    h1[style*="font-size: var(--text-4xl)"] {
        font-size: var(--text-3xl) !important;
        max-width: 100% !important;
    }
}