/*
 * BLN Academy — Elementor Fix CSS
 *
 * Fixes the single-column layout problem. Elementor containers default to
 * flex-direction: column. We need to force row direction on containers that
 * hold multiple child containers (stats, features, courses).
 */

/* ===== THE KEY FIX =====
   Any .e-con-inner that contains multiple .e-con children should display
   as a flex row. This targets the exact nesting pattern on this site.
   Specificity raised with .e-parent + .e-flex so it beats Elementor's
   base .e-con > .e-con-inner styling. */
.e-con.e-parent.e-flex.e-con-boxed > .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 24px;
  width: 100%;
}

/* Each direct boxed child gets equal width. Restricted to .e-con-boxed
   children so a stray .e-con-full child (intended to span the row) is
   not forced into flex: 1. */
.e-con.e-con-boxed > .e-con-inner > .e-con.e-con-boxed {
  flex: 1 1 0;
  min-width: 0;
}

/* Hero section: center content vertically.
   `:first-of-type` is more robust than `:first-child` because siblings
   such as an Elementor header / admin bar can precede the hero without
   breaking the match. */
.elementor-page .e-con.e-parent.e-con-full:first-of-type > .e-con-inner,
.elementor-page .e-con.e-parent.e-con-full:first-of-type > .e-con-boxed > .e-con-inner {
  align-items: center;
  min-height: 100vh;
}

/* Widget containers inside card-like children should stack vertically.
   This rule ONLY matches 3 levels deep (e-con-boxed > e-con-inner >
   e-con > e-con-inner) and is intentionally NOT a button-row rule —
   button rows in the hero / CTA should be authored with Elementor's own
   inline-width controls, not via a CSS hack that would also flatten
   card internals. */
.e-con.e-con-boxed > .e-con-inner > .e-con > .e-con-inner {
  display: flex;
  flex-direction: column;
}

/* Container width constraint */
.elementor-page .e-con.e-parent.e-con-boxed {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}

/* Box model */
.e-con, .e-con-full, .elementor-section, .elementor-widget {
  box-sizing: border-box;
}

/* Widget spacing — responsive ladder so card internals keep vertical
   rhythm on every breakpoint. `:last-child` zeroes the trailing margin
   so the parent container's gap controls the next card. */
.elementor-page .elementor-widget {
  margin-bottom: 20px;
}
.elementor-page .elementor-widget:last-child {
  margin-bottom: 0;
}

/* Design tokens */
.elementor-page {
  background-color: var(--bg, #f8fafc);
  color: var(--fg, #1e293b);
}

/* RTL */
html[dir="rtl"] .elementor-page .e-con,
html[dir="rtl"] .elementor-page .elementor-section {
  direction: rtl;
  text-align: right;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .e-con.e-parent.e-flex.e-con-boxed > .e-con-inner {
    flex-direction: column;
    gap: 16px;
  }
  .e-con.e-con-boxed > .e-con-inner > .e-con.e-con-boxed {
    flex: none;
    width: 100%;
  }
  .elementor-page .e-con.e-parent.e-con-boxed {
    padding-left: 20px;
    padding-right: 20px;
  }
  .elementor-page .elementor-widget {
    margin-bottom: 16px;
  }
}

@media (max-width: 480px) {
  .elementor-page .e-con.e-parent.e-con-boxed {
    padding-left: 16px;
    padding-right: 16px;
  }
  .elementor-page .elementor-widget {
    margin-bottom: 12px;
  }
}