/* ==========================================================================
   brikx sections — REPLACES brikx-feature-cards.css
   Load AFTER main.css and brikx-brand-overrides.css (link already in place).

   Contains:
   1. Feature cards         (3 cards, no numbers)
   2. Learner journey       (5 numbered rows in one panel)
   3. Capabilities          (bento: Smart Blue heading panel + 7 cards)
   4. Why brikx             (image + 4 benefit cards)

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

/* ---------- Shared: section heading + intro ---------- */
.brikx-heading {
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}
.brikx-heading .sec-title { margin-bottom: 0; }
.brikx-heading__intro {
  max-width: 640px;
  margin: 20px auto 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--tj-color-text-body);
}
@media (max-width: 767px) {
  .brikx-heading { margin-bottom: 36px; }
  .brikx-heading__intro { font-size: 16px; margin-top: 14px; }
}

/* ==========================================================================
   1. FEATURE CARDS (numbers removed)
   3 columns -> 2 columns (last card spans) -> 1 column
   ========================================================================== */
.brikx-feature-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: stretch;
}

.brikx-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 44px 32px 36px;
  background: var(--brikx-white, #fff);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* gradient top bar (decorative) */
.brikx-feature-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--brikx-gradient);
}

.brikx-feature-card__title {
  margin: 0 0 16px;
  font-size: 24px;
  line-height: 1.25;
  color: var(--brikx-smart-blue);
}

.brikx-feature-card__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tj-color-text-body);
}

@media (hover: hover) {
  .brikx-feature-card:hover {
    transform: translateY(-6px);
    border-color: var(--brikx-smart-blue);
    box-shadow: 0 20px 40px -20px rgba(43, 52, 68, 0.35);
  }
}
.brikx-feature-card:focus-within { border-color: var(--brikx-smart-blue); }

/* small desktop: tighter padding so 3 columns still breathe */
@media (min-width: 992px) and (max-width: 1199px) {
  .brikx-feature-cards { gap: 20px; }
  .brikx-feature-card { padding: 38px 24px 30px; }
  .brikx-feature-card__title { font-size: 22px; }
}

/* tablet: 2 columns, odd last card spans the full row */
@media (min-width: 576px) and (max-width: 991px) {
  .brikx-feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .brikx-feature-card { padding: 36px 28px 30px; }
  .brikx-feature-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* mobile: single column */
@media (max-width: 575px) {
  .brikx-feature-cards { grid-template-columns: 1fr; gap: 16px; }
  .brikx-feature-card { padding: 32px 22px 26px; }
  .brikx-feature-card__title { font-size: 21px; }
}

/* ==========================================================================
   2. LEARNER JOURNEY (numbered rows in one panel)
   >=992: heading left (sticky) + panel right | <992: heading above panel
   ========================================================================== */
.brikx-journey .sec-heading { margin-bottom: 0; }
@media (min-width: 992px) {
  .brikx-journey__intro { position: sticky; top: 130px; }
}

.brikx-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--tj-color-border-1);
  border-radius: 12px;
  overflow: hidden;
}

.brikx-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 24px;
  padding: 32px 36px;
  transition: background-color 0.3s ease;
}
.brikx-step + .brikx-step { border-top: 1px dashed var(--tj-color-border-1); }

/* gradient edge, appears on hover / focus */
.brikx-step::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--brikx-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .brikx-step:hover { background: rgba(123, 214, 201, 0.08); }
  .brikx-step:hover::before { opacity: 1; }
}
.brikx-step:focus-within::before { opacity: 1; }

.brikx-step__number {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brikx-smart-blue);
  color: var(--brikx-light);                  /* 7.34: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);
}
.brikx-step__title {
  margin: 4px 0 10px;
  font-size: 22px;
  line-height: 1.25;
  color: var(--brikx-smart-blue);
}
.brikx-step__text {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tj-color-text-body);
}

@media (max-width: 991px) {
  .brikx-journey__intro { margin-bottom: 8px; }
}
@media (max-width: 575px) {
  .brikx-step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 24px 20px; }
  .brikx-step__number { width: 44px; height: 44px; font-size: 15px; box-shadow: 0 0 0 4px rgba(123, 214, 201, 0.25); }
  .brikx-step__title { font-size: 20px; margin-top: 2px; }
}

/* ==========================================================================
   3. CAPABILITIES (bento: Smart Blue heading panel + 7 cards)
   Desktop: heading panel spans 2 rows on the left, cards fill 2x2 beside it,
            last 3 cards run along the bottom (7 cards fit exactly).
   Tablet : heading full width, cards in 2 columns
   Mobile : single column
   ========================================================================== */
