/* ============================================================
   NTM Masthead — Figma redesign

   Dark topbar strip + white sticky editorial nav with three
   hover mega-menus. Mobile burger menu with accordion sub-groups.
   Loaded by templates/public/ntm/common/_masthead.html.twig.
   ============================================================ */

:root {
    --ntm-mast-white: #ffffff;
    --ntm-mast-ink: #14110f;
    --ntm-mast-cyan: #00a7b5;
    --ntm-mast-cyan-deep: #007e89;
    --ntm-mast-gray: #6b6660;
    --ntm-mast-line: #e8e1d6;
    --ntm-mast-radius: 14px;
    --ntm-mast-shadow: 0 28px 70px -18px rgba(20, 17, 15, 0.28);
}

/* ---- TOPBAR ---- */
.ntm-topbar {
    background: var(--ntm-mast-ink);
    color: var(--ntm-mast-white);
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13.5px;
    letter-spacing: 0.01em;
    padding: 10px 16px;
    position: relative;
    z-index: 101;
}
.ntm-topbar__link {
    color: var(--ntm-mast-white);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.ntm-topbar__link:hover,
.ntm-topbar__link:hover .ntm-topbar__cta {
    color: var(--ntm-mast-cyan);
    text-decoration: none;
}
.ntm-topbar__lead { color: rgba(255, 255, 255, 0.78); }
.ntm-topbar__cta {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.18s ease;
}
.ntm-topbar__arr { transition: transform 0.2s ease; }
.ntm-topbar__link:hover .ntm-topbar__arr { transform: translateX(4px); }

@media (max-width: 640px) {
    .ntm-topbar { font-size: 12.5px; padding: 9px 14px; }
    .ntm-topbar__lead { display: none; }
}

/* ---- STICKY HEADER ---- */
.ntm-site-header {
    background: var(--ntm-mast-white);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--ntm-mast-line);
    font-family: 'Inter', system-ui, sans-serif;
}
.ntm-nav-bar {
    max-width: 1340px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 40px;
    height: 80px;
}
.ntm-nav-left {
    display: flex;
    align-items: center;
    gap: 34px;
}
.ntm-nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
}

/* ---- WORDMARK ---- */
.ntm-wordmark { text-align: center; }
.ntm-wordmark__link {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 27px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ntm-mast-ink);
    text-decoration: none;
}
.ntm-wordmark__link:hover { text-decoration: none; color: var(--ntm-mast-ink); }
.ntm-wordmark__accent { color: var(--ntm-mast-cyan); }

/* ---- NAV ITEMS / LINKS ---- */
.ntm-nav-item { position: relative; }
.ntm-nav-link {
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--ntm-mast-ink);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 30px 0;
    transition: color 0.18s ease;
}
.ntm-nav-link:hover { color: var(--ntm-mast-cyan-deep); text-decoration: none; }
.ntm-nav-link--solo { padding: 30px 0; }

.ntm-chev {
    width: 8px;
    height: 8px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.25s ease;
    opacity: 0.55;
    display: inline-block;
}
/* Hover opens panels only where hover exists. On touch-only devices (iPad in
   landscape is wider than the mobile breakpoint) WebKit swallows the click of
   a tap whose synthetic hover reveals content, so a hover rule there would
   cost an extra tap; masthead.js opens the panel on the first tap instead. */
@media (hover: hover) {
    .ntm-nav-item:hover .ntm-nav-link .ntm-chev {
        transform: rotate(225deg) translateY(-2px);
    }
}

.ntm-login-link {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ntm-mast-gray);
    text-decoration: none;
}
.ntm-login-link:hover { color: var(--ntm-mast-ink); text-decoration: none; }
.ntm-join-btn {
    background: var(--ntm-mast-ink);
    color: var(--ntm-mast-white);
    font-size: 14.5px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s ease;
}
.ntm-join-btn:hover {
    background: var(--ntm-mast-cyan-deep);
    color: var(--ntm-mast-white);
    text-decoration: none;
}

/* ---- MEGA-MENUS ---- */
.ntm-mega {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--ntm-mast-white);
    border-radius: var(--ntm-mast-radius);
    box-shadow: var(--ntm-mast-shadow);
    border: 1px solid var(--ntm-mast-line);
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 200;
}
.ntm-nav-item:focus-within .ntm-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
@media (hover: hover) {
    .ntm-nav-item:hover .ntm-mega {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
}
.ntm-mega--stories { width: 620px; }
.ntm-mega--interviews { width: 880px; }
.ntm-mega--podcast { width: 760px; }

/* ---- SIMPLE DROPDOWN (right-nav: Who We Are) ----
   A lightweight text dropdown for short link lists, distinct from the
   card-based mega-menus. Right-anchored so it never overflows the viewport
   edge. Extend by adding more .ntm-dropdown__link entries. */
.ntm-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 210px;
    background: var(--ntm-mast-white);
    border-radius: var(--ntm-mast-radius);
    box-shadow: var(--ntm-mast-shadow);
    border: 1px solid var(--ntm-mast-line);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 200;
}
.ntm-nav-item:focus-within .ntm-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
@media (hover: hover) {
    .ntm-nav-item:hover .ntm-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
}

