/* =========================================================
   ATRA DESKTOP HEADER
   ATRA MEDIA MEGA MENU
   FINAL — STABLE / NO SHAKE / RTL
========================================================= */


/* =========================================================
   ATRA MEDIA ITEM
========================================================= */

.atra-navigation__item--atra-media {
    position: static;
}


/* =========================================================
   ATRA MEDIA MEGA MENU
   Fixed to viewport
   Exact center
   Stable opening
========================================================= */

.atra-atra-media-mega-menu {

    display: block;

    position: fixed;

    top: 80px;
    left: 50%;

    width: min(1160px, calc(100vw - 48px));

    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /*
     * IMPORTANT:
     * No transform animation.
     * Prevents the small shake/jump on opening.
     */
    transform: translateX(-50%);

    transition:
        opacity 0.22s ease,
        visibility 0s linear 0.22s;

    box-sizing: border-box;
}


/* =========================================================
   HOVER BRIDGE
   Keeps menu connected to navigation
========================================================= */

.atra-atra-media-mega-menu::before {

    content: "";

    position: absolute;

    top: -14px;
    left: 0;

    width: 100%;
    height: 14px;

    background: transparent;

    pointer-events: auto;
}


/* =========================================================
   OPEN STATE
========================================================= */

.atra-navigation__item--atra-media:hover
.atra-atra-media-mega-menu,

.atra-navigation__item--atra-media:focus-within
.atra-atra-media-mega-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateX(-50%);

    transition:
        opacity 0.22s ease,
        visibility 0s linear 0s;
}


/* =========================================================
   CONTAINER
========================================================= */

