/* ============================================================
   HERO DESKTOP FIX — paste at very bottom of style.css
   Fixes: content cut off, cards overflowing, padding too large
   ============================================================ */

/* ── Desktop: give hero enough room for all content ── */
@media (min-width: 821px) {

  .hero,
  .hero-carousel {
    min-height: 100vh !important;
    height: auto !important;
  }

  /* Inner grid: reduce padding so content fits */
  .hero-inner {
    min-height: 100vh !important;
    height: auto !important;
    padding: 40px 0 60px !important;
    grid-template-columns: 1.1fr .9fr !important;
    align-items: center !important;
    gap: 40px !important;
  }

  /* Reduce heading size slightly so it doesn't push content off */
  .hero-copy h1 {
    font-size: clamp(36px, 4.5vw, 64px) !important;
    line-height: 1.05 !important;
    margin: 12px 0 14px !important;
  }

  /* Paragraph */
  .hero-copy p {
    font-size: 16px !important;
    margin-bottom: 22px !important;
  }

  /* CTA row */
  .hero-cta-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .hero-cta-row .btn {
    width: auto !important;
    padding: 12px 24px !important;
  }

  /* Hero points */
  .hero-points {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    font-size: 13px !important;
  }

  /* Right panel cards: always visible, fit within height */
  .hero-card-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .hero-mini-card {
    padding: 16px !important;
    transform: none !important;
  }

  .hero-mini-card h3 {
    font-size: 15px !important;
    margin: 10px 0 6px !important;
  }

  .hero-mini-card p {
    font-size: 12px !important;
  }

  .hero-side-card {
    display: block !important;
    padding: 24px !important;
  }

  .hero-side-card h3 {
    font-size: 22px !important;
    margin: 12px 0 10px !important;
  }

  .hero-stat-stack {
    display: grid !important;
    padding: 24px !important;
    gap: 14px !important;
  }

  .hero-stat-stack strong {
    font-size: 34px !important;
  }

  .hero-stat-up {
    display: grid !important;
    transform: none !important;
  }

  .hero-badge-panel {
    display: block !important;
    padding: 24px !important;
  }

  /* Slides: always absolute, active sets height via hero-inner */
  .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .hero-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
  }
}