/* ============================================================
   G2C — ARTICLE / LONG-FORM POST STYLES
   ------------------------------------------------------------
   Loaded on the front end (after main.css and style.css) AND
   inside the block editor, so patterns and block styles look the
   same in wp-admin as they do live.

   Every class here is namespaced `art-` / `is-style-g2c-` so it
   cannot collide with the homepage class library in main.css.

   Typography note: the source design used Space Grotesk + Inter.
   This is remapped to Outfit (the site face) throughout, with
   hierarchy carried by weight instead of by typeface.

   Colour vars come from main.css :root on the front end and from
   editor-vars.css inside the editor.
   ============================================================ */


/* ---------- 8. ARTICLE HERO ---------- */

.art-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 64px 0 0;
  position: relative;
  overflow: hidden;
}

.art-hero::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 141, 54, .20), transparent 68%);
  pointer-events: none;
}

.art-hero .wrap {
  position: relative;
  z-index: 2;
}

/* main.css sets h1 colour to navy; the hero is navy. */
.art-hero h1 {
  font-size: clamp(1.85rem, 3.9vw, 2.85rem);
  line-height: 1.13;
  letter-spacing: -.025em;
  max-width: 20ch;
  margin: 0 0 22px;
  color: #fff;
}

.art-crumb {
  font-size: .84rem;
  color: rgba(255, 255, 255, .62);
  margin-bottom: 22px;
}

.art-crumb a:hover {
  color: var(--orange);
}

/* Category pill. Base is the design's orange; the c-<slug>
   variants tie it to the same accent system as .insight .cat in
   main.css, retuned for light-on-navy legibility. */
.art-cat {
  display: inline-block;
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .42em .95em;
  border-radius: 999px;
  background: rgba(235, 141, 54, .20);
  color: var(--orange);
  margin-bottom: 20px;
}

