/* SHIFT NATIVES UNIFIED LAYOUT V1 */
/* Reversible visual layer for /natives/ only. */

body.natives-redesign.shift-ui .natives-directory {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0 auto;
    padding: 26px;
    border: 1px solid rgba(167, 158, 255, 0.30);
    border-radius: 26px;
    background: linear-gradient(
        145deg,
        rgba(18, 25, 67, 0.78),
        rgba(10, 14, 43, 0.76)
    );
    box-shadow: 0 16px 42px rgba(0, 3, 29, 0.18);
    color: #f4f3ff;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

body.natives-redesign.shift-ui
:is(.natives-hero__title, .natives-results-heading h2,
    .natives-result-group__header h3, .natives-card__name) {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
}

body.natives-redesign.shift-ui .natives-card__name {
    font-size: 18px;
    line-height: 1.25;
}

body.natives-redesign.shift-ui .natives-card__fact {
    font-size: 12px;
    line-height: 1.45;
    color: #cbd0e9;
}

body.natives-redesign.shift-ui .natives-card {
    border-color: rgba(167, 158, 255, 0.28);
    background: linear-gradient(
        145deg,
        rgba(22, 29, 77, 0.88),
        rgba(12, 17, 49, 0.86)
    );
}

/* Desktop: orbital menu, catalogue and filter drawer. */
@media (min-width: 1180px) {
    body.natives-redesign.shift-ui .main-content {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 72px 370px 64px clamp(265px, 21vw, 390px);
    }

    body.natives-redesign.shift-ui .natives-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1180px) and (max-width: 1499px) {
    body.natives-redesign.shift-ui .main-content {
        padding-left: clamp(235px, 20vw, 310px);
        padding-right: 340px;
    }

    body.natives-redesign.shift-ui .natives-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Narrow screens: preserve existing drawer behaviour. */
@media (max-width: 1179px) {
    body.natives-redesign.shift-ui .natives-directory {
        padding: 18px;
        border-radius: 22px;
    }
}

/* SHIFT NATIVES DESKTOP ALIGNMENT V2 */

@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
    /* Align filter panel with the catalogue panel. */
    body.natives-redesign.shift-ui .natives-filter-drawer {
        top: 18px;
        max-height: calc(100dvh - 36px);
    }
}

@media (min-width: 1401px) and (hover: hover) and (pointer: fine) {

    /* Reserve room for the expanded orbital menu. */
    body.natives-redesign.shift-ui .main-content {
        padding-left: calc(clamp(400px, 25vw, 455px) - 50px);
        padding-right: 360px;
    }

    /* Keep the lunar button size; enlarge the orbit and items. */
    body.natives-redesign.shift-ui .orb-menu__branch {
        left: -58px;
        width: 278px;
        height: min(600px, 70vh);
    }

    body.natives-redesign.shift-ui .orb-menu__panel {
        left: 82px;
        width: 248px;
        gap: 6px;
        padding: 14px 0 14px 50px;
    }

    body.natives-redesign.shift-ui .orb-menu__item {
        width: 214px;
        min-height: 39px;
    }

    body.natives-redesign.shift-ui .orb-menu__item-icon {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
    }

    body.natives-redesign.shift-ui .orb-menu__item-icon svg {
        width: 17px;
        height: 17px;
    }

    body.natives-redesign.shift-ui .orb-menu__item-body {
        min-height: 39px;
        padding-left: 14px;
        padding-right: 12px;
    }

    body.natives-redesign.shift-ui .orb-menu__text {
        font-size: 12px;
    }
}

/* SHIFT NATIVES REFERENCE GEOMETRY V3 */

@media (min-width: 1401px) and (hover: hover) and (pointer: fine) {

    /* Move catalogue edge approximately 75px right. */
    body.natives-redesign.shift-ui .main-content {
        padding-left: calc(clamp(400px, 25vw, 455px) + 25px);
    }

    /* Match the standard SHIFT orbital menu proportions. */
    body.natives-redesign.shift-ui .orb-menu {
        width: 170px;
        height: 170px;
    }

    body.natives-redesign.shift-ui .orb-menu__toggle {
        width: 98px;
        height: 98px;
    }

    body.natives-redesign.shift-ui .orb-menu__branch {
        left: -70px;
        width: 330px;
        height: min(700px, 82dvh);
    }

    body.natives-redesign.shift-ui .orb-menu__panel {
        left: 94px;
        width: 282px;
        gap: 8px;
        padding: 18px 0 18px 62px;
    }

    body.natives-redesign.shift-ui .orb-menu__item {
        width: 248px;
        min-height: 42px;
    }

    body.natives-redesign.shift-ui .orb-menu__item-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    body.natives-redesign.shift-ui .orb-menu__item-body {
        min-height: 42px;
        padding: 0 12px 0 16px;
    }

    body.natives-redesign.shift-ui .orb-menu__text {
        font-size: 13px;
    }
}