/* ============================================
   CROSS-SECTION CSS CONTAINMENT
   Prevents layout/paint interference between sections
   Zero CLS | Zero Layout Thrashing | GPU Optimized
   ============================================ */

/* ============================================
   SECTION 1: GLOBAL CONTAINMENT RULES
   ============================================ */

/* Main section containers - isolated rendering */
section,
.section,
[class*="-section"] {
  contain: layout style;
}

/* Hero section - highest priority isolation */
.hero-slider-wrapper,
.hero-slider-container,
.hero-slide {
  contain: layout style paint;
}

/* ============================================
   SECTION 2: HEADER ISOLATION
   ============================================ */

.header,
.header-inner,
.topbar {
  contain: layout style;
}

/* Prevent header from affecting other sections during scroll */
.header.sticky,
.header-inner.sticky {
  contain: layout style paint;
}

/* ============================================
   SECTION 3: HERO SLIDER STRICT ISOLATION
   ============================================ */

/* Critical: First slide must not animate for LCP */
.hero-slide[data-slide="0"] {
  contain: strict;
  content-visibility: auto;
}

/* Hero content layers - GPU isolated */
.hero-slide-image-wrapper,
.hero-slide-overlay,
.hero-slide-content {
  contain: layout style paint;
}

/* Hero buttons - clickable area guarantee */
.hero-buttons {
  contain: layout;
  min-height: 44px;
}

/* ============================================
   SECTION 4: CARD COMPONENTS ISOLATION
   ============================================ */

/* Morocco pack tours carousel */
.morocco-pack-tours {
  contain: layout style;
}

.morocco-pack-tours .portfolio-slider-css {
  contain: layout style paint;
}

.morocco-pack-tours .single-pf {
  contain: layout style;
}

.morocco-pack-tours .single-news {
  contain: layout style paint;
}

/* ============================================
   SECTION 5: SLIDER COMPONENTS ISOLATION
   ============================================ */

/* Testimonial slider */
.testimonials,
.testimonial-slider,
.single-testimonial {
  contain: layout style;
}

/* Client/partners slider */
.clients,
.clients-slider,
.single-clients {
  contain: layout style;
}

/* Portfolio slider (if exists) */
.portfolio,
.portfolio-slider,
.single-pf {
  contain: layout style;
}

/* ============================================
   SECTION 6: IMAGE CONTAINMENT
   ============================================ */

/* All images - prevent layout shift */
img {
  contain: layout;
}

/* Lazy loaded images - extra isolation */
img[loading="lazy"] {
  contain: layout paint;
}

/* Hero images - critical containment */
.hero-slide-image {
  contain: strict;
}

/* ============================================
   SECTION 7: ANIMATED ELEMENTS ISOLATION
   ============================================ */

/* WOW.js elements - isolated before animation */
.wow,
[data-aos] {
  contain: layout style;
}

/* Counter elements */
.counter,
[data-count] {
  contain: layout;
}

/* Hover effects containers */
[class*="hover"],
[class*="tilt"] {
  contain: layout style;
}

/* ============================================
   SECTION 8: FORM ELEMENTS ISOLATION
   ============================================ */

/* Booking form sections */
.booking,
.booking-form,
.schedule {
  contain: layout style;
}

/* Input containers */
.form-group,
.form-control {
  contain: layout;
}

/* ============================================
   SECTION 9: FOOTER ISOLATION
   ============================================ */

footer,
.footer-top,
.footer-bottom,
.footer-inner {
  contain: layout style;
}

/* ============================================
   SECTION 10: PERFORMANCE ISOLATION
   ============================================ */

/* Content-visibility for below-fold sections */
@media (min-width: 992px) {
  /* Only apply to large screens with good performance */
  
  .testimonials,
  .clients,
  .blog-section,
  .booking,
  footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
  }
}

/* ============================================
   SECTION 11: RESIZE SAFETY
   ============================================ */

/* Prevent layout shifts during resize */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    contain: layout style !important;
  }
}

/* ============================================
   SECTION 12: SAFE ANIMATION ZONES
   ============================================ */

/* Elements that can safely animate without affecting others */
.hero-nav,
.btn-hero,
.carousel-nav {
  /* GPU-accelerated, won't affect layout */
  transform: translateZ(0);
  will-change: transform;
  contain: layout style;
}

/* ============================================
   SECTION 13: MOBILE PERFORMANCE
   ============================================ */

/* Reduce containment overhead on mobile */
@media (max-width: 768px) {
  section,
  .section {
    /* Use lighter containment on mobile */
    contain: layout;
  }
  
  /* Disable content-visibility on mobile (can cause issues) */
  .testimonials,
  .clients,
  .blog-section,
  .booking,
  footer {
    content-visibility: visible;
  }
}

/* ============================================
   SECTION 14: STICKY ELEMENT ISOLATION
   ============================================ */

/* Any sticky positioned elements */
.sticky,
[class*="sticky"] {
  contain: layout style paint;
}

/* ============================================
   SECTION 15: OVERFLOW PROTECTION
   ============================================ */

/* Prevent children from breaking containment */
.contain-layout {
  contain: layout;
}

.contain-layout-style {
  contain: layout style;
}

.contain-strict {
  contain: strict;
}

/* ============================================
   END CROSS-SECTION CSS CONTAINMENT
   ============================================ */