/* =====================================================================
   resource-article.css
   Site-native article components for long-form Resources / Knowledge pages.
   Additive only. Every selector is scoped under .resource-detail-page so it
   cannot affect any other page. Uses the existing brand tokens from
   styles.css (:root) — no foreign palette, no new fonts (Montserrat inherited).
   First used by: /resources/what-is-an-asset-management-system/
   Reusable by future Resources articles (Blog 03–12 of the series).
   ===================================================================== */

.resource-detail-page {
  /* Light-cyan body tone for clause / lifecycle / stat panels (brand grammar) */
  --lcyan: #ebf5fc;
  /* Lighter cyan for small/italic text on dark or navy panels — clears WCAG AA
     where the base brand cyan (#46aee3) would fail on dark backgrounds */
  --cyan-on-dark: #8fd0f0;
}

/* Shared column width so cards & callouts align with the centred diagrams */
.resource-detail-page .am-block {
  max-width: 1024px;
  margin-inline: auto;
}

/* Match the reference Resources article: pure-black top-level prose */
.resource-detail-page .source-resource-content > p {
  color: #000000;
}

/* ----------------------- Figure with caption ------------------------- */
.resource-detail-page .am-figure {
  max-width: 1024px;
  margin: 28px auto 34px;
}

.resource-detail-page .am-figure img {
  margin: 0 auto;
}

.resource-detail-page .am-figure figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

/* ------- Card stack: connected list of same-type cards (small gap) ------- */
.resource-detail-page .am-card-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1024px;
  margin: 24px auto 34px;
}

/* ----------------------------- KEY INSIGHT ----------------------------- */
.resource-detail-page .insight-box {
  max-width: 1024px;
  margin: 32px auto;
  padding: 24px 28px;
  background: var(--dark);
  border-left: 5px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 18px 40px rgba(19, 29, 38, 0.16);
}

.resource-detail-page .insight-label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-on-dark);
}

.resource-detail-page .insight-box p {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
}

/* --------------------------- Lifecycle card --------------------------- */
.resource-detail-page .lifecycle-card,
.resource-detail-page .clause-card,
.resource-detail-page .layer-card {
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(19, 29, 38, 0.10);
}

.resource-detail-page .lifecycle-card {
  border-left: 4px solid var(--cyan);
}

.resource-detail-page .lc-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 20px;
  background: var(--dark);
}

.resource-detail-page .lc-num {
  min-width: 34px;
  color: var(--cyan-on-dark);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.resource-detail-page .lc-phase {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.resource-detail-page .lc-question {
  padding: 9px 20px;
  background: var(--blue);
  color: var(--cyan-on-dark);
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
}

.resource-detail-page .lc-question::before {
  content: "\25B8"; /* ▸ decorative marker, hidden from assistive tech */
  margin-right: 8px;
}

.resource-detail-page .lc-body {
  padding: 16px 20px;
  background: var(--lcyan);
}

/* ----------------------------- Clause card ---------------------------- */
.resource-detail-page .clause-card {
  border-left: 4px solid var(--cyan);
}

.resource-detail-page .cc-header {
  padding: 12px 20px;
  background: var(--blue);
}

.resource-detail-page .cc-num {
  color: var(--cyan-on-dark);
  font-size: 17px;
  font-weight: 700;
}

.resource-detail-page .cc-name {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
}

.resource-detail-page .cc-body {
  padding: 14px 20px;
  background: var(--lcyan);
}

/* ------------------------------ Layer card ---------------------------- */
.resource-detail-page .layer-card {
  border-left: 4px solid var(--green);
}

.resource-detail-page .lyr-header {
  padding: 12px 20px;
  background: var(--dark);
  color: var(--green);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.resource-detail-page .lyr-body {
  padding: 14px 20px;
  background: var(--grey);
}

/* Body text shared by the three card types — override wide .source-resource-content p */
.resource-detail-page .lc-body p,
.resource-detail-page .cc-body p,
.resource-detail-page .lyr-body p {
  margin: 0;
  color: #1a2230;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

/* ------------------------------- Stat box ----------------------------- */
.resource-detail-page .stat-box {
  max-width: 620px;
  margin: 34px auto;
  padding: 36px 40px;
  text-align: center;
  background: var(--lcyan);
  border-left: 3px solid var(--cyan);
  border-right: 3px solid var(--cyan);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(19, 29, 38, 0.12);
}

.resource-detail-page .stat-number {
  margin-bottom: 8px;
  color: var(--cyan);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.resource-detail-page .stat-label {
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.resource-detail-page .stat-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
}

/* --------------------------- GFMAM group rows ------------------------- */
.resource-detail-page .gfmam-list {
  max-width: 1024px;
  margin: 24px auto 34px;
  padding: 0;
  list-style: none;
}

.resource-detail-page .gfmam-group {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  margin-bottom: 6px;
  padding: 11px 16px;
  background: #ffffff;
  border-left: 3px solid var(--cyan);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 6px 16px rgba(19, 29, 38, 0.06);
  transition: background 0.15s ease;
}

.resource-detail-page .gfmam-group:hover,
.resource-detail-page .gfmam-group.highlight {
  background: var(--lcyan);
}

.resource-detail-page .gfmam-group.highlight .gg-name {
  color: var(--cyan);
}

.resource-detail-page .gg-num {
  min-width: 34px;
  color: var(--cyan);
  font-size: 16px;
  font-weight: 700;
}

.resource-detail-page .gg-name {
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
}

.resource-detail-page .gg-desc {
  color: var(--muted);
  font-size: 15px;
}

/* ------------------------------ Pull quote ---------------------------- */
.resource-detail-page .pull-quote {
  max-width: 760px;
  margin: 48px auto;
  padding: 28px 16px;
  text-align: center;
  color: var(--blue);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
  border-top: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
}

.resource-detail-page .pull-quote.section-quote {
  margin: 40px auto;
}

/* ------------------------------ Responsive ---------------------------- */
@media (max-width: 600px) {
  .resource-detail-page .insight-box {
    padding: 20px 20px;
  }

  .resource-detail-page .insight-box p {
    font-size: 16px;
  }

  .resource-detail-page .stat-box {
    padding: 28px 22px;
  }

  .resource-detail-page .stat-number {
    font-size: 52px;
  }

  .resource-detail-page .stat-label {
    font-size: 17px;
  }

  .resource-detail-page .lc-question {
    font-size: 13px;
  }

  .resource-detail-page .pull-quote {
    font-size: 20px;
    margin: 36px auto;
  }
}