/* ==========================================================================
   Article page.

   The cloud backdrop is a background on the opening block rather than an
   image element, so the copy can sit over it without anything being
   absolutely positioned. The ornament down the left is a flex column: a short
   rule, the flower, then a rule that grows to fill whatever height the article
   turns out to be.
   ========================================================================== */

:root {
  --article-column-width: 74.3125rem;   /* 1189px — the measured column */
  --article-decor-width: 8.6875rem;     /* 139px — column edge to hairline */
  --article-decor-mark: clamp(4.5rem, 7.2vw, 8.5rem);
  /* 55px and 45px on a desktop screen — reached from about 1370px wide — and
     easing down below that, so a phone is not handed a 55px headline. */
  --article-title-size: clamp(2rem, 4vw, 3.4375rem);
  --article-h2-size: clamp(1.625rem, 3.3vw, 2.8125rem);
  /* A phone sits on the floors of the two scales above, 32px and 26px, and
     that read too close to the body copy; a quarter up from each. */
  --article-title-size-mobile: 2.5rem;
  --article-h2-size-mobile: 2.03125rem;
  --article-h3-size: clamp(1.375rem, 1.9vw, 2.25rem);
  --article-body-size: clamp(1rem, 0.9vw, 1.0625rem);
  --article-body-lh: 1.75;
  --article-quote-size: clamp(1.25rem, 2vw, 2.34rem);
  --article-quote-mark: clamp(1.5rem, 1.9vw, 2.25rem);
  /* 15px on the 1920 canvas, down from the 18px category size it used to
     borrow — the credit should sit under the quote, not beside it in weight. */
  --article-quote-name-size: clamp(0.8125rem, 0.9vw, 0.9375rem);
  --article-gap: clamp(1.5rem, 2.4vw, 2.75rem);
  --article-backdrop: var(--gradient-sky);
}

/* ---- Backdrop + shell ---- */

.article__top {
  background-image: var(--article-backdrop);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% var(--gradient-sky-height);
  padding-bottom: clamp(2.5rem, 5vw, 6rem);
}

.breadcrumbs { padding-block: 0; }

/* An ordered list, because the trail has a real order — but the numbers are
   the browser's idea, not the design's. base.css clears the markers on <ul>
   only, so this one has to say so itself. */
.breadcrumbs__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  color: var(--color-body-muted);
}

.breadcrumbs__item a { transition: color var(--duration-fast) var(--ease-standard); }
.breadcrumbs__item a:hover { color: var(--color-accent); }

.breadcrumbs__sep {
  display: flex;
  align-items: center;
  color: var(--color-gray-3);
}

.article__shell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
}

/* ---- The ornament down the left ---- */

/* The hairline sits on the column's own left edge and the flower is centred
   over it, which is why the mark is pulled back by half its width rather than
   the whole column being centred. */
.article__decor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 var(--article-decor-width);
  padding-top: clamp(1.5rem, 3vw, 3.75rem);
}

.article__gutter { flex: 0 0 var(--article-decor-width); }

.article__decor-line {
  width: 1px;
  background: var(--color-dove-taupe);
}

.article__decor-line--short { height: clamp(2rem, 4vw, 5rem); }
.article__decor-line--long { flex: 1 1 auto; }

.article__decor-mark {
  width: var(--article-decor-mark);
  height: auto;
  margin-block: 0.5rem;
  margin-left: calc(var(--article-decor-mark) / -2);
}

/* ---- The column of copy ---- */

.article__column {
  display: flex;
  flex-direction: column;
  gap: var(--article-gap);
  flex: 1 1 var(--article-column-width);
  max-width: var(--article-column-width);
  min-width: 0;
  padding-block: clamp(1.5rem, 3vw, 3.75rem) 0;
}

.article__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
}

.article__category { transition: opacity var(--duration-fast) var(--ease-standard); }
.article__category:hover { opacity: 0.75; }

.article__title {
  font-family: var(--font-heading);
  font-size: var(--article-title-size);
  line-height: 1.15;
  letter-spacing: var(--text-h1-ls);
  font-weight: var(--text-h1-weight);
  color: var(--color-heading);
}

.article__lede {
  font-family: var(--font-body);
  font-size: var(--article-body-size);
  line-height: var(--article-body-lh);
  color: var(--color-body-on-light);
}

.article__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 16 / 9;
}

.article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- The article body ----
   These rules dress whatever the editor writes, so they target elements
   rather than classes: the writer should never have to remember a class name
   to get the house style. */

.article__body {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  font-family: var(--font-body);
  font-size: var(--article-body-size);
  line-height: var(--article-body-lh);
  color: var(--color-body-on-light);
}

.article__body h2,
.article__body h3,
.article__body h4 {
  margin-block: clamp(1.25rem, 2.2vw, 2.5rem) 0.25rem;
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-heading);
}

.article__body h2 { font-size: var(--article-h2-size); line-height: 1.2; }
.article__body h3 { font-size: var(--article-h3-size); line-height: 1.25; }
.article__body h4 { font-size: var(--text-h4-size); line-height: var(--text-h4-lh); }

