/* ===============================
  RESPONSIVE ADJUSTMENTS
================================*/
/* ===========================
    TABLET NÉZET (max 1200px)
   =========================== */
@media (max-width: 1200px) {
    .forum-wrapper {
        display: grid;
        grid-template-columns: 1fr; /* Bal oldalt asides, jobb oldalt content */
        grid-template-areas:
            "right center"
            "left center";
        gap: 1.5rem;
    }

    .forum-left {
        grid-area: left;
        position: static;
    }

    .forum-right {
        grid-area: right;
        position: static;
    }

    .forum-center {
        grid-area: center;
    }
}


/* ===========================
    TELEFON NÉZET (max 992px)
   =========================== */
@media (max-width: 992px) {
    .forum-wrapper {
        grid-template-columns: 1fr; /* Egy oszlop */
        grid-template-areas:
            "right"
            "left"
            "center";
        padding: calc(var(--navbar-height) + 1rem) 15px 1rem;
        gap: 1.5rem;
    }

    .forum-right {
        grid-area: right;
        order: 1;
        position: static;
    }

    .forum-left {
        grid-area: left;
        order: 2;
        position: static;
    }

    .forum-center {
        grid-area: center;
        order: 3;
    }

    /* A csoportnézet beállításai is maradjanak */
    .group-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .group-meta {
        justify-content: center;
        flex-wrap: wrap;
    }
}


/* ===========================
    ULTRA KIS MOBIL (max 576px)
   =========================== */
@media (max-width: 576px) {
    .forum-wrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
            "right"
            "left"
            "center";
        gap: 1rem;
    }

    .forum-right { order: 1; }
    .forum-left  { order: 2; }
    .forum-center{ order: 3; }
}


@media (max-width: 768px) {
    .profile-container,
    .profile-edit-container {
        padding: 1.5rem;
    }
    
    .profile-left {
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }
    
    .profile-info-grid {
        grid-template-columns: 1fr;
    }
    
    .post-images {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .post-image {
        height: 150px;
    }
}

@media (max-width: 576px) {
    .hero-text h1 {
        font-size: 2rem;
    }
    
    .feature-card,
    .custom-card {
        padding: 1.5rem;
    }
    
    .btn {
        padding: 10px 24px;
        font-size: 0.9rem;
    }
    
    .nav-menu {
        gap: 1rem;
    }
    
    .footer {
        padding: 3rem 0 1.5rem;
    }
}