/* ULTIMATE HERO GRID FIX - MOST SPECIFIC SELECTORS POSSIBLE */

/* ===========================================
   DESKTOP: Side-by-side layout (2fr + 1fr)
   =========================================== */
@media (min-width: 1024px) {
  /* Target grid element in hero section */
  section.hero-section > div.container > div.grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: start !important;
  }

  /* Main hero column */
  section.hero-section > div.container > div.grid > div.lg\:col-span-2 {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 450px !important;
  }

  /* Stacked cards column */
  section.hero-section > div.container > div.grid > div.space-y-6 {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  /* Hero card height */
  section.hero-section article.hero-card {
    height: 450px !important;
  }

  /* Stacked cards */
  section.hero-section div.space-y-6 .views-row {
    display: block !important;
    width: 100% !important;
  }

  /* Hero card text styling - desktop */
  section.hero-section .hero-card-content {
    padding: 1.5rem !important;
  }

  section.hero-section .hero-card-title {
    font-size: 1.875rem !important; /* 30px */
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
  }
}

/* ===========================================
   MOBILE: Stacked layout (hero on top, cards below)
   =========================================== */
@media (max-width: 1023px) {
  /* Stack everything vertically */
  section.hero-section > div.container > div.grid {
    display: block !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
  }

  /* Main hero - full width */
  section.hero-section > div.container > div.grid > div.lg\:col-span-2 {
    display: block !important;
    width: 100% !important;
    grid-column: unset !important;
    margin-bottom: 1rem !important;
  }

  /* Stacked cards container - below hero */
  section.hero-section > div.container > div.grid > div.space-y-6 {
    display: block !important;
    width: 100% !important;
    grid-column: unset !important;
    padding: 0 1rem !important;
  }

  /* Each stacked card */
  section.hero-section div.space-y-6 .views-row {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
  }

  section.hero-section div.space-y-6 .views-row:last-child {
    margin-bottom: 0 !important;
  }
}

/* Mobile specific (smaller screens) */
@media (max-width: 767px) {
  section.hero-section article.hero-card {
    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;
    border-radius: 0 !important;
  }

  section.hero-section > div.container > div.grid > div.lg\:col-span-2 {
    height: 350px !important;
    max-height: 350px !important;
    overflow: hidden !important;
  }

  /* Hero card text styling - mobile */
  section.hero-section .hero-card-content {
    padding: 1rem !important;
  }

  section.hero-section .hero-card-title {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }

  section.hero-section .hero-card .text-xs {
    font-size: 0.7rem !important;
  }
}