/* ===========================================
   Forums Responsive Styles
   Mobile-First Approach
   =========================================== */

/* ===========================================
   Base Mobile Styles (320px - 768px)
   =========================================== */
@media screen and (max-width: 768px) {
    /* Container adjustments */
    .container.forums-container {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        margin: 1rem;
        gap: 1rem;
    }

    /* Sidebar becomes full width */
    .sidebar.blue-square {
        order: -1;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    /* Main content adjustments */
    .subforum.main-content {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    /* Subforum title adjustments */
    .subforum-title {
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
    }

    .subforum-title h1 {
        font-size: 1.5rem;
    }

    /* Subforum rows become single column */
    .subforum-row {
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .subforum-column {
        margin-bottom: 0.5rem;
        padding: 0.75rem;
    }

    .subforum-icon i {
        font-size: 1.5rem;
    }

    .subforum-description h3 {
        font-size: 1.1rem;
    }

    .subforum-stats,
    .subforum-info {
        font-size: 0.85rem;
    }

    /* Sidebar sections */
    .sidebar.blue-square section {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .sidebar.blue-square h3 {
        font-size: 1.2rem;
    }
}

/* ===========================================
   Tablet Styles (768px - 1024px)
   =========================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .container.forums-container {
        grid-template-columns: 2fr 1fr;
        gap: 1.5rem;
    }

    .subforum-row {
        grid-template-columns: 50px 1fr 100px 150px;
        gap: 0.75rem;
    }

    .subforum-title h1 {
        font-size: 1.6rem;
    }

    .sidebar.blue-square {
        width: 280px;
    }
}

/* ===========================================
   Large Mobile Styles (480px - 768px)
   =========================================== */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .subforum-row {
        grid-template-columns: 50px 1fr 100px;
        text-align: left;
    }

    .subforum-column:nth-child(3),
    .subforum-column:nth-child(4) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .subforum-stats,
    .subforum-info {
        font-size: 0.9rem;
    }
    /* Sidebar adjustments */
    .sidebar.blue-square {
        position: relative;
    }
}

/* ===========================================
   Small Mobile Styles (320px - 480px)
   =========================================== */
@media screen and (max-width: 480px) {
    /* Container adjustments */
    .container.forums-container {
        padding: 0.5rem;
        margin: 0.5rem;
    }

    .subforum.main-content {
        padding: 1rem;
    }

    .subforum-title {
        padding: 0.5rem 0.75rem;
    }

    .subforum-title h1 {
        font-size: 1.3rem;
    }

    /* Single column layout */
    .subforum-row {
        display: flex;
        flex-direction: column;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .subforum-column {
        margin-bottom: 0.5rem;
        padding: 0.5rem;
    }

    .subforum-icon i {
        font-size: 1.2rem;
    }

    .subforum-description h3 {
        font-size: 1rem;
    }

    .subforum-description p {
        font-size: 0.8rem;
    }

    .subforum-stats,
    .subforum-info {
        font-size: 0.75rem;
    }

    /* Sidebar adjustments */
    .sidebar.blue-square {
        padding: 1rem;
        position: relative;
    }

    .sidebar.blue-square section {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .sidebar.blue-square h3 {
        font-size: 1.1rem;
    }
}

/* ===========================================
   Ultra Small Mobile Styles (max-width: 320px)
   =========================================== */
@media screen and (max-width: 320px) {
    .container.forums-container {
        padding: 0.25rem;
        margin: 0.25rem;
    }

    .subforum.main-content {
        padding: 0.75rem;
    }

    .subforum-title {
        padding: 0.5rem;
    }

    .subforum-title h1 {
        font-size: 1.2rem;
    }

    .subforum-row {
        padding: 0.5rem;
    }

    .subforum-column {
        padding: 0.5rem;
    }

    .sidebar.blue-square {
        padding: 0.75rem;
        position: relative;
    }

    .sidebar.blue-square section {
        padding: 0.5rem;
    }
}

/* ===========================================
   Touch Device Optimizations
   =========================================== */
@media (hover: none) and (pointer: coarse) {
    .subforum-row:hover {
        transform: none;
    }

    .subforum-row:active {
        transform: scale(0.98);
    }

    .glowing-username:hover {
        transform: none;
    }

    .glowing-username:active {
        transform: scale(1.02);
    }
}

/* ===========================================
   Orientation Specific Styles
   =========================================== */
@media screen and (orientation: landscape) and (max-width: 768px) {
    .container.forums-container {
        grid-template-columns: 2fr 1fr;
    }

    .sidebar.blue-square {
        width: 250px;
    }
}

@media screen and (orientation: portrait) and (max-width: 768px) {
    .container.forums-container {
        grid-template-columns: 1fr;
    }
}