/* ==========================================================================
   cj-article.css
   CJ Digital Publish Connector — layout and typography for pipeline articles
   v2 · 26 July 2026

   This file supplies structure and rhythm. Colour, type scale and widths are
   all tokens, so a site is tuned by overriding tokens, never by editing rules.

   Per-site overrides go in the site's own CSS (Breakdance > Settings >
   Custom Code, or the theme's Additional CSS):

       .cj-article {
         --cj-accent: #ff6700;
         --cj-band-bg: #efefef;
         --cj-table-head-bg: #033260;
       }

   The connector already writes --cj-content inline from the contentWidth
   payload key. That value is read here as the OUTER band width, not as the
   text measure. Text measure is --cj-measure and is set independently.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

.cj-article {
  /* Widths -------------------------------------------------------------- */
  --cj-measure: 680px;                              /* running text        */
  --cj-media: 1040px;                               /* images, tables, CTA */
  --cj-wide: min(var(--cj-content, 1180px), 100%);  /* banded sections     */
  --cj-gutter: clamp(1.25rem, 4vw, 3rem);

  /* Vertical rhythm ----------------------------------------------------- */
  --cj-space-xs: 0.5rem;
  --cj-space-sm: 1rem;
  --cj-space-md: 1.75rem;
  --cj-space-lg: 3rem;
  --cj-space-xl: clamp(3rem, 6vw, 5rem);

  /* Type ---------------------------------------------------------------- */
  --cj-body-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --cj-body-leading: 1.65;
  --cj-h2-size: clamp(1.9rem, 1.45rem + 1.6vw, 2.6rem);
  --cj-h3-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem);
  --cj-heading-leading: 1.12;
  --cj-heading-tracking: 0.01em;

  /* Colour -------------------------------------------------------------- */
  --cj-accent: #ff6700;
  --cj-accent-ink: #ffffff;
  --cj-accent-deep: #033260;
  --cj-band-bg: #f2f4f6;
  --cj-rule: rgba(0, 0, 0, 0.14);
  --cj-muted: rgba(0, 0, 0, 0.6);
  --cj-table-head-bg: #033260;
  --cj-table-head-ink: #ffffff;
  --cj-table-stripe: rgba(0, 0, 0, 0.035);

  /* Buttons ------------------------------------------------------------- */
  --cj-btn-bg: var(--cj-accent);
  --cj-btn-ink: var(--cj-accent-ink);
  --cj-btn-bg-hover: var(--cj-accent-deep);
  --cj-btn-ink-hover: #ffffff;
  --cj-btn-radius: 0px;
  --cj-btn-pad-y: 1rem;
  --cj-btn-pad-x: 2.25rem;
  --cj-btn-weight: 600;
  --cj-btn-tracking: 0.09em;

  /* Media --------------------------------------------------------------- */
  --cj-image-ratio: 16 / 9;
  --cj-image-radius: 0px;

  /* Signature: the short accent bar above each H2. Set width to 0 to
     remove it on sites where it doesn't suit the brand.                   */
  --cj-heading-mark-width: 2.75rem;
  --cj-heading-mark-height: 5px;
  --cj-heading-mark-color: var(--cj-accent);

  font-size: var(--cj-body-size);
  line-height: var(--cj-body-leading);
}

/* --------------------------------------------------------------------------
   2. Measure and containment

   The article itself fills its container. Individual elements are what get
   constrained, so banded sections can run wider than the text they hold.
   -------------------------------------------------------------------------- */

.cj-article {
  max-width: none;
  width: 100%;
}

.cj-article p,
.cj-article h2,
.cj-article h3,
.cj-article h4,
.cj-article h5,
.cj-article h6,
.cj-article ul,
.cj-article ol,
.cj-article dl,
.cj-article blockquote {
  max-width: var(--cj-measure);
  margin-inline: auto;
}

.cj-article .wp-block-media-text,
.cj-article .wp-block-table,
.cj-article .wp-block-image,
.cj-article .wp-block-embed,
.cj-article .wp-block-buttons,
.cj-article .wp-block-columns {
  max-width: var(--cj-media);
  margin-inline: auto;
}

.cj-article .cj-band {
  max-width: var(--cj-wide);
  margin-inline: auto;
}

/* Inside a media-text column, content fills the column rather than
   re-centring at the article measure. */
.cj-article .wp-block-media-text__content > * {
  max-width: none;
  margin-inline: 0;
}

