/*
Theme Name:    GoWilds Child
Theme URI:     https://nextgensafaris.com
Description:   Child theme for GoWilds - Fixed Booking & Location Archive Grid
Author:        NextGen Safaris
Author URI:    https://nextgensafaris.com
Template:      gowilds
Version:       1.0.1
Text Domain:   gowilds-child
*/

/* ==========================================================================
   1. CONTAINER & WRAPPER RESETS
   ========================================================================== */

/* Force all elementor widgets and archive wrappers to full container width */
.booking-archive-layout-default,
.booking-content,
.elementor-widget-gva_ba_archive,
.elementor-widget-gva_ba_booking,
.gva-element-gva_ba_archive,
.booking-grid,
.ba-booking-archive,
.gva-content-items,
.taxonomy-ba_location .main-page-content {
  width: 100% !important;
  max-width: 100% !important;
  position: static !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure Elementor inner widget containers fill available space */
.elementor-widget-gva_ba_archive > .elementor-widget-container,
.elementor-widget-gva_ba_booking > .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   2. CSS GRID LAYOUT (LOCATION & BOOKING ARCHIVES)
   ========================================================================== */

/* Kill parent theme clearfix pseudo-elements (Fixes empty 1st grid item slot) */
.lg-block-grid-3::before,
.lg-block-grid-3::after,
.booking-archive-layout-default .lg-block-grid-3::before,
.booking-archive-layout-default .lg-block-grid-3::after,
.gva-content-items .lg-block-grid-3::before,
.gva-content-items .lg-block-grid-3::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Universal 3-column grid rule */
.lg-block-grid-3,
.booking-archive-layout-default .lg-block-grid-3,
.booking-content .lg-block-grid-3,
.gva-content-items .lg-block-grid-3,
.ba-booking-archive .lg-block-grid-3,
.taxonomy-ba_location .lg-block-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Force items to align sequentially in natural grid sequence */
.lg-block-grid-3 > .item-columns,
.lg-block-grid-3 > .item-column,
.lg-block-grid-3 > [class*="col-"] {
  grid-column: auto !important;
  grid-row: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  float: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   3. CUSTOM BOOKING CARD
   ========================================================================== */

.custom-booking-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 460px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #111111 !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease !important;
  will-change: transform, box-shadow;
}

.custom-booking-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.22) !important;
}

/* Card Media Link & Image */
.custom-booking-card .card-media-link {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.custom-booking-card .card-media-link img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
  transition: transform 0.5s ease !important;
  will-change: transform;
}

.custom-booking-card:hover .card-media-link img {
  transform: scale(1.04) !important;
}

/* Gradient Overlay */
.custom-booking-card .card-gradient-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.10) 35%,
    rgba(0, 0, 0, 0.35) 60%,
    rgba(0, 0, 0, 0.94) 100%
  ) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   4. CARD INNER CONTENT & PILL BADGES
   ========================================================================== */

.custom-booking-card .card-top-pills {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  right: 16px !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.custom-booking-card .pill-badge {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 6px 12px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.custom-booking-card .card-bottom-content {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  padding: 24px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 5 !important;
}

.custom-booking-card .card-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

.custom-booking-card .card-title a {
  display: -webkit-box !important;
  width: 100% !important;
  color: #ffffff !important;
  text-decoration: none !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.45) !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.custom-booking-card .card-title a:hover {
  color: #ffffff !important;
}

.custom-booking-card::before,
.custom-booking-card::after {
  display: none !important;
}

/* ==========================================================================
   5. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1024px) {
  .lg-block-grid-3,
  .booking-archive-layout-default .lg-block-grid-3,
  .gva-content-items .lg-block-grid-3,
  .ba-booking-archive .lg-block-grid-3,
  .taxonomy-ba_location .lg-block-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .custom-booking-card {
    height: 440px !important;
  }
}

@media (max-width: 640px) {
  .lg-block-grid-3,
  .booking-archive-layout-default .lg-block-grid-3,
  .gva-content-items .lg-block-grid-3,
  .ba-booking-archive .lg-block-grid-3,
  .taxonomy-ba_location .lg-block-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .custom-booking-card {
    height: 420px !important;
  }

  .custom-booking-card .card-bottom-content {
    padding: 18px !important;
  }
}

/* ==========================================================================
   6. GRID BOTTOM SPACING & INDIVIDUAL BLACK PAGINATION PILLS
   ========================================================================== */

.booking-archive-layout-default .lg-block-grid-3,
.taxonomy-ba_location .lg-block-grid-3,
.ba-booking-archive .lg-block-grid-3,
.gva_ba_archive .lg-block-grid-3,
.gva-content-items .lg-block-grid-3 {
  margin-bottom: 60px !important;
}

/* Strip parent container background box entirely */
.pagination-wrapper,
.taxonomy-ba_location .pagination,
.ba-booking-archive .pagination,
.gowilds-pagination,
.pagination-wrapper ul.page-numbers,
.pagination ul.page-numbers,
.gowilds-pagination ul.page-numbers {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.pagination-wrapper,
.gowilds-pagination {
  margin-top: 20px !important;
  margin-bottom: 80px !important;
  padding-bottom: 20px !important;
  clear: both !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

/* List container resets with clear gap between pills */
.pagination-wrapper ul.page-numbers,
.pagination ul.page-numbers,
.gowilds-pagination ul.page-numbers {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pagination-wrapper ul.page-numbers li,
.pagination ul.page-numbers li,
.gowilds-pagination ul.page-numbers li {
  display: inline-block !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* MAIN BUTTON STYLE: Solid Black Pill by default */
.pagination-wrapper .page-numbers,
.pagination .page-numbers,
.gowilds-pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  background-color: #111111 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1px solid #111111 !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: none !important;
}

/* HOVER STATE */
.pagination-wrapper a.page-numbers:hover,
.pagination a.page-numbers:hover,
.gowilds-pagination a.page-numbers:hover {
  background-color: #333333 !important;
  border-color: #333333 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* ACTIVE PAGE */
.pagination-wrapper .page-numbers.current,
.pagination .page-numbers.current,
.gowilds-pagination .page-numbers.current {
  background-color: #000000 !important;
  border: 2px solid #555555 !important;
  color: #ffffff !important;
}