/* NPD Truck hero tuning layer for PR #3 visual review.
 * Applied after site.css so desktop composition and mobile facts can be
 * adjusted independently while the structural grid version is validated.
 */

@media (min-width: 901px) {
  .hero-inner {
    width: min(calc(100% - 56px), 1320px);
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    gap: 28px;
  }

  .hero-visual {
    max-width: 520px;
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
  }

  .hero-facts li,
  .hero-facts li + li,
  .hero-facts li:nth-child(3) {
    grid-column: auto;
    min-width: 0;
    padding: 10px 8px;
    border-top: 0;
  }

  .hero-facts li:first-child {
    padding-left: 0;
  }

  .hero-facts li + li,
  .hero-facts li:nth-child(3) {
    border-left: 1px solid var(--line);
  }

  .hero-facts strong {
    font-size: .72rem;
    line-height: 1.15;
  }

  .hero-facts span {
    margin-top: 3px;
    font-size: .62rem;
    line-height: 1.35;
  }
}