/* ==========================================================================
   brikx — Platform Overview page fixes
   Load AFTER main.css, brikx-brand-overrides.css and brikx-feature-cards.css

   Breakpoints:  >=1200 desktop | 992-1199 small desktop | 576-991 tablet | <576 mobile
   ========================================================================== */

/* ---------- Shared: calmer vertical rhythm between the four sections ----------
   (template's .section-gap is 120px top AND bottom, which doubles up
   to 240px between stacked sections) */
.brikx-section.section-gap { padding-top: 70px; padding-bottom: 70px; }
@media (max-width: 991px) { .brikx-section.section-gap { padding-top: 50px; padding-bottom: 50px; } }
@media (max-width: 575px) { .brikx-section.section-gap { padding-top: 40px; padding-bottom: 40px; } }

.brikx-section .heading-wrap-content { margin-bottom: 40px; }
@media (max-width: 767px) { .brikx-section .heading-wrap-content { margin-bottom: 28px; } }


/* ==========================================================================
   1. WHY BRIKX — three equal cards, centred
   Desktop: 3 in a row | Tablet: 2 + 1 (third card centred, same width) | Mobile: 1
   ========================================================================== */
.brikx-why {
  position: relative;
  z-index: 0;            /* keeps the decorative bg-shapes behind the content */
  overflow: hidden;
}

.brikx-why .brikx-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* centres any incomplete row */
  align-items: stretch;      /* cards in a row share the same height */
  gap: 24px;
  max-width: 100%;
}

.brikx-why .brikx-benefit {
  flex: 0 0 calc((100% - 48px) / 3);   /* exactly one third, minus gaps */
  max-width: calc((100% - 48px) / 3);
  box-sizing: border-box;
  padding: 36px 30px 34px;
  text-align: left;
}
.brikx-why .brikx-benefit__title { font-size: 24px; margin-bottom: 14px; }
.brikx-why .brikx-benefit__text  { line-height: 1.65; }

/* small desktop: a little tighter */
@media (min-width: 992px) and (max-width: 1199px) {
  .brikx-why .brikx-benefits { gap: 20px; }
  .brikx-why .brikx-benefit {
    flex-basis: calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
    padding: 30px 22px 28px;
  }
  .brikx-why .brikx-benefit__title { font-size: 21px; }
}

/* tablet: 2 per row, the odd one out is centred and the same width */
@media (min-width: 576px) and (max-width: 991px) {
  .brikx-why .brikx-benefits { gap: 20px; }
  .brikx-why .brikx-benefit {
    flex-basis: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
    padding: 30px 26px 28px;
  }
}

/* mobile: single column */
@media (max-width: 575px) {
  .brikx-why .brikx-benefits { gap: 14px; }
  .brikx-why .brikx-benefit {
    flex-basis: 100%;
    max-width: 100%;
    padding: 26px 20px 24px;
  }
  .brikx-why .brikx-benefit__title { font-size: 21px; }
}


/* ==========================================================================
   2. CONNECTED LEARNER JOURNEY — 4 cards as 2 x 2
   Numbers removed (they were unstyled and the section isn't a strict sequence
   once you reach "Live interviews"); the markup no longer includes them.
   ========================================================================== */
.brikx-journey-section .brikx-feature-card__number {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 0 24px;
  border-radius: 50%;
  background: var(--brikx-smart-blue);
  color: var(--brikx-light);                 /* 7.3:1 on Smart Blue */
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 0 0 6px rgba(123, 214, 201, 0.25);
}
@media (max-width: 575px) {
  .brikx-journey-section .brikx-feature-card__number {
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    font-size: 15px;
    box-shadow: 0 0 0 4px rgba(123, 214, 201, 0.25);
  }
}

@media (min-width: 576px) {
  .brikx-journey-section .brikx-feature-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }
  .brikx-journey-section .brikx-feature-card { padding: 40px 36px 34px; }
}
@media (min-width: 576px) and (max-width: 991px) {
  .brikx-journey-section .brikx-feature-cards { gap: 20px; }
  .brikx-journey-section .brikx-feature-card { padding: 34px 26px 28px; }
}
@media (max-width: 575px) {
  .brikx-journey-section .brikx-feature-cards { grid-template-columns: 1fr; gap: 14px; }
}


