/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {
    .kpi-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .grid-2,
    .create-layout {
        grid-template-columns: 1fr;
    }

    .studio-layout {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 900px) {
    :root {
        --sidebar: 0px;
    }

    .sidebar {
        width: 248px;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 10px 0 30px rgba(15,23,42,.12);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .main {
        margin-left: 0;
    }

    .mobile-menu {
        display: grid;
        place-items: center;
    }

    .topbar {
        padding: 0 14px;
    }

    .breadcrumb {
        min-width: auto;
    }

    .page {
        padding: 22px 18px 40px;
    }

    .campaign-row {
        grid-template-columns: 1fr 90px 80px;
    }

    .campaign-row > div:nth-child(3),
    .campaign-row > div:nth-child(4) {
        display: none;
    }

    .segment-grid,
    .sentiment-grid {
        grid-template-columns: 1fr;
    }

    .calendar-day {
        min-height: 80px;
    }
}

@media (max-width: 620px) {
    .page-header {
        flex-direction: column;
    }

    .page-actions {
        width: 100%;
    }

    .page-actions .btn {
        flex: 1;
    }

    .kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .kpi {
        padding: 12px;
    }

    .kpi-value {
        font-size: 21px;
    }

    .topbar {
        gap: 8px;
    }

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

    .field.full {
        grid-column: auto;
    }

    .integration-grid,
    .governance-grid {
        grid-template-columns: 1fr;
    }

    .calendar-day {
        min-height: 65px;
        padding: 5px;
    }

    .calendar-event {
        display: none;
    }

    .calendar-head div {
        padding: 7px 2px;
    }
}