/* ==========================================================================
   PIE Builders & Developers — Blog details page
   Article (left) + sidebar widgets (right), related articles underneath.
   Scoped to .pie-blog-details (component root) and .pie-bd-* children.

   Sections 1–17 are html/css/blog-details.css unchanged (minus the
   standalone preview's body rule). Section 18 adapts it to the theme and
   to post content from the block / classic editor. Loaded on single posts
   only (inc/enqueue.php); markup in template-parts/content/content-single-post.php.

   1.  Variables and base styles
   2.  Breadcrumb
   3.  Main layout
   4.  Featured image and article introduction
   5.  Metadata and sharing
   6.  Article content
   7.  Quote and feature checklist
   8.  Image gallery (+ lightbox)
   9.  Author card
   10. Sidebar widgets
   11. Recent articles
   12. CTA widget
   13. Tags
   14. Related articles
   15. Hover states and animation classes
   16. Responsive breakpoints
   17. Accessibility and reduced-motion rules
   18. WordPress integration (theme, post content, comments)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables and base styles
   -------------------------------------------------------------------------- */

.pie-blog-details {
  /* Colour */
  --pie-bd-bg: #FAF9F6;
  --pie-bd-surface: #FFFFFF;
  --pie-bd-heading: #111827;
  --pie-bd-body: #475569;
  --pie-bd-muted: #64748B;
  --pie-bd-gold: #BF8733;
  --pie-bd-gold-dark: #9A6A22;               /* gold text, and fills behind white text (AA contrast) */
  --pie-bd-gold-deep: #7F5619;               /* hover for gold fills */
  --pie-bd-gold-light: #FBF5EB;
  --pie-bd-gold-highlight: #F6E7CC;          /* selected category row */
  --pie-bd-border: #E5E7EB;
  --pie-bd-border-soft: #EEF0F3;
  --pie-bd-pill: #F5F6F8;

  /* Type */
  --pie-bd-font: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* Spacing (8px scale) */
  --pie-bd-space-1: 8px;
  --pie-bd-space-2: 16px;
  --pie-bd-space-3: 24px;
  --pie-bd-space-4: 32px;
  --pie-bd-space-5: 40px;
  --pie-bd-space-6: 48px;

  /* Layout */
  --pie-bd-max: 1320px;
  --pie-bd-gutter: clamp(16px, 3vw, 32px);
  --pie-bd-gap: 24px;
  --pie-bd-pad: clamp(18px, 3vw, 32px);      /* article inner padding */

  /* Shape */
  --pie-bd-radius-sm: 4px;
  --pie-bd-radius: 8px;
  --pie-bd-radius-lg: 10px;
  --pie-bd-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);

  /* Motion */
  --pie-bd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pie-bd-dur: 0.3s;

  display: block;
  background: var(--pie-bd-bg);
  color: var(--pie-bd-body);
  font-family: var(--pie-bd-font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pie-blog-details *,
.pie-blog-details *::before,
.pie-blog-details *::after {
  box-sizing: border-box;
}

/* Zero-specificity reset so component classes can set their own spacing. */
.pie-blog-details :where(h1, h2, h3, p, ul, ol, figure, blockquote) {
  margin: 0;
}

.pie-blog-details :where(ul, ol) {
  padding: 0;
  list-style: none;
}

.pie-blog-details :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.pie-blog-details :where(a) {
  color: inherit;
  text-decoration: none;
}

.pie-bd-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Outline icons from the inline sprite */
.pie-blog-details .pie-bd-icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Solid brand glyphs inside the outline sprite */
.pie-blog-details .pie-bd-icon .pie-bd-fill,
.pie-bd-sprite .pie-bd-fill {
  fill: currentColor;
  stroke: none;
}

.pie-bd-container {
  width: 100%;
  max-width: calc(var(--pie-bd-max) + var(--pie-bd-gutter) * 2);
  margin: 0 auto;
  padding: var(--pie-bd-space-3) var(--pie-bd-gutter) clamp(48px, 6vw, 80px);
}

/* --------------------------------------------------------------------------
   2. Breadcrumb
   -------------------------------------------------------------------------- */
.pie-bd-breadcrumb {
  margin-bottom: var(--pie-bd-space-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--pie-bd-muted);
}

.pie-bd-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 2px;
  min-width: 0;
}

.pie-bd-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.pie-bd-breadcrumb__item + .pie-bd-breadcrumb__item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 12px 0 10px;
  border-top: 1.5px solid #94A3B8;
  border-right: 1.5px solid #94A3B8;
  transform: rotate(45deg);
}

.pie-bd-breadcrumb a {
  transition: color var(--pie-bd-dur) var(--pie-bd-ease);
}

.pie-bd-breadcrumb a:hover {
  color: var(--pie-bd-gold-dark);
}

.pie-bd-breadcrumb [aria-current="page"] {
  color: var(--pie-bd-body);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   3. Main layout
   -------------------------------------------------------------------------- */
.pie-bd-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr);
  gap: var(--pie-bd-gap);
  align-items: start;
}

