/* ============================================================
   Case study / news article - page-level CSS
   Figma: desktop 1491:23239, mobile 1586:64161. No tablet frame: 768-1024
   follows the mobile frame.

   The article body is the post content, styled here (.entry-content); the
   Trusted Partnerships band is built here (no other template uses it).
   Everything else is a shared class that carries its own look.
   ============================================================ */

/* ── Article body (1491:23334) ────────────────────────────── */
.article__section--body {
    padding: var(--space-section) var(--space-gutter);
}
.article__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
}
/* Block gaps from the frames (desktop 1491:23334, mobile 1586:64692): 24 between blocks, 20 from a heading to what follows.
   Two classes, because the p / h2 resets below would otherwise zero them. */
.article__inner.entry-content > * + * { margin-top: 24px; }
.article__inner.entry-content > :is(h2, h3, h4) + * { margin-top: 20px; }
.entry-content p {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
}
.entry-content h2,
.entry-content h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    color: var(--color-text);
}
.entry-content h4 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
    color: var(--color-text);
}
.entry-content a { color: var(--color-primary); text-decoration: underline; }
.entry-content a:hover { color: var(--color-primary-hover); }
.entry-content a:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.entry-content img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
/* Uploaded video: a 16:9 frame the width of the column. Square or portrait files are letterboxed (contain), never cropped. */
.entry-content video {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 12px;
    background: var(--color-secondary);
}

/* Photo gallery in the body (<div class="article-gallery"><figure><img></figure>…): three columns, each photo at its own ratio, never cropped */
.entry-content .article-gallery { column-count: 3; column-gap: 24px; }
.entry-content .article-gallery figure { margin: 0 0 24px; break-inside: avoid; }
.entry-content .article-gallery img { width: 100%; }

/* The feature list: a teal circle, then the line in body text (Alex, 21 Oct: was H4-sized) */
.entry-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.entry-content ul > li {
    position: relative;
    padding-left: 36px;   /* the 24 circle and the frame's 12 gap */
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
}
.entry-content ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
}
/* The four white dots on the disc (assets/icons/bullet-dots.svg, the supplied bullet): a mask, so the disc stays on the colour token */
.entry-content ul > li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: var(--color-surface);
    -webkit-mask: url("../../assets/icons/bullet-dots.svg") center / contain no-repeat;
    mask: url("../../assets/icons/bullet-dots.svg") center / contain no-repeat;
}
.entry-content ol { margin: 0; padding-left: 24px; }
.entry-content ol > li { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); }

/* ── Related articles (1491:24096) ────────────────────────── */
.article__section--related { padding-top: var(--space-section); padding-bottom: var(--space-section-alt); }

/* The Trusted Partnerships band is the shared ImageBand class; the section carries no padding of its own */
.article__section--band { padding: 0; }
.article__section--band .image-band__inner { min-height: 497px; }   /* the frame's band height (1498:24794) */

/* ── Tablet and mobile ────────────────────────────────────── */
@media (max-width: 1024px) {
    .article__section--band .image-band__inner { min-height: 0; }
    .article__section--body { padding: var(--space-section) var(--space-gutter); }
    .entry-content h2,
    .entry-content h3 {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
}

@media (max-width: 767px) {
    .entry-content .article-gallery { column-count: 2; column-gap: 12px; }
    .entry-content .article-gallery figure { margin-bottom: 12px; }
}