/*
 * Elementor override patches.
 * Elementor gives its own section/column wrapper divs a default
 * display:flex. Since we're re-using the original theme's grid-based
 * layout classes (about-inner, services-grid, gallery-grid, testi-grid,
 * connect-inner, connect-cards, contact-inner, areas-grid) directly on
 * those same wrapper divs, this file makes sure the original CSS Grid
 * rules win the cascade so columns lay out exactly like the original design.
 *
 * Enqueue this AFTER both Elementor's CSS and frontend.css.
 */

.elementor-section.about-inner > .elementor-container,
.elementor-section.services-grid > .elementor-container,
.elementor-section.gallery-grid > .elementor-container,
.elementor-section.testi-grid > .elementor-container,
.elementor-section.connect-inner > .elementor-container,
.elementor-section.connect-cards > .elementor-container,
.elementor-section.contact-inner > .elementor-container,
.elementor-section.areas-grid > .elementor-container,
.elementor-section.hero-btns > .elementor-container {
  display: grid !important;
}

.about-inner > .elementor-container { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.services-grid > .elementor-container { grid-template-columns: repeat(3,1fr); gap: 24px; }
.gallery-grid > .elementor-container { grid-template-columns: repeat(4,1fr); grid-auto-rows: 170px; gap: 18px; }
.testi-grid > .elementor-container { grid-template-columns: repeat(3,1fr); gap: 24px; }
.connect-inner > .elementor-container { grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: stretch; }
.connect-cards > .elementor-container { grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-inner > .elementor-container { grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: center; }
.areas-grid > .elementor-container { grid-template-columns: repeat(5,1fr); gap: 16px; }
.hero-btns > .elementor-container { display: flex !important; gap: 14px; flex-wrap: wrap; }

@media(max-width:900px){
  .about-inner > .elementor-container,
  .connect-inner > .elementor-container,
  .contact-inner > .elementor-container { grid-template-columns: 1fr !important; }
}
@media(max-width:860px){
  .services-grid > .elementor-container { grid-template-columns: repeat(2,1fr) !important; }
  .testi-grid > .elementor-container { grid-template-columns: 1fr 1fr !important; }
  .gallery-grid > .elementor-container { grid-template-columns: repeat(2,1fr) !important; }
  .areas-grid > .elementor-container { grid-template-columns: repeat(3,1fr) !important; }
}
@media(max-width:560px){
  .services-grid > .elementor-container,
  .testi-grid > .elementor-container,
  .gallery-grid > .elementor-container { grid-template-columns: 1fr !important; }
}
@media(max-width:520px){
  .connect-cards > .elementor-container,
  .areas-grid > .elementor-container { grid-template-columns: 1fr 1fr !important; }
}

/* Elementor's icon-list widget defaults to a vertical <ul>; make the hero
   badges row lay out horizontally like the original .hero-badges class. */
.hero-badges ul.elementor-icon-list-items {
  display: flex !important;
  flex-wrap: wrap;
  gap: 18px;
}
.hero-badges .elementor-icon-list-item { color: rgba(255,255,255,.6); font-size:.8rem; font-weight:500; }
.hero-badges .elementor-icon-list-icon i { color: var(--accent-light); }

/* Elementor's accordion widget → reuse original FAQ look */
.faq-list .elementor-accordion-item { border: none; }
.faq-list .elementor-tab-title { font-weight: 600; }