/* FIX GRID LAYOUTS ON CRUISE TYPE AND CRUISE LINE PAGES */

/* Kill display: contents bug for cruise views */
.cruise-type-section .views-element-container .grid .grid,
.cruise-type-section .views-element-container .grid,
.cruise-lines-section .views-element-container .grid .grid,
.cruise-lines-section .views-element-container .grid,
.cruise-ships-section .views-element-container .grid .grid,
.cruise-ships-section .views-element-container .grid {
  display: block !important;
}

/* Fix cruise_lines view (on cruise type pages) - 4 COLUMNS */
/* Exclude cruise-lines-custom-grid which has its own layout */
.view-cruise-lines .view-content > div[class*="grid"]:not(.cruise-lines-custom-grid),
.cruise-lines-section .view-content > div[class*="grid"]:not(.cruise-lines-custom-grid),
.cruise-lines-section .views-view-grid {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 1.5rem !important;
}

@media (min-width: 768px) {
  .view-cruise-lines .view-content > div[class*="grid"]:not(.cruise-lines-custom-grid),
  .cruise-lines-section .view-content > div[class*="grid"]:not(.cruise-lines-custom-grid),
  .cruise-lines-section .views-view-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 992px) {
  .view-cruise-lines .view-content > div[class*="grid"]:not(.cruise-lines-custom-grid),
  .cruise-lines-section .view-content > div[class*="grid"]:not(.cruise-lines-custom-grid),
  .cruise-lines-section .views-view-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Kill Drupal's native views grid layout */
.cruise-lines-section .views-view-grid {
  --views-grid--column-count: 4 !important;
}

.cruise-lines-section .views-view-grid__item {
  width: 100% !important;
  flex: none !important;
}

/* Fix cruise_ships view (on cruise type pages) - 3 COLUMNS */
.view-cruise-ships .view-content > div[class*="grid"],
.cruise-ships-section .view-content > div[class*="grid"],
.cruise-ships-section .views-view-grid {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 1.5rem !important;
}

@media (min-width: 768px) {
  .view-cruise-ships .view-content > div[class*="grid"],
  .cruise-ships-section .view-content > div[class*="grid"],
  .cruise-ships-section .views-view-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 992px) {
  .view-cruise-ships .view-content > div[class*="grid"],
  .cruise-ships-section .view-content > div[class*="grid"],
  .cruise-ships-section .views-view-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Kill Drupal's native views grid layout for ships */
.cruise-ships-section .views-view-grid {
  --views-grid--column-count: 3 !important;
}

.cruise-ships-section .views-view-grid__item {
  width: 100% !important;
  flex: none !important;
}

/* Fix mt_cruises fleet view (on cruise line pages) - 3 COLUMNS */
.view-mt-cruises .view-content,
.list-of-ships-slideshow .view-content,
.cruise-line-ships .view-content {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0 -12px !important;
}

/* Force 3 columns for fleet ships using Bootstrap column classes */
.view-mt-cruises .view-content > .views-row,
.view-mt-cruises .view-content > div[class*="col-"],
.cruise-line-ships .view-content > .views-row,
.cruise-line-ships .view-content > div[class*="col-"] {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
  padding: 0 12px !important;
  margin-bottom: 24px !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Override Bootstrap col-lg-4 (4 columns) to force 3 columns */
.view-mt-cruises .col-lg-4,
.cruise-line-ships .col-lg-4 {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
  width: 33.333333% !important;
}

/* If using cruise-type-cards class */
.view-mt-cruises .cruise-type-cards,
.view-mt-cruises ul.cruise-type-cards,
.list-of-ships-slideshow .cruise-type-cards {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -12px !important;
  width: calc(100% + 24px) !important;
}

.view-mt-cruises .cruise-type-cards > li,
.view-mt-cruises .cruise-type-cards > .views-row {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
  padding: 0 12px !important;
  margin-bottom: 24px !important;
  display: block !important;
}

@media (max-width: 991px) {
  .view-mt-cruises .cruise-type-cards > li,
  .view-mt-cruises .cruise-type-cards > .views-row {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 640px) {
  .view-mt-cruises .cruise-type-cards > li,
  .view-mt-cruises .cruise-type-cards > .views-row {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Ensure views wrappers don't interfere */
.cruise-type-section .views-element-container,
.cruise-lines-section .views-element-container,
.cruise-ships-section .views-element-container,
.view-cruise-lines,
.view-cruise-ships,
.view-mt-cruises {
  width: 100% !important;
  display: block !important;
}

/* Ensure cruise cards display properly */
.cruise-line-card,
.cruise-ship-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* CRUISE SHIPS SEARCH PAGE - Fix card layout */
.view-cruise-ships-search .cruise-ship-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 380px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
}

.view-cruise-ships-search .cruise-ship-card__link {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

.view-cruise-ships-search .cruise-ship-card__content {
  padding: 16px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.view-cruise-ships-search .cruise-ship-card__image-wrapper {
  position: relative !important;
  height: 200px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}