/* Article (blog / newsroom post) page — self-contained, layered AFTER the Webflow CSS.
   Each post renders inside a .u-section.u-theme-dark, so text colour comes from the
   dark-theme tokens; this file only adds the readable-measure layout + rich-text rhythm. */

.article_wrap {
  width: 100%;
  max-width: 46rem;            /* ~readable measure for long-form body */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color: var(--_theme---text);
}

.article_back {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  width: max-content;
  font-size: .9rem;
  letter-spacing: .01em;
  color: var(--_theme---text);
  opacity: .7;
  text-decoration: none;
  transition: opacity .2s ease;
}
.article_back:hover { opacity: 1; }

.article_eyebrow .u-eyebrow-layout { display: flex; align-items: center; gap: .55rem; }
.article_eyebrow .u-eyebrow-marker {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--swatch--colors3, #d5fe70);
}
.article_eyebrow .u-eyebrow-text {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; opacity: .85;
}

.article_title {
  font-family: 'Zalando Sans', sans-serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem);
  margin: .25rem 0 0;
}

.article_meta { font-size: .92rem; opacity: .65; margin: 0; }

.article_lede {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height: 1.5;
  opacity: .85;
  margin: .25rem 0 0;
}

.article_hero { margin: 1.5rem 0 .5rem; }
.article_hero img { width: 100%; height: auto; display: block; border-radius: 14px; }

/* ---- Rich-text body ---- */
.article_body { font-size: 1.075rem; line-height: 1.72; color: var(--_theme---text); }
.article_body > * { margin-top: 0; }
.article_body > * + * { margin-top: 1.15em; }
.article_body h2 {
  font-family: 'Zalando Sans', sans-serif; font-weight: 600; line-height: 1.2;
  letter-spacing: -.01em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: 2.2rem;
}
.article_body h3 {
  font-family: 'Zalando Sans', sans-serif; font-weight: 600; line-height: 1.25;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); margin-top: 1.8rem;
}
.article_body h4 { font-weight: 600; font-size: 1.15rem; margin-top: 1.5rem; }
.article_body p { margin-top: 1.15em; }
.article_body a {
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--swatch--colors3, #d5fe70);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  transition: color .15s ease;
}
.article_body a:hover { color: var(--swatch--colors3, #d5fe70); }
.article_body ul, .article_body ol {
  margin-top: 1.15em; padding-left: 1.4em; display: flex; flex-direction: column; gap: .5em;
}
.article_body li { line-height: 1.65; }
.article_body li::marker { color: var(--swatch--colors3, #d5fe70); }
.article_body img { width: 100%; height: auto; border-radius: 12px; margin-top: 1.5rem; }
.article_body figure { margin-top: 1.5rem; }
.article_body blockquote {
  margin-top: 1.4em; padding-left: 1.1rem;
  border-left: 3px solid var(--swatch--colors3, #d5fe70); opacity: .92; font-style: italic;
}
.article_body pre {
  margin-top: 1.4em; padding: 1rem 1.2rem; border-radius: 12px;
  background: rgba(255, 255, 255, .06); overflow: auto; font-size: .95rem;
}
.article_body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: rgba(255, 255, 255, .08); padding: .12em .4em; border-radius: 6px;
}
.article_body pre code { background: none; padding: 0; }
.article_body strong { font-weight: 600; }
.article_body hr { border: none; border-top: 1px solid var(--_theme---border); margin-top: 1.8rem; }

/* ---- Newsroom post: external-source CTA ---- */
.article_source {
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--_theme---border);
  display: flex; flex-direction: column; gap: .75rem; align-items: flex-start;
}
.article_source_link {
  display: inline-flex; align-items: center; gap: .5em; width: max-content;
  padding: .7rem 1.15rem; border-radius: 999px;
  background: var(--swatch--colors3, #d5fe70); color: #002017; font-weight: 600;
  text-decoration: none; transition: transform .15s ease, filter .15s ease;
}
.article_source_link:hover { transform: translateY(-1px); filter: brightness(1.05); }

@media (max-width: 767px) {
  .article_hero img { border-radius: 10px; }
}