/*
 * Blog single-post template.
 *
 * This bundle owns the Figma-derived article template: breadcrumb strip, photo-left
 * hero, left table-of-contents/share rail, editable intro/takeaway panels, article
 * body, CTA blocks, FAQ accordions, related posts, and the podcast band.
 */

.single-post {
  --ad-blog-blue: var(--ad-color-blue-deep);
  --ad-blog-copy: var(--ad-color-copy);
  --ad-blog-link: var(--ad-color-blue);
  --ad-blog-teal: var(--ad-color-teal);
  --ad-blog-teal-wash: var(--ad-color-mist-strong);
  --ad-blog-blue-wash: var(--ad-color-soft-blue);
  --ad-blog-muted: var(--ad-color-mist);
  --ad-blog-orange: var(--ad-color-alert-red);
  --ad-blog-radius: var(--ad-radius-xl);
  --ad-blog-page-width: 970px;
  --ad-blog-article-width: 1090px;
  --ad-blog-article-gutter: 84px;
  --ad-blog-body-size: 17px;
  --ad-blog-body-line-height: 1.65;

  background: var(--ad-color-white);
  color: var(--ad-blog-blue);
  font-family: var(--ad-font-primary);
}

.single-post *,
.single-post *::before,
.single-post *::after {
  box-sizing: border-box;
}

.single-post__shell {
  width: var(--ad-shell-standard);
  margin-inline: auto;
}

.single-post a {
  color: var(--ad-blog-link);
}

.single-post a:hover {
  text-decoration: underline;
}