.pie-bd-article {
  min-width: 0;
  overflow: hidden;
  padding-bottom: var(--pie-bd-pad);
  background: var(--pie-bd-surface);
  border: 1px solid var(--pie-bd-border-soft);
  border-radius: var(--pie-bd-radius-lg);
  box-shadow: var(--pie-bd-shadow);
}

.pie-bd-sidebar {
  display: grid;
  gap: var(--pie-bd-gap);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   4. Featured image and article introduction
   -------------------------------------------------------------------------- */
.pie-bd-hero {
  overflow: hidden;
  aspect-ratio: 3.2 / 1;
  background: #2A2F36;
}

.pie-bd-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.pie-bd-header {
  padding: var(--pie-bd-space-3) var(--pie-bd-pad) 0;
}

.pie-bd-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--pie-bd-radius-sm);
  background: var(--pie-bd-gold-dark);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color var(--pie-bd-dur) var(--pie-bd-ease);
}

.pie-bd-badge:hover {
  background: var(--pie-bd-gold-deep);
}

.pie-bd-title {
  max-width: 30ch;
  margin-top: 12px;
  color: var(--pie-bd-heading);
  font-size: clamp(27px, 2.5vw + 6px, 40px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.pie-bd-excerpt {
  max-width: 62ch;
  margin-top: 12px;
  font-size: clamp(16px, 0.4vw + 13px, 18px);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   5. Metadata and sharing
   -------------------------------------------------------------------------- */
.pie-bd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: var(--pie-bd-space-3);
  padding-bottom: var(--pie-bd-space-3);
  border-bottom: 1px solid var(--pie-bd-border-soft);
  font-size: 14px;
  line-height: 1.4;
}

.pie-bd-meta__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.pie-bd-meta__fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pie-bd-meta__fact .pie-bd-icon {
  color: var(--pie-bd-heading);
}

.pie-bd-meta__author {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pie-bd-meta__avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.pie-bd-meta__author-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pie-bd-meta__author-name {
  color: var(--pie-bd-heading);
  font-size: 13px;
  font-weight: 700;
}

.pie-bd-meta__author-role {
  color: var(--pie-bd-muted);
  font-size: 12px;
}

.pie-bd-share {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.pie-bd-share__label {
  margin-right: 4px;
  font-size: 13px;
}

.pie-bd-share__list {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pie-bd-share__copy-item {
  position: relative;
}

.pie-bd-share__link {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pie-bd-heading);
  cursor: pointer;
  transition: color var(--pie-bd-dur) var(--pie-bd-ease), background-color var(--pie-bd-dur) var(--pie-bd-ease);
}

.pie-bd-share__link .pie-bd-icon {
  width: 17px;
  height: 17px;
}

.pie-bd-share__link:hover {
  background: var(--pie-bd-gold-light);
  color: var(--pie-bd-gold-dark);
}

.pie-bd-share__copy.is-copied {
  color: #15803D;
}

/* Copy feedback bubble; text is announced through role="status". */
.pie-bd-share__status {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 2;
  padding: 5px 10px;
  border-radius: var(--pie-bd-radius-sm);
  background: var(--pie-bd-heading);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pie-bd-share__status:empty {
  visibility: hidden;
}

.pie-bd-share__status.is-visible {
  opacity: 1;
  transform: none;
}

.pie-bd-share__status.is-error {
  background: #B91C1C;
}

/* --------------------------------------------------------------------------
   6. Article content
   -------------------------------------------------------------------------- */
.pie-bd-content {
  padding: var(--pie-bd-space-3) var(--pie-bd-pad) 0;
  font-size: clamp(15.5px, 0.25vw + 13.5px, 16.5px);
  line-height: 1.72;
}

.pie-bd-content > * + * {
  margin-top: var(--pie-bd-space-2);
}

.pie-bd-content > h2 {
  margin-top: var(--pie-bd-space-4);
  color: var(--pie-bd-heading);
  font-size: clamp(21px, 0.8vw + 15px, 25px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.pie-bd-content > h2 + * {
  margin-top: 10px;
}

.pie-bd-figure {
  margin-top: var(--pie-bd-space-3);
  overflow: hidden;
  border-radius: var(--pie-bd-radius);
  aspect-ratio: 3.4 / 1;
  background: #E9E4DC;
}

.pie-bd-figure__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* --------------------------------------------------------------------------
   7. Quote and feature checklist
   -------------------------------------------------------------------------- */
.pie-bd-content > .pie-bd-quote {
  margin-top: var(--pie-bd-space-3);
}

.pie-bd-quote {
  display: flex;
  align-items: flex-start;
  gap: var(--pie-bd-space-3);
  padding: var(--pie-bd-space-3) var(--pie-bd-space-4);
  border-radius: var(--pie-bd-radius);
  background: var(--pie-bd-gold-light);
}

.pie-bd-quote__icon {
  flex: none;
  width: 34px;
  height: 28px;
  margin-top: 6px;
  fill: var(--pie-bd-gold);
}

.pie-bd-quote__text {
  color: #334155;
  font-size: clamp(16px, 0.35vw + 14px, 18px);
  font-style: italic;
  line-height: 1.6;
}

.pie-bd-quote__cite {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--pie-bd-heading);
  font-size: 14px;
  font-weight: 600;
}

.pie-bd-quote__cite::before {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
}

/* Fills column by column (items 1–3 left, 4–6 right), as in the design. */
.pie-bd-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 8px var(--pie-bd-space-4);
}

.pie-bd-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
}

.pie-bd-checklist__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--pie-bd-gold);
}

.pie-bd-checklist__icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   8. Image gallery (+ lightbox)
   -------------------------------------------------------------------------- */
.pie-bd-content > .pie-bd-gallery {
  margin-top: var(--pie-bd-space-3);
}

.pie-bd-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pie-bd-gallery__link {
  display: block;
  overflow: hidden;
  border-radius: var(--pie-bd-radius);
  aspect-ratio: 17 / 10;
  background: #E9E4DC;
  cursor: zoom-in;
}

.pie-bd-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pie-bd-gallery__image--left {
  object-position: 25% 50%;
}

.pie-bd-lightbox {
  width: min(1100px, 100vw - 32px);
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  font-family: var(--pie-bd-font);
}

.pie-bd-lightbox::backdrop {
  background: rgba(10, 12, 16, 0.88);
}

.pie-bd-lightbox__figure {
  margin: 0;
}

.pie-bd-lightbox__image {
  display: block;
  width: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  border-radius: var(--pie-bd-radius);
}

.pie-bd-lightbox__caption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

.pie-bd-lightbox__button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.7);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color var(--pie-bd-dur) var(--pie-bd-ease), border-color var(--pie-bd-dur) var(--pie-bd-ease);
}

