/*
 * An article.
 *
 * The body is the page WordPress served and its own stylesheet still lays the
 * blocks out; this sheet loads after it and sets the reading: one column at a
 * readable measure, the site's type, and the spacing between things.
 *
 * The old page put the article inside Divi's `.container > #content-area >
 * #left-area`, which floated it into a 80%-wide column with a sidebar's worth
 * of empty space beside it. It is centred now.
 */

.post {
  padding-block: clamp(2.5rem, 5vw, 4rem) var(--ds-section-gap);
  background: var(--ds-surface);
}

.post__inner {
  max-width: 760px;
}

/* Where you are -------------------------------------------------------- */

.post-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--ds-muted);
  font-size: var(--ds-text-small);
}

.post-crumbs a {
  color: var(--ds-body);
  text-decoration: none;
  text-transform: capitalize;
}

.post-crumbs a:hover,
.post-crumbs a:focus-visible {
  color: var(--ds-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* What you are reading ------------------------------------------------- */

.post-header {
  margin: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}

.post-title {
  margin: 0;
  color: var(--ds-ink);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--ds-tracking-display);
  text-wrap: balance;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  color: var(--ds-body);
  font-size: var(--ds-text-small);
}

/* The body ------------------------------------------------------------- */

/*
 * Divi's own layout wrappers inside the body carry padding and max-widths
 * meant for a full-width page. Flattened here so the article reads as one
 * column: the measure is set once, on this element.
 */
.post-body .et_pb_section,
.post-body .et_pb_row,
.post-body .et_pb_column,
.post-body .et_builder_inner_content {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  float: none;
}

.post-body .et_pb_module {
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.post-body,
.post-body .et_pb_text_inner p,
.post-body p {
  color: var(--ds-body);
  font-family: var(--ds-font);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-align: left;
}

.post-body p {
  margin: 0 0 1.15rem;
}

.post-body h2,
.post-body h3,
.post-body h4 {
  color: var(--ds-ink);
  font-family: var(--ds-font);
  letter-spacing: var(--ds-tracking-tight);
  line-height: 1.25;
  text-wrap: balance;
}

.post-body h2 {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0.85rem;
  font-size: 1.625rem;
  font-weight: 600;
}

.post-body h3 {
  margin: clamp(1.75rem, 3vw, 2.25rem) 0 0.75rem;
  font-size: 1.3125rem;
  font-weight: 600;
}

.post-body h4 {
  margin: 1.5rem 0 0.6rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.post-body a {
  color: var(--ds-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ds-line);
}

.post-body a:hover,
.post-body a:focus-visible {
  text-decoration-color: currentColor;
}

.post-body ul,
.post-body ol {
  margin: 0 0 1.25rem;
  padding-left: 1.35rem;
}

.post-body li {
  margin-bottom: 0.45rem;
  color: var(--ds-body);
}

.post-body img {
  height: auto;
  border-radius: var(--ds-radius-md);
}

.post-body figure,
.post-body .et_pb_image {
  margin: clamp(1.5rem, 3vw, 2rem) 0;
}

.post-body blockquote {
  margin: clamp(1.5rem, 3vw, 2rem) 0;
  padding: 0 0 0 1.25rem;
  border: 0;
  border-left: 2px solid var(--ds-line);
  color: var(--ds-ink);
  font-size: 1.125rem;
}

/* Wide things scroll inside themselves rather than widening the page. */
.post-body table,
.post-body pre,
.post-body .fluid-width-video-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

/* One thing to do ------------------------------------------------------ */

.post-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--ds-radius-lg);
  background: linear-gradient(135deg, var(--ds-surface-ink), var(--ds-surface-ink-2));
  color: oklch(0.88 0.008 264);
}

/* The theme colours every heading outright, so white is stated here. */
.post-cta .ds-h3 {
  color: oklch(1 0 0);
  max-width: 24ch;
}

.post-cta p {
  margin: 0.75rem 0 0;
  max-width: 52ch;
  color: oklch(0.86 0.008 264);
}

.post-cta .ds-button {
  margin-top: 1.5rem;
}

.post-cta__note {
  margin-top: 0.85rem !important;
  color: oklch(0.78 0.01 264) !important;
  font-size: var(--ds-text-label);
}