/*
 * "Modules and features" on the Products page: the module directory (.mgroups > .mgroup > .mgrid > .mcard).
 * Loaded on that page only. Icons: server/site/render/icons_premium.js (duotone, coloured from here). Motion: 200-280 ms, transform / shadow / colour only,
 * switched off under prefers-reduced-motion. Same skin as the home cards (css/cards.css): white-to-blue gradient, 20px corners, blue top rule on hover.
 */
.modules .container { max-inline-size: 1240px; }
.modules .section-head { margin-block-end: 8px; }
.modules .section-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.modules .section-head .lead { max-inline-size: 60ch; }
.mgroups { display: grid; gap: 56px; margin-block-start: 36px; }

/* ---------------------------------------------------------------- group header */
.mgroup { --pi-soft: rgba(22, 119, 255, .18); --pi-acc: #1677ff; --pi-card: #fff; --mg-a: #1677ff; --mg-b: #0b4fb3; }
.mgroup--stock { --pi-acc: #0f62d9; --mg-a: #13294f; --mg-b: #0b1d3a; }
.mgroup--control { --pi-acc: #c9a349; --mg-a: #c9a349; --mg-b: #7a5c0c; }
.mgroup--platform { --pi-acc: #38bdf8; --mg-a: #38bdf8; --mg-b: #0b6fa8; }
.mgroup-head { display: flex; align-items: center; gap: 16px; padding-block-end: 18px; margin-block-end: 22px; border-block-end: 2px solid #dbe7f8; position: relative; }
.mgroup-head::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: -2px; inline-size: 96px; block-size: 2px; background: linear-gradient(90deg, var(--mg-a), var(--mg-b)); }
.mgroup-head > div { flex: 1; min-inline-size: 0; }
.mgroup-head h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.25; color: var(--navy-900); }
.mgroup-head p { margin: 4px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.mgroup-ico { display: grid; place-items: center; flex: none; inline-size: 64px; block-size: 64px; border-radius: 18px; color: #fff;
  background: linear-gradient(145deg, var(--mg-a), var(--mg-b)); box-shadow: 0 10px 22px rgba(11, 29, 58, .22), inset 0 1px 0 rgba(255, 255, 255, .22);
  --pi-soft: rgba(255, 255, 255, .24); --pi-acc: #fff1c2; --pi-card: transparent; }
.mgroup--stock .mgroup-ico { --pi-acc: #e3bd5c; }
.mgroup-ico .pi, .mgroup-ico .ico { inline-size: 40px; block-size: 40px; }
.mgroup-count { flex: none; display: grid; place-items: center; min-inline-size: 36px; block-size: 36px; padding-inline: 10px; border-radius: 999px; background: #fff; border: 1px solid #cfe1fb; color: var(--blue-700); font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the cards */
.mgrid { display: grid; gap: 20px; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
@media (min-width: 640px) { .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mgrid > li { display: flex; min-inline-size: 0; }
.mcard {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico body" "more more"; grid-template-rows: auto 1fr; gap: 14px 18px; align-content: start; inline-size: 100%; min-inline-size: 0; overflow: hidden;
  padding: 24px 24px 20px; text-decoration: none; color: var(--ink); background: linear-gradient(180deg, #fff 0%, #f6faff 100%); border: 1px solid #d8e4f6; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(11, 31, 68, .05), 0 8px 22px rgba(11, 31, 68, .06);
  transition: transform .26s cubic-bezier(.2, .7, .2, 1), box-shadow .26s ease, border-color .26s ease;
}
.mcard::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px; background: linear-gradient(90deg, var(--blue), var(--sky)); transform: scaleX(0); transform-origin: left center; transition: transform .28s ease; }
[dir="rtl"] .mcard::before { transform-origin: right center; }
.mcard:hover, .mcard:focus-visible { transform: translateY(-4px); color: var(--ink); border-color: rgba(22, 119, 255, .55); box-shadow: 0 2px 4px rgba(11, 31, 68, .06), 0 18px 40px rgba(22, 119, 255, .16); }
.mcard:hover::before, .mcard:focus-visible::before { transform: scaleX(1); }
.mcard:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.mcard:active { transform: translateY(-1px); }
.mcard-ico { grid-area: ico; display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 18px; color: var(--navy-800);
  background: linear-gradient(145deg, #f3f8ff, #dcebff); border: 1px solid #cfe1fb; box-shadow: inset 0 1px 0 #fff;
  transition: background .26s ease, color .26s ease, transform .26s cubic-bezier(.2, .7, .2, 1), border-color .26s ease; }
.mcard-ico .pi { inline-size: 40px; block-size: 40px; }
.mcard-ico .pi-fallback .ico { inline-size: 30px; block-size: 30px; }
.mcard:hover .mcard-ico, .mcard:focus-visible .mcard-ico { background: linear-gradient(145deg, #1677ff, #0b4fb3); color: #fff; border-color: transparent; transform: translateY(-2px) scale(1.05); --pi-soft: rgba(255, 255, 255, .22); --pi-acc: #ffd978; --pi-card: #0f62d9; }
.mcard-body { grid-area: body; display: grid; gap: 6px; align-content: start; min-inline-size: 0; }
.mcard-body strong { font-size: 1.15rem; line-height: 1.3; color: var(--navy-900); text-wrap: balance; overflow-wrap: anywhere; }
.mcard-body > span { font-size: .98rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.mcard-more { grid-area: more; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block-start: 14px; border-block-start: 1px solid #e3ecf9; font-weight: 700; font-size: .95rem; color: var(--blue-600); }
/* the grid rows are equal height: the footer sits at the bottom of every card */

/* the round arrow (same shape as the home cards; mirrored in Arabic) */
.modules .pgo { display: inline-flex; align-items: center; justify-content: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: #eaf2ff; color: var(--blue-600); flex: none; transition: background-color .24s ease, color .24s ease; }
.modules .pgo .ico { inline-size: 18px; block-size: 18px; transition: transform .24s ease; }
[dir="rtl"] .modules .pgo .ico { transform: scaleX(-1); }
.mcard:hover .pgo, .mcard:focus-visible .pgo { background: var(--blue); color: #fff; }
.mcard:hover .pgo .ico, .mcard:focus-visible .pgo .ico { transform: translateX(2px); }
[dir="rtl"] .mcard:hover .pgo .ico, [dir="rtl"] .mcard:focus-visible .pgo .ico { transform: scaleX(-1) translateX(2px); }

@media (max-width: 639px) {
  .mgroups { gap: 44px; }
  .mgroup-head { gap: 12px; }
  .mgroup-ico { inline-size: 54px; block-size: 54px; border-radius: 16px; }
  .mgroup-ico .pi, .mgroup-ico .ico { inline-size: 34px; block-size: 34px; }
  .mcard { padding: 20px 18px 16px; gap: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mcard, .mcard::before, .mcard-ico, .modules .pgo, .modules .pgo .ico { transition: none; }
  .mcard:hover, .mcard:focus-visible, .mcard:hover .mcard-ico, .mcard:focus-visible .mcard-ico { transform: none; }
  .mcard:hover .pgo .ico, .mcard:focus-visible .pgo .ico { transform: none; }
  [dir="rtl"] .mcard:hover .pgo .ico, [dir="rtl"] .mcard:focus-visible .pgo .ico { transform: scaleX(-1); }
}