/* ============================================
 * mega-menu.css — Our Services dropdown panel
 *
 * Panel that drops below the navbar's Our Services
 * item. Services are split into two labelled groups:
 *   - Engagements   — tinted rail, 4 items
 *   - Capabilities  — 2-col grid, 9 items
 *
 * Hover/click to open. JS toggles `.is-open` and
 * `aria-expanded` / `aria-hidden`. Lives inside the
 * fixed navbar so it inherits sticky positioning.
 * ============================================ */

.tlm-mega-menu {
  position: absolute;
  /* Flush with bottom of navbar — no hover gap to cross. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;                            /* above the service-page sub-nav (z-index: 40) */
  /* Single zone — the groups block fills the panel. */
  display: block;
  /* Spans the navbar container width, capped to viewport on
     narrower screens. */
  width: min(var(--container-max), calc(100vw - var(--space-section) * 2));
  background-color: var(--color-white);
  /* Solid grey (not the navy-divider rgba) so the hairline reads the
     same colour against the white columns, the dark CTA, and the cream
     card. Translucent borders pick up the surface behind them. */
  border: 1px solid var(--color-navy-divider);
  border-radius: 12px;    /* deliberate panel radius; inner CTA corners are 11px (12 - 1px border) to nest cleanly — not a --radius token */
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Fade only — no translate. Switching between panels (About ↔ Services
     ↔ Resources) used to look like a vertical jump because each panel's
     translateY exit ran while the next panel's translateY entry started. */
  transition: opacity 200ms ease, visibility 200ms;
}

.tlm-mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ----- Groups zone — Engagements rail + Capabilities grid ----- */

.tlm-mega-menu__groups {
  display: grid;
  grid-template-columns: 1fr 2fr;         /* engagements rail 1/3 | capabilities grid 2/3 */
  min-width: 0;
  /* All three panels share the same height so switching between them
     doesn't cause a vertical jump. Services is the tallest; this floor
     locks About and Resources to the same outer dimension. */
  min-height: 480px;
}

/* The rail's resting border so it reads as a panel division even
   where the cream tint is subtle. */
.tlm-mega-menu__group--capabilities {
  border-left: 1px solid var(--color-navy-divider);
}

.tlm-mega-menu__group {
  min-width: 0;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Engagements rail — tinted surface so the two groups read as
   different kinds of offering, not just two lists. */
.tlm-mega-menu__group--engagements {
  background-color: var(--color-cream);
}

.tlm-mega-menu__group-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: var(--color-navy-subtle);
}

.tlm-mega-menu__list {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Capabilities list — 2-column grid, COLUMN-MAJOR flow: items fill
   top-to-bottom down column 1, then top-to-bottom down column 2.
   10 items over 5 explicit rows; grid-auto-flow: column fills the
   first column fully before starting the second. */
.tlm-mega-menu__list--grid {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: var(--space-2xs) var(--space-sm);
}

.tlm-mega-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--color-text-on-light);
  text-decoration: none;
  transition: background-color 150ms ease;
}

.tlm-mega-menu__item:hover,
.tlm-mega-menu__item:focus-visible {
  background-color: rgba(0, 0, 0, 0.04);
}

.tlm-mega-menu__item:focus-visible {
  outline: 2px solid var(--color-text-on-light);
  outline-offset: -2px;
}

.tlm-mega-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-xl);
  height: var(--space-xl);
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  color: var(--color-text-on-light);
}

/* Engagements rail sits on cream — navy chip with white icon
   for punchy contrast. */
.tlm-mega-menu__group--engagements .tlm-mega-menu__icon {
  background-color: var(--color-navy);
  color: var(--color-white);
}

/* Capabilities grid sits on white — chips get a soft tint so they
   still read as a surface. The About + Resources panels sit on white
   too, so their icons match this same tinted chip. */
.tlm-mega-menu__group--capabilities .tlm-mega-menu__icon,
.tlm-mega-menu--about .tlm-mega-menu__icon,
.tlm-mega-menu--resources .tlm-mega-menu__icon {
  background-color: var(--color-grey-100);
}

.tlm-mega-menu__label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-light);
}

.tlm-mega-menu__chevron {
  flex-shrink: 0;
  color: var(--color-text-on-light);
  transition: transform 150ms ease;
}

