/**
 * Forum Responsive Layout
 *
 * Media queries for structural layout changes only. Font sizes, padding,
 * and gaps are handled via clamp()/min()/max() in the other partials.
 *
 * All class names match the template HTML (templates are source of truth).
 *
 * @package PC_Kompas_Forum
 */

/* ============================================================================
   MOBILE (< 640px) — Stacked layouts, simplified display
   ============================================================================ */

@media (max-width: 639px) {

    /* --- Forum home: sections & category rows --- */

    /* Section header: just icon + title, hide column labels */
    .forum-section__header {
        grid-template-columns: auto 1fr;
    }

    .forum-section__col-labels,
    .forum-section__col-label--latest {
        display: none;
    }

    /* Category rows: stack as cards (icon + info, stats below) */
    .forum-category-row {
        grid-template-columns: auto 1fr;
        gap: var(--space-sm);
    }

    /* Stats: inline row spanning full width with labels visible */
    .forum-category-row__stats {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-start;
        gap: var(--space-md);
    }

    .forum-category-row__stat {
        flex-direction: row;
        gap: 0.3em;
    }

    /* Show labels on mobile since header labels are hidden */
    .forum-category-row__stat-label {
        display: inline;
    }

    /* Hide latest topic on mobile */
    .forum-category-row__latest {
        display: none;
    }

    /* Icon smaller on mobile */
    .forum-category-row__icon {
        width: 36px;
        height: 36px;
    }

    .forum-category-row__icon svg {
        width: 18px;
        height: 18px;
    }

    /* --- Forum category: topic rows --- */

    /* Topic rows: single column, hide vote and last-activity columns */
    .forum-topic-row {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .forum-topic-row--header {
        display: none;
    }

    .forum-topic-row__votes {
        display: none;
    }

    .forum-topic-row__stats {
        flex-direction: row;
        gap: var(--space-md);
    }

    .forum-topic-row__last-activity {
        display: none;
    }

    /* --- Forum topic: body & votes --- */

    /* Topic body: stack vote-col above content-col */
    .forum-topic__body {
        grid-template-columns: 1fr;
    }

    .forum-topic__vote-col {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--space-sm);
    }

    /* Vote component: horizontal when inside stacked vote-col */
    .forum-topic__vote-col .forum-vote {
        flex-direction: row;
        gap: var(--space-xs);
    }

    /* --- Forum topic: replies --- */

    /* Reply body: stack vote-col above content-col */
    .forum-reply__body {
        grid-template-columns: 1fr;
    }

    .forum-reply__vote-col {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--space-sm);
    }

    /* Vote component: horizontal when inside reply vote-col */
    .forum-reply__vote-col .forum-vote {
        flex-direction: row;
        gap: var(--space-xs);
    }

    /* Flatten nesting on small screens */
    .forum-reply--depth-1,
    .forum-reply--depth-2,
    .forum-reply--depth-3 {
        margin-left: var(--space-md);
    }

    /* Replies header stacks */
    .forum-topic__replies-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
}

/* ============================================================================
   TABLET (640px - 1023px) — Intermediate layouts
   ============================================================================ */

@media (min-width: 640px) and (max-width: 1023px) {

    /* --- Forum home: sections & category rows --- */

    /* Section header: 3 columns, hide latest label */
    .forum-section__header {
        grid-template-columns: clamp(40px, 4vw + 0.5rem, 44px) 1fr clamp(140px, 14vw, 180px);
    }

    .forum-section__col-label--latest {
        display: none;
    }

    /* Category rows: 3 columns, hide latest topic */
    .forum-category-row {
        grid-template-columns: clamp(40px, 4vw + 0.5rem, 44px) 1fr clamp(140px, 14vw, 180px);
    }

    .forum-category-row__latest {
        display: none;
    }

    /* --- Forum category: topic rows --- */

    /* Topic rows: show votes, hide last-activity */
    .forum-topic-row {
        grid-template-columns: clamp(48px, 5vw + 0.5rem, 60px) 1fr auto;
    }

    .forum-topic-row--header {
        grid-template-columns: clamp(48px, 5vw + 0.5rem, 60px) 1fr auto;
    }

    .forum-topic-row__last-activity {
        display: none;
    }

    .forum-topic-row--header .forum-topic-row__last-activity {
        display: none;
    }
}

/* ============================================================================
   DESKTOP (1024px+) — Full layout with all columns
   ============================================================================ */

@media (min-width: 1024px) {
    /* Category rows: full 4-column — default in forum-categories.css */

    /* Topic rows: all four columns visible */
    .forum-topic-row {
        grid-template-columns: clamp(48px, 5vw + 0.5rem, 60px) 1fr auto auto;
    }

    .forum-topic-row--header {
        grid-template-columns: clamp(48px, 5vw + 0.5rem, 60px) 1fr auto auto;
    }
}