/* Compact in-page navigation shared by all talent profiles.
   The trigger sits directly beneath the primary mobile-menu button so the
   site navigation and the profile navigation remain distinct and predictable. */

.talent-section-nav {
  display: none;
}

@media (max-width: 960px) {
  .talent-section-nav {
    position: fixed;
    z-index: 27;
    top: 82px;
    right: max(var(--pad, 20px), env(safe-area-inset-right));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
  }

  .talent-section-trigger {
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(9, 9, 9, 0.44);
    color: rgba(242, 240, 233, 0.64);
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0.72;
    pointer-events: auto;
    transition: opacity 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
  }

  .talent-section-trigger:hover,
  .talent-section-trigger:focus-visible,
  .talent-section-trigger[aria-expanded="true"] {
    opacity: 1;
    color: var(--bone, #f2f0e9);
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(12, 12, 12, 0.82);
  }

  /* A tiny list icon makes this distinct from the primary hamburger menu. */
  .talent-section-icon {
    display: grid;
    gap: 3px;
    width: 14px;
  }

  .talent-section-icon i {
    position: relative;
    display: block;
    width: 10px;
    height: 1px;
    margin-left: 4px;
    background: currentColor;
    border-radius: 999px;
  }

  .talent-section-icon i::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -4px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-50%);
  }

  .talent-section-trigger[aria-expanded="true"] .talent-section-icon i:first-child::before {
    background: var(--blue, #315cff);
  }

  .talent-section-menu {
    width: min(72vw, 258px);
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(10, 10, 10, 0.94);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(-5px) scale(0.99);
    transform-origin: top right;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  }

  .talent-section-nav.open .talent-section-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
  }

  .talent-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .talent-section-head span {
    color: var(--bone, #f2f0e9);
    font-size: 12px;
    font-weight: 700;
  }

  .talent-section-head small {
    color: var(--muted, #999a96);
    font-size: 7px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .talent-section-menu > a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    min-height: 42px;
    padding: 0 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
    color: rgba(242, 240, 233, 0.68);
    text-decoration: none;
    transition: color 150ms ease, background 150ms ease;
  }

  .talent-section-menu > a:last-child {
    border-bottom: 0;
  }

  .talent-section-menu > a > span {
    color: rgba(242, 240, 233, 0.28);
    font-size: 7px;
    letter-spacing: 0.1em;
  }

  .talent-section-menu > a > strong {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  .talent-section-menu > a:hover,
  .talent-section-menu > a:focus-visible,
  .talent-section-menu > a[aria-current="true"] {
    color: var(--bone, #f2f0e9);
    background: rgba(255, 255, 255, 0.03);
  }

  .talent-section-menu > a[aria-current="true"] > span {
    color: var(--blue, #315cff);
  }

  body.menu-open .talent-section-nav {
    opacity: 0;
    pointer-events: none;
  }

  .talent-section-anchor {
    scroll-margin-top: 78px;
  }
}

@media (max-width: 650px) {
  .talent-section-nav {
    top: 78px;
    right: max(var(--pad, 20px), env(safe-area-inset-right));
  }

  .talent-section-trigger {
    width: 30px;
    height: 30px;
    opacity: 0.68;
  }

  .talent-section-menu {
    width: min(78vw, 248px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .talent-section-trigger,
  .talent-section-menu,
  .talent-section-menu > a {
    transition: none;
  }
}

/* Player-profile mobile header ------------------------------------------------
   On compact screens, profile pages keep only the identity, language selector
   and contact action in the primary header. The separate section-navigation
   trigger below the header handles Career / Performances / Story navigation,
   avoiding two competing mobile drawers. */
@media (max-width: 960px) {
  .nav > .menu-toggle {
    display: none !important;
  }

  body > .mobile-menu {
    display: none !important;
  }

  .nav .navlinks {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
  }

  .nav .navlinks > a:not(.nav-cta) {
    display: none !important;
  }

  .nav .navlinks > .language-switcher,
  .nav .navlinks > .nav-cta {
    display: inline-flex !important;
  }

  .nav .nav-cta {
    min-height: 32px !important;
    padding: 0 12px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
}

@media (max-width: 430px) {
  .nav .navlinks {
    gap: 6px !important;
  }

  .nav .nav-cta {
    min-height: 30px !important;
    padding-inline: 10px !important;
    font-size: 9px !important;
  }

  .nav .language-switcher-trigger {
    min-width: 46px;
    height: 30px;
    padding-inline: 8px;
  }
}
/* Compact-phone overflow hardening: iPhone 13 / SE class widths. */
@media (max-width: 430px) {
  html, body { max-width: 100%; overflow-x: clip; }

  .career-grid,
  .section-grid,
  .story-grid,
  .story-wrap,
  .rich-copy,
  .career-grid > *,
  .section-grid > *,
  .story-grid > *,
  .story-wrap > *,
  .rich-copy > *,
  .career-heading,
  .career-copy,
  .story-copy,
  .story-photo {
    min-width: 0 !important;
  }

  .section-title {
    max-width: 100%;
    font-size: clamp(40px, 12vw, 56px) !important;
  }

  .story-title,
  .story-copy h2 {
    max-width: 100%;
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  .business-email {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hero-content { min-width: 0; }
  .hero h1 { max-width: 100%; }

  body[data-i18n-page="jswag"] .section-title {
    font-size: clamp(38px, 11.8vw, 52px) !important;
  }

  body[data-i18n-page="nico"] .story-title,
  body[data-i18n-page="nico"] .story-copy h2 {
    font-size: clamp(29px, 8.8vw, 40px) !important;
  }

  body[data-i18n-page="kaadxzu"] .hero h1 {
    font-size: 20vw !important;
  }

  body[data-i18n-page="tempoh"] .hero h1 {
    font-size: 21.5vw !important;
  }
}

@media (max-width: 360px) {
  :root { --pad: 16px; }

  .nav {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  .nav .navlinks { gap: 5px !important; }
  .nav .nav-cta {
    padding-inline: 8px !important;
    font-size: 8.5px !important;
  }
  .nav .language-switcher-trigger {
    min-width: 42px !important;
    padding-inline: 7px !important;
  }
  .talent-section-nav {
    right: max(16px, env(safe-area-inset-right)) !important;
  }
  .story-copy {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}