/*
Theme Name: Divi Child - Passages Travel & Cruises
Description: 
Template: Divi
Version: 1.0.2

=== CUSTOM SHORTCODES ===

1. [trip_dates]
   - Displays trip start and end dates in "start - end" format
   - Usage: [trip_dates] or [trip_dates post_id="123"]
   - Best used within single trip posts

2. [related_trips]
   - Displays related trips in a 3-column grid with round images
   - Usage: [related_trips] or [related_trips post_id="123"]
   - Shows trips selected in the "Related Trips" ACF field
   - Responsive: 3 columns desktop, 2 tablet, 1 mobile

3. [trip_gallery]
   - Displays trip gallery as an interactive carousel with round images
   - Usage: [trip_gallery] or [trip_gallery post_id="123"]
   - Shows images from the "Gallery" ACF field
   - Includes navigation arrows and smooth transitions

4. [trip_listing] - MAIN SHORTCODE
   - Comprehensive trip listing with sorting and filtering
   - Usage: [trip_listing] (basic) or with parameters:
   
   Parameters:
   - posts_per_page: Number of trips to show (default: -1 for all)
   - show_filters: Show filter controls (default: "true")
   - show_sorting: Show sort controls (default: "true")
   - default_sort: Default sorting option (see options below)
   
   Examples:
   - [trip_listing]
   - [trip_listing posts_per_page="10"]
   - [trip_listing show_filters="false"]
   - [trip_listing show_sorting="false"]
   - [trip_listing default_sort="start_date_soonest"]
   
   Sorting Options:
   - start_date_soonest: "Departing Soon"
   - start_date_furthest: "Departing Later"
   - trip_length_shortest: "Short Trips"
   - trip_length_longest: "Long Trips"
   - price_lowest: "Price: Low to High"
   - price_highest: "Price: High to Low"
   
   Filtering Options:
   - Destination: Dynamically populated from published trips
   - Type: Dynamically populated from published trips
   - Year: Dynamically populated from trip start dates
   
   Features:
   - Real-time sorting and filtering without page reloads
   - Responsive grid layout (3/2/1 columns)
   - User-friendly "no results" messages with contact links
   - Automatic trip length calculation
   - Clean card design matching related trips style

5. [featured_trips]
   - Displays trips marked as "Feature on Homepage" in a 3-column grid
   - Usage: [featured_trips] or [featured_trips posts_per_page="6"]
   - Shows only trips where the "Feature on Homepage" ACF field is true
   - Perfect for homepage hero sections or featured trip displays
   - Same responsive design as other trip grids (3/2/1 columns)
   - Ordered by start date (soonest first)
   - Returns empty if no featured trips are found

=== ACF FIELDS REQUIRED ===
- start_date: Date picker field
- end_date: Date picker field
- price: Text field
- gallery: Gallery field
- related_trips: Relationship field (to trip post type)
- feature_on_homepage: True/False field

=== TAXONOMIES REQUIRED ===
- destination: Custom taxonomy for trip destinations
- trip_type: Custom taxonomy for trip types

=== POST TYPE REQUIRED ===
- trip: Custom post type with featured image support

*/

/* ==========================================================================
   SHARED TRIP GRID STYLES
   ========================================================================== */

/* Base grid layout - used by all trip grids */
.trip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Base trip item styles - used by all trip items */
.trip-grid-item {
  text-align: center;
}

.trip-grid-item .trip-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.3s ease;
}

.trip-grid-item .trip-link:hover {
  transform: translateY(-5px);
}

.trip-grid-item .trip-image-container {
  position: relative;
  margin: 0 2rem 1rem;
}

.trip-grid-item .trip-image-container img,
.trip-grid-item .no-image-placeholder {
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  aspect-ratio: 1;
  border: 3px solid #f39235;
  display: block;
}

.trip-grid-item .no-image-placeholder {
  background-color: #f5f5f5;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23cccccc"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px;
}

.trip-grid-item .trip-title {
  font-size: 1.2em;
  line-height: 1.4;
  padding: 0;
  text-wrap: balance;
  font-weight: bold;
}