.atra-atra-media-mega-menu__container {

    position: relative;

    width: 100%;

    padding: 28px;

    box-sizing: border-box;

    background: var(--atra-color-background);

    border: 1px solid var(--atra-color-border);

    border-radius: 18px;

    box-shadow:
        0 18px 50px rgba(11, 19, 43, 0.10),
        0 4px 16px rgba(11, 19, 43, 0.06);

    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.atra-atra-media-mega-menu__header {

    display: flex;

    align-items: flex-start;

    padding-bottom: 22px;

    border-bottom:
        1px solid var(--atra-color-border);
}


.atra-atra-media-mega-menu__heading {

    max-width: 760px;
}


.atra-atra-media-mega-menu__eyebrow {

    display: block;

    margin-bottom: 6px;

    color: var(--atra-color-blue);

    font-size: 12px;

    font-weight: 700;

    line-height: 1.5;
}


.atra-atra-media-mega-menu__title {

    margin: 0;

    color: var(--atra-color-text);

    font-size: 21px;

    font-weight: 700;

    line-height: 1.5;
}


.atra-atra-media-mega-menu__description {

    margin: 6px 0 0;

    color: var(--atra-color-muted);

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   MAIN CATEGORY GRID
========================================================= */

.atra-atra-media-mega-menu__grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    padding-block: 22px;
}


/* =========================================================
   CATEGORY
========================================================= */

.atra-atra-media-category {

    min-width: 0;

    padding: 18px;

    background: var(--atra-color-surface);

    border: 1px solid transparent;

    border-radius: 14px;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.atra-atra-media-category:hover {

    background: var(--atra-color-background);

    border-color:
        rgba(0, 180, 216, 0.25);

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(11, 19, 43, 0.04);
}


/* =========================================================
   CATEGORY MAIN LINK
========================================================= */

.atra-atra-media-category__main-link {

    display: flex;

    align-items: center;

    gap: 12px;

    color: inherit;

    text-decoration: none;
}


/* =========================================================
   CATEGORY ICON
========================================================= */

.atra-atra-media-category__icon {

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: var(--atra-color-blue);

    background:
        rgba(0, 180, 216, 0.08);

    border-radius: 12px;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.atra-atra-media-category:hover
.atra-atra-media-category__icon {

    background:
        rgba(0, 180, 216, 0.13);

    transform: scale(1.03);
}


/* =========================================================
   CATEGORY HEADING
========================================================= */

.atra-atra-media-category__heading {

    min-width: 0;

    display: flex;

    flex-direction: column;
}


.atra-atra-media-category__title {

    color: var(--atra-color-text);

    font-size: 14px;

    font-weight: 700;

    line-height: 1.6;
}


.atra-atra-media-category__description {

    margin-top: 2px;

    color: var(--atra-color-muted);

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   CATEGORY LINKS
========================================================= */

.atra-atra-media-category__links {

    display: grid;

    grid-template-columns: 1fr;

    gap: 3px;

    margin: 14px 0 0;

    padding: 13px 0 0;

    list-style: none;

    border-top:
        1px solid var(--atra-color-border);
}


.atra-atra-media-category__links li {

    margin: 0;

    padding: 0;

    min-width: 0;
}


.atra-atra-media-category__links a {

    display: block;

    padding-block: 5px;

    color: var(--atra-color-muted);

    font-size: 12px;

    line-height: 1.6;

    text-decoration: none;

    transition:
        color 0.2s ease,
        padding-right 0.2s ease;
}


.atra-atra-media-category__links a:hover {

    color: var(--atra-color-blue);

    padding-right: 4px;
}


/* =========================================================
   MEDIA GRID
========================================================= */

.atra-atra-media-mega-menu__media-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    padding-top: 18px;

    border-top:
        1px solid var(--atra-color-border);
}


/* =========================================================
   MEDIA CARD
========================================================= */

.atra-atra-media-mega-menu__media-card {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 16px;

    background: var(--atra-color-surface);

    border: 1px solid transparent;

    border-radius: 14px;

    color: inherit;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.atra-atra-media-mega-menu__media-card:hover {

    background: var(--atra-color-background);

    border-color:
        rgba(0, 180, 216, 0.25);

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(11, 19, 43, 0.04);
}


/* =========================================================
   MEDIA ICON
========================================================= */

.atra-atra-media-mega-menu__media-icon {

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: var(--atra-color-blue);

    background:
        rgba(0, 180, 216, 0.08);

    border-radius: 11px;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.atra-atra-media-mega-menu__media-card:hover
.atra-atra-media-mega-menu__media-icon {

    background:
        rgba(0, 180, 216, 0.13);

    transform: scale(1.03);
}


/* =========================================================
   MEDIA CONTENT
========================================================= */

.atra-atra-media-mega-menu__media-content {

    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.atra-atra-media-mega-menu__media-content strong {

    color: var(--atra-color-text);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.6;
}


.atra-atra-media-mega-menu__media-content span {

    color: var(--atra-color-muted);

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   MEDIA ARROW
========================================================= */

.atra-atra-media-mega-menu__media-arrow {

    flex: 0 0 auto;

    color: var(--atra-color-blue);

    font-size: 17px;

    font-weight: 700;

    line-height: 1;

    transition:
        transform 0.2s ease;
}


.atra-atra-media-mega-menu__media-card:hover
.atra-atra-media-mega-menu__media-arrow {

    transform: translateX(-4px);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.atra-atra-media-mega-menu a:focus-visible {

    outline:
        2px solid var(--atra-color-blue);

    outline-offset: 3px;

    border-radius: 8px;
}


/* =========================================================
   DESKTOP WIDTH SAFETY
========================================================= */

@media (max-width: 1199px) {

    .atra-atra-media-mega-menu {

        width:
            min(
                1080px,
                calc(100vw - 32px)
            );
    }

    .atra-atra-media-mega-menu__container {

        padding: 24px;
    }

}


/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (max-width: 991px) {

    .atra-atra-media-mega-menu {

        width:
            calc(100vw - 28px);
    }

    .atra-atra-media-mega-menu__grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 10px;
    }

    .atra-atra-media-category {

        padding: 15px;
    }

    .atra-atra-media-category__icon {

        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .atra-atra-media-mega-menu,
    .atra-atra-media-category,
    .atra-atra-media-category__icon,
    .atra-atra-media-category__links a,
    .atra-atra-media-mega-menu__media-card,
    .atra-atra-media-mega-menu__media-icon,
    .atra-atra-media-mega-menu__media-arrow {

        transition: none;
    }

}