/**
 * Kathy Andrade Exhibit Styles
 * File: /wp-content/themes/media-child/includes/andrade/kathy-carousel.css
 * 
 * Layout system for the comprehensive section shortcode plus carousel functionality
 */

/* ===============================================
   KATHY SECTION LAYOUT (New Shortcode System)
   =============================================== */

/* Override Divi layout when using new shortcode system */
.et_pb_row:has(.kathy-content-container) {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Reset the container to not break out */
.et_pb_row .kathy-content-container {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* But respect the container's own max-width */
.kathy-content-container {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 20px !important;
  font-family: "Fira Sans", sans-serif;
}

/* Main content grid - two columns on desktop, stacked on mobile */
.main-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Text left, carousel right */
  gap: 30px;
  margin-bottom: 40px;
  align-items: start;
  justify-items: start; /* Align items to the start of their grid cells */
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.text-column {
  /* Left column for intro text */
  order: 1; /* Force to left side */
  width: 100%; /* Take full column width */
}

.media-column {
  /* Right column for carousel */
  /* Contains the full carousel system */
  order: 2; /* Force to right side */
  width: 100%; /* Take full column width */
}

/* Navigation section - always full width */
.navigation-section {
  width: 100%;
  /*border-top: 1px solid #ddd; */
  padding-top: 20px;
}

/* Responsive behavior */
@media (max-width: 768px) {
  .main-content-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .kathy-content-container {
    padding: 0 15px;
  }
  
    .navigation-section {
      padding-top: 0;
    }

}

@media (max-width: 480px) {
  .kathy-content-container {
    padding: 0 10px;
  }
  
  .intro-text-section {
    margin-bottom: 20px;
  }
  
  .main-content-grid {
    gap: 24px;
    margin-bottom: 30px;
  }
}