.art-cat.c-news       { background: rgba(235,  90,  30, .24); color: #FFB184; }
.art-cat.c-insight    { background: rgba( 66, 202, 253, .18); color: var(--sky); }
.art-cat.c-technology { background: rgba( 66, 202, 253, .14); color: #9BE0FB; }
.art-cat.c-financing  { background: rgba(255, 255, 255, .14); color: #C9D6F2; }
.art-cat.c-report     { background: rgba(235, 141,  54, .20); color: var(--orange); }

.art-standfirst {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: rgba(255, 255, 255, .82);
  max-width: 62ch;
  margin: 0 0 30px;
}

.art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: .86rem;
  color: rgba(255, 255, 255, .6);
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.art-meta strong {
  color: rgba(255, 255, 255, .9);
  font-weight: 600;
}

/* No figures strip: the meta rule would otherwise sit flush
   against the bottom of the hero. */
.art-hero.no-facts .art-meta {
  border-bottom: 0;
  padding-bottom: 58px;
}


/* ---------- 9. KEY FIGURES STRIP (4-up) ---------- */

/* Column count is set explicitly from the number of figures
   entered, so 2 or 3 figures never leave an empty cell. */
.art-facts {
  display: grid;
  padding: 34px 0 50px;
}

.art-facts.n1 { grid-template-columns: 1fr; }
.art-facts.n2 { grid-template-columns: repeat(2, 1fr); }
.art-facts.n3 { grid-template-columns: repeat(3, 1fr); }
.art-facts.n4 { grid-template-columns: repeat(4, 1fr); }

.art-fact {
  padding: 0 22px;
}

.art-fact:first-child {
  padding-left: 0;
}

.art-fact + .art-fact {
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.art-fact .n {
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  color: var(--orange);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 8px;
}

.art-fact .l {
  font-size: .82rem;
  color: rgba(255, 255, 255, .66);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .art-facts.n3,
  .art-facts.n4 { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .art-facts.n3 .art-fact:nth-child(odd),
  .art-facts.n4 .art-fact:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 520px) {
  .art-facts,
  .art-facts.n2,
  .art-facts.n3,
  .art-facts.n4 { grid-template-columns: 1fr; row-gap: 26px; }
  .art-fact,
  .art-fact + .art-fact { padding-left: 0; border-left: 0; }
}


/* ---------- ARTICLE BODY WRAPPER ---------- */

/* The hero supplies the top spacing, and the CTA band supplies
   the bottom, so the shared .inner padding is trimmed here. */
.inner-article {
  padding-top: 56px;
  padding-bottom: 0;
}


/* ---------- 1. LEDE  (Paragraph block style) ---------- */

.is-style-g2c-lede {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--navy-2);
  font-weight: 500;
}


/* ---------- 2. PULL QUOTE  (Paragraph block style) ---------- */

.is-style-g2c-pull {
  border-left: 4px solid var(--orange);
  padding: 6px 0 6px 28px;
  margin: 42px 0;
  font-weight: 600;
  font-size: clamp(1.18rem, 2.1vw, 1.42rem);
  line-height: 1.35;
  color: var(--navy);
  letter-spacing: -.015em;
}


/* ---------- 3. DIAMOND BULLETS  (List block style) ---------- */

ul.is-style-g2c-diamond,
ol.is-style-g2c-diamond {
  list-style: none;
  padding-left: 0;
  margin: 0 0 24px;
}

ul.is-style-g2c-diamond li,
ol.is-style-g2c-diamond li {
  position: relative;
  padding-left: 30px;
  margin: 0 0 14px;
  font-size: 1.04rem;
}

ul.is-style-g2c-diamond li + li,
ol.is-style-g2c-diamond li + li {
  margin-top: 0;
}

ul.is-style-g2c-diamond li::before,
ol.is-style-g2c-diamond li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--orange);
  transform: rotate(45deg);
}


/* ---------- 6. PLAYBOOK STEPS  (List block style) ---------- */

/* Numbered cards. Editors type list items normally; bold the
   first phrase and it becomes the step title. */
ul.is-style-g2c-play,
ol.is-style-g2c-play,
ul.is-style-g2c-cards,
ol.is-style-g2c-cards {
  counter-reset: pp;
  list-style: none;
  padding-left: 0;
  margin: 32px 0 42px;
  display: grid;
  gap: 14px;
}

ul.is-style-g2c-play li,
ol.is-style-g2c-play li,
ul.is-style-g2c-cards li,
ol.is-style-g2c-cards li {
  counter-increment: pp;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 22px 26px 22px 72px;
  font-size: 1rem;
  color: var(--muted);
  margin: 0;
}

ul.is-style-g2c-play li + li,
ol.is-style-g2c-play li + li,
ul.is-style-g2c-cards li + li,
ol.is-style-g2c-cards li + li {
  margin-top: 0;
}

ul.is-style-g2c-play li::before,
ol.is-style-g2c-play li::before,
ul.is-style-g2c-cards li::before,
ol.is-style-g2c-cards li::before {
  content: counter(pp);
  position: absolute;
  left: 23px;
  top: 21px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Deliberately NOT applied to is-style-g2c-cards: a card list uses bold for
   ordinary mid-sentence emphasis, and display:block would break the sentence
   across lines. Use Playbook Steps when the leading bold IS the title. */
ul.is-style-g2c-play li strong,
ol.is-style-g2c-play li strong {
  display: block;
  color: var(--navy);
  margin-bottom: 4px;
  font-size: 1.02rem;
  font-weight: 700;
}


/* ---------- 5. CALLOUT ---------- */

.art-callout {
  background: var(--bg-cool);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sky-deep);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 26px 28px;
  margin: 36px 0;
}

/* core/group wraps children in .wp-block-group__inner-container on
   the front end but not in the editor canvas. display:contents
   makes the two identical, so one set of child rules covers both. */
.art-callout > .wp-block-group__inner-container,
.art-drows  > .wp-block-group__inner-container,
.art-drow   > .wp-block-group__inner-container,
.art-sources > .wp-block-group__inner-container {
  display: contents;
}

/* Descendant, not child: core/group keeps the paragraphs inside
   .wp-block-group__inner-container in the DOM even though display:contents
   removes its box, so `.art-callout > *` would match only that wrapper. */
.art-callout p,
.art-callout ul,
.art-callout ol {
  margin: 0;
  font-size: 1rem;
}

/* Sibling combinators are spelled out per pair because a callout can hold a
   nested list as well as paragraphs. */
.art-callout p + p,
.art-callout p + ul,
.art-callout p + ol,
.art-callout ul + p,
.art-callout ol + p {
  margin-top: .9em;
}

.art-callout ul,
.art-callout ol {
  padding-left: 1.4em;
}

.art-callout li + li {
  margin-top: .25em;
}

.art-callout .art-k {
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sky-deep);
  display: block;
  margin: 0 0 10px;
}


/* ---------- 4. DATA ROWS ---------- */

.art-drows {
  margin: 30px 0 42px;
  border-top: 1px solid var(--line);
}

/* Three flat siblings are placed explicitly, so the footnote
   paragraph is optional without breaking the grid. */
.art-drow {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.art-dn {
  grid-column: 1;
  grid-row: 1;
  font-weight: 700;
  font-size: 1.32rem;
  color: var(--orange-deep);
  letter-spacing: -.02em;
  margin: 0;
}

.art-dl {
  grid-column: 2;
  grid-row: 1;
  font-size: 1rem;
  margin: 0;
}

.art-note {
  grid-column: 2;
  grid-row: 2;
  font-size: .86rem;
  color: var(--muted);
  margin: 5px 0 0;
}

@media (max-width: 600px) {
  .art-drow {
    grid-template-columns: 1fr;
  }
  /* grid-row must be reset too, not just grid-column: leaving the explicit
     row values put .art-dn and .art-dl in the same cell, printing the figure
     on top of its label. Auto lets all parts stack in document order. */
  .art-dn,
  .art-tag,
  .art-dl,
  .art-note {
    grid-column: 1;
    grid-row: auto;
  }
  .art-note {
    margin-top: 4px;
  }
}


/* ---------- 7. SOURCES ---------- */

.art-sources {
  border-top: 1px solid var(--line);
  margin-top: 52px;
  padding-top: 26px;
}

.art-sources-h,
h2.art-sources-h,
h3.art-sources-h,
h4.art-sources-h {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 600;
}

/* padding, not margin: a two-digit marker ("10.") overflows an 18px
   margin and gets clipped. */
.art-sources ol {
  margin: 0;
  padding-left: 2em;
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.7;
}

.art-sources ol li + li {
  margin-top: .3em;
}


/* ---------- 10. END-OF-ARTICLE CTA BAND ---------- */

.art-cta {
  background: var(--bg-cool);
  border-top: 1px solid var(--line);
  padding: 70px 0;
  margin-top: 60px;
  text-align: center;
}

.art-cta h2 {
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  color: var(--navy);
  letter-spacing: -.025em;
  margin: 0 0 16px;
  line-height: 1.2;
}

.art-cta p {
  color: var(--muted);
  max-width: 58ch;
  margin: 0 auto 28px;
  font-size: 1.05rem;
}


/* ---------- FEATURED IMAGE ---------- */

/* .frame sits outside .entry, so it misses the .entry img rules. */
.inner .frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
}


/* ============================================================
   COMPONENTS FOR THE 2026-09-01 POST BATCH
   Added for insight-pots-phase-out / insight-tem-consolidation /
   news-pmcs-power. Same Outfit remap as everything above.
   ============================================================ */


/* ---------- TIMELINE  (Data Rows variant) ---------- */

/* Structurally identical to .art-drows — the first column just carries a
   navy date instead of a big orange statistic. */
.art-timeline .art-drow {
  grid-template-columns: 172px 1fr;
  column-gap: 26px;
  padding: 22px 0;
  align-items: start;
}

.art-timeline .art-dn {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
}

/* Status pill under the date. A normal paragraph placed in column 1, row 2,
   so it stays editable rather than being inline markup. */
.art-tag {
  grid-column: 1;
  grid-row: 2;
  display: block;
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 0 0;
}

.art-tag.t-now  { color: var(--orange-deep); }
.art-tag.t-next { color: var(--sky-deep); }
.art-tag.t-done { color: var(--muted); }


/* ---------- NUMBERED POINTS  (List block style) ---------- */

/* Lighter than Playbook Steps: a rounded-square badge and no card. */
ul.is-style-g2c-points,
ol.is-style-g2c-points {
  counter-reset: pt;
  list-style: none;
  padding-left: 0;
  margin: 30px 0 38px;
  display: grid;
  gap: 16px;
}

ul.is-style-g2c-points li,
ol.is-style-g2c-points li {
  counter-increment: pt;
  position: relative;
  padding-left: 52px;
  font-size: 1.02rem;
  margin: 0;
}

ul.is-style-g2c-points li + li,
ol.is-style-g2c-points li + li {
  margin-top: 0;
}

ul.is-style-g2c-points li::before,
ol.is-style-g2c-points li::before {
  content: counter(pt);
  position: absolute;
  left: 0;
  top: 1px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-cool);
  border: 1px solid var(--line);
  color: var(--navy);
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul.is-style-g2c-points li strong,
ol.is-style-g2c-points li strong {
  display: block;
  margin-bottom: 3px;
  color: var(--navy);
}


/* ---------- HIGHLIGHTED STEP  (list-item block style) ---------- */

ul.is-style-g2c-play li.is-style-g2c-hot,
ol.is-style-g2c-play li.is-style-g2c-hot,
ul.is-style-g2c-cards li.is-style-g2c-hot,
ol.is-style-g2c-cards li.is-style-g2c-hot {
  border-color: var(--orange);
  background: linear-gradient(90deg, rgba(235, 90, 30, .05), transparent 70%);
}

ul.is-style-g2c-play li.is-style-g2c-hot::before,
ol.is-style-g2c-play li.is-style-g2c-hot::before,
ul.is-style-g2c-cards li.is-style-g2c-hot::before,
ol.is-style-g2c-cards li.is-style-g2c-hot::before {
  background: var(--orange-deep);
}


/* ---------- QUOTE CARD  (core/quote) ---------- */

/* style.css sets .entry blockquote with an orange rule, muted italic text.
   Element-qualified here so this ties and wins on source order. */
blockquote.art-pq,
.art-pq {
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: var(--r);
  padding: 34px 38px;
  margin: 44px 0;
  font-style: normal;
}

blockquote.art-pq p,
.art-pq p {
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.42;
  letter-spacing: -.015em;
  color: #fff;
  margin: 0 0 18px;
}

blockquote.art-pq cite,
.art-pq cite {
  display: block;
  font-size: .9rem;
  font-style: normal;
  color: rgba(255, 255, 255, .66);
}

blockquote.art-pq cite strong,
.art-pq cite strong {
  color: var(--orange);
  font-weight: 600;
}


/* ---------- DELIVERABLES BOX ---------- */

.art-deliver {
  background: var(--bg-cool);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 36px 38px;
  margin: 44px 0;
}

.art-deliver > .wp-block-group__inner-container,
.art-xcase > .wp-block-group__inner-container {
  display: contents;
}

.art-deliver h3 {
  margin: 0 0 22px;
  font-size: 1.42rem;
  color: var(--navy);
  letter-spacing: -.02em;
}

/* Term / definition pairs as plain paragraphs — there is no core
   definition-list block, and paragraphs stay editable. */
.art-deliver .art-dt {
  margin: 0 0 3px;
  font-weight: 600;
  color: var(--navy);
  font-size: 1rem;
}

.art-deliver .art-dd {
  margin: 0;
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.55;
}

.art-deliver .art-dd + .art-dt {
  margin-top: 18px;
}

.art-deliver .art-deliver-foot {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .97rem;
  color: var(--navy-2);
  font-weight: 500;
}


/* ---------- CASE STUDY PROMO ---------- */

.art-xcase {
  background: var(--navy);
  color: #fff;
  border-radius: var(--r);
  padding: 38px 40px;
  margin: 52px 0;
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 34px;
  align-items: center;
}

.art-xcase .art-eyebrow {
  display: block;
  margin: 0 0 12px;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sky);
  font-weight: 600;
}

