/* Article layout — obesity-insights blog posts */

.article {
  --article-bleed: 120px;
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/* Standfirst — the deck line under the hero */
.article__deck {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: 1.5;
  color: var(--color-text-heading);
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

/* Vertical rhythm — more air between sections than the default stack */
.article .content-section {
  margin-bottom: var(--space-16);
}

.article .content-section:last-child {
  margin-bottom: 0;
}

/* Figures break out past the text measure, and their edges are
   feathered so they read as illustrations rather than pasted squares. */
.article-figure {
  margin: var(--space-12) calc(-1 * var(--article-bleed));
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}

/* Portrait diagrams sit centred at their natural size, feathered on the
   sides only — top and bottom crops would eat the labels. */
.article-figure--portrait {
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
}

.article-figure--portrait img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: add;
}

.article-figure figcaption {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-top: var(--space-3);
  padding: 0 var(--article-bleed);
}

/* Reduced-width figure — sits centred inside the bleed box */
.article-figure--sm img,
.article-figure--sm .article-video__frame {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

/* Video embed — same bleed as landscape figures, no feathering
   (a masked edge would clip the player chrome) */
.article-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-darker);
  box-shadow: var(--shadow-md);
}

.article-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Text and figure side by side */
.article-split {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: var(--space-10);
  align-items: center;
}

.article-split > :last-child {
  margin-bottom: 0;
}

.article-split .article-figure {
  margin: 0;
  max-width: none;
}

/* Softer feather — a narrow column can't spare 16% on each side */
.article-split .article-figure--portrait img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.article-split .article-figure figcaption {
  padding: 0;
  text-align: left;
}

@media (max-width: 899px) {
  .article-split {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .article-split .article-figure {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }

  .article-split .article-figure figcaption {
    text-align: center;
  }
}

/* Tick list — benefits, credentials */
.content-section ul.article-ticks {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--space-4);
}

.content-section ul.article-ticks > li {
  position: relative;
  padding-left: var(--space-10);
  margin-bottom: var(--space-4);
  line-height: 1.7;
}

.content-section ul.article-ticks > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.content-section ul.article-ticks > li::after {
  content: '';
  position: absolute;
  left: 0.48rem;
  top: 0.5em;
  width: 0.32rem;
  height: 0.62rem;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Numbered steps — the procedure walkthrough */
.content-section ul.article-steps {
  list-style: none;
  padding-left: 0;
  counter-reset: article-step;
  margin-bottom: var(--space-4);
}

.content-section ul.article-steps > li {
  position: relative;
  padding-left: var(--space-12);
  margin-bottom: var(--space-5);
  line-height: 1.7;
  min-height: 2rem;
}

.content-section ul.article-steps > li::before {
  counter-increment: article-step;
  content: counter(article-step);
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bordered aside — eligibility criteria */
.article-callout {
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-4);
}

.article-callout > :last-child {
  margin-bottom: 0;
}

/* Full-width panel — the practice credentials block */
.article-panel {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  margin: 0 calc(-1 * var(--space-8));
}

.article-panel > :last-child {
  margin-bottom: 0;
}

/* Closing CTA */
.article-cta {
  text-align: center;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-10);
}

/* Centred heading — drop the left accent bar */
.article-cta h2 {
  padding-left: 0;
}

.article-cta h2::before {
  display: none;
}

.article-cta .btn-primary {
  margin-top: var(--space-2);
}

/* Disclaimer */
.article-disclaimer {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.7;
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 1099px) {
  .article {
    --article-bleed: 0px;
  }

  .article-panel {
    margin-left: 0;
    margin-right: 0;
    padding: var(--space-6);
  }
}

@media (max-width: 767px) {
  .article__deck {
    font-size: var(--text-xl);
  }

  .article .content-section {
    margin-bottom: var(--space-12);
  }

  .article-figure {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
  }

  .article-figure--sm img,
  .article-figure--sm .article-video__frame {
    width: 100%;
  }
}