/**
 * Money-page modules: [cm_answer], [cm_key_facts], [cm_trust_strip] and the group that
 * holds the answer and key facts (.cm-money-top). Markup: inc/money-modules.php.
 * Loaded only on pages that use one of the shortcodes (inc/enqueue-assets.php).
 * Based on Robi's modules.20260928.css; text is #000071 on white or #f2f7fa (WCAG AA).
 * New date in the file name on every change: CloudFront ignores ?ver on theme assets.
 */

/* The answer box itself is styled in learning-blocks.*.css, loaded with this file for [cm_answer] */

/* Answer and key facts after the hero: stacked, side by side on wide screens. */
.cm-money-top {
  box-sizing: border-box;
  max-width: 1180px;
  margin: 40px auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* The group's constrained layout centres its children with auto margins,
   which would shrink grid items to their content: make them fill the cell. */
.cm-money-top > * {
  width: 100%;
  box-sizing: border-box;
}

.cm-money-top > .coinmama-answer {
  margin: 0;
}

/* [cm_answer] on pages: page sections colour their text blue; keep the box dark. */
.coinmama-answer[data-cta-location="answer_box"] p {
  color: #000071;
}

/* Key facts without an answer beside them: a readable width, centred. */
.cm-money-top > .cm-keyfacts:only-child {
  max-width: 900px;
}

@media screen and (min-width: 992px) {
  .cm-money-top:has(> .coinmama-answer):has(> .cm-keyfacts) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* Key facts */
.cm-keyfacts {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e3e9f2;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 113, 0.06);
  padding: 24px;
  color: #000071;
}

.cm-keyfacts__title {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: #000071;
}

.cm-keyfacts__list {
  margin: 0;
  padding: 0;
}

.cm-keyfacts__row {
  display: grid;
  grid-template-columns: minmax(120px, 30%) minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  border-bottom: 1px solid #e3e9f2;
  padding: 10px 0;
  font-size: 15px;
  line-height: 1.5;
}

.cm-keyfacts__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.cm-keyfacts__row dt {
  margin: 0;
  font-weight: 400;
  color: #000071;
}

.cm-keyfacts__row dd {
  margin: 0;
  font-weight: 700;
  color: #000071;
  overflow-wrap: anywhere;
}

/* Links carry the same colour as the text, so they keep their underline
   (main.css removes it from every "main a:link"). */
.cm-keyfacts a:link,
.cm-keyfacts a:visited,
.cm-trust-strip a:link,
.cm-trust-strip a:visited {
  color: #000071;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cm-keyfacts a:hover,
.cm-trust-strip a:hover {
  text-decoration-thickness: 2px;
}

.cm-keyfacts a:focus-visible,
.cm-trust-strip a:focus-visible {
  outline: 2px solid #000071;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Price row: the price line (price-blocks.css) with its "As of" note below. */
.cm-keyfacts__row--price .cm-price-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.cm-keyfacts__asof {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: #000071;
}

@media screen and (max-width: 480px) {
  .cm-keyfacts {
    padding: 20px 16px;
  }

  .cm-keyfacts__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }
}

/* Trust strip (replaces the count-up strip): 4 columns, 2 on tablets, 1 on phones. */
.cm-trust-strip {
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  margin: 24px auto;
  padding: 24px;
  background: #f2f7fa;
  border-radius: 14px;
  color: #000071;
}

.cm-trust-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 28px;
}

.cm-trust-strip__item {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #000071;
}

.cm-trust-strip__item strong {
  display: block;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
}

.cm-trust-strip__item span {
  display: block;
  margin-top: 4px;
}

@media screen and (max-width: 1023px) {
  .cm-trust-strip__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 599px) {
  .cm-trust-strip {
    padding: 20px 16px;
  }

  .cm-trust-strip__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}