/* OVERRIDE DRUPAL'S NATIVE VIEWS GRID SYSTEM */

/* Drupal uses flexbox with CSS custom properties for views-view-grid
   We need to override the flexbox layout, not try to use CSS Grid */

/* OVERRIDE cruise-type-production.css - Use CSS GRID properly for cruise type pages */

/* Kill any nested grid issues - VERY SPECIFIC */
.cruise-type-section .view-content,
.cruise-type-section.cruise-lines-section .view-content,
.cruise-type-section.cruise-ships-section .view-content,
.cruise-ships-section .cruise-ship-container .view-content,
.cruise-lines-section .cruise-line-container .view-content {
  display: block !important;
  grid-template-columns: none !important;
  grid: none !important;
  width: 100% !important;
}

/* CRUISE LINES: 4 columns using CSS GRID (not flexbox) */
.cruise-type-section.cruise-lines-section .views-view-grid,
.cruise-type-section.cruise-lines-section .views-view-grid--horizontal {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cruise-type-section.cruise-lines-section .views-view-grid__item {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* CRUISE SHIPS: 3 columns using CSS GRID (not flexbox) */
.cruise-type-section.cruise-ships-section .views-view-grid,
.cruise-type-section.cruise-ships-section .views-view-grid--horizontal {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cruise-type-section.cruise-ships-section .views-view-grid__item {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Tablet: Both 2 columns */
@media (min-width: 768px) and (max-width: 991px) {
  .cruise-lines-section .views-view-grid__item,
  .cruise-ships-section .views-view-grid__item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Mobile: Both 1 column */
@media (max-width: 767px) {
  .cruise-lines-section .views-view-grid--horizontal,
  .cruise-ships-section .views-view-grid--horizontal {
    margin: 0 !important;
  }

  .cruise-lines-section .views-view-grid__item,
  .cruise-ships-section .views-view-grid__item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
}

/* Ensure inner content doesn't overflow */
.cruise-lines-section .views-view-grid__item-inner,
.cruise-ships-section .views-view-grid__item-inner {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.cruise-lines-section .cruise-line-card,
.cruise-ships-section .cruise-ship-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure images don't cause overflow */
.cruise-lines-section .cruise-line-card img,
.cruise-ships-section .cruise-ship-card img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Entertainment and Dining sections removed - will rebuild separately */