/* ---- JS-DRIVEN OPEN / CLOSED STATE (masthead.js) ----
   Mirrors the :hover / :focus-within rules above so touch (first tap opens),
   Escape (close while still hovered or focused) and outside-click can override
   them. Same specificity, later in the file, so these win. Keep this block
   after the :hover/:focus-within rules. */
.ntm-nav-item.is-open .ntm-mega,
.ntm-nav-item.is-open .ntm-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.ntm-nav-item.is-open .ntm-nav-link .ntm-chev {
    transform: rotate(225deg) translateY(-2px);
}
.ntm-nav-item.is-closed .ntm-mega,
.ntm-nav-item.is-closed .ntm-dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
}
.ntm-nav-item.is-closed .ntm-nav-link .ntm-chev {
    transform: rotate(45deg) translateY(-2px);
}
.ntm-dropdown__link {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ntm-mast-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease;
}
.ntm-dropdown__link:hover {
    background: #f6f1e8;
    color: var(--ntm-mast-cyan-deep);
    text-decoration: none;
}

.ntm-mega__grid { display: grid; gap: 30px; align-items: start; }
.ntm-mega__grid--stories { grid-template-columns: 1.2fr 1fr; }
/* Two cards (Cover Stories + Q&A) + recent column. */
.ntm-mega__grid--interviews { grid-template-columns: 1fr 1fr 1.15fr; }
.ntm-mega__grid--podcast { grid-template-columns: 1fr 1.15fr; }

/* Stories mega: single wide card — keep the shorter 4:3 image so it doesn't
   dominate vertically. Interviews mega has two square cards (see below). */
.ntm-mega--stories .ntm-pcard__img {
    aspect-ratio: 4 / 3;
}
.ntm-mega--interviews .ntm-pcard__img {
    aspect-ratio: 1 / 1;
}

/* ---- FEATURED CARDS ----
   The card is a <div>; its title holds the only <a>, so crawlers see one label
   per URL. .ntm-pcard is the containing block for the title link's stretched
   ::after, which makes the whole card clickable. */
.ntm-pcard {
    position: relative;
    text-decoration: none;
    color: var(--ntm-mast-ink);
    display: block;
}
.ntm-pcard:hover { text-decoration: none; color: var(--ntm-mast-ink); }
.ntm-pcard__title-link {
    font: inherit;
    color: inherit;
    text-decoration: none;
}
.ntm-pcard__title-link:hover,
.ntm-pcard__title-link:focus {
    color: inherit;
    text-decoration: none;
}
.ntm-pcard__title-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3; /* above .ntm-pcard__tag (z-index 2) */
}
.ntm-pcard__title-link:focus-visible {
    outline: none;
}
.ntm-pcard__title-link:focus-visible::after {
    outline: 2px solid var(--ntm-mast-cyan);
    outline-offset: 4px;
    border-radius: var(--ntm-mast-radius);
}
.ntm-pcard__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 11px;
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    background: var(--ntm-mast-line);
}
.ntm-pcard__img-el,
.ntm-pcard__img-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ntm-pcard__tag {
    position: absolute;
    top: 13px;
    left: 13px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background: var(--ntm-mast-white);
    color: var(--ntm-mast-cyan-deep);
    padding: 5px 11px;
    border-radius: 999px;
    z-index: 2;
}
.ntm-pcard__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.12;
    margin-bottom: 8px;
}
.ntm-pcard--feat .ntm-pcard__title { font-size: 20px; }
.ntm-pcard__sub {
    font-size: 13px;
    color: var(--ntm-mast-gray);
    line-height: 1.45;
    margin-bottom: 10px;
}
.ntm-pcard__link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ntm-mast-cyan-deep);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ntm-pcard__arr { transition: transform 0.2s ease; }
.ntm-pcard:hover .ntm-pcard__arr { transform: translateX(4px); }