.trip-grid-item .trip-dates-text {
  padding-bottom: 0;
  font-size: 0.9em;
  text-wrap: balance;
  color: #1c549d;
}

.trip-grid-item .trip-price-text {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  text-wrap: balance;
  color: #f39235;
}

/* Responsive design for all trip grids */
@media (max-width: 980px) {
  .trip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .trip-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* ==========================================================================
   TRIP GALLERY CAROUSEL STYLES
   ========================================================================== */

.trip-gallery-carousel {
  position: relative;
  width: 100%;
  margin: 30px auto;
}

.carousel-container {
  position: relative;
  border: 3px solid #1c549d;
  border-radius: 50%;
  aspect-ratio: 1;
  background-color: #f5f5f5;
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel-slide.active {
  opacity: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 50%;
  display: block;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  z-index: 10;
  transition: background-color 0.3s ease;
}

.carousel-arrow:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.carousel-prev {
  left: -20px;
}

.carousel-next {
  right: -20px;
}

.carousel-arrow span {
  display: block;
  line-height: 1;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Tablets */
@media (max-width: 980px) {
  .related-trips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .related-trips-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .carousel-arrow {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }

  .carousel-prev {
    left: -17px;
  }

  .carousel-next {
    right: -17px;
  }
}

/* ==========================================================================
   DIVI INTEGRATION FIXES
   ========================================================================== */

/* Remove Divi's default link styling on trip items */
.related-trip-item .trip-link:hover h3 {
  color: inherit;
}

/* Ensure carousel works well within Divi modules */
.et_pb_module .trip-gallery-carousel {
  margin: 0 auto;
}

.et_pb_module .related-trips-grid {
  margin: 0 auto;
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

.carousel-arrow:focus {
  outline: 2px solid #1c549d;
  outline-offset: 2px;
}

.related-trip-item .trip-link:focus {
  outline: 2px solid #1c549d;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Screen reader only text for carousel buttons */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   TRIP LISTING STYLES
   ========================================================================== */

.trip-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.trip-sorting {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* stack trip-sorting on mobile */
@media (max-width: 768px) {
  .trip-sorting {
    flex-direction: column;
    align-items: flex-start;
  }
}

.trip-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trip-controls label {
  font-weight: 600;
  color: #495057;
  margin: 0;
}

.trip-controls select {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
  min-width: 150px;
}

.trip-controls select:focus {
  outline: none;
  border-color: #1c549d;
  box-shadow: 0 0 0 2px rgba(28, 84, 157, 0.2);
}

/* Trip listing specific responsive styles */
@media (max-width: 768px) {
  .trip-listing-container {
    padding: 15px;
  }

  .trip-controls {
    flex-direction: column;
    gap: 15px;
  }

  .trip-filters {
    flex-direction: column;
    gap: 15px;
  }

  .filter-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .trip-controls select {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .trip-listing-container {
    padding: 10px;
  }

  .trip-controls {
    padding: 15px;
  }
}

/* ==========================================================================
   TRIP LISTING ACCESSIBILITY
   ========================================================================== */

.trip-controls select:focus,
.trip-title a:focus {
  outline: 2px solid #1c549d;
  outline-offset: 2px;
}

.trip-item:focus-within {
  outline: 2px solid #1c549d;
  outline-offset: 2px;
}

/* ==========================================================================
   TRIP LISTING LOADING STATES
   ========================================================================== */

.trip-item[style*="display: none"] {
  display: none !important;
}

.no-trips-message,
.no-results-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  margin: 20px 0;
}

.no-trips-message p,
.no-results-message p {
  margin: 0;
  color: #6c757d;
  font-size: 16px;
  line-height: 1.5;
}

.no-trips-message a,
.no-results-message a {
  color: #1c549d;
  text-decoration: none;
  font-weight: 600;
}

.no-trips-message a:hover,
.no-results-message a:hover {
  color: #f39235;
  text-decoration: underline;
}