/* --------------------------------------------------------------------------
   3. Vertical rhythm
   -------------------------------------------------------------------------- */

.cj-article p,
.cj-article ul,
.cj-article ol,
.cj-article blockquote {
  margin-block: 0 var(--cj-space-md);
}

.cj-article h2 {
  margin-block: var(--cj-space-xl) var(--cj-space-md);
}

.cj-article h3 {
  margin-block: var(--cj-space-lg) var(--cj-space-sm);
}

.cj-article .wp-block-media-text,
.cj-article .wp-block-table,
.cj-article .wp-block-image,
.cj-article .wp-block-embed {
  margin-block: var(--cj-space-lg);
}

.cj-article .cj-band {
  margin-block: var(--cj-space-xl);
}

/* First and last elements never push against the template. */
.cj-article > *:first-child,
.cj-article > .wp-block-group__inner-container > *:first-child,
.cj-article .cj-band > .wp-block-group__inner-container > *:first-child,
.cj-article .wp-block-media-text__content > *:first-child {
  margin-block-start: 0;
}

.cj-article > *:last-child,
.cj-article > .wp-block-group__inner-container > *:last-child,
.cj-article .cj-band > .wp-block-group__inner-container > *:last-child,
.cj-article .wp-block-media-text__content > *:last-child {
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   4. Headings

   Family and colour are inherited from the site so each brand keeps its own
   voice. Only size, leading and the accent mark are set here.
   -------------------------------------------------------------------------- */

.cj-article h2,
.cj-article h3,
.cj-article h4 {
  line-height: var(--cj-heading-leading);
  letter-spacing: var(--cj-heading-tracking);
  text-wrap: balance;
}

.cj-article h2 {
  font-size: var(--cj-h2-size);
}

.cj-article h3 {
  font-size: var(--cj-h3-size);
}

/* Signature mark. Sits above the heading, not beside it, so it survives
   headings of any length and any writing direction. */
.cj-article h2::before {
  content: "";
  display: block;
  width: var(--cj-heading-mark-width);
  height: var(--cj-heading-mark-height);
  margin-block-end: var(--cj-space-sm);
  background: var(--cj-heading-mark-color);
}

/* --------------------------------------------------------------------------
   5. Body copy and links
   -------------------------------------------------------------------------- */

.cj-article p {
  text-wrap: pretty;
}

/* Links in running text must be visible. The site's global link style is
   black with no underline, which is correct for navigation and wrong for
   prose. Scoped to prose only, so buttons and figures are untouched. */
.cj-article :is(p, li, td, blockquote) a {
  color: var(--cj-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.cj-article :is(p, li, td, blockquote) a:hover,
.cj-article :is(p, li, td, blockquote) a:focus-visible {
  color: var(--cj-accent-deep);
  text-decoration-thickness: 2px;
}

.cj-article a:focus-visible,
.cj-article .wp-block-button__link:focus-visible {
  outline: 2px solid var(--cj-accent-deep);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   6. Lists

   Writers mark list items with a literal dash prefix (CR-007). By the time
   markup reaches here the prefix is gone and the item is a real <li>, often
   with a bold lead-in.
   -------------------------------------------------------------------------- */

.cj-article ul,
.cj-article ol {
  padding-inline-start: 1.4em;
}

.cj-article li {
  margin-block-end: var(--cj-space-sm);
  padding-inline-start: 0.25em;
}

.cj-article li:last-child {
  margin-block-end: 0;
}

.cj-article ul li::marker {
  color: var(--cj-accent);
}

.cj-article ol li::marker {
  color: var(--cj-accent);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. Media and media-text
   -------------------------------------------------------------------------- */

.cj-article img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--cj-image-radius);
}

.cj-article figure {
  margin: 0;
}

.cj-article figcaption {
  margin-block-start: var(--cj-space-xs);
  max-width: var(--cj-measure);
  margin-inline: auto;
  font-size: 0.875em;
  line-height: 1.45;
  color: var(--cj-muted);
}

.cj-article .wp-block-media-text {
  align-items: center;
}

/* A consistent crop stops alternating sections from jittering when a real
   photo replaces a placeholder. */
.cj-article .wp-block-media-text__media img {
  width: 100%;
  aspect-ratio: var(--cj-image-ratio);
  object-fit: cover;
}

.cj-article .wp-block-media-text__content {
  padding-block: 0;
  padding-inline: clamp(1.25rem, 3vw, 2.75rem);
}

/* --------------------------------------------------------------------------
   8. Banded sections
   -------------------------------------------------------------------------- */

.cj-article .cj-band {
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  padding-inline: var(--cj-gutter);
}

/* Bands carry their own background inline from the composer. This keeps the
   default sane if that ever stops arriving. */
.cj-article .cj-band:not(.has-background) {
  background-color: var(--cj-band-bg);
}

/* A band's first heading needs less air above it than one in open flow. */
.cj-article .cj-band > .wp-block-group__inner-container > h2:first-child,
.cj-article .cj-band > h2:first-child {
  margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */

.cj-article .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cj-article .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375em;
  line-height: 1.5;
}

.cj-article .wp-block-table thead th {
  background: var(--cj-table-head-bg);
  color: var(--cj-table-head-ink);
  text-align: start;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.85rem 1rem;
  border: 0;
}

.cj-article .wp-block-table tbody td {
  padding: 0.85rem 1rem;
  border: 0;
  border-block-end: 1px solid var(--cj-rule);
  vertical-align: top;
}

.cj-article .wp-block-table tbody tr:nth-child(even) td {
  background: var(--cj-table-stripe);
}

.cj-article .wp-block-table tbody tr:last-child td {
  border-block-end: 0;
}

/* --------------------------------------------------------------------------
   10. Buttons and the CTA band

   The site's own buttons are square, uppercase and tracked out. Gutenberg's
   default button is none of those, which is why published articles have been
   ending on a grey pill that looks bolted on.
   -------------------------------------------------------------------------- */

.cj-article .wp-block-buttons {
  margin-block: var(--cj-space-md) 0;
}

.cj-article .wp-block-button__link {
  display: inline-block;
  background: var(--cj-btn-bg);
  color: var(--cj-btn-ink);
  border: 0;
  border-radius: var(--cj-btn-radius);
  padding: var(--cj-btn-pad-y) var(--cj-btn-pad-x);
  font-size: 1rem;
  font-weight: var(--cj-btn-weight);
  line-height: 1;
  letter-spacing: var(--cj-btn-tracking);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease,
    transform 200ms ease;
}

.cj-article .wp-block-button__link:hover,
.cj-article .wp-block-button__link:focus-visible {
  background: var(--cj-btn-bg-hover);
  color: var(--cj-btn-ink-hover);
  transform: translateY(-1px);
}

.cj-article .cj-cta {
  text-align: center;
}

.cj-article .cj-cta h2 {
  margin-block-end: var(--cj-space-sm);
}

/* The CTA heading's accent mark centres with the heading. */
.cj-article .cj-cta h2::before {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   11. Quotes and rules
   -------------------------------------------------------------------------- */

.cj-article blockquote {
  padding-inline-start: var(--cj-space-md);
  border-inline-start: 4px solid var(--cj-accent);
  font-size: 1.125em;
  line-height: 1.5;
}

.cj-article blockquote cite {
  display: block;
  margin-block-start: var(--cj-space-xs);
  font-size: 0.8125em;
  font-style: normal;
  color: var(--cj-muted);
}

.cj-article hr,
.cj-article .wp-block-separator {
  max-width: var(--cj-measure);
  margin-block: var(--cj-space-lg);
  margin-inline: auto;
  border: 0;
  border-block-start: 1px solid var(--cj-rule);
}

/* --------------------------------------------------------------------------
   12. Narrow screens

   Gutenberg stacks media-text at 600px, which is far too late once the image
   column is a percentage of a wide container. Stacking at 781px keeps the
   image from being squeezed into an unreadable sliver.
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {
  .cj-article .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;
  }

  .cj-article
    .wp-block-media-text.is-stacked-on-mobile
    .wp-block-media-text__media {
    grid-column: 1;
    grid-row: 1;
  }

  .cj-article
    .wp-block-media-text.is-stacked-on-mobile
    .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 2;
    padding-inline: 0;
    padding-block-start: var(--cj-space-md);
  }

  .cj-article .cj-band {
    padding-inline: var(--cj-space-md);
  }

  .cj-article .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   13. Accessibility and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cj-article *,
  .cj-article *::before,
  .cj-article *::after {
    transition-duration: 0.01ms !important;
  }

  .cj-article .wp-block-button__link:hover {
    transform: none;
  }
}

@media print {
  .cj-article .cj-band {
    background: none !important;
    padding-inline: 0;
  }

  .cj-article .cj-cta {
    display: none;
  }

  .cj-article :is(p, li) a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    word-break: break-all;
  }
}