/* Tableau Container Styling */
.tableau-container {
    margin: 10px auto; /* Center the container with minimal margin */
    max-width: 1000px; /* Limit the maximum width */
    text-align: center; /* Center-align content */
    padding-bottom: 60%; /* Adjusted aspect ratio for this chart (e.g., 16:9 = 56.25%) */
    position: relative;
    height: 0; /* Required for aspect ratio trick */
    overflow: hidden;
}

.tableau-container .tableauPlaceholder {
    border: 1px solid #e0e0e0; /* Optional border for definition */
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    background-color: #ffffff; /* Clean background */
}

.tableau-container iframe, 
.tableau-container .tableauPlaceholder object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Remove borders around chart */
}

.section {
    margin: 0 auto; /* Center section */
    padding: 10px 0; /* Reduce vertical padding */
    max-width: 90%; /* Restrict section width for better alignment */
}

.section h2 {
    margin-bottom: 10px; /* Minimize space between heading and chart */
    font-size: 1.5rem; /* Adjust font size for consistency */
    text-align: center; /* Align heading to the center */
}

/* Hide this content on small screens */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .tableau-container {
        max-width: 100%; /* Use full screen width */
        padding-bottom: 75%; /* Adjust to 4:3 aspect ratio for tablets */
    }

    .section {
        padding: 5px 0; /* Reduce padding further for smaller devices */
    }

    .section h2 {
        font-size: 1.3rem; /* Adjust heading size for smaller screens */
    }

    /* Hide Tableau content on mobile */
    .desktop {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
        text-align: center;
        padding: 1rem;
        font-style: italic;
        color: #666;
    }
}

@media (max-width: 480px) {
    .tableau-container {
        padding-bottom: 100%; /* Square aspect ratio for very small devices */
    }

    .section h2 {
        font-size: 1.2rem; /* Further reduce heading size */
    }
    
        /* Hide Tableau content on mobile */
    .desktop {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
        text-align: center;
        padding: 1rem;
        font-style: italic;
        color: #666;
    }
}