/* ---- RECENT COLUMN ---- */
.ntm-recent-col {
    border-left: 1px solid var(--ntm-mast-line);
    padding-left: 30px;
    height: 100%;
}
.ntm-recent-col__head {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ntm-mast-cyan-deep);
    margin-bottom: 10px;
}
.ntm-recent-item {
    display: flex;
    gap: 14px;
    align-items: center;
    text-decoration: none;
    color: var(--ntm-mast-ink);
    padding: 13px 0;
    border-bottom: 1px solid var(--ntm-mast-line);
}
.ntm-recent-item:last-child { border-bottom: none; }
.ntm-recent-item:hover { text-decoration: none; }
.ntm-recent-item:hover .ntm-recent-item__text { color: var(--ntm-mast-cyan-deep); }
.ntm-recent-item__thumb {
    width: 56px;
    height: 56px;
    border-radius: 9px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--ntm-mast-line);
}
.ntm-recent-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ntm-recent-item__text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.22;
    color: var(--ntm-mast-ink);
    transition: color 0.18s ease;
}
.ntm-recent-item--empty {
    font-family: inherit;
    font-size: 13px;
    color: var(--ntm-mast-gray);
    padding: 13px 0;
}

/* ---- GRADIENT PLACEHOLDERS (used when no image is available) ---- */
.ntm-g1 { background: linear-gradient(150deg, #d6ebed, #a3d0d6); }
.ntm-g2 { background: linear-gradient(150deg, #f0e7d7, #e0d0b4); }
.ntm-g3 { background: linear-gradient(150deg, #cbe5e8, #92c6cd); }
.ntm-g4 { background: linear-gradient(150deg, #ece3d2, #d6c5a8); }
.ntm-g5 { background: linear-gradient(150deg, #d9eef0, #aad7dc); }
.ntm-g6 { background: linear-gradient(150deg, #efe5d3, #ddccac); }

/* ---- MOBILE ---- */
.ntm-burger { display: none; }
.ntm-mobile-menu { display: none; }

@media (max-width: 1239px) {
    /* The desktop row needs about 1,203px (the left menu is the wider side).
       Below 1240px "The Blueprint" wraps and Podcast runs into the wordmark,
       so the burger takes over there. Re-measure after adding a nav item.
       Keep this comment inside the block: CriticalCssGenerator reads a
       comment line as a `*` selector, and above this last block its capture
       ran on into the next file's first rule. */
    .ntm-nav-bar {
        grid-template-columns: auto 1fr auto;
        padding: 0 24px;
    }
    .ntm-nav-left,
    .ntm-nav-right { display: none; }
    .ntm-wordmark { text-align: left; }
    .ntm-wordmark__link { font-size: 22px; }

    .ntm-burger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        justify-self: end;
    }
    .ntm-burger span {
        width: 24px;
        height: 2px;
        background: var(--ntm-mast-ink);
        transition: 0.25s;
        display: block;
    }
    .ntm-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .ntm-burger.is-open span:nth-child(2) { opacity: 0; }
    .ntm-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .ntm-mobile-menu.is-open {
        display: block;
        background: var(--ntm-mast-white);
        border-top: 1px solid var(--ntm-mast-line);
        padding: 12px 24px 24px;
    }
    .ntm-m-group { border-bottom: 1px solid var(--ntm-mast-line); }
    .ntm-m-top {
        width: 100%;
        background: none;
        border: none;
        font-family: inherit;
        font-size: 16px;
        font-weight: 500;
        color: var(--ntm-mast-ink);
        padding: 16px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        text-align: left;
        text-decoration: none;
    }
    .ntm-m-top:hover { text-decoration: none; color: var(--ntm-mast-ink); }
    .ntm-m-top--solo { display: block; }
    .ntm-mchev {
        width: 8px;
        height: 8px;
        border-right: 1.6px solid var(--ntm-mast-gray);
        border-bottom: 1.6px solid var(--ntm-mast-gray);
        transform: rotate(45deg);
        transition: transform 0.2s;
        display: inline-block;
    }
    .ntm-m-group.is-open .ntm-mchev { transform: rotate(225deg); }
    .ntm-m-sub { display: none; padding: 0 0 12px 12px; }
    .ntm-m-group.is-open .ntm-m-sub { display: block; }
    .ntm-m-sub a {
        display: block;
        font-size: 14.5px;
        color: var(--ntm-mast-gray);
        text-decoration: none;
        padding: 9px 0;
    }
    .ntm-m-sub a:hover { color: var(--ntm-mast-ink); }

    .ntm-m-cta {
        display: flex;
        gap: 14px;
        margin-top: 18px;
        align-items: center;
    }
    .ntm-m-cta .ntm-join-btn { flex: 1; text-align: center; }
}