/* ============================================================
   MCAKey Product Description Stylesheet
   File: mcakey-functions/assets/css/product-desc.css
   Namespace: .mca-product-desc  (.mpd-*)

   Brand vars (Elementor globals):
     --e-global-color-primary:   #1E90FF
     --e-global-color-secondary: #0D3B2E
     --e-global-color-text:      #1A1A1A
     --e-global-color-accent:    #7FD820
   ============================================================ */


/* ── RESET / BASE ─────────────────────────────────────────── */
.mca-product-desc,
.mca-product-desc * {
  box-sizing: border-box;
}

.mca-product-desc {
  /* Body text matches soft360 spec: 16px / 150% */
  font-size: 16px;
  line-height: 1.5;
  color: var(--e-global-color-text, #1A1A1A);
  border-radius: 20px;
}

.mca-product-desc p {
  font-size: 16px;
  line-height: 150%;
  margin: 0 0 10px;
}

.mca-product-desc p:last-child {
  margin-bottom: 0;
}

.mca-product-desc strong {
  font-weight: 600;
}

.mca-product-desc img {
  max-width: 100%;
  height: auto;
}

.mca-product-desc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ── HEADINGS ─────────────────────────────────────────────── */

/* H2 — section titles (matches soft360 h3 spec: 34px) */
.mca-product-desc .mpd-h2 {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--e-global-color-text, #1A1A1A);
  margin: 0 0 56px;
}

/* H3 — card/feature headings */
.mca-product-desc .mpd-h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--e-global-color-text, #1A1A1A);
  margin: 0 0 10px;
}


/* ── SECTIONS ─────────────────────────────────────────────── */
.mpd-section {
  /* No gap and no per-section radius — sections flow edge-to-edge as one
     continuous card (.mca-product-desc carries the outer radius; see below),
     with only the alternating background marking where one ends and the
     next begins, instead of reading as separate stacked tiles. */
  padding: 56px 0;
}

/* Scroll offset so anchored tabs clear sticky header */
[id^="mpd-"] {
  scroll-margin-top: 130px;
}

.mpd-section--gray {
  background: #f4f6f8;
  padding-left: 48px;
  padding-right: 48px;
}

.mpd-section--white {
  background: #ffffff;
  padding-left: 48px;
  padding-right: 48px;
}

/* Match the outer .mca-product-desc radius on the first/last section only,
   so the whole stack reads as one rounded card despite each section owning
   its own full-bleed background. */
.mca-product-desc > .mpd-section:first-child {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  /* The intro section is always white, regardless of which section--*
     modifier class ends up on it. */
  background: #ffffff;
}

.mca-product-desc > .mpd-section:last-child {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  /* The FAQ section (now the last section) is always white too — first and
     last sections bookend the page in white regardless of markup class. */
  background: #ffffff;
}

.mpd-section__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px;
}

.mpd-section__header > img {
  display: block;
  margin: 0 auto 16px;
}

.mpd-section__sub {
  font-size: 16px;
  line-height: 150%;
  color: #5b6475;
  margin: 0;
}


/* ── INTRO ────────────────────────────────────────────────── */
.mpd-intro {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 40px;
  align-items: start;
  margin-bottom: 32px;
}

/* Hero image now lives in its own full-width div below .mpd-intro (both
   columns), rather than stacked inside .mpd-intro__body's text column —
   centered rather than left-aligned since it no longer stretches to fill
   the column width. */
.mpd-intro__media {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

/* Override h2 margin inside intro — closer to content */
.mpd-intro__body .mpd-h2 {
  margin-bottom: 24px;
}


/* ── QUICK FACTS ──────────────────────────────────────────── */
/* Qualified with .mca-product-desc — the base reset's ".mca-product-desc ul"
   (0,1,1) otherwise beats a bare ".mpd-facts" (0,1,0) and wins the margin. */
.mca-product-desc .mpd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 4px 0 20px;
}

.mpd-facts li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: #f4f6f8;
  border: 1px solid #e4e7eb;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
}

.mpd-facts__label {
  color: #5b6475;
  font-weight: 500;
}

