/* Commander profile desktop layout cleanup — 2026-08-31
   Scoped to the cinematic Commander HUD so no other page layout is changed. */

/* Remove the legacy Level / Rank pills beneath the dossier identity.
   Commander Progression is now the authoritative level/rank display. */
section.relative.overflow-hidden.border-b.border-white\/5
  > .container.relative.py-6.md\:py-14
  > .mt-0.grid
  > .min-w-0
  > .mt-3.flex.flex-wrap.items-center.gap-2
  > span:nth-child(1),
section.relative.overflow-hidden.border-b.border-white\/5
  > .container.relative.py-6.md\:py-14
  > .mt-0.grid
  > .min-w-0
  > .mt-3.flex.flex-wrap.items-center.gap-2
  > span:nth-child(2) {
  display: none !important;
}

/* Keep long commander names inside their allotted column instead of
   colliding with progression/currency cards. */
section.relative.overflow-hidden.border-b.border-white\/5
  > .container.relative.py-6.md\:py-14
  > .mt-0.grid
  > .min-w-0 {
  min-width: 0 !important;
  overflow: hidden;
}

section.relative.overflow-hidden.border-b.border-white\/5
  > .container.relative.py-6.md\:py-14
  > .mt-0.grid
  > .min-w-0
  > h1 {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) and (max-width: 1279px) {
  /* Laptop / narrow desktop: do not force every HUD module into one row. */
  section.relative.overflow-hidden.border-b.border-white\/5
    > .container.relative.py-6.md\:py-14
    > .mt-0.grid {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 1.25rem !important;
    row-gap: 1.25rem !important;
  }

  section.relative.overflow-hidden.border-b.border-white\/5
    > .container.relative.py-6.md\:py-14
    > .mt-0.grid
    > :nth-child(n + 3) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  section.relative.overflow-hidden.border-b.border-white\/5
    > .container.relative.py-6.md\:py-14
    > .mt-0.grid
    > .min-w-0
    > h1 {
    font-size: clamp(2.5rem, 5.4vw, 3.75rem) !important;
    line-height: 0.98 !important;
  }
}

@media (min-width: 1280px) {
  /* Standard 3-panel Commander hero. */
  section.relative.overflow-hidden.border-b.border-white\/5
    > .container.relative.py-6.md\:py-14
    > .mt-0.grid {
    grid-template-columns: auto minmax(0, 1fr) minmax(17rem, 20rem) !important;
    align-items: end !important;
    gap: clamp(1rem, 1.4vw, 1.75rem) !important;
  }

  /* Final spacing: retain the tighter model-to-identity relationship while
     restoring a little breathing room from the animation/loadout panel. */
  section.relative.overflow-hidden.border-b.border-white\/5
    > .container.relative.py-6.md\:py-14
    > .mt-0.grid
    > .min-w-0 {
    transform: translateX(-1rem);
  }

  section.relative.overflow-hidden.border-b.border-white\/5
    > .container.relative.py-6.md\:py-14
    > .mt-0.grid
    > .min-w-0
    > h1 {
    font-size: clamp(3rem, 3.45vw, 4.25rem) !important;
    line-height: 0.94 !important;
  }

  section.relative.overflow-hidden.border-b.border-white\/5
    > .container.relative.py-6.md\:py-14
    > .mt-0.grid
    > .min-w-0
    > p {
    max-width: 100%;
  }

  /* Commander Progression is rendered through the enhancement portal and is
     absolutely positioned against the page, not inside the Commander grid.
     Set it slightly lower and left so it visually bridges identity and stats
     without floating too high or crowding either block. */
  #cofp-commander-profile-enhancements-root
    > section.pointer-events-none.absolute {
    top: calc(clamp(11rem, 21vh, 15rem) + 2.25rem) !important;
    margin-left: -2rem !important;
    max-width: min(26rem, calc(100vw - 2rem)) !important;
  }
}

@media (min-width: 1536px) {
  section.relative.overflow-hidden.border-b.border-white\/5
    > .container.relative.py-6.md\:py-14
    > .mt-0.grid
    > .min-w-0
    > h1 {
    font-size: clamp(3.25rem, 3.2vw, 4.75rem) !important;
  }
}