.tlm-mega-menu__item:hover .tlm-mega-menu__chevron {
  transform: translateX(4px);
}

/* Outline variant — navy border around the row + faint resting fill
   (matches the hover wash on the other items, so this CTA reads as
   the "already-highlighted" anchor at the bottom of the list). */
.tlm-mega-menu__item--inverse {
  border: 1px solid var(--color-navy-divider);
  background-color: rgba(0, 0, 0, 0.04);
}

.tlm-mega-menu__item--inverse:hover,
.tlm-mega-menu__item--inverse:focus-visible {
  background-color: rgba(0, 0, 0, 0.08);
}

/* ============================================
 * ABOUT VARIANT — intro col + links col + dark CTA card
 * 3 equal columns. Reuses __list / __item / __icon / __label /
 * __chevron from the Services variant; adds intro + CTA-card
 * sub-components. Image asset: mega-about-cta-glow.webp.
 * ============================================ */

.tlm-mega-menu--about .tlm-mega-menu__groups {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Hairline between intro and links columns — matches the Services
   menu's group divider so the panel composition reads consistently. */
.tlm-mega-menu--about .tlm-mega-menu__group--about-links {
  border-left: 1px solid var(--color-navy-divider);
}

.tlm-mega-menu__intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-lg);
  gap: var(--space-lg);
}

.tlm-mega-menu__intro-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-light);
}

.tlm-mega-menu__intro-lede {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-light);
}

/* CTA card — black surface with pink-glow raster anchored bottom-right.
   Copy top-left, pill button bottom-left. Right corners match the
   panel's radius so the dark card meets the rounded edge cleanly. */
.tlm-mega-menu__cta-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-lg);
  gap: var(--space-lg);
  border-top-right-radius: 11px;
  border-bottom-right-radius: 11px;
  /* The 3-col grid stops at the inner edge of the panel border; tile
     just past it so the dark surface meets the rounded corner with no
     pale gap. */
  margin-right: -1px;
  background-color: var(--color-bg-darker);
  background-image: url('../../images/mega-about-cta-glow.webp');
  background-repeat: no-repeat;
  background-position: bottom right;
  /* Scale so the glow concentrates in the bottom-right quadrant; the
     darker edge of the asset spills off the card top + left. */
  background-size: 130% auto;
  color: var(--color-text-on-dark);
  overflow: hidden;
}

.tlm-mega-menu__cta-card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-dark);
}

.tlm-mega-menu__cta-card-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark-muted);
}

.tlm-mega-menu__cta-card-button {
  align-self: flex-start;
}

/* ============================================
 * RESOURCES VARIANT — intro col + links col + book CTA
 * Same 3-col grid as About; reuses __intro + the divider.
 * Replaces the dark glow card with a cream book card
 * (eyebrow + title + photo + pill button).
 * ============================================ */

.tlm-mega-menu--resources .tlm-mega-menu__groups {
  grid-template-columns: 1fr 1fr 1fr;
}

.tlm-mega-menu--resources .tlm-mega-menu__group--about-links {
  border-left: 1px solid var(--color-navy-divider);
}

.tlm-mega-menu__cta-book {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  gap: var(--space-md);
  border-top-right-radius: 11px;
  border-bottom-right-radius: 11px;
  margin-right: -1px;
  background-color: var(--color-cream);
}

.tlm-mega-menu__cta-book-eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: var(--color-navy-subtle);
}

.tlm-mega-menu__cta-book-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-light);
}

.tlm-mega-menu__cta-book-image {
  display: block;
  width: 100%;
  /* Keep the artwork's natural aspect at the card width (no stretch, no
     letterbox crop). Was flex: 1 1 auto which let the taller new cover
     fill the card; a fixed height then squashed it. */
  flex: 0 0 auto;
  height: auto;
  aspect-ratio: 700 / 584;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.tlm-mega-menu__cta-book-button {
  align-self: flex-start;
}

/* ============================================
 * MOBILE — panel hidden under desktop breakpoint
 * (mobile menu is a separate slide-out drawer).
 * ============================================ */

@media (max-width: 1023px) {
  .tlm-mega-menu {
    display: none;
  }
}