/* Modern Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-background);
    color: var(--color-text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Utility Classes */
.container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 0 1rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--color-accent);
    color: white;
}

.btn-primary:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hide-on-desktop {
        display: none !important;
    }
}

.design-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 3rem;
    align-items: start;
    margin-bottom: 3rem;
}

@media (max-width: 768px) {
    .design-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Move stats/ratings (2nd child) to bottom if needed, but 1fr stacks them naturally.
       The HTML order is Image(Left) then Rating(Right).
       So 1fr means Image on Top, Rating on Bottom.
       This matches user request "ratings div ... under the flag design image". */

    /* Discuss Grid Mobile Overrides */
    .discuss-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .discuss-grid aside {
        display: none;
        /* Hidden by default on mobile */
    }

    .discuss-grid.sidebar-active aside {
        display: block;
        position: fixed;
        top: 4rem;
        left: 0;
        width: 80%;
        max-width: 300px;
        height: calc(100vh - 4rem);
        z-index: 100;
        background: var(--color-background);
        border-right: 1px solid var(--color-border);
        overflow-y: auto;
        padding: 1rem;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    }

    .sidebar-overlay {
        display: none;
    }

    .sidebar-active .sidebar-overlay {
        display: block;
        position: fixed;
        top: 4rem;
        left: 0;
        width: 100%;
        height: calc(100vh - 4rem);
        background: rgba(0, 0, 0, 0.5);
        z-index: 90;
    }

    .mobile-hidden {
        display: none;
    }

    .mobile-visible {
        display: block;
    }

    /* Ensure hamburger stays visible above sidebar panel */
    .sidebar-toggle-btn {
        position: relative;
        z-index: 101;
    }
}

/* Default (Desktop) Discuss Grid */
.discuss-grid {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 3rem;
    align-items: start;
}