.mpd-facts__value {
  color: var(--e-global-color-text, #1A1A1A);
  font-weight: 600;
}

/* Qualified with .mca-product-desc — the base reset's ".mca-product-desc img"
   (0,1,1) otherwise beats a bare ".mpd-intro__img" (0,1,0) and its own
   width/height:auto rules. No forced aspect-ratio box: width/height:auto
   with both max-width AND max-height means the browser scales the image
   down to fit within that bounding box at its OWN natural aspect ratio —
   nothing cropped, nothing letterboxed, and since the rendered box is
   exactly the image's own (scaled) shape, border-radius clips the real
   visible photo edges directly, on every image regardless of its natural
   aspect ratio. max-height exists specifically so a portrait/mismatched
   source image can't blow out the section's vertical space the way plain
   width:100%;height:auto did originally. */
.mca-product-desc .mpd-intro__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 580px;
  max-height: 420px;
  border-radius: 8px;
}

/* Badge panel */
.mpd-intro__badge {
  border-radius: 22px;
  padding: 32px 24px;
  color: #ffffff;
  text-align: center;
  position: sticky;
  top: 24px;
  overflow: hidden;
}

.mpd-intro__badge-logo {
  display: block;
  margin: 0 auto 16px;
  /* Plain white — the badge background is a dynamic per-category gradient
     (set inline from BADGE_PRESETS), and white is the one color guaranteed
     to read against all of them, from light centers to near-black edges. */
  color: #ffffff;
  position: relative;
  z-index: 1;
}

.mpd-intro__badge-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 20px;
  position: relative;
  z-index: 1;
}

.mpd-intro__badge-pills {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 16px !important;
}

.mpd-intro__badge-pills li {
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.mpd-intro__sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  border-top: 1px solid #dde0e5;
  padding-top: 32px;
}


/* ── FEATURE CARDS ────────────────────────────────────────── */
.mpd-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Ghost outline at rest — just the border, no fill, no shadow — that fills
   in white and lifts on hover. */
