/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1080px) {
    .brand-banner {
        grid-template-columns: minmax(260px, 760px);
    }

    .banner-icon {
        display: none;
    }

    .topbar {
        width: min(90vw, 1100px);
    }

    body[data-page="team"] .topbar {
        width: calc(100% - 2vw);
        max-width: none;
    }
}

@media (max-width: 900px) {
    .topbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .mobile-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .topbar-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-top: 8px;
    }

    .topbar-menu.open {
        display: flex;
    }

    .nav-link,
    .discord-button {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 1200px) {
    .weekly-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .point-rule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .weekly-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .container {
        padding: 20px 14px 32px;
    }

    .brand-banner {
        width: calc(100% - 28px);
        margin-top: 12px;
    }

    .banner-header {
        width: 100%;
        max-width: 100%;
        height: 120px;
        border-radius: 14px;
    }

    .cards,
    .weekly-board {
        grid-template-columns: 1fr;
    }

    .dashboard-title-row {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-period,
    .scan-note,
    .member-meta-line {
        white-space: normal;
    }

    .member-panel {
        width: calc(100vw - 28px);
    }

    .point-system {
        width: calc(100vw - 28px);
    }

    .point-system-head {
        flex-direction: column;
    }

    .member-panel-compact-header {
        flex-direction: column;
        align-items: stretch;
    }

    .gift-box-hunt-status {
        align-self: flex-start;
        margin-left: 0;
        order: 2;
    }

    .member-controls {
        justify-content: stretch;
        flex-wrap: wrap;
        order: 3;
    }

    .member-search,
    .member-select {
        flex: 1 1 150px;
    }

    .home-hero h1,
    .page-title-block h1,
    .dashboard-title-row h1,
    .team-bubble-hero h1 {
        font-size: 34px;
    }

    .home-hero h2 {
        font-size: 20px;
    }

    .home-hero,
    .home-spotlight,
    .home-pulse-board {
        grid-template-columns: 1fr;
    }

    .home-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-hero {
        padding: 28px;
    }

    .home-hero-visual {
        min-height: 280px;
    }

    .team-bubble-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .team-bubble-stage {
        min-height: 920px;
    }

    .team-position-zone,
    .team-position-zone[data-team-area="leadership"],
    .team-position-zone[data-team-area="management"],
    .team-position-zone[data-team-area="events"] {
        grid-column: 1;
        padding-top: 16px;
    }
}

@media (max-width: 600px) {
    .topbar {
        width: calc(100% - 20px);
        border-radius: 14px;
    }

    .topbar-brand span {
        font-size: 14px;
    }

    .home-hero {
        padding: 24px 18px;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .home-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .home-feature-grid {
        grid-template-columns: 1fr;
    }

    .home-status-strip {
        flex-direction: column;
    }

    .home-status-strip article {
        flex-basis: auto;
        border-radius: 18px;
    }

    .home-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .home-pulse-feed,
    .home-gift-teaser,
    .home-reward-showcase {
        padding: 18px;
    }

    .home-section-head h2,
    .home-gift-teaser h2 {
        font-size: 23px;
    }

    .home-ticker-item {
        grid-template-columns: 1fr;
        grid-template-areas:
            "badge"
            "title"
            "text";
        align-items: start;
    }

    .home-feature-card:nth-child(odd) {
        transform: none;
    }

    .home-ticker-item span {
        width: fit-content;
    }

    .home-ticker-item strong,
    .home-ticker-item small {
        white-space: normal;
    }

    .home-action {
        width: 100%;
    }

    .home-signal-row {
        gap: 8px;
    }

    .home-signal-row span {
        min-height: 30px;
        padding: 6px 9px;
        font-size: 11px;
    }

    .home-hero-visual {
        display: none;
    }

    .home-mini-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-mini-card strong {
        text-align: left;
    }

    .member-list-body {
        grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
        padding: 14px;
    }

    .team-bubble-shell {
        padding: 12px;
    }

    .team-bubble-stage {
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 4px;
    }

    .team-member-card {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        min-height: 196px;
        transform: rotate(var(--chaos-r)) scale(0.94);
    }

    .team-member-art-wrap {
        min-height: 142px;
    }

    .team-member-art {
        max-height: 158px;
    }

    .team-member-card:hover,
    .team-member-card.is-focused {
        transform: translate3d(0, -8px, 0) rotate(var(--chaos-r)) scale(0.99);
    }

    .team-filter-row {
        gap: 5px;
    }

    .team-filter-button {
        flex: 1 1 auto;
    }

    .team-area-strip {
        grid-template-columns: 1fr;
    }

    body[data-admin-view="events"] .admin-mge-overview-card {
        grid-template-columns: 1fr auto;
    }

    body[data-admin-view="events"] .admin-mge-overview-card-dates {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}