/* ==================================================================
   Medicom Service Features — structural row layout (UI only)
   Ownership: body.medicom .promo-area …

   Root cause: Plugin markup uses Bootstrap `col-lg-4` (3 columns / 12).
   With 4 features, item 4 wraps to a second row. Flex tweaks cannot fix that.

   Theme-only fix (Plugins untouched): when a row has 4+ feature columns,
   override to a true 4-up desktop grid. Homepage with 3 items is unchanged.

   Also keep robust icon+title flex so cards stay optically consistent.
   ================================================================== */

/* ------------------------------------------------------------------
   STRUCTURAL FIX — 4 features on ONE desktop row
   Applies only when the promo row actually has a 4th column child.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  body.medicom .promo-area .row.promo-inner-border:has(> :nth-child(4)) > [class*="col-"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
    min-width: 0 !important;
  }

  /*
    Dividers were authored for a 3-up rhythm (:not(:nth-child(3n+1))).
    Re-map to 4-up so separators sit between items on a single row.
  */
  body.medicom .promo-area .row.promo-inner-border:has(> :nth-child(4)) > [class*="col-"] .single-promo::before {
    content: none !important;
    display: none !important;
  }

  body.medicom .promo-area .row.promo-inner-border:has(> :nth-child(4)) > [class*="col-"]:not(:nth-child(4n + 1)) .single-promo::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset-inline-start: -50px;
    inset-inline-end: auto;
    left: auto;
    right: auto;
    top: 0;
    height: 100%;
    width: 2px;
    background-color: #f2f3f5;
  }

  /* Slightly less end padding so four equal columns stay comfortable */
  body.medicom .promo-area .row.promo-inner-border:has(> :nth-child(4)) .single-promo.theme-three-padding {
    padding-inline-end: 1.5rem;
    padding-right: 1.5rem;
  }
}

[dir="rtl"] body.medicom .promo-area .row.promo-inner-border:has(> :nth-child(4)) > [class*="col-"]:not(:nth-child(4n + 1)) .single-promo::before,
html[dir="rtl"] body.medicom .promo-area .row.promo-inner-border:has(> :nth-child(4)) > [class*="col-"]:not(:nth-child(4n + 1)) .single-promo::before {
  inset-inline-start: auto;
  inset-inline-end: -50px;
  left: auto;
  right: -50px;
}

/* Tablet: keep Bootstrap col-md-6 (2-up). Mobile: full-width stack. */

/* ------------------------------------------------------------------
   Card shell — equal height / shrink-safe columns
   ------------------------------------------------------------------ */
body.medicom .promo-area .row.promo-inner-border,
body.medicom .promo-area .row {
  align-items: stretch;
}

body.medicom .promo-area .row > [class*="col-"] {
  display: flex;
  min-width: 0;
}

body.medicom .promo-area .single-promo {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------
   Icon + title on one line (all cards, no special-casing)
   ------------------------------------------------------------------ */
body.medicom .promo-area .single-promo .single-promo-flex {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 1.25rem !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.medicom .promo-area .single-promo .single-promo-icon {
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  line-height: 1 !important;
}

body.medicom .promo-area .single-promo .single-promo-contents {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
}

body.medicom .promo-area .single-promo .single-promo-contents-title {
  margin: 0 !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

body.medicom .promo-area .single-promo .single-promo-contents-para {
  margin-bottom: 0;
}

[dir="rtl"] body.medicom .promo-area .single-promo .single-promo-flex,
html[dir="rtl"] body.medicom .promo-area .single-promo .single-promo-flex {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

@media (max-width: 767.98px) {
  body.medicom .promo-area .single-promo .single-promo-flex {
    gap: 1rem !important;
  }
}

/* ------------------------------------------------------------------
   Shop footer class hook — same rules as homepage promo-area
   (selectors already use .promo-area; this documents the shop class.)
   Icon glyphs: keep line-box stable next to titles.
   ------------------------------------------------------------------ */
body.medicom .promo-area.medicom-service-features .single-promo-icon i {
  display: inline-block;
  line-height: 1;
  font-style: normal;
}