.single-post-breadcrumb-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 64px;
  padding-block: 20px;
  padding-inline: calc((100vw - var(--ad-shell-standard)) / 2);
  background: var(--ad-color-white);
  color: var(--ad-blog-blue);
  font-size: var(--ad-type-size-sm);
  font-weight: var(--ad-font-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.single-post-breadcrumb-strip a {
  color: var(--ad-blog-blue);
  text-decoration: none;
}

.single-post-breadcrumb-strip span[aria-current="page"] {
  color: var(--ad-blog-link);
}

.single-post-hero {
  padding: 0 0 64px;
  background: var(--ad-color-white);
}

.single-post-hero__grid {
  display: grid;
  grid-template-columns: 600px minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

.single-post-hero__media figure,
.single-post-hero__media img {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: var(--ad-blog-radius);
}

.single-post-hero__media figure {
  height: 400px;
  overflow: hidden;
}

.single-post-hero__media img {
  height: 100%;
  object-fit: cover;
  transform: scale(1.48);
  transform-origin: 50% 32%;
}

.single-post-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.single-post-hero__category {
  margin: 0 0 16px;
  color: var(--ad-blog-teal);
  font-size: var(--ad-type-size-md);
  font-weight: var(--ad-font-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.single-post__heading {
  width: 100%;
  max-width: 600px;
  margin: 0;
  color: var(--ad-blog-blue);
  font-size: 52px;
  font-weight: var(--ad-font-weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.56px;
  text-wrap: wrap;
}

.ad-blog-post .single-post__heading {
  text-wrap: wrap;
}

.single-post-hero__metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin-top: 20px;
  color: var(--ad-blog-blue);
  font-size: 13.33px;
  font-weight: var(--ad-font-weight-medium);
  line-height: 21px;
}

.single-post-hero__reading {
  color: var(--ad-blog-orange);
}

.single-post-hero__info-container {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 32px;
}

.single-post-hero__avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ad-radius-pill);
}

.single-post-hero__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.single-post-hero__author-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.single-post-hero__author {
  color: var(--ad-blog-blue);
  font-size: 19.2px;
  font-weight: var(--ad-font-weight-semibold);
  line-height: 26px;
}

.single-post-hero__credential {
  color: var(--ad-blog-blue);
  font-size: 13.33px;
  font-weight: var(--ad-font-weight-medium);
  line-height: 21px;
}

.single-post__container {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  /* Center the rail + reading column on the same shell as the hero and related
     sections so every band shares one alignment axis (and the reading column
     can't strand dead space on the right at wide viewports). */
  width: var(--ad-shell-standard);
  margin-inline: auto;
  align-items: stretch;
  background: var(--ad-color-white);
}

.single-post__sidebar {
  background: var(--ad-blog-muted);
}

.single-post__sidebar-inner {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 60px 64px 30px;
  /* Keep the rail shorter than the viewport (scroll it internally if the TOC is
     long). A taller-than-viewport sticky element parks against the bottom of its
     grid cell, and since that cell ends at the FAQ, toggling a FAQ resized the
     cell and made the parked TOC jump. Capping the height keeps it pinned to the
     top instead. */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.single-post__toc-heading {
  margin: 0 0 18px;
  color: var(--ad-blog-blue);
  font-size: var(--ad-type-size-xl);
  font-weight: var(--ad-font-weight-medium);
  line-height: 1.4;
  letter-spacing: 0;
}

.single-post__toc .toc-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-post__toc .toc-list-item {
  margin: 0;
  padding: 0;
}

.ad-timber-site-shell .single-post__toc .toc-link {
  display: block;
  color: var(--ad-blog-blue);
  font-size: var(--ad-type-size-xl);
  font-weight: var(--ad-font-weight-medium);
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
}

.single-post__toc .toc-link:hover,
.single-post__toc .toc-link.is-active-link {
  color: var(--ad-blog-link);
}

.single-post__share-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid var(--ad-color-cool-divider);
}

.single-post__share-heading {
  margin: 0;
  color: var(--ad-blog-blue);
  font-size: var(--ad-type-size-md);
  font-style: italic;
  font-weight: var(--ad-font-weight-medium);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
}

.single-post__share {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-post__share li {
  margin: 0;
  padding: 0;
}

.single-post__share-link {
  position: relative;
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  color: var(--ad-blog-blue);
  text-decoration: none;
  border-radius: var(--ad-radius-pill);
  transition: color 160ms ease, background-color 160ms ease;
}

.single-post__share-link:hover,
.single-post__share-link:focus-visible {
  color: var(--ad-color-white);
  text-decoration: none;
  background: var(--ad-blog-link);
  outline: none;
}

.single-post__share-link svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.single-post__share-link span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
}

.single-post__article-column {
  min-width: 0;
}

.single-post__intro-grid {
  display: grid;
  grid-template-columns: 400px minmax(0, 690px);
  width: 100%;
}

.single-post__summary-panel {
  display: flex;
  min-height: 536px;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  padding: 64px;
  color: var(--ad-blog-blue);
}

.single-post__summary-panel--intro {
  background: var(--ad-blog-teal-wash);
}

.single-post__summary-panel--takeaways {
  background: var(--ad-blog-blue-wash);
}

.single-post__summary-panel h2 {
  width: 100%;
  margin: 0;
  color: var(--ad-blog-blue);
  font-size: var(--ad-type-size-xl);
  font-weight: var(--ad-font-weight-medium);
  line-height: 1.4;
  letter-spacing: 0;
}

.single-post__summary-content {
  width: 100%;
  color: var(--ad-blog-blue);
  font-size: var(--ad-type-size-md);
  font-weight: var(--ad-font-weight-regular);
  line-height: 1.5;
}

.single-post__summary-content > :first-child {
  margin-top: 0;
}

.single-post__summary-content > :last-child {
  margin-bottom: 0;
}

.single-post__summary-content ul,
.single-post__summary-content ol {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding-left: 24px;
}

.single-post__summary-content li {
  padding-left: 0;
}

.brxe-post-content.single-post__content {
  width: 100%;
  margin-inline: 0;
}

.single-post__faq {
  /* Match the article body's text measure so FAQ content shares its edge. */
  width: calc(100% - (var(--ad-blog-article-gutter) * 2));
  margin-inline: auto;
}

.brxe-post-content.single-post__content {
  padding: 60px var(--ad-blog-article-gutter) 0;
  color: var(--ad-blog-blue);
  font-family: var(--ad-font-primary);
  font-size: var(--ad-blog-body-size);
  line-height: var(--ad-blog-body-line-height);
}

.brxe-post-content.single-post__content > :first-child {
  margin-top: 0;
}

.brxe-post-content.single-post__content > :last-child {
  margin-bottom: 0;
}

.brxe-post-content.single-post__content p,
.brxe-post-content.single-post__content li {
  color: var(--ad-blog-blue);
  font-size: var(--ad-blog-body-size);
  line-height: var(--ad-blog-body-line-height);
}

.brxe-post-content.single-post__content p {
  margin: 0 0 28px;
}

.brxe-post-content.single-post__content h2 {
  margin: 72px 0 28px;
  color: var(--ad-blog-blue);
  font-size: var(--ad-type-size-5xl);
  font-weight: var(--ad-font-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0;
}

.brxe-post-content.single-post__content h2:first-child {
  margin-top: 0;
}

.brxe-post-content.single-post__content h3 {
  margin: 52px 0 24px;
  color: var(--ad-blog-blue);
  font-size: var(--ad-type-size-4xl);
  font-weight: var(--ad-font-weight-semibold);
  line-height: 1.3;
  letter-spacing: 0;
}

.brxe-post-content.single-post__content ul,
.brxe-post-content.single-post__content ol {
  margin: 0 0 32px;
  padding-left: 32px;
}

.brxe-post-content.single-post__content li + li {
  margin-top: 12px;
}

.ad-timber-site-shell .brxe-post-content.single-post__content a {
  color: var(--ad-blog-link);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.brxe-post-content.single-post__content .easy-footnote-title {
  margin: 64px calc(var(--ad-blog-article-gutter) * -1) 0;
  padding: 60px 0 0;
  border-top: 1px solid var(--ad-border-card-soft);
}

.brxe-post-content.single-post__content .easy-footnote-title h4 {
  margin: 0 0 36px;
  padding-inline: var(--ad-blog-article-gutter);
  color: var(--ad-blog-blue);
  font-size: var(--ad-type-size-2xl);
  font-weight: var(--ad-font-weight-semibold);
  line-height: 1.3;
  letter-spacing: 0;
}

.brxe-post-content.single-post__content .easy-footnotes-wrapper {
  margin: 0 calc(var(--ad-blog-article-gutter) * -1);
  padding: 0 var(--ad-blog-article-gutter) 60px calc(var(--ad-blog-article-gutter) + 24px);
  border-bottom: 1px solid var(--ad-border-card-soft);
}

.brxe-post-content.single-post__content .easy-footnote-single,
.brxe-post-content.single-post__content .easy-footnote-single li {
  color: var(--ad-blog-blue);
  font-size: 15px;
  line-height: 1.6;
}

.brxe-post-content.single-post__content .easy-footnote-single + .easy-footnote-single {
  margin-top: 16px;
}

.ad-timber-site-shell .brxe-post-content.single-post__content .easy-footnotes-wrapper a {
  color: var(--ad-blog-blue);
}

.brxe-post-content.single-post__content .easy-footnote-to-top {
  display: none;
}

.brxe-post-content.single-post__content:has(.easy-footnotes-wrapper) + .single-post__faq {
  box-sizing: border-box;
  width: 100%;
  margin-inline: 0;
  margin-top: 72px;
  padding-inline: var(--ad-blog-article-gutter);
}

.brxe-post-content.single-post__content .wp-block-image {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 64px 0;
}

.brxe-post-content.single-post__content .wp-block-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: var(--ad-blog-radius);
}

.brxe-post-content.single-post__content .single-post__article-figure img {
  width: 100%;
  height: 592px;
  object-fit: contain;
  background: var(--ad-color-white);
}

.brxe-post-content.single-post__content .wp-element-caption,
.brxe-post-content.single-post__content figcaption {
  margin: 0;
  color: var(--ad-blog-blue);
  font-size: var(--ad-type-size-sm);
  line-height: 1.5;
  text-align: left;
}

.brxe-post-content.single-post__content .wp-block-columns {
  display: flex;
  gap: 24px;
}

.brxe-post-content.single-post__content .wp-block-group.cta-box,
.brxe-post-content .wp-block-group.cta-box,
.wp-block-group.cta-box {
  display: block;
  margin: 64px 0;
  padding: 64px;
  color: var(--ad-color-white);
  text-align: center;
  background: var(--ad-color-blue-mid);
  border-radius: 0;
}

.wp-block-group.cta-box .wp-block-group__inner-container,
.wp-block-group.cta-box .is-layout-constrained {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  justify-content: center;
}

.wp-block-group.cta-box p {
  width: 100%;
  max-width: 600px;
  margin: 0;
  color: var(--ad-color-white);
  font-size: var(--ad-type-size-xl);
  font-weight: var(--ad-font-weight-medium);
  line-height: 1.4;
  letter-spacing: 0;
}

.wp-block-group.cta-box p.has-large-font-size,
.wp-block-group.cta-box p:first-child {
  max-width: none;
  font-size: var(--ad-type-size-5xl);
  font-weight: var(--ad-font-weight-semibold);
  line-height: 1.2;
}

.wp-block-group.cta-box .wp-block-buttons {
  margin: 0;
}

.wp-block-group.cta-box .wp-block-button a,
.wp-block-group.cta-box .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 51px;
  padding: 16px 40px;
  color: var(--ad-color-white);
  font-size: var(--ad-type-size-md);
  font-weight: var(--ad-font-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  /* CTA button blue per the Figma design (group_945_871). */
  background: var(--ad-blog-link);
  border-radius: var(--ad-radius-sm);
}

.wp-block-group.cta-box .wp-block-button a:hover,
.wp-block-group.cta-box .wp-block-button__link:hover {
  color: var(--ad-color-white);
  background: var(--ad-color-blue-deep);
  text-decoration: none;
}

.brxe-post-content .wp-block-pullquote.quote-post,
.quote-post {
  margin: 64px 0;
  padding: 32px;
  color: var(--ad-blog-blue);
  background: var(--ad-blog-muted);
  border: 0;
  border-radius: var(--ad-blog-radius);
}

.single-post__faq {
  margin-top: 138px;
  margin-bottom: 112px;
  color: var(--ad-blog-blue);
}

.single-post__faq h2 {
  margin: 0 0 68px;
  color: var(--ad-blog-blue);
  font-size: var(--ad-type-size-5xl);
  font-weight: var(--ad-font-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0;
}

.single-post__faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.single-post__faq-item {
  background: var(--ad-blog-muted);
  border-radius: var(--ad-blog-radius);
}

.single-post__faq-item summary {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 20px 24px;
  color: var(--ad-blog-blue);
  cursor: pointer;
  list-style: none;
}

.single-post__faq-item summary::-webkit-details-marker {
  display: none;
}

.single-post__faq-item summary span {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--ad-type-size-lg);
  font-weight: var(--ad-font-weight-semibold);
  line-height: 1.5;
}

.single-post__faq-item summary::after {
  content: "";
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--ad-blog-blue);
  background:
    linear-gradient(currentColor, currentColor) center / 18px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 18px no-repeat;
}

.single-post__faq-item[open] summary::after {
  content: "";
}

.single-post__faq-item[open] summary::after {
  transform: rotate(45deg);
}

.single-post__faq-answer {
  padding: 0 24px 24px;
  color: var(--ad-blog-blue);
  font-size: var(--ad-type-size-md);
  line-height: 1.5;
}

.single-post__faq-answer > :first-child {
  margin-top: 0;
}

.single-post__faq-answer > :last-child {
  margin-bottom: 0;
}

.single-post .ad-blog-related,
.ad-blog-post .ad-blog-related {
  padding: 112px 0;
  background: var(--ad-blog-muted);
}

.ad-blog-post .ad-blog-related__inner {
  /* Same shell as the hero and body container so the section left/right edges line up. */
  width: var(--ad-shell-standard);
}

.ad-blog-post .ad-blog-related__inner > h2 {
  margin: 0 0 68px;
  color: var(--ad-blog-blue);
  font-size: var(--ad-type-size-6xl);
  font-weight: var(--ad-font-weight-semibold);
  line-height: 1.1;
  letter-spacing: 0;
  text-align: left;
}

.ad-blog-post .ad-blog-related__grid {
  gap: 52px;
}

.ad-blog-post .ad-blog-related .ad-blog-card__body,
.ad-blog-post .ad-blog-related .ad-blog-card__body h2,
.ad-blog-post .ad-blog-related .ad-blog-card__body h2 a {
  text-align: left;
}

.ad-timber-site-shell .ad-blog-related .ad-blog-card__body h2 a {
  color: var(--ad-blog-link);
}

.ad-blog-post .ad-blog-related .ad-blog-card__category,
.ad-timber-site-shell .ad-blog-related .ad-blog-card__category a {
  color: var(--ad-blog-teal);
}

.ad-blog-post .ad-blog-related .ad-blog-card__media,
.ad-blog-post .ad-blog-related .ad-blog-card__media img {
  border-radius: var(--ad-blog-radius);
}

.ad-blog-post .ad-blog-related .ad-blog-card__media {
  aspect-ratio: 365.333 / 225;
  overflow: hidden;
}

.ad-blog-post .ad-blog-related .ad-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad-blog-post .ad-blog-related .ad-blog-card:first-child .ad-blog-card__media img {
  transform: scale(1.48);
  transform-origin: 50% 32%;
}

.ad-blog-post .ad-blog-related .ad-blog-card {
  overflow: hidden;
  background: var(--ad-color-white);
  border-radius: var(--ad-blog-radius);
}

.ad-blog-post .ad-blog-related .ad-blog-card__body {
  display: flex;
  min-height: 280px;
  flex-direction: column;
  gap: 12px;
  padding: 30px;
}

.ad-blog-post .ad-blog-related .ad-blog-card__body h2 {
  margin: 0;
  font-size: var(--ad-type-size-xl);
  font-weight: var(--ad-font-weight-medium);
  line-height: 1.4;
  letter-spacing: 0;
}

.ad-blog-post .ad-blog-related .ad-blog-card__body > p:not(.ad-blog-card__category) {
  margin: 0;
  color: var(--ad-blog-blue);
  font-size: var(--ad-type-size-sm);
  line-height: 1.5;
  /* Keep excerpts to a uniform height so the three cards line up regardless of
     how long each post's excerpt is. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ad-blog-card__author {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  color: var(--ad-blog-blue);
  font-size: 12px;
  font-weight: var(--ad-font-weight-medium);
  line-height: 1.4;
}

.ad-blog-card__author img {
  width: 24px;
  height: 24px;
  border-radius: var(--ad-radius-pill);
  object-fit: cover;
}

.ad-dentist-podcast--blog {
  background: var(--ad-color-blue-mid);
}

.ad-dentist-podcast--blog .ad-dentist-podcast__content {
  align-items: start;
  text-align: left;
}

.ad-dentist-podcast--blog .ad-dentist-button--podcast {
  background: var(--ad-color-teal-wash);
  color: var(--ad-color-white);
}

.ad-dentist-podcast--blog .ad-dentist-button__icon {
  color: var(--ad-color-white);
}

@media (max-width: 1100px) {
  .single-post-hero__grid {
    grid-template-columns: minmax(360px, 48%) minmax(0, 1fr);
    gap: 48px;
  }

  .single-post__container {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .single-post__sidebar-inner {
    padding-inline: 40px;
  }

  /* Below 1180 the article column can't host two summary panels side by side
     (the takeaways panel collapses to one word per line) — stack them. */
  .single-post__intro-grid {
    grid-template-columns: 1fr;
  }

  .single-post__summary-panel {
    min-height: 0;
    padding: 48px;
  }
}

@media (max-width: 900px) {
  .single-post__shell {
    width: min(100% - 48px, 720px);
  }

  .single-post-breadcrumb-strip {
    min-height: auto;
    padding: 16px 24px;
    font-size: var(--ad-type-size-xs);
  }

  .single-post-hero {
    padding-bottom: 48px;
  }

  .single-post-hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .single-post-hero__media figure {
    height: 280px;
  }

  .single-post-hero__media img {
    height: 100%;
  }

  .single-post__heading {
    max-width: none;
    font-size: var(--ad-type-size-5xl);
  }

  .single-post__container {
    grid-template-columns: 1fr;
    /* Stacked layout returns to full-bleed; the inner content sets its own width. */
    width: 100%;
    margin-inline: 0;
  }

  .single-post__sidebar-inner {
    position: static;
    padding: 32px 24px;
    /* Sidebar is no longer sticky when stacked, so let it flow at full height. */
    max-height: none;
    overflow-y: visible;
  }

  .single-post__toc .toc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
  }

  .ad-timber-site-shell .single-post__toc .toc-link {
    font-size: var(--ad-type-size-md);
  }

  .single-post__intro-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .single-post__summary-panel {
    min-height: auto;
    padding: 32px 24px;
  }

  .brxe-post-content.single-post__content,
  .single-post__faq {
    width: min(100% - 48px, var(--ad-blog-page-width));
    margin-inline: auto;
  }

  .brxe-post-content.single-post__content {
    padding: 48px 0 0;
  }

  .brxe-post-content.single-post__content .easy-footnote-title,
  .brxe-post-content.single-post__content .easy-footnotes-wrapper {
    margin-inline: 0;
  }

  .brxe-post-content.single-post__content .easy-footnote-title h4 {
    padding-inline: 0;
  }

  .brxe-post-content.single-post__content .easy-footnotes-wrapper {
    padding-right: 0;
    padding-left: 24px;
  }

  .brxe-post-content.single-post__content:has(.easy-footnotes-wrapper) + .single-post__faq {
    width: min(100% - 48px, var(--ad-blog-page-width));
    margin-inline: auto;
    padding-inline: 0;
  }

  .single-post__faq {
    margin-top: 64px;
  }

  .brxe-post-content.single-post__content .wp-block-columns {
    flex-direction: column;
  }

  .ad-blog-post .ad-blog-related__inner {
    width: min(100% - 48px, 720px);
  }

  .ad-blog-post .ad-blog-related__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ad-blog-post .ad-blog-related .ad-blog-card__body {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .single-post__shell {
    width: min(100% - 32px, 560px);
  }

  .single-post-hero__media figure {
    height: 240px;
  }

  .single-post-hero__media img {
    height: 100%;
  }

  .single-post__heading {
    font-size: 34px;
  }

  .single-post-hero__category {
    font-size: var(--ad-type-size-sm);
  }

  .single-post-hero__metadata {
    flex-direction: column;
    align-items: flex-start;
  }

  .single-post__toc .toc-list {
    grid-template-columns: 1fr;
  }

  .single-post-breadcrumb-strip {
    padding-inline: 16px;
  }

  .brxe-post-content.single-post__content,
  .single-post__faq {
    width: min(100% - 32px, var(--ad-blog-page-width));
    margin-inline: auto;
  }

  .brxe-post-content.single-post__content:has(.easy-footnotes-wrapper) + .single-post__faq {
    width: min(100% - 32px, var(--ad-blog-page-width));
    margin-inline: auto;
    padding-inline: 0;
  }

  .brxe-post-content.single-post__content,
  .brxe-post-content.single-post__content p,
  .brxe-post-content.single-post__content li {
    font-size: var(--ad-type-size-md);
    line-height: 1.62;
  }

  .brxe-post-content.single-post__content h2,
  .single-post__faq h2 {
    font-size: var(--ad-type-size-4xl);
    line-height: 1.2;
    margin-top: 56px;
    margin-bottom: 32px;
  }

  .brxe-post-content.single-post__content h2:first-child {
    margin-top: 0;
  }

  .brxe-post-content.single-post__content h3 {
    font-size: var(--ad-type-size-2xl);
    line-height: 1.25;
    margin-top: 44px;
    margin-bottom: 22px;
  }

  .brxe-post-content.single-post__content .wp-block-group.cta-box,
  .brxe-post-content .wp-block-group.cta-box,
  .wp-block-group.cta-box {
    padding: 40px 24px;
  }

  .wp-block-group.cta-box p.has-large-font-size,
  .wp-block-group.cta-box p:first-child {
    font-size: var(--ad-type-size-3xl);
  }

  .wp-block-group.cta-box .wp-block-button a,
  .wp-block-group.cta-box .wp-block-button__link {
    width: 100%;
    white-space: normal;
  }

  .brxe-post-content.single-post__content .single-post__article-figure img {
    height: auto;
  }

  .single-post__faq {
    margin-bottom: 72px;
  }

  .single-post .ad-blog-related,
  .ad-blog-post .ad-blog-related {
    padding-block: 64px;
  }

  .ad-blog-post .ad-blog-related__inner {
    width: min(100% - 32px, 560px);
  }

  .ad-blog-post .ad-blog-related__inner > h2 {
    margin: 0 0 28px;
    font-size: var(--ad-type-size-4xl);
    line-height: 1.2;
  }

  .ad-blog-post .ad-blog-related__grid {
    gap: 24px;
  }

  .ad-blog-post .ad-blog-related .ad-blog-card {
    width: 100%;
  }

  .ad-blog-post .ad-blog-related .ad-blog-card__body {
    min-height: 0;
    padding: 24px;
  }

  .ad-blog-post .ad-blog-related .ad-blog-card__body h2 {
    font-size: var(--ad-type-size-lg);
    line-height: 1.35;
  }

  .ad-blog-post .ad-blog-related .ad-blog-card__body > p:not(.ad-blog-card__category) {
    -webkit-line-clamp: 4;
  }
}