/* Mobile: 360-767px */
@media (max-width: 767px) {
    .hemix-sidebar,
    .hemix-tablet-nav {
        display: none;
    }

    .hemix-mobile-nav {
        display: flex;
    }

    .hemix-main,
    .hemix-main--with-sidebar {
        padding: var(--hemix-layout-margin-mobile);
        padding-bottom: calc(var(--hemix-mobile-nav-height) + var(--hemix-space-5));
    }

    .hemix-title {
        font-size: var(--hemix-font-size-display-mobile);
    }

    .hemix-panel__header,
    .hemix-panel__body,
    .hemix-panel__footer,
    .hemix-modal__header,
    .hemix-modal__body,
    .hemix-modal__footer {
        padding: var(--hemix-space-2);
    }

    .hemix-modal {
        align-items: end;
        padding: 0;
    }

    .hemix-modal__dialog {
        width: 100%;
        max-height: 88vh;
        border-radius: var(--hemix-radius-xl) var(--hemix-radius-xl) 0 0;
    }
}

/* Tablet: 768-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .hemix-sidebar,
    .hemix-mobile-nav {
        display: none;
    }

    .hemix-tablet-nav {
        display: block;
    }

    .hemix-main,
    .hemix-main--with-sidebar {
        padding: calc(var(--hemix-topbar-height) + var(--hemix-space-3)) var(--hemix-layout-margin-tablet) var(--hemix-space-4);
    }

    .hemix-modal__dialog {
        width: min(720px, calc(100vw - 64px));
    }
}

/* Desktop: 1024-1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
    .hemix-sidebar {
        display: flex;
    }

    .hemix-tablet-nav,
    .hemix-mobile-nav {
        display: none;
    }

    .hemix-main--with-sidebar {
        padding-left: calc(var(--hemix-sidebar-width) + var(--hemix-space-4));
    }
}

/* Large display: 1440px+ */
@media (min-width: 1440px) {
    .hemix-sidebar {
        display: flex;
    }

    .hemix-tablet-nav,
    .hemix-mobile-nav {
        display: none;
    }

    .hemix-main {
        padding: var(--hemix-space-6) var(--hemix-layout-margin-desktop);
    }

    .hemix-main--with-sidebar {
        padding-left: calc(var(--hemix-sidebar-width) + var(--hemix-layout-margin-desktop));
    }
}

/* Tablet portrait: keep the experience visual-first instead of desktop-sidebar based. */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
    .hemix-sidebar,
    .hemix-tablet-nav {
        display: none;
    }

    .hemix-mobile-nav {
        display: flex;
    }

    .hemix-main,
    .hemix-main--with-sidebar {
        padding: var(--hemix-layout-margin-mobile);
        padding-bottom: calc(var(--hemix-mobile-nav-height) + var(--hemix-space-5));
    }
}

/* Mobile/tablet landscape: short height needs compact floating menus, not fixed rails. */
@media (max-width: 1366px) and (max-height: 820px) and (orientation: landscape) {
    .hemix-sidebar,
    .hemix-tablet-nav {
        display: none;
    }

    .hemix-mobile-nav {
        display: none;
    }

    .hemix-menu-open .hemix-mobile-nav {
        display: block;
    }

    .hemix-main,
    .hemix-main--with-sidebar {
        padding: var(--hemix-space-2);
        padding-bottom: var(--hemix-space-2);
    }
}