.art-xcase h3 {
  margin: 0 0 12px;
  font-size: 1.28rem;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -.02em;
}

.art-xcase p {
  color: rgba(255, 255, 255, .74);
  font-size: .99rem;
  margin: 0 0 18px;
  max-width: 52ch;
}

.art-xcase .art-xnum {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  color: var(--orange);
  letter-spacing: -.03em;
  line-height: 1;
}

.art-xcase .art-xnum-sub {
  display: block;
  margin: 8px 0 0;
  font-weight: 500;
  font-size: .82rem;
  color: rgba(255, 255, 255, .62);
  letter-spacing: 0;
  max-width: 15ch;
}

.art-xcase a {
  color: var(--orange);
  font-weight: 600;
}

/* The inline-link underline below would read as an artefact on navy. */
.art-xcase p a {
  border-bottom: 0;
}

@media (max-width: 720px) {
  .art-xcase {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}


/* ---------- KICKER LABEL, SHARED ---------- */

.art-k {
  display: block;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.art-deliver .art-k {
  color: var(--orange-deep);
  margin-bottom: 8px;
}


/* ---------- INLINE LINKS IN BODY COPY ---------- */

/* The theme sets text-decoration:none globally, which left body links
   distinguishable by colour alone. */
.entry p a,
.entry li a {
  font-weight: 600;
  border-bottom: 1.5px solid rgba(235, 90, 30, .3);
  transition: border-color .2s;
}

.entry p a:hover,
.entry li a:hover {
  border-color: var(--orange-deep);
}


/* ---------- LATE OVERRIDES ----------
   These must sit after the inline-link block above, which they tie with on
   specificity and would otherwise lose to on source order. */

.art-xcase p a {
  border-bottom: 0;
}