/* ==========================================================================
   3. CAPABILITIES — image left, heading + stacked list right
   The old layout turned every <li> into a flex row (icon | title | text),
   which squashed the title and text into narrow side-by-side columns.
   Now: icon | [title above text], one capability per row inside the dashed panel.
   ========================================================================== */
.brikx-capabilities { padding-top: 70px; padding-bottom: 70px; }
@media (max-width: 991px) { .brikx-capabilities { padding-top: 50px; padding-bottom: 50px; } }
@media (max-width: 575px) { .brikx-capabilities { padding-top: 40px; padding-bottom: 40px; } }

.brikx-capabilities .team-details__img img { display: block; width: 100%; height: auto; }

.brikx-capabilities .team-details__content { padding-inline-start: 20px; margin-top: 0; }
.brikx-capabilities .brikx-cap-intro { margin: 0; max-width: 62ch; }

.brikx-cap-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  background: #fff;
  border: 1px dashed var(--tj-color-border-1);
  border-radius: 12px;
  overflow: hidden;
}
.brikx-cap-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding: 22px 28px;
}
.brikx-cap-item + .brikx-cap-item { border-top: 1px dashed var(--tj-color-border-1); }

.brikx-cap-item__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--brikx-gradient);
  color: var(--brikx-smart-blue);
  font-size: 11px;
  line-height: 1;
}
.brikx-cap-item__icon i { color: inherit; line-height: 1; }

.brikx-cap-item .brikx-capability__title {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.25;
  color: var(--brikx-smart-blue);
}
.brikx-cap-item .brikx-capability__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  max-width: 62ch;
}

/* small desktop */
@media (min-width: 992px) and (max-width: 1199px) {
  .brikx-capabilities .team-details__content { padding-inline-start: 10px; }
  .brikx-cap-item { padding: 20px 22px; column-gap: 14px; }
  .brikx-cap-item .brikx-capability__title { font-size: 19px; }
}

/* tablet & mobile: image sits above, kept to a sensible size and centred */
@media (max-width: 991px) {
  .brikx-capabilities .team-details__img {
    max-width: 520px;
    margin: 0 auto;
  }
  .brikx-capabilities .team-details__img img {
    max-height: 460px;
    object-fit: cover;
    object-position: top center;
  }
  .brikx-capabilities .team-details__content { padding-inline-start: 0; margin-top: 32px; }
}
@media (max-width: 575px) {
  .brikx-capabilities .team-details__content { margin-top: 24px; }
  .brikx-cap-list { margin-top: 22px; }
  .brikx-cap-item { grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; padding: 18px 16px; }
  .brikx-cap-item__icon { width: 22px; height: 22px; font-size: 10px; }
  .brikx-cap-item .brikx-capability__title { font-size: 18px; }
}


/* ==========================================================================
   4. "WHY ORGANISATIONS CHOOSE BRIKX" — 4 cards, even grid
   Was col-lg-4 x 4, which left a lone orphan card on the second row.
   Now: 4 across (xl) | 2 x 2 (md-lg) | 1 column (mobile), equal heights.
   ========================================================================== */
.brikx-choose .row.rightSwipeWrap > [class*="col-"] { display: flex; }
.brikx-choose .choose-box { width: 100%; text-align: left; }

.brikx-choose .choose-box { padding: 40px 28px 38px; }
.brikx-choose .choose-box .choose-icon { margin-bottom: 28px; }

@media (min-width: 1200px) and (max-width: 1399px) {
  .brikx-choose .choose-box { padding: 34px 22px 32px; }
}
@media (min-width: 576px) and (max-width: 1199px) {
  .brikx-choose .choose-box { padding: 34px 26px 32px; }
  .brikx-choose .choose-box .choose-icon { margin-bottom: 22px; }
}
@media (max-width: 575px) {
  .brikx-choose .choose-box { padding: 28px 20px 26px; }
  .brikx-choose .choose-box .choose-icon { margin-bottom: 18px; }
}