.article__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* A component dropped into the copy is not prose. The "read next" box is a
   whole card wrapped in a link, so it must not take the underline and mauve a
   link inside a sentence gets — scoped under .article__body so it outranks the
   rule above without reaching for !important. */
.article__body .fz-readnext__card {
  color: inherit;
  text-decoration: none;
}

.article__body strong { font-weight: 600; color: var(--color-heading); }

.article__body img {
  border-radius: var(--radius-card);
}

.article__body ul,
.article__body ol {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.25rem;
  list-style: revert;
}

.article__body li { padding-left: 0.25rem; }

/* The rule between sections: the same diamond-ended graphic the section
   kickers use. `margin-inline: 0 auto` because the browser's own <hr> rule
   centres it, which pushed it into the middle of the column instead of
   starting where the words start. */
.article__body hr {
  width: 25rem;
  max-width: 100%;
  height: 1rem;
  margin-block: clamp(1.25rem, 2.2vw, 2.5rem);
  margin-inline: 0 auto;
  border: 0;
  background-image: url("../images/brand/divider.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* Pull quote: the flower sits at the head of a hairline that runs down the
   left of the words. Two backgrounds rather than a border, so the line can
   start beneath the flower and share its centre line — a border would sit at
   the box edge, half a flower away from where it belongs. */
.article__body blockquote {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-block: clamp(1.25rem, 2.2vw, 2.5rem);
  margin-inline: 0;
  padding-left: clamp(2.5rem, 3.6vw, 4rem);
  background-image:
    url("../images/brand/flower-mark-gold.png"),
    linear-gradient(var(--color-soft-gold), var(--color-soft-gold));
  background-repeat: no-repeat, no-repeat;
  background-position:
    left top,
    calc(var(--article-quote-mark) / 2) calc(var(--article-quote-mark) + 0.25rem);
  background-size:
    var(--article-quote-mark) auto,
    1px calc(100% - var(--article-quote-mark) - 0.25rem);
  font-family: var(--font-editorial);
  font-size: var(--article-quote-size);
  line-height: 1.45;
  font-weight: 500;
  color: var(--color-heading);
}

.article__body blockquote p { margin: 0; }

/* The name sits under the quote, so it is set smaller than the words it
   credits and in the deep pink rather than the lighter mauve — quieter than
   the quote, but still clearly part of it. */
.article__body blockquote cite,
.article__body blockquote footer {
  font-size: var(--article-quote-name-size);
  font-style: normal;
  font-weight: 500;
  color: var(--color-plum-deep);
}

/* Equal space either side of the rule. The body is a flex column with its own
   gap, and a heading or a quote brings a top margin of its own on top of that
   — so a rule followed by a heading had 20px more room below it than above.
   The rule's own margin is the spacing; whatever touches it drops its own.
   Placed after the heading and quote rules so it wins on order at equal
   weight, without reaching for !important. */
.article__body > hr + * { margin-top: 0; }
.article__body > :has(+ hr) { margin-bottom: 0; }

/* ---- Related articles ---- */

.article__related { margin-top: clamp(2rem, 4vw, 5rem); }

/* ---- Responsive ---- */

@media (max-width: 1180px) {
  .article__decor,
  .article__gutter { display: none; }
  .article__column { max-width: 52rem; }
}

@media (max-width: 767px) {
  :root {
    --article-title-size: var(--article-title-size-mobile);
    --article-h2-size: var(--article-h2-size-mobile);
  }

  /* Not `cover`: the wash is a gradient now, and cover would stretch it down
     the whole article instead of leaving it a band across the top. */
  .article__top {
    background-size: var(--gradient-sky-width-mobile) var(--gradient-sky-height-mobile);
  }

  .article__body hr { width: 100%; }

  /* The trail is three links deep and the last of them is the headline that
     is already on screen a few pixels below — pure noise at this width. */
  .breadcrumbs { display: none; }
}

/* ==========================================================================
   RELATED ARTICLES — a row on a wide screen, a one-up slider on a phone

   Same markup either way. Above the breakpoint the track is a plain wrapping
   row and the carousel has nothing to scroll, so it sits inert; below it the
   slides go full width and the dots appear.
   ========================================================================== */

/* Scoped under .article__related so these outrank .fz-cards and .fz-cards > *
   in the plugin stylesheet, which loads after this file and would otherwise
   win every tie on equal specificity — leaving the track wrapping instead of
   sliding. */
.article__related .article__related-track { transition: transform var(--duration-base) var(--ease-standard); }

.article__related .article__related-slide { display: flex; min-width: 0; }
.article__related .article__related-slide > * { flex: 1 1 auto; min-width: 0; }

.article__related-dots { display: none; }

/* Same reasoning as the category list: no widget above this row to set the
   column count, so the template's own stylesheet does it. */
@media (max-width: 1024px) {
  .article__related .fz-cards { --fz-cards-columns: 2; }
}

@media (max-width: 767px) {
  .article__related .fz-cards { --fz-cards-columns: 1; }
  .article__related-viewport { overflow: hidden; }

  .article__related .article__related-track { flex-wrap: nowrap; }

  .article__related .article__related-slide {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .article__related .link-read-more { display: none; }

  .article__related-dots {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 1.75rem;
  }
}