.mpd-card {
  border: 1px solid #eee;
  box-sizing: border-box;
  border-radius: 24px;
  padding: 28px 24px;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

/*
  Hover:
  - Background: white (transparent at rest)
  - Border: accent at 40% alpha
  - Shadow: primary at 18% alpha
  - Small lift for a tactile, not-flat feel
*/
/* --mpd-category-accent is set inline on the root .mca-product-desc div by
   claude.ts's applyCardAccent() — only when getCardAccentColor() judged the
   category's badge color bright/dark enough to work as a card accent (see
   types/index.ts). When present, border AND glow both switch to that one
   category color for a cohesive themed hover, matching the badge. When
   absent (category excluded, or older content generated before this existed)
   this falls through to the original fixed two-tone hover unchanged: accent
   green border, primary blue glow. */
.mpd-card:hover {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--mpd-category-accent, var(--e-global-color-accent, #7FD820)) 40%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--mpd-category-accent, var(--e-global-color-primary, #1E90FF)) 16%, transparent);
  transform: translateY(-3px);
}

/* Icon chip: a soft category-tinted background behind the icon. Padding on
   the icon element itself (rather than a wrapper) since the icon is fixed
   at 40x40 via HTML attributes — CSS padding just adds the chip around it. */
.mpd-card__icon {
  display: block;
  box-sizing: content-box;
  margin-bottom: 14px;
  padding: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mpd-category-accent, var(--e-global-color-accent, #7FD820)) 12%, transparent);
  color: var(--mpd-category-accent, var(--e-global-color-accent, #7FD820));
}

.mpd-card .mpd-h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.mpd-card p {
  font-size: 14px;
  color: #4a5260;
  line-height: 1.6;
  margin: 0;
}


/* ── ALTERNATING FEATURES ─────────────────────────────────── */
.mpd-alt {
  display: flex;
  flex-direction: column;
}

.mpd-alt__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 48px 0;
  border-bottom: 1px solid #dde0e5;
}

.mpd-alt__item:first-child {
  padding-top: 0;
}

.mpd-alt__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Reverse: image right, text left */
.mpd-alt__item--reverse .mpd-alt__media {
  order: 2;
}

.mpd-alt__item--reverse .mpd-alt__content {
  order: 1;
}

.mpd-alt__media img {
  display: block;
  width: 100%;
  /* !important: confirmed live — Elementor's global ".elementor img {
     border-radius: 0 }" (frontend.min.css) has the exact same specificity
     (0,1,1) as this bare "X img" selector and wins on source order, so the
     radius was silently lost. display/width aren't contested the same way
     (verified via computed styles), so only this property needs it. */
  border-radius: 8px !important;
}

.mpd-alt__content .mpd-h3 {
  position: relative;
  font-size: 24px;
  margin-bottom: 20px;
  padding-bottom: 14px;
}

/* Short accent rule under each benefit headline — brand accent green. */
.mpd-alt__content .mpd-h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--e-global-color-accent, #7FD820);
}

.mpd-alt__content p {
  color: #3d4451;
}


/* ── FEATURE POINTS ───────────────────────────────────────── */
.mpd-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 48px;
  margin-bottom: 40px;
}

.mpd-point {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.mpd-point__icon {
  flex-shrink: 0;
  box-sizing: content-box;
  /* -4px: net back out the 6px padding added below so the visible icon still
     sits ~2px down from the row top, same as before the padding was added. */
  margin-top: -4px;
  padding: 6px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--mpd-category-accent, var(--e-global-color-accent, #7FD820)) 10%, transparent);
  color: var(--mpd-category-accent, var(--e-global-color-accent, #7FD820));
}

.mpd-point__body .mpd-h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.mpd-point__body p {
  font-size: 15px;
  color: #4a5260;
  margin: 0;
}


/* ── REQUIREMENTS NOTE ────────────────────────────────────── */
.mpd-requirements {
  font-size: 15px;
  color: #3d4451;
  line-height: 1.7;
  background: color-mix(in srgb, var(--e-global-color-primary, #1E90FF) 6%, #f8f9fb);
  border-left: 3px solid var(--e-global-color-primary, #1E90FF);
  border-radius: 0 6px 6px 0;
  padding: 20px 24px;
  margin: 0;
}

.mpd-requirements strong {
  color: var(--e-global-color-text, #1A1A1A);
}


/* ── FAQ ───────────────────────────────────────────────────── */
.mpd-faq {
  display: flex;
  flex-direction: column;
  max-width: 820px;
  margin: 0 auto;
}

.mpd-faq__item {
  padding: 24px 0;
  border-bottom: 1px solid #dde0e5;
}

.mpd-faq__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mpd-faq__item .mpd-h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.mpd-faq__item p {
  color: #4a5260;
  font-size: 15px;
  margin: 0;
}

/* Factual accuracy caveat (e.g. a bundled app whose backend service has
   since been retired) — deliberately neutral/amber, not the requirements
   box's brand-blue, so it doesn't read as a spec but as a heads-up. */
.mpd-note {
  font-size: 14px;
  line-height: 1.6;
  color: #6b5a2e;
  background: #fbf6e9;
  border-left: 3px solid #d8b45c;
  border-radius: 0 6px 6px 0;
  padding: 16px 20px;
  margin: 32px 0 0;
}


/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .mpd-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .mca-product-desc .mpd-h2 {
    font-size: 28px;
    margin-bottom: 40px;
  }
}

@media (max-width: 960px) {
  .mpd-section--gray,
  .mpd-section--white {
    padding-left: 28px;
    padding-right: 28px;
  }

  .mpd-intro {
    grid-template-columns: 1fr;
  }

  .mpd-intro__badge {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    text-align: left;
    padding: 24px 20px;
  }

  .mpd-intro__badge-logo {
    margin: 0;
    flex-shrink: 0;
  }

  .mpd-intro__badge-text {
    flex: 1;
    margin: 0;
    min-width: 180px;
  }

  .mpd-intro__badge-pills {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .mpd-intro__sub {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mpd-alt__item,
  .mpd-alt__item--reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .mpd-alt__item--reverse .mpd-alt__media,
  .mpd-alt__item--reverse .mpd-alt__content {
    order: unset;
  }

  .mpd-points {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 600px) {
  .mpd-section {
    padding: 40px 0;
  }

  .mpd-section--gray,
  .mpd-section--white {
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 8px;
  }

  .mpd-cards {
    grid-template-columns: 1fr;
  }

  .mca-product-desc .mpd-h2 {
    font-size: 24px;
    margin-bottom: 28px;
  }

  .mca-product-desc .mpd-h3 {
    font-size: 18px;
  }
}