/* ==========================================================================
   Component: case study article (body.page-node-type-article .node__content)
   Full single case-study page — an "Article" node with no dedicated
   template, so it renders through Drupal core's default node.html.twig.
   Styled generically here to read consistently with the .cm-case-card
   teasers (case-study-card.css) that link into it: same muted-2 uppercase
   tag treatment, same accent colour on the highlight list.

   Vertical rhythm uses margin-bottom only on body-field children — same
   rationale as legacy-page.css: one number controls the gap after any
   element, so it can't collapse unpredictably with whatever comes next.
   ========================================================================== */

body.page-node-type-article .node__content {
  padding-block: 40px 88px;
}

/* --- Hero image ------------------------------------------------------------ */
/* Overrides bootstrap_barrio's own `.node .field--type-image { float: left }`
   (themes/contrib/bootstrap_barrio/css/components/field.css) — that parent-
   theme default is what was floating the image and wrapping the meta panel
   beside it instead of stacking full-width. */
body.page-node-type-article .node__content .field--name-field-image {
  float: none;
  margin: 0 0 32px;
  border-radius: var(--cm-radius-card);
  overflow: hidden;
  box-shadow: var(--cm-shadow);
}

body.page-node-type-article .node__content .field--name-field-image img {
  display: block;
  width: 100%;
  height: 320px;
  margin: 0;
  object-fit: cover;
}

/* --- Body copy: base rhythm ------------------------------------------------ */
body.page-node-type-article .node__content .field--name-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--cm-ink);
}

/* Reset a global `strong { display: inherit; font-size: 20px; }` rule that
   lives elsewhere in the theme (not this file) — inherited display turns
   every <strong> into a block since its parent <p> is block, which is what
   breaks a "Label: value | Label: value" line into stacked chunks. Neutral
   here; the rules below re-apply their own size/weight/colour on purpose. */
body.page-node-type-article .node__content .field--name-body strong {
  display: inline;
  font-size: inherit;
  color: inherit;
  font-weight: 700;
}

body.page-node-type-article .node__content .field--name-body > * {
  margin: 0 0 20px;
}

body.page-node-type-article .node__content .field--name-body > *:last-child {
  margin-bottom: 0;
}

/* Meta panel: "Locations: X | Date: Y | Sector: Z | Client type: W" — a
   full-width statement strip, using the theme's navy "statement surface"
   (see tokens.css) rather than the quiet paper-grey used elsewhere, so it
   reads as a deliberate fact block for the case study. */
body.page-node-type-article .node__content .field--name-body > p:first-child {
  padding: 16px 20px;
  background: var(--cm-navy);
  border-radius: var(--cm-radius-insert);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--cm-on-dark);
  margin-bottom: 32px;
}

body.page-node-type-article .node__content .field--name-body > p:first-child strong {
  font-weight: 600;
  color: white;
}

/* Extra space directly above a heading, added to whatever precedes it —
   same bottom-only-margin rationale as legacy-page.css: one number
   controls the gap, so it can't collapse unpredictably. */
body.page-node-type-article .node__content .field--name-body > :has(+ h2) {
  margin-bottom: 40px;
}

body.page-node-type-article .node__content .field--name-body > :has(+ h3) {
  margin-bottom: 32px;
}

/* Real headings, for case studies that have been cleaned up from bold-only
   paragraphs to actual semantic <h2>/<h3>. */
body.page-node-type-article .node__content .field--name-body h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3;
  color: var(--cm-ink);
}

body.page-node-type-article .node__content .field--name-body h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--cm-ink);
}

/* Highlight list */
body.page-node-type-article .node__content .field--name-body ul {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 12px;
}

body.page-node-type-article .node__content .field--name-body li {
  position: relative;
  padding-left: 26px;
  line-height: 1.6;
}

body.page-node-type-article .node__content .field--name-body li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cm-ink);
}

body.page-node-type-article .node__content .field--name-body a {
  color: var(--cm-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.page-node-type-article .node__content .field--name-body a:hover {
  color: var(--cm-red-hover);
}

/* --- Hide admin/internal chrome not meant for a public case-study page ---- */
body.page-node-type-article .node__meta,
body.page-node-type-article .comment-wrapper {
  display: none;
}

@media (max-width: 640px) {
  body.page-node-type-article .node__content .field--name-field-image img {
    height: 220px;
  }
}