/*
 * Radar das Odds v202
 * Correção do card institucional para desktop/notebook convencional.
 *
 * A composição executiva da v163 foi desenhada para áreas realmente largas.
 * Em monitores convencionais, menu lateral + resumo de banca reduzem a largura
 * útil do hero e faziam o título Montserrat quebrar palavra por palavra.
 */

.app-shell:not(.management-page-shell):not(.system-page-shell):not(.insight-page-shell):not(.dashboard-shell)
  .radar-hero-card {
  container-type: inline-size;
  container-name: radar-hero-v202;
  min-width: 0 !important;
}

/*
 * Desktop e notebook convencionais: mantém texto + radar lado a lado, mas
 * devolve uma coluna inteira ao texto. A composição interna em três colunas
 * continua reservada a telas ultrawide.
 */
@media (min-width: 1181px) and (max-width: 2199px) {
  .app-shell:not(.management-page-shell):not(.system-page-shell):not(.insight-page-shell):not(.dashboard-shell)
    .radar-dashboard-top {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 430px) !important;
    gap: 10px !important;
  }

  .app-shell:not(.management-page-shell):not(.system-page-shell):not(.insight-page-shell):not(.dashboard-shell)
    .radar-hero-card {
    grid-template-columns: minmax(0, 1.3fr) minmax(190px, 0.7fr) !important;
    min-height: 250px !important;
    height: 250px !important;
    gap: clamp(12px, 1.2vw, 20px) !important;
    padding: 18px clamp(18px, 1.6vw, 26px) !important;
  }

  .app-shell:not(.management-page-shell):not(.system-page-shell):not(.insight-page-shell):not(.dashboard-shell)
    .radar-hero-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 0 !important;
  }

  .app-shell:not(.management-page-shell):not(.system-page-shell):not(.insight-page-shell):not(.dashboard-shell)
    .radar-hero-copy h1 {
    max-width: 650px !important;
    margin: 0 0 10px !important;
    font-size: clamp(28px, 1.85vw, 36px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: balance;
  }

  .app-shell:not(.management-page-shell):not(.system-page-shell):not(.insight-page-shell):not(.dashboard-shell)
    .radar-hero-copy > p {
    max-width: 560px !important;
    margin: 0 0 11px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  .app-shell:not(.management-page-shell):not(.system-page-shell):not(.insight-page-shell):not(.dashboard-shell)
    :is(.hero-status-line, .hero-update-line, .hero-next-event) {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 25px !important;
    margin: 0 0 5px !important;
    padding: 3px 8px !important;
    overflow: hidden !important;
    font-size: 9px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .app-shell:not(.management-page-shell):not(.system-page-shell):not(.insight-page-shell):not(.dashboard-shell)
    .radar-hero-copy::after {
    display: none !important;
  }

  .app-shell:not(.management-page-shell):not(.system-page-shell):not(.insight-page-shell):not(.dashboard-shell)
    .radar-hero-card
    .radar-visual,
  .app-shell:not(.management-page-shell):not(.system-page-shell):not(.insight-page-shell):not(.dashboard-shell)
    .radar-hero-card
    .radar-visual.radar-v126-ready {
    --scene-size: clamp(185px, 14vw, 230px) !important;
    width: min(100%, 240px) !important;
    min-height: 190px !important;
    height: 220px !important;
    justify-self: end !important;
  }
}

/*
 * Proteção pela largura real do card. Cobre resoluções intermediárias,
 * zoom do navegador e janelas reduzidas mesmo quando o viewport ainda é largo.
 */
@container radar-hero-v202 (max-width: 780px) {
  .radar-hero-copy {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-right: clamp(100px, 22cqi, 170px) !important;
  }

  .radar-hero-copy h1 {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 0 9px !important;
    font-size: clamp(26px, 5.2cqi, 33px) !important;
    line-height: 1.08 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: balance;
  }

  .radar-hero-copy > p {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 0 10px !important;
  }

  .radar-hero-copy::after,
  .hero-update-line {
    display: none !important;
  }

  .radar-visual,
  .radar-visual.radar-v126-ready {
    --scene-size: clamp(145px, 26cqi, 195px) !important;
    position: absolute !important;
    right: -20px !important;
    bottom: -28px !important;
    width: 210px !important;
    height: 210px !important;
    min-height: 0 !important;
    opacity: 0.46 !important;
    pointer-events: none !important;
  }
}

/*
 * Fallback para navegadores sem container queries: no intervalo crítico,
 * mantém a cópia em uma única coluna e reduz a cena.
 */
@supports not (container-type: inline-size) {
  @media (min-width: 1181px) and (max-width: 1500px) {
    .app-shell:not(.management-page-shell):not(.system-page-shell):not(.insight-page-shell):not(.dashboard-shell)
      .radar-hero-card {
      grid-template-columns: minmax(0, 1fr) 175px !important;
    }
  }
}