.pie-bd-lightbox__button:hover {
  border-color: var(--pie-bd-gold);
  background: var(--pie-bd-gold);
}

.pie-bd-lightbox__button .pie-bd-icon {
  width: 20px;
  height: 20px;
}

.pie-bd-lightbox__close {
  top: -52px;
  right: 0;
}

.pie-bd-lightbox__prev,
.pie-bd-lightbox__next {
  top: calc(50% - 40px);
}

.pie-bd-lightbox__prev {
  left: 12px;
}

.pie-bd-lightbox__next {
  right: 12px;
}

/* --------------------------------------------------------------------------
   9. Author card
   -------------------------------------------------------------------------- */
.pie-bd-author {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pie-bd-space-3);
  margin: var(--pie-bd-space-3) var(--pie-bd-pad) 0;
  padding: var(--pie-bd-space-3);
  border: 1px solid var(--pie-bd-border);
  border-radius: var(--pie-bd-radius);
  background: var(--pie-bd-surface);
}

.pie-bd-author__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
}

.pie-bd-author__label {
  font-size: 12px;
  color: var(--pie-bd-muted);
}

.pie-bd-author__name {
  margin-top: 2px;
  color: var(--pie-bd-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.pie-bd-author__role {
  font-size: 13px;
  color: var(--pie-bd-muted);
}

.pie-bd-author__bio {
  max-width: 64ch;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.pie-bd-author__social {
  display: flex;
  gap: 4px;
  align-self: start;
}

.pie-bd-author__social-link {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--pie-bd-heading);
  transition: color var(--pie-bd-dur) var(--pie-bd-ease), background-color var(--pie-bd-dur) var(--pie-bd-ease);
}

.pie-bd-author__social-link .pie-bd-icon {
  width: 18px;
  height: 18px;
}

.pie-bd-author__social-link:hover {
  background: var(--pie-bd-gold-light);
  color: var(--pie-bd-gold-dark);
}

/* --------------------------------------------------------------------------
   10. Sidebar widgets
   -------------------------------------------------------------------------- */
.pie-bd-widget {
  min-width: 0;
  padding: var(--pie-bd-space-3);
  border: 1px solid var(--pie-bd-border-soft);
  border-radius: var(--pie-bd-radius-lg);
  background: var(--pie-bd-surface);
  box-shadow: var(--pie-bd-shadow);
}

.pie-bd-widget__title {
  margin-bottom: var(--pie-bd-space-2);
  color: var(--pie-bd-heading);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

/* Categories */
.pie-bd-categories__list > li + li {
  margin-top: 2px;
}

.pie-bd-categories__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--pie-bd-border-soft);
  border-radius: var(--pie-bd-radius-sm);
  color: #1F2937;
  font-size: 15px;
  line-height: 1.4;
  transition: background-color var(--pie-bd-dur) var(--pie-bd-ease), color var(--pie-bd-dur) var(--pie-bd-ease);
}

.pie-bd-categories__list > li:last-child .pie-bd-categories__link {
  border-bottom-color: transparent;
}

.pie-bd-categories__count {
  flex: none;
  color: var(--pie-bd-body);
  font-variant-numeric: tabular-nums;
}

.pie-bd-categories__link:hover {
  background: var(--pie-bd-gold-light);
  color: var(--pie-bd-gold-dark);
}

.pie-bd-categories__link.is-current {
  border-bottom-color: transparent;
  background: var(--pie-bd-gold-highlight);
  color: var(--pie-bd-heading);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   11. Recent articles
   -------------------------------------------------------------------------- */
.pie-bd-recent__item + .pie-bd-recent__item {
  margin-top: 18px;
}

.pie-bd-recent__link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pie-bd-recent__thumb {
  flex: none;
  width: 92px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--pie-bd-radius-sm);
  background: #E9E4DC;
}

.pie-bd-recent__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pie-bd-recent__image--right {
  object-position: 70% 50%;
}

.pie-bd-recent__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-top: 1px;
}

.pie-bd-recent__title {
  color: var(--pie-bd-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  transition: color var(--pie-bd-dur) var(--pie-bd-ease);
}

.pie-bd-recent__date {
  color: var(--pie-bd-muted);
  font-size: 13px;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   12. CTA widget
   -------------------------------------------------------------------------- */
.pie-bd-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--pie-bd-space-5) var(--pie-bd-space-3) var(--pie-bd-space-4);
  border: 0;
  background: #1B1E23;
  color: #FFFFFF;
}

.pie-bd-cta__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

/* Dark veil for legible text; heavier on the left where the copy sits. */
.pie-bd-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(14, 16, 20, 0.92) 0%, rgba(14, 16, 20, 0.78) 55%, rgba(14, 16, 20, 0.55) 100%);
}

.pie-bd-cta__rule {
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: var(--pie-bd-space-2);
  background: var(--pie-bd-gold);
}

.pie-bd-cta__eyebrow {
  color: #E3B266;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pie-bd-cta__title {
  max-width: 14ch;
  margin-top: 10px;
  color: #FFFFFF;
  font-size: clamp(25px, 1.2vw + 14px, 30px);
  font-weight: 700;
  line-height: 1.2;
}

.pie-bd-cta__text {
  max-width: 34ch;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.6;
}

.pie-bd-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-top: var(--pie-bd-space-3);
  padding: 0 22px;
  border-radius: var(--pie-bd-radius-sm);
  background: var(--pie-bd-gold-dark);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  transition: background-color var(--pie-bd-dur) var(--pie-bd-ease);
}

.pie-bd-cta__button:hover {
  background: var(--pie-bd-gold-deep);
}

.pie-bd-cta__arrow {
  transition: transform var(--pie-bd-dur) var(--pie-bd-ease);
}

/* --------------------------------------------------------------------------
   13. Tags
   -------------------------------------------------------------------------- */
.pie-bd-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pie-bd-tag {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--pie-bd-border);
  border-radius: var(--pie-bd-radius-sm);
  background: var(--pie-bd-pill);
  color: var(--pie-bd-body);
  font-size: 13px;
  line-height: 1.4;
  transition: color var(--pie-bd-dur) var(--pie-bd-ease), background-color var(--pie-bd-dur) var(--pie-bd-ease), border-color var(--pie-bd-dur) var(--pie-bd-ease);
}

.pie-bd-tag:hover {
  border-color: #E8D3AE;
  background: var(--pie-bd-gold-light);
  color: var(--pie-bd-gold-dark);
}

/* --------------------------------------------------------------------------
   14. Related articles
   -------------------------------------------------------------------------- */
.pie-bd-related {
  margin-top: clamp(32px, 4vw, 48px);
}

/* Centered gold label with short gold rules, over a faint full-width line. */
.pie-bd-related__heading {
  display: flex;
  justify-content: center;
  margin-bottom: var(--pie-bd-space-3);
  background: linear-gradient(var(--pie-bd-border), var(--pie-bd-border)) center / 100% 1px no-repeat;
  color: var(--pie-bd-gold-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pie-bd-related__heading > span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  background: var(--pie-bd-bg);
}

.pie-bd-related__heading > span::before,
.pie-bd-related__heading > span::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--pie-bd-gold);
}

.pie-bd-related__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pie-bd-gap);
}

.pie-bd-related__link {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 10px;
  border-radius: var(--pie-bd-radius);
  transition: background-color var(--pie-bd-dur) var(--pie-bd-ease), box-shadow var(--pie-bd-dur) var(--pie-bd-ease);
}

.pie-bd-related__thumb {
  flex: none;
  width: clamp(112px, 11vw, 156px);
  overflow: hidden;
  aspect-ratio: 17 / 10;
  border-radius: var(--pie-bd-radius-sm);
  background: #E9E4DC;
}

.pie-bd-related__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pie-bd-related__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pie-bd-related__category {
  color: var(--pie-bd-gold-dark);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.pie-bd-related__title {
  color: var(--pie-bd-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  transition: color var(--pie-bd-dur) var(--pie-bd-ease);
}

.pie-bd-related__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pie-bd-muted);
  font-size: 13px;
  line-height: 1.3;
}

.pie-bd-related__date .pie-bd-icon {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------------------
   15. Hover states and animation classes
   -------------------------------------------------------------------------- */
.pie-bd-hero__image,
.pie-bd-figure__image,
.pie-bd-gallery__image,
.pie-bd-recent__thumb img,
.pie-bd-related__thumb img {
  transition: transform 0.6s var(--pie-bd-ease);
}

.pie-bd-gallery__link:hover .pie-bd-gallery__image,
.pie-bd-recent__link:hover .pie-bd-recent__thumb img,
.pie-bd-related__link:hover .pie-bd-related__thumb img {
  transform: scale(1.05);
}

.pie-bd-figure:hover .pie-bd-figure__image {
  transform: scale(1.03);
}

.pie-bd-recent__link:hover .pie-bd-recent__title,
.pie-bd-related__link:hover .pie-bd-related__title {
  color: var(--pie-bd-gold-dark);
}

.pie-bd-related__link:hover {
  background: var(--pie-bd-surface);
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.06);
}

.pie-bd-cta__button:hover .pie-bd-cta__arrow {
  transform: translateX(4px);
}

/* Above-the-fold reveal targets are hidden only while scripting is enabled
   and motion is allowed, until js/blog-details.js marks the page ready.
   The delayed keyframe is a failsafe: if the script never runs, content
   still appears after 2.5s. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .pie-blog-details:not(.is-ready) [data-bd-reveal="intro"],
  .pie-blog-details:not(.is-ready) [data-bd-reveal="sidebar"] {
    opacity: 0;
    animation: pie-bd-failsafe 0.01s linear 2.5s forwards;
  }
}

@keyframes pie-bd-failsafe {
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   16. Responsive breakpoints
   -------------------------------------------------------------------------- */

/* Tablet landscape */
@media (max-width: 1199.98px) {
  .pie-blog-details {
    --pie-bd-gap: 20px;
  }

  .pie-bd-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .pie-bd-widget {
    padding: 20px;
  }

  .pie-bd-recent__thumb {
    width: 80px;
  }

  .pie-bd-related__link {
    gap: 12px;
    padding: 8px;
  }

  .pie-bd-related__title {
    font-size: 14px;
  }
}

/* Tablet portrait: single column; sidebar becomes a two-column widget grid. */
@media (max-width: 1023.98px) {
  .pie-bd-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .pie-bd-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .pie-bd-hero {
    aspect-ratio: 2.4 / 1;
  }

  .pie-bd-title {
    max-width: none;
  }

  .pie-bd-related__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pie-bd-related__thumb {
    width: 132px;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  .pie-blog-details {
    --pie-bd-gap: 16px;
  }

  .pie-bd-container {
    padding-top: var(--pie-bd-space-2);
  }

  .pie-bd-breadcrumb {
    font-size: 12.5px;
  }

  /* One line: the current page title truncates instead of wrapping. */
  .pie-bd-breadcrumb__list {
    flex-wrap: nowrap;
  }

  .pie-bd-breadcrumb__item {
    flex: none;
  }

  .pie-bd-breadcrumb__item:last-child {
    flex: 1 1 auto;
  }

  .pie-bd-breadcrumb [aria-current="page"] {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .pie-bd-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .pie-bd-hero {
    aspect-ratio: 16 / 9;
  }

  .pie-bd-header {
    padding-top: 20px;
  }

  .pie-bd-meta {
    gap: 14px 20px;
  }

  /* Share controls move to their own line under the author. */
  .pie-bd-share {
    flex-basis: 100%;
    margin-left: 0;
  }

  .pie-bd-share__link {
    width: 40px;
    height: 40px;
  }

  .pie-bd-share__status {
    right: auto;
    left: 50%;
    transform: translate(-50%, 4px);
  }

  .pie-bd-share__status.is-visible {
    transform: translate(-50%, 0);
  }

  .pie-bd-figure {
    aspect-ratio: 16 / 9;
  }

  .pie-bd-quote {
    gap: var(--pie-bd-space-2);
    padding: 20px;
  }

  .pie-bd-quote__icon {
    width: 26px;
    height: 22px;
    margin-top: 4px;
  }

  .pie-bd-related__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .pie-bd-related__link {
    padding: 8px 0;
  }

  .pie-bd-related__heading > span::before,
  .pie-bd-related__heading > span::after {
    width: 20px;
  }
}

/* Narrow phones */
@media (max-width: 559.98px) {
  .pie-bd-checklist {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  /* Two-up gallery with the third photo full width. */
  .pie-bd-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pie-bd-gallery__item:last-child {
    grid-column: 1 / -1;
  }

  .pie-bd-gallery__item:last-child .pie-bd-gallery__link {
    aspect-ratio: 2 / 1;
  }

  .pie-bd-author {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 16px;
    align-items: start;
    margin-top: 20px;
    padding: 20px;
  }

  .pie-bd-author__avatar {
    width: 64px;
    height: 64px;
  }

  .pie-bd-author__body {
    display: contents;
  }

  /* Avatar beside name block; bio and social links span the full width. */
  .pie-bd-author__label,
  .pie-bd-author__name,
  .pie-bd-author__role {
    grid-column: 2;
  }

  .pie-bd-author__avatar {
    grid-row: 1 / span 3;
    align-self: center;
  }

  .pie-bd-author__label {
    align-self: end;
  }

  .pie-bd-author__bio,
  .pie-bd-author__social {
    grid-column: 1 / -1;
  }

  .pie-bd-author__bio {
    margin-top: 14px;
  }

  .pie-bd-author__social {
    margin: 8px 0 -8px -8px;
  }

  .pie-bd-lightbox__prev,
  .pie-bd-lightbox__next {
    top: auto;
    bottom: -60px;
  }

  .pie-bd-lightbox__prev {
    left: calc(50% - 52px);
  }

  .pie-bd-lightbox__next {
    right: calc(50% - 52px);
  }
}

@media (max-width: 374.98px) {
  .pie-bd-quote {
    flex-direction: column;
    gap: 10px;
  }

  .pie-bd-recent__thumb {
    width: 76px;
  }

  .pie-bd-related__thumb {
    width: 104px;
  }
}

/* --------------------------------------------------------------------------
   17. Accessibility and reduced-motion rules
   -------------------------------------------------------------------------- */
.pie-blog-details a:focus-visible,
.pie-blog-details button:focus-visible {
  outline: 2px solid var(--pie-bd-gold-dark);
  outline-offset: 2px;
}

.pie-bd-cta a:focus-visible,
.pie-bd-lightbox button:focus-visible {
  outline-color: #FFFFFF;
}

.pie-bd-gallery__link:focus-visible,
.pie-bd-related__link:focus-visible,
.pie-bd-recent__link:focus-visible {
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .pie-blog-details *,
  .pie-blog-details *::before,
  .pie-blog-details *::after {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }

  .pie-bd-gallery__link:hover .pie-bd-gallery__image,
  .pie-bd-recent__link:hover .pie-bd-recent__thumb img,
  .pie-bd-related__link:hover .pie-bd-related__thumb img,
  .pie-bd-figure:hover .pie-bd-figure__image,
  .pie-bd-cta__button:hover .pie-bd-cta__arrow {
    transform: none;
  }
}

@media (forced-colors: active) {
  .pie-bd-checklist__icon,
  .pie-bd-badge,
  .pie-bd-cta__button {
    border: 1px solid CanvasText;
  }
}

/* --------------------------------------------------------------------------
   18. WordPress integration
   Everything below is scoped to the component. Post content comes from the
   block or classic editor, so it is styled by element and core block class
   (never restructured) to match the design's typography and colours.
   -------------------------------------------------------------------------- */

/* theme.css gives headings Playfair Display; this design uses Manrope. */
.pie-blog-details :where(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
}

/* Under the Inner Banner (which carries the breadcrumb): more room above
   the article, and long post titles in the banner breadcrumb wrap. */
.pie-blog-details--has-banner .pie-bd-container {
  padding-top: clamp(32px, 4vw, 56px);
}

.pie-bd-banner .pie-inner-banner__crumb {
  min-width: 0;
}

.pie-bd-banner .pie-inner-banner__crumb-sep {
  flex: none;
}

.pie-bd-banner .pie-inner-banner__crumb-current {
  overflow-wrap: anywhere;
}

/* "All Articles" when no listing URL is available (not a link). */
.pie-bd-categories__link:not(a):hover {
  background: transparent;
  color: #1F2937;
}

/* Author card when avatars are turned off in Settings → Discussion. */
.pie-bd-author--no-avatar {
  grid-template-columns: minmax(0, 1fr);
}

/* ---- Post content: flow, headings, links ---- */
.pie-bd-content {
  overflow-wrap: break-word;
}

/* Contain floated (alignleft / alignright) images. */
.pie-bd-content::after {
  content: "";
  display: table;
  clear: both;
}

.pie-bd-content > :is(h3, h4, h5, h6) {
  margin-top: var(--pie-bd-space-3);
  color: var(--pie-bd-heading);
  font-weight: 700;
  line-height: 1.35;
}

.pie-bd-content > h3 {
  font-size: clamp(18px, 0.5vw + 15px, 21px);
}

.pie-bd-content > h4 {
  font-size: 18px;
}

.pie-bd-content > :is(h5, h6) {
  font-size: 16px;
}

.pie-bd-content > :is(h3, h4, h5, h6) + * {
  margin-top: 8px;
}

.pie-bd-content :where(p, li, td, th, dd, dt, figcaption, cite, h2, h3, h4, h5, h6) a {
  color: var(--pie-bd-gold-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--pie-bd-dur) var(--pie-bd-ease);
}

.pie-bd-content :where(p, li, td, th, dd, dt, figcaption, cite, h2, h3, h4, h5, h6) a:hover {
  color: var(--pie-bd-gold-deep);
}

.pie-bd-content :where(strong, b) {
  color: #334155;
}

/* ---- Lists (the component reset removes bullets; content lists keep them) ---- */
.pie-bd-content :is(ul, ol):where(:not([class]), .wp-block-list) {
  padding-left: 1.35em;
}

.pie-bd-content ul:where(:not([class]), .wp-block-list) {
  list-style: disc;
}

.pie-bd-content ol:where(:not([class]), .wp-block-list) {
  list-style: decimal;
}

.pie-bd-content :is(ul, ol):where(:not([class]), .wp-block-list) > li + li,
.pie-bd-content li > :is(ul, ol) {
  margin-top: 6px;
}

.pie-bd-content li::marker {
  color: var(--pie-bd-gold);
}

/* ---- Quotes: the design's quote card (gold tint, gold quote mark) ---- */
.pie-bd-content blockquote {
  position: relative;
  padding: var(--pie-bd-space-3) var(--pie-bd-space-4) var(--pie-bd-space-3) 90px;
  border: 0;
  border-radius: var(--pie-bd-radius);
  background: var(--pie-bd-gold-light);
  color: #334155;
  font-size: clamp(16px, 0.35vw + 14px, 18px);
  font-style: italic;
  line-height: 1.6;
}

.pie-bd-content > blockquote {
  margin-top: var(--pie-bd-space-3);
}

.pie-bd-content blockquote::before {
  content: "";
  position: absolute;
  top: 30px;
  left: var(--pie-bd-space-4);
  width: 34px;
  height: 28px;
  background: var(--pie-bd-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M0 40V24C0 10.7 6.2 2.7 18.6 0l2.2 5.1C13.6 7.4 10.2 12.2 10 19h9.4v21H0Zm27.6 0V24c0-13.3 6.2-21.3 18.6-24L48 5.1c-7.2 2.3-10.6 7.1-10.8 13.9h9.4v21h-19Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M0 40V24C0 10.7 6.2 2.7 18.6 0l2.2 5.1C13.6 7.4 10.2 12.2 10 19h9.4v21H0Zm27.6 0V24c0-13.3 6.2-21.3 18.6-24L48 5.1c-7.2 2.3-10.6 7.1-10.8 13.9h9.4v21h-19Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pie-bd-content blockquote > * + * {
  margin-top: 12px;
}

.pie-bd-content blockquote cite {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--pie-bd-heading);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}

.pie-bd-content blockquote cite::before {
  content: "";
  flex: none;
  width: 14px;
  height: 1px;
  background: currentColor;
}

/* Pull quotes: centred between gold rules, no card. */
.pie-bd-content .wp-block-pullquote {
  padding: var(--pie-bd-space-3) 0;
  border-top: 2px solid var(--pie-bd-gold);
  border-bottom: 2px solid var(--pie-bd-gold);
  text-align: center;
}

.pie-bd-content .wp-block-pullquote blockquote {
  padding: 0;
  background: none;
}

.pie-bd-content .wp-block-pullquote blockquote::before {
  content: none;
}

.pie-bd-content .wp-block-pullquote cite {
  justify-content: center;
}

/* ---- Images, captions and galleries ---- */
.pie-bd-content :where(figure, .wp-caption) img {
  border-radius: var(--pie-bd-radius);
}

.pie-bd-content .aligncenter img {
  margin-inline: auto;
}

.pie-bd-content figcaption {
  margin: 8px 0 0;
  color: var(--pie-bd-muted);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}

.pie-bd-content .wp-block-gallery figure.wp-block-image {
  overflow: hidden;
  border-radius: var(--pie-bd-radius);
}

.pie-bd-content .wp-block-gallery a img,
.pie-bd-content .gallery a img {
  transition: transform 0.6s var(--pie-bd-ease);
}

.pie-bd-content .wp-block-gallery a:hover img,
.pie-bd-content .gallery a:hover img {
  transform: scale(1.05);
}

/* Set by blog-details.js on gallery links that open the photo viewer. */
.pie-bd-content [data-bd-lightbox] {
  cursor: zoom-in;
}

/* ---- Tables, embeds, code, separators, buttons ---- */
.pie-bd-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.pie-bd-content :is(th, td) {
  padding: 10px 12px;
  border: 1px solid var(--pie-bd-border);
  text-align: left;
  vertical-align: top;
}

.pie-bd-content th {
  background: var(--pie-bd-pill);
  color: var(--pie-bd-heading);
  font-weight: 700;
}

/* Classic-editor tables have no scrolling wrapper (.wp-block-table has one). */
.pie-bd-content > table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.pie-bd-content :where(iframe, embed, object, video) {
  max-width: 100%;
}

.pie-bd-content pre {
  overflow-x: auto;
  padding: 16px 20px;
  border-radius: var(--pie-bd-radius);
  background: var(--pie-bd-heading);
  color: #F3F4F6;
  font-size: 14px;
  line-height: 1.6;
}

.pie-bd-content :not(pre) > code {
  padding: 0.1em 0.35em;
  border-radius: var(--pie-bd-radius-sm);
  background: var(--pie-bd-pill);
  font-size: 0.9em;
}

.pie-bd-content hr {
  margin: var(--pie-bd-space-4) 0;
  border: 0;
  border-top: 1px solid var(--pie-bd-border);
}

/* The component's link reset would otherwise turn button text dark. */
.pie-bd-content .wp-block-button__link {
  border-radius: var(--pie-bd-radius-sm);
  background: var(--pie-bd-gold-dark);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--pie-bd-dur) var(--pie-bd-ease);
}

.pie-bd-content .wp-block-button__link:hover {
  background: var(--pie-bd-gold-deep);
}

.pie-bd-content .is-style-outline .wp-block-button__link {
  border: 2px solid currentColor;
  background: transparent;
  color: var(--pie-bd-gold-dark);
}

/* <!--nextpage--> links */
.pie-bd-page-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: var(--pie-bd-space-4);
  font-size: 14px;
}

.pie-bd-page-links .post-page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--pie-bd-border);
  border-radius: var(--pie-bd-radius-sm);
  color: var(--pie-bd-heading);
}

.pie-bd-page-links .post-page-numbers.current,
.pie-bd-page-links a.post-page-numbers:hover {
  border-color: var(--pie-bd-gold);
  color: var(--pie-bd-gold-dark);
}

/* ---- Comments (comments.php) inside the article card ---- */
.pie-bd-article .buildero-comments {
  margin: var(--pie-bd-space-4) var(--pie-bd-pad) 0;
  padding-top: var(--pie-bd-space-4);
  border-top: 1px solid var(--pie-bd-border-soft);
  font-size: 15px;
}

.pie-bd-article :is(.buildero-comments-title, .comment-reply-title) {
  margin-bottom: var(--pie-bd-space-2);
  color: var(--pie-bd-heading);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.pie-bd-article .buildero-comments :where(p) {
  margin-bottom: 12px;
}

.pie-bd-article .comment-list > li + li {
  margin-top: var(--pie-bd-space-3);
}

.pie-bd-article .comment-list .children {
  margin-top: var(--pie-bd-space-2);
  padding-left: var(--pie-bd-space-3);
}

.pie-bd-article .comment-body {
  padding-bottom: var(--pie-bd-space-2);
  border-bottom: 1px solid var(--pie-bd-border-soft);
}

.pie-bd-article .comment-author {
  color: var(--pie-bd-heading);
  font-weight: 700;
}

.pie-bd-article .comment-author .avatar {
  display: inline-block;
  margin-right: 10px;
  border-radius: 50%;
  vertical-align: middle;
}

.pie-bd-article .comment-author .says {
  font-weight: 400;
}

.pie-bd-article .comment-metadata {
  margin: 4px 0 8px;
  color: var(--pie-bd-muted);
  font-size: 13px;
}

.pie-bd-article :is(.comment-content, .comment-respond) a,
.pie-bd-article .comment-reply-link {
  color: var(--pie-bd-gold-dark);
  font-weight: 600;
}

.pie-bd-article .comment-respond {
  margin-top: var(--pie-bd-space-4);
}

.pie-bd-article .comment-form label {
  display: block;
  margin-bottom: 4px;
  color: var(--pie-bd-heading);
  font-size: 14px;
  font-weight: 600;
}

.pie-bd-article .comment-form-cookies-consent label {
  display: inline;
  font-weight: 400;
}

.pie-bd-article .comment-form .submit {
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--pie-bd-radius-sm);
  background: var(--pie-bd-gold-dark);
  color: #FFFFFF;
  font: 700 15px / 1 var(--pie-bd-font);
  cursor: pointer;
  transition: background-color var(--pie-bd-dur) var(--pie-bd-ease);
}

.pie-bd-article .comment-form .submit:hover {
  background: var(--pie-bd-gold-deep);
}

@media (max-width: 767.98px) {
  .pie-bd-content blockquote {
    padding: 20px 20px 20px 62px;
  }

  .pie-bd-content blockquote::before {
    top: 24px;
    left: 20px;
    width: 26px;
    height: 22px;
  }
}

@media (max-width: 374.98px) {
  /* Quote mark above the text, as the design's quote card does. */
  .pie-bd-content blockquote {
    padding: 52px 20px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pie-bd-content .wp-block-gallery a:hover img,
  .pie-bd-content .gallery a:hover img {
    transform: none;
  }
}

@media (forced-colors: active) {
  .pie-bd-content blockquote::before {
    background: CanvasText;
  }
}