/* Trinity V32 hero CTA polish
   Goal: keep the yellow Browse Catalog button proportional and out of the knight's face
   while preserving the cinematic hero style on mobile and desktop. */

.tri-hero-primary{
  display:inline-flex !important;
  align-items:center;
  justify-content:space-between;
  width:auto !important;
  min-width:0 !important;
  max-width:max-content;
  gap:16px;
}
.tri-hero-primary-label{
  display:block;
}
.tri-hero-primary-arrow{
  flex:0 0 auto;
  font-size:1.2em;
  line-height:1;
}

@media (max-width: 900px){
  .brand-hero-heading{
    max-width:min(52vw, 340px);
    position:relative;
    z-index:3;
  }
  .trinity-cinematic-lede{
    max-width:18ch;
  }
  .tri-hero-actions{
    position:relative;
    z-index:4;
    width:auto !important;
    margin-top:18px;
  }
  .tri-hero-primary{
    padding:16px 22px !important;
    min-height:58px;
    max-width:252px;
    font-size:0.98rem !important;
    letter-spacing:0.08em;
    line-height:1.05;
    white-space:nowrap;
  }
}

@media (max-width: 767px){
  .brand-hero.trinity-cinematic-hero,
  .trinity-cinematic-hero.brand-hero,
  #trinityCinematicHero{
    align-items:start;
    justify-items:start;
    padding-bottom:44px !important;
  }

  .brand-hero-heading{
    max-width:250px !important;
  }

  .trinity-cinematic-lede{
    max-width:15ch;
  }

  .tri-hero-actions{
    margin-top:16px !important;
  }

  .tri-hero-primary{
    max-width:244px !important;
    padding:15px 20px !important;
    font-size:0.94rem !important;
    letter-spacing:0.075em !important;
    border-radius:2px;
  }

  /* Nudge the knight slightly right so the CTA sits in cleaner negative space. */
  .brand-hero-standalone-knight,
  #brandHeroStage{
    transform:translateX(4%) !important;
  }
}

@media (max-width: 430px){
  .brand-hero-heading{
    max-width:236px !important;
  }
  .tri-hero-primary{
    max-width:236px !important;
    padding:14px 18px !important;
    font-size:0.91rem !important;
    gap:14px;
  }
}

@media (min-width: 901px){
  /* Keep desktop proportional too, without turning the CTA into a long bar. */
  .tri-hero-primary{
    padding:18px 26px !important;
    max-width:278px;
  }
}