/* Homepage Hero Section Protection - Override cruise page CSS */

/* Protect homepage hero section from cruise CSS overrides */
.hero-section {
  display: block !important;
}

.hero-section .container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* FORCE GRID LAYOUT - VERY AGGRESSIVE */
.hero-section .grid,
.hero-section div[class*="grid"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
  width: 100% !important;
}

/* FORCE 2-COLUMN GRID ON DESKTOP */
@media (min-width: 768px) {
  .hero-section .grid,
  .hero-section div[class*="grid"] {
    grid-template-columns: 2fr 1fr !important;
    gap: 2rem !important;
  }
}

/* FORCE MAIN HERO TO FIRST COLUMN */
.hero-section .grid > div:first-child,
.hero-section .grid > .lg\:col-span-2 {
  grid-column: 1 / 2 !important;
  width: 100% !important;
}

/* FORCE SIDEBAR TO SECOND COLUMN */
.hero-section .grid > div:last-child,
.hero-section .grid > .space-y-6 {
  grid-column: 2 / 3 !important;
  width: 100% !important;
}

/* MOBILE: STACK VERTICALLY */
@media (max-width: 767px) {
  .hero-section .grid,
  .hero-section div[class*="grid"] {
    grid-template-columns: 1fr !important;
  }

  .hero-section .grid > div:first-child,
  .hero-section .grid > div:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* Protect hero views from cruise CSS */
.view-homepage-hero .views-row {
  display: block !important;
}

.view-homepage-hero.view-display-id-block_1 .views-row {
  display: block !important;
}

/* Ensure main hero card displays correctly */
.hero-card {
  display: block !important;
  position: relative !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  /* height controlled by template class h-[380px] */
}

.hero-card .absolute {
  position: absolute !important;
}

.hero-card .inset-0 {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

.hero-card .relative {
  position: relative !important;
}

.hero-card .h-full {
  height: 100% !important;
}

.hero-card .flex {
  display: flex !important;
}

.hero-card .flex-col {
  flex-direction: column !important;
}

.hero-card .justify-end {
  justify-content: flex-end !important;
}

/* Ensure stacked cards display correctly */
.hero-section .space-y-6 > * + * {
  margin-top: 1.5rem !important;
}

.hero-stacked-card {
  display: flex !important;
  gap: 1rem !important;
  background-color: #ffffff !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
  transition-property: box-shadow !important;
  transition-duration: 300ms !important;
}

.hero-stacked-card:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}

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

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

.hero-stacked-card .flex-shrink-0 {
  flex-shrink: 0 !important;
}

.hero-stacked-card .flex-1 {
  flex: 1 1 0% !important;
}

/* Protect other homepage sections */
.destinations-section,
.flights-section,
.gear-section,
.trending-section {
  display: block !important;
}

.destinations-section .grid,
.flights-section .grid,
.gear-section .grid {
  display: grid !important;
}

/* Ensure proper spacing */
.hero-section .py-12,
.destinations-section .py-12,
.flights-section .py-12,
.gear-section .py-12 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.hero-section .px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.hero-section .mb-8 {
  margin-bottom: 2rem !important;
}

/* Responsive container */
@media (min-width: 640px) {
  .hero-section .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (min-width: 768px) {
  .hero-section .container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}