.brikx-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.brikx-capability-intro {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 36px;
  background: var(--brikx-smart-blue);
  border-radius: 12px;
}
.brikx-capability-intro .sec-title {
  margin: 0 0 20px;
  font-size: 36px;
  color: #fff;
}
.brikx-capability-intro .sec-title span { color: var(--brikx-light); }
.brikx-capability-intro__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #d5dbe4;                              /* ~9:1 on Smart Blue */
}

.brikx-capability {
  padding: 30px 26px 28px;
  background: #fff;
  border: 1px solid var(--tj-color-border-1);
  border-radius: 12px;
  transition: border-color 0.3s ease;
}
.brikx-capability::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 18px;
  border-radius: 2px;
  background: var(--brikx-gradient);
}
.brikx-capability__title {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.25;
  color: var(--brikx-smart-blue);
}
.brikx-capability__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tj-color-text-body);
}
@media (hover: hover) {
  .brikx-capability:hover { border-color: var(--brikx-smart-blue); }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .brikx-capability-intro { padding: 36px 26px; }
  .brikx-capability-intro .sec-title { font-size: 30px; }
  .brikx-capability { padding: 26px 22px 24px; }
}

@media (min-width: 576px) and (max-width: 991px) {
  .brikx-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brikx-capability-intro { grid-column: 1 / -1; grid-row: auto; padding: 36px 30px; }
  .brikx-capability-intro .sec-title { font-size: 32px; }
  .brikx-capability-intro__text { max-width: 640px; }
  /* if the card count is odd, the last card spans the row */
  .brikx-capability:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}

@media (max-width: 575px) {
  .brikx-capability-grid { grid-template-columns: 1fr; gap: 14px; }
  .brikx-capability-intro { grid-column: auto; grid-row: auto; padding: 30px 22px; }
  .brikx-capability-intro .sec-title { font-size: 28px; }
  .brikx-capability { padding: 24px 20px 22px; }
}

/* ==========================================================================
   4. WHY BRIKX (image + benefit cards)
   ========================================================================== */
.brikx-why .about-content-area .sec-heading { margin-bottom: 32px; }

.brikx-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.brikx-benefit {
  padding: 28px 24px 26px;
  background: #fff;
  border: 1px solid var(--tj-color-border-1);
  border-radius: 12px;
}
.brikx-benefit::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 18px;
  border-radius: 2px;
  background: var(--brikx-gradient);
}
.brikx-benefit__title {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.25;
  color: var(--brikx-smart-blue);
}
.brikx-benefit__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tj-color-text-body);
}

/* image fills the column height on desktop */
.brikx-why .about-img-area { margin-top: 0; }
.brikx-why .about-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 992px) {
  .brikx-why .about-img-area,
  .brikx-why .about-img { height: 100%; }
  .brikx-why .about-img img { min-height: 480px; }
}

/* small desktop: column is narrow, stack the cards */
@media (min-width: 992px) and (max-width: 1199px) {
  .brikx-benefits { grid-template-columns: 1fr; }
}

/* tablet & mobile: content first, image after, image keeps a sane ratio */
@media (max-width: 991px) {
  .brikx-why .about-content-area { margin-bottom: 30px; }
  .brikx-why .about-img-area.style-2 { max-width: 100%; }
  .brikx-why .about-img { aspect-ratio: 4 / 3; }
}
@media (max-width: 575px) {
  .brikx-benefits { grid-template-columns: 1fr; gap: 14px; }
  .brikx-benefit { padding: 24px 20px 22px; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .brikx-feature-card,
  .brikx-capability,
  .brikx-step,
  .brikx-step::before { transition: none; }
  .brikx-feature-card:hover { transform: none; }
}