/* =====================================================================
   layout.css — semantic layout system replacing Elementor's grid.
   Ported from the rules the page actually used (section / column / widget
   / container), renamed to plain semantic classes. No Elementor dependency.
   ===================================================================== */

/* ---- Section ---- */
.section { position: relative; }
.section .container-inner { display: flex; flex-wrap: wrap; margin-inline: auto; position: relative; }
.section.section-boxed > .container-inner { max-width: 1140px; }
.section.section-stretched { position: relative; width: 100%; }
.section.section-full > .container-inner { max-width: none; }

/* ---- Column ---- */
.col { display: flex; min-height: 1px; position: relative; width: 100%; }
.col-100 { width: 100%; }
.col-33 { width: 33.333%; }
.col-gap > .col > .col-inner { padding: 10px; }
.col-gap-no > .col > .col-inner { padding: 0; }

/* ---- Widget wrap / widget ---- */
.widget-wrap { display: flex; align-content: flex-start; align-items: center; justify-content: center; flex-wrap: wrap; position: relative; width: 100%; }
.widget { position: relative; margin-block-end: 0; min-width: 0; max-width: 100%; width: 100%; }
.widget-inner { position: relative; }

/* ---- Background overlay (for section bg-image overlays) ---- */
.bg-overlay {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  top: 0; left: 0;
}

/* ---- Column-inner populated block ---- */
.col-inner { position: relative; height: 100%; }

/* Responsive: stack columns on tablet/mobile like Elementor did */
@media (max-width: 1024px) {
  .col-33 { width: 100%; }
}
@media (max-width: 767px) {
  .section .container-inner { flex-direction: column; }
  .col-33, .col-100 { width: 100%; }
}