/*
    Mega menu card layout -- all five header panels.
    Created on : 12-AUG-2026

    Scoped to the top-level item IDs and otherwise structural, so nothing here
    depends on the child items that the menu restructure creates or removes.
    Everything desktop-only: below 1025px MMM runs its mobile accordion, which
    must not inherit any of this.
*/

@media (min-width: 1025px) {

    /* ---- panel frame -----------------------------------------------------
       48px gutters line content up with the header logo. The panel opens
       flush under the coded header (positioning in site-header.css). */
    #mega-menu-item-170  > ul.mega-sub-menu,
    #mega-menu-item-171  > ul.mega-sub-menu,
    #mega-menu-item-172  > ul.mega-sub-menu,
    #mega-menu-item-2622 > ul.mega-sub-menu,
    li.mega-tcp-training > ul.mega-sub-menu {
        padding: 36px 48px 40px;
        background: #edeef1;
    }

    /* the mockup was composed at ~1180px; uncapped, full-width columns drift
       apart at 1920. 1480px centred matches the real content pages. */
    #mega-menu-item-170  > ul.mega-sub-menu > li.mega-menu-row,
    #mega-menu-item-171  > ul.mega-sub-menu > li.mega-menu-row,
    #mega-menu-item-172  > ul.mega-sub-menu > li.mega-menu-row,
    #mega-menu-item-2622 > ul.mega-sub-menu > li.mega-menu-row,
    li.mega-tcp-training > ul.mega-sub-menu > li.mega-menu-row {
        max-width: 1480px;
        margin-left: auto;
        margin-right: auto;
    }

    /* ---- group headings --------------------------------------------------
       Second-level parents render as plain labels, never cards. */
    .mega-menu .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item-has-children > a.mega-menu-link {
        display: block;
        height: auto;
        padding: 0 0 10px;
        margin-bottom: 14px;
        border-bottom: 1px solid #dcdfe6;
        background: none;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #6b7488;
        text-decoration: none;
    }

    /* ---- link cards ------------------------------------------------------ */
    .mega-menu .mega-menu-column ul.mega-sub-menu ul.mega-sub-menu {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mega-menu .mega-menu-column ul.mega-sub-menu ul.mega-sub-menu > li > a.mega-menu-link {
        display: block;
        height: auto;
        padding: 14px 16px;
        background: #fff;
        border: 1px solid #e3e6ec;
        border-left: 3px solid transparent;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.35;
        color: #26304c;
        text-decoration: none;
        transition: border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
    }

    .mega-menu .mega-menu-column ul.mega-sub-menu ul.mega-sub-menu > li > a.mega-menu-link:hover,
    .mega-menu .mega-menu-column ul.mega-sub-menu ul.mega-sub-menu > li > a.mega-menu-link:focus {
        border-left-color: #e0426b;
        box-shadow: 0 2px 8px rgba(21, 44, 91, 0.09);
        color: #152c5b;
        background: #fff;
    }

    /* ---- promo panels (Custom HTML widgets) ------------------------------ */
    .tcp-promo {
        background: #152c5b;
        border-radius: 4px;
        padding: 22px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: 100%;
    }
    .tcp-promo__label {
        margin: 0;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.17);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #9fb0d2;
    }
    .tcp-promo__body {
        margin: 0;
        font-size: 13.5px;
        line-height: 1.5;
        color: #c9d4e8;
    }
    .tcp-promo__btn,
    .tcp-promo__btn:link,
    .tcp-promo__btn:visited,
    .tcp-mp__btn,
    .tcp-mp__btn:link,
    .tcp-mp__btn:visited {
        align-self: flex-start;
        display: inline-block;
        padding: 11px 18px;
        background: #e0426b;
        border-radius: 2px;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
        color: #fff;
    }
    .tcp-promo__btn:hover,
    .tcp-promo__btn:focus,
    .tcp-mp__btn:hover,
    .tcp-mp__btn:focus {
        background: #c22e56;
        color: #fff !important;
        text-decoration: none;
    }

    /* ---- shortcode panels (tcp_menu_panel) -------------------------------- */
    .tcp-mp__label {
        margin: 0 0 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid #dcdfe6;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #6b7488;
    }

    .tcp-mp--legal .tcp-mp__list {
        display: flex;
        flex-direction: column;
    }
    .tcp-mp--legal .tcp-mp__list a {
        display: block;
        padding: 9px 0;
        border-bottom: 1px solid #dcdfe6;
        font-size: 13px;
        line-height: 1.4;
        text-decoration: none;
        color: #26304c;
        transition: color 0.12s ease;
    }
    .tcp-mp--legal .tcp-mp__list a:hover,
    .tcp-mp--legal .tcp-mp__list a:focus {
        color: #e0426b;
    }
    .tcp-mp__count {
        margin: 6px 0 0;
        font-size: 11.5px;
        color: #7c869d;
    }
    .tcp-mp__more {
        display: inline-block;
        margin-top: 12px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        color: #152c5b;
    }
    .tcp-mp__more:hover,
    .tcp-mp__more:focus {
        color: #e0426b;
    }

    .tcp-mp__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: stretch;
    }
    .tcp-mp__grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
    /* cards in a row stay the same height; a one-line title just gets more
       white space under it instead of a shorter card */
    .tcp-mcard {
        display: flex;
        flex-direction: column;
    }
    .tcp-mcard__shot {
        flex: none;
    }

    .tcp-mcard {
        display: block;
        background: #fff;
        border: 1px solid #e3e6ec;
        border-radius: 4px;
        overflow: hidden;
        text-decoration: none;
    }
    /* proportional with a cap: bare aspect-ratio blows up on wide cards,
       a bare fixed height letterboxes them */
    .tcp-mcard__shot {
        display: block;
        width: 100%;
        aspect-ratio: 768 / 494;
        max-height: 152px;
        overflow: hidden;
        background: #dfe3ea;
    }
    .tcp-mcard__shot img,
    .tcp-clogo__band img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.35s ease;
    }
    .tcp-mcard:hover .tcp-mcard__shot img,
    .tcp-mcard:focus .tcp-mcard__shot img,
    .tcp-clogo:hover .tcp-clogo__band img,
    .tcp-clogo:focus .tcp-clogo__band img {
        transform: scale(1.04);
    }
    .tcp-mcard__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: 9px 11px 11px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.35;
        color: #26304c;
    }
    .tcp-mcard:hover .tcp-mcard__title,
    .tcp-mcard:focus .tcp-mcard__title {
        color: #152c5b;
    }

    .tcp-mp__foot {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 16px;
    }

    /* ---- case study band -------------------------------------------------
       The art is ~5.4:1 photographic banners: full card width, shallow crop. */
    .tcp-mp--cases {
        border-top: 1px solid #dcdfe6;
        padding-top: 16px;
        margin-top: 6px;
    }
    .tcp-mp__band {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    .tcp-clogo {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #e3e6ec;
        border-radius: 4px;
        overflow: hidden;
        text-decoration: none;
        transition: border-color 0.12s ease, box-shadow 0.12s ease;
    }
    .tcp-clogo:hover,
    .tcp-clogo:focus {
        border-color: #c9cfdb;
        box-shadow: 0 2px 8px rgba(21, 44, 91, 0.09);
    }
    .tcp-clogo__band {
        display: block;
        height: 84px;
        overflow: hidden;
        background: #dfe3ea;
    }
    .tcp-clogo__title {
        padding: 10px 12px 12px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.3;
        color: #26304c;
    }
    .tcp-clogo:hover .tcp-clogo__title {
        color: #152c5b;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mega-menu a.mega-menu-link,
    .tcp-mcard__shot img,
    .tcp-clogo__band img {
        transition: none;
    }
}