/* ── Header mega-dropdown ────────────────────────────────────────────────────
   Restyles the Courses / Products menus from a narrow single-column list into a
   wide bordered panel with the links laid out in columns.

   Everything is inside a desktop media query on purpose: below 1250px the nav
   collapses into the drawer, and main.css restyles .dropdown-menu for that
   context. Scoping here keeps the two apart.

   No class names change, so header.js — which toggles .nav-item.dropdown.active
   on tap — keeps working untouched. */

@media (min-width: 1250px) {

    /* Colour-only highlight by default. The nav collapses at 1250px because the
       items barely fit as it is, so no extra width is taken here. */
    .nav-item.dropdown > .nav-link {
        border-radius: 999px;
        transition: background .18s ease, color .18s ease;
    }

    .nav-item.dropdown:hover > .nav-link,
    .nav-item.dropdown.active > .nav-link {
        color: #E52B32;
    }
}

/* Wide enough for the trigger to become a real pill without risking the row */
@media (min-width: 1280px) {
    .nav-item.dropdown > .nav-link {
        padding: 7px 12px;
        /* Pull most of the pill's width back so the gap between Courses and
           Products stays the same as between the plain items either side. */
        margin: 0 -10px;
    }

    .nav-item.dropdown:hover > .nav-link,
    .nav-item.dropdown.active > .nav-link {
        background: rgba(229, 43, 50, .08);
    }
}

@media (min-width: 1250px) {

    /* ── The panel ─────────────────────────────────────────────────────────── */
    .nav-item.dropdown .dropdown-menu {
        /* Centred on the trigger rather than left-aligned to it: the panel is
           far wider than the word above it, so anchoring left threw it off
           towards the right-hand side of the header. */
        left: 50%;
        transform: translateX(-50%) translateY(10px);

        width: max-content;
        min-width: 0;
        max-width: min(700px, calc(100vw - 48px));

        padding: 18px;
        margin-top: 14px;

        background: #ffffff;
        border: 1.5px solid rgba(229, 43, 50, .38);
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(15, 27, 45, .16);

        /* Two containers side by side: the artwork, and the link grid.
           Previously this was one grid with the card spanning `grid-row: 1/-1`
           — but -1 counts back from the last EXPLICIT row line, and there were
           none, so it collapsed to a single row and links fell underneath the
           image. Two boxes cannot do that. */
        display: flex;
        align-items: stretch;
        gap: 18px;
    }

    .nav-item.dropdown:hover .dropdown-menu,
    .nav-item.dropdown.active .dropdown-menu {
        transform: translateX(-50%) translateY(0);
    }

    /* Centring only works while the trigger has half a panel's width to its
       left. "Courses" sits ~290-350px from the edge on narrow desktops, so a
       700px panel centred on it hung up to 59px off the left of the viewport.
       Below 1366px, anchor it to the trigger's leading edge instead and let it
       open into the empty space on the other side. */
    @media (max-width: 1365px) {
        .nav-item.dropdown .dropdown-menu {
            left: 0;
            right: auto;
            transform: translateX(0) translateY(10px);
        }

        .nav-item.dropdown:hover .dropdown-menu,
        .nav-item.dropdown.active .dropdown-menu {
            transform: translateX(0) translateY(0);
        }

        [dir="rtl"] .nav-item.dropdown .dropdown-menu {
            left: auto;
            right: 0;
        }
    }

    /* An invisible bridge across the 14px gap, so the panel does not close
       while the pointer travels from the trigger down to it. */
    .nav-item.dropdown .dropdown-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -16px;
        height: 16px;
    }

    /* ── Links ─────────────────────────────────────────────────────────────── */
    .dropdown-menu li {
        padding: 0;
        min-width: 0;
    }

    .dropdown-link {
        display: block;
        height: 100%;
        padding: 11px 14px;
        border-radius: 12px;
        font-size: .88rem;
        font-weight: 600;
        line-height: 1.45;
        color: #24313f;
        /* The old rule set nowrap, which is what forced the menu so wide that
           the long course names ran off in a single line. */
        white-space: normal;
        transition: background .16s ease, color .16s ease;
    }

    .dropdown-link:hover {
        background: #f3f6fa;
        color: #E52B32;
        /* main.css nudged padding-left on hover, which made the text jump */
        padding-left: 14px;
    }

    /* Rule between the programme list and the one-to-one entry, spanning the
       link grid it now sits inside. */
    .dropdown-divider {
        grid-column: 1 / -1;
        height: 1px;
        margin: 8px 4px;
        background: #e9edf2;
    }

    /* ── Visual card ───────────────────────────────────────────────────────── */

    /* Left container: fixed width, full height of the panel */
    .dropdown-visual {
        flex: 0 0 210px;
        display: flex;
    }

    /* Right container: the links, in their own grid */
    .dropdown-cols {
        flex: 1;
        min-width: 0;
    }

    .dropdown-links {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(200px, 1fr));
        gap: 4px 12px;
        align-content: start;
    }

    /* Four entries read better in one column than two rows of two */
    .dropdown-links:not(:has(li:nth-child(5))) {
        grid-template-columns: minmax(230px, 1fr);
    }

    .dropdown-visual__card {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        min-height: 200px;
        border-radius: 14px;
        overflow: hidden;
        /* Soft panel rather than a dark one: most of the artwork is a
           transparent product cutout, which needs a light ground behind it. */
        background: linear-gradient(160deg, #eef3f9, #f8fafc);
        border: 1px solid #e7ecf1;
        text-decoration: none;
    }

    .dropdown-visual__card img {
        width: 100%;
        height: 100%;
        display: block;
        background: transparent;
        transition: transform .35s ease, opacity .2s ease;
    }

    /* Photographs fill the card */
    .dropdown-visual__card img.is-photo {
        object-fit: cover;
        padding: 0;
    }

    /* Cutouts are floated inside it with room to breathe, or they collide with
       the caption and get cropped at the edges. */
    .dropdown-visual__card img.is-cutout {
        object-fit: contain;
        padding: 18px 18px 46px;
    }

    .dropdown-visual__card:hover img {
        transform: scale(1.05);
    }

    .dropdown-visual__label {
        position: absolute;
        inset-inline-start: 12px;
        bottom: 12px;
        z-index: 1;
        padding: 7px 12px;
        border-radius: 999px;
        /* Shadowed white pill so it reads over a photo or a light cutout panel */
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 2px 10px rgba(15, 27, 45, .18);
        color: #0f1b2d;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .04em;
        line-height: 1;
    }

    /* The shorter menu needs a narrower panel to match its single column */
    .nav-item.dropdown .dropdown-menu:has(.dropdown-links:not(:has(li:nth-child(5)))) {
        max-width: min(500px, calc(100vw - 48px));
    }

    /* RTL: the panel mirrors, and so does the hover padding */
    [dir="rtl"] .nav-item.dropdown .dropdown-menu {
        direction: rtl;
    }
}

/* The visual card is a desktop flourish. In the mobile drawer the menu is a
   plain stacked list, where a cover image would just push the links off screen. */
@media (max-width: 1249px) {
    .dropdown-visual {
        display: none;
    }
}