/* css/flags.css */

/* ... (styles .flag-gallery-section, .flag-grid, .flag-item from before can be removed or adapted if you keep them for other pages) */

.flag-spotlight-section h2,
.flag-spotlight-section > .container > p { /* Intro text for spotlight */
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.flag-spotlight-section > .container > p {
    color: #555;
}


.flag-display-area {
    display: flex;
    flex-direction: column; /* Stack flags vertically */
    gap: calc(var(--spacing-unit) * 2);
}

.flag-container {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-light);
    overflow: hidden; /* To contain rounded corners with children */
}

.flag-preview {
    padding: var(--spacing-unit);
    cursor: pointer;
    display: flex;
    flex-direction: column; /* Stack SVG, title, and click indicator */
    align-items: center; /* Center items horizontally */
    text-align: center;
    background-color: #f8f9fa; /* Slightly different background for clickable area */
    transition: background-color 0.2s ease-in-out;
}
.flag-preview:hover, .flag-preview:focus {
    background-color: #e9ecef; /* Darker on hover/focus for interactivity */
    outline: 2px solid var(--link-color); /* Focus indicator */
    outline-offset: 2px;
}

.svg-flag-wrapper {
    width: 100%;
    max-width: 300px; /* Control max width of SVG container */
    height: auto;
    /* aspect-ratio: 5/3; /* Or your common flag ratio, if SVGs don't have viewBox to control this */
    border: 1px solid #ccc;
    margin-bottom: var(--spacing-unit);
    background-color: #fff; /* Ensure SVG transparent parts don't show preview bg */
}
.svg-flag-wrapper svg {
    display: block; /* Remove extra space below inline SVGs */
    width: 100%;
    height: 100%;
}


.flag-preview h3 {
    margin-top: calc(var(--spacing-unit) / 2);
    margin-bottom: calc(var(--spacing-unit) / 4);
    color: var(--text-color-dark);
}

.flag-preview .click-indicator {
    font-size: 0.9rem;
    color: var(--link-color);
}
.flag-preview .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}
.flag-preview .arrow.up {
    transform: rotate(180deg);
}


.flag-details {
    padding: var(--spacing-unit);
    border-top: 1px solid var(--border-color);
    display: none; /* Hidden by default */
}
.flag-details.open {
    display: block; /* Shown when .open class is added by JS */
}

.flag-details h4 {
    color: var(--theme-blue); /* Use theme color for heading */
    margin-bottom: var(--spacing-unit);
}
.flag-details h5 {
    color: var(--theme-red); /* Use theme color for sub-heading */
    margin-top: var(--spacing-unit);
    margin-bottom: calc(var(--spacing-unit) / 2);
}
.flag-details p, .flag-details ul {
    margin-bottom: calc(var(--spacing-unit) * 0.75);
}
.flag-details ul {
    list-style-position: inside; /* Or outside, depending on preference */
}

/* Responsive adjustments for flag display if needed */
@media (min-width: 768px) {
    .flag-display-area {
        /* Could switch to a row or grid for larger screens if desired,
           but stacked column is fine for detailed accordions. */
        /* For example, for a 3-column layout:
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--spacing-unit);
        */
    }
    .flag-preview {
       /* For side-by-side on larger screens if not using grid on parent:
        flex-direction: row; 
        align-items: center;
        text-align: left; */
    }
    .svg-flag-wrapper {
        /* If side-by-side:
        max-width: 180px; 
        margin-bottom: 0;
        margin-right: var(--spacing-unit); */
    }
}