/* ============================================================
   OnlyFacts — Methodology page BODY (node 7:9069 / 7:10709)
   All page-specific CSS lives here (loaded after brand.css).
   The 4H formula stays as an image; everything else is semantic HTML.
   ============================================================ */

/* ---------- Body layout ---------- */
.of-mbody { font-family: var(--font-body); color: #202020; }
.of-mbody > section { margin-top: 56px; }
.of-mbody > section:first-child { margin-top: 8px; }

/* Section heading (Geologica Black ~28px, left-aligned in body) */
.of-mhead { font-family: var(--font-body); font-weight: 900; font-size: 28px; line-height: 1.15; color: #202020; margin: 0 0 24px; }

/* Body paragraphs */
.of-mp { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.5; color: #202020; margin: 0 0 16px; }
.of-mp:last-child { margin-bottom: 0; }
.of-mp b { font-weight: 700; }
.of-mlink { color: var(--c-blue); text-decoration: none; }
.of-mlink:hover { text-decoration: underline; }

/* ---------- 2. Key content cards ---------- */
.of-mcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.of-mcard {
  border: 1.5px solid #D9E6EC; border-radius: 20px; padding: 28px 24px;
  display: flex; flex-direction: column;
}
.of-mcard__icon { width: 68px; height: 68px; display: block; margin-bottom: 56px; }
.of-mcard__title { font-family: var(--font-body); font-weight: 900; font-size: 18px; line-height: 1.2; color: #202020; margin: 0 0 12px; }
.of-mcard__desc { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.45; color: #202020; margin: 0; }

/* ---------- 3 & 7. Beige plates ---------- */
.of-plate {
  background: #FBF3E3; border-radius: 20px; padding: 22px 24px;
  display: grid; grid-template-columns: 172px 1fr; gap: 18px;
}
.of-mplates { display: flex; flex-direction: column; gap: 16px; }

/* Plate left column */
.of-plate__label { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 1.3; color: #9a948a; margin: 0 0 10px; }
.of-plate__cadence { font-family: var(--font-body); font-weight: 700; font-size: 17px; line-height: 1.2; color: #202020; margin: 0; }

/* white chips */
.of-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.of-chip {
  display: inline-flex; align-items: center;
  background: #fff; border: 1px solid #ECE3D0; border-radius: 9px;
  padding: 6px 11px; font-family: var(--font-body); font-weight: 700; font-size: 13px; line-height: 1.2; color: #202020;
}

/* category outline pill */
.of-cpill {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid currentColor; border-radius: 999px; background: transparent;
  padding: 5px 12px; font-family: var(--font-body); font-weight: 700; font-size: 11px; line-height: 1.2;
  align-self: flex-start; white-space: nowrap;
}
.of-cpill--news    { color: #DA3E22; }
.of-cpill--reg     { color: #0173BC; }
.of-cpill--info    { color: #3FB6CE; }
.of-cpill--insider { color: #E8A13C; }

/* left column stacks: label+cadence/chips at top, pill pinned to bottom */
.of-plate__left { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.of-plate__left .of-cpill { margin-top: auto; }

/* right column */
.of-plate__right { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.of-plate__right .of-chips { margin-bottom: 14px; }
.of-plate__right .of-mp { font-size: 14px; line-height: 1.5; }
.of-plate__right .of-mp:last-child { margin-bottom: 0; }
.of-plate__mlabel { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 1.3; color: #9a948a; margin: 0 0 8px; }

/* bullet lists inside plates / definitions */
.of-mlist { margin: 4px 0 0; padding-left: 20px; }
.of-mlist li { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.5; color: #202020; margin: 0; }

/* ---------- Tab rows (static; first tab active) ---------- */
.of-tabs { display: flex; flex-wrap: nowrap; gap: 20px; border-bottom: 1px solid #ECE3D0; margin-bottom: 12px;
  overflow-x: auto; scrollbar-width: none; }
.of-tabs::-webkit-scrollbar { display: none; }
.of-tab {
  font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 1.2; color: #6b665c;
  padding: 0 0 8px; background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap; margin-bottom: -1px; flex: none;
}
.of-tab.is-active { font-weight: 700; color: #202020; border-bottom-color: var(--c-yellow-strong); }

/* ---------- 6. Formula image ---------- */
.of-formula { display: block; width: 100%; height: auto; border-radius: 20px; margin: 0; }

/* ---------- 8. Definitions ---------- */
.of-defs { display: flex; flex-direction: column; gap: 24px; }
.of-def { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.5; color: #202020; margin: 0; }
.of-def b { font-weight: 700; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .of-mbody > section { margin-top: 40px; }
  .of-mhead { font-size: 24px; margin-bottom: 16px; }
  .of-mcards { grid-template-columns: 1fr; gap: 12px; }
  .of-mcard { padding: 24px 20px; }
  .of-mcard__icon { margin-bottom: 24px; }
  .of-plate { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .of-plate__left { gap: 14px; }
  .of-tabs { gap: 16px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .of-tabs::-webkit-scrollbar { display: none; }
}