/* ATOMIC BOMB APPROACH - KILL EVERYTHING, START FRESH */

/* KILL THE DISPLAY CONTENTS BUG FROM GLOBAL.CSS */
.hero-section .views-element-container .grid .grid,
.hero-section .views-element-container .grid,
.hero-section .view-content.grid {
  display: block !important;
}

/* STEP 1: Force grid on exact container with escaped class names */
section.hero-section > div.container > div[class*="grid"][class*="lg:grid-cols-3"] {
  display: grid !important;
  grid-template-columns: 66.666% 33.333% !important;
  grid-auto-rows: auto !important;
  gap: 2rem !important;
  align-items: start !important;
}

/* STEP 2: Kill all Drupal wrappers' interference */
.hero-section .views-element-container,
.hero-section .view,
.hero-section .view-content {
  width: 100% !important;
  display: block !important;
}

/* STEP 3: Ensure ONLY 2 direct children of grid */
.hero-section > .container > div[class*="grid"] > * {
  display: block !important;
}

/* STEP 4: Force first child (main hero) positioning */
.hero-section > .container > div[class*="grid"] > *:first-child {
  grid-column: 1 !important;
  width: 100% !important;
}

/* STEP 5: Force second child (sidebar) positioning and stacking */
.hero-section > .container > div[class*="grid"] > *:last-child {
  grid-column: 2 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

/* STEP 6: Force stacked cards container */
.hero-section .space-y-6 {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  width: 100% !important;
}

/* STEP 7: Force each stacked card to be full width block */
.hero-section .space-y-6 > *,
.hero-section .space-y-6 > .views-element-container,
.hero-section .space-y-6 > .views-element-container > *,
.hero-section .space-y-6 .views-row {
  display: block !important;
  width: 100% !important;
  margin: 0 0 1.5rem 0 !important;
}

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

/* STEP 8: Ensure stacked cards display as flex row (image + content) */
.hero-section .hero-stacked-card {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  gap: 1rem !important;
}

/* STEP 9: Mobile stacking */
@media (max-width: 767px) {
  section.hero-section > div.container > div[class*="grid"] {
    grid-template-columns: 1fr !important;
  }

  .hero-section > .container > div[class*="grid"] > *:first-child,
  .hero-section > .container > div[class*="grid"] > *:last-child {
    grid-column: 1 !important;
  }
}

/* STEP 10: Image sizing within cards */
.hero-stacked-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.hero-stacked-card .w-32 {
  width: 8rem !important;
  min-width: 8rem !important;
  max-width: 8rem !important;
}

.hero-stacked-card .h-32 {
  height: 8rem !important;
  min-height: 8rem !important;
  max-height: 8rem !important;
}