/**
 * Kaindl page-body component styles.
 *
 * Attached only when a node.page has a populated field_page_source_key,
 * i.e. content imported by the kaindl_pages module. Hand-authored basic
 * pages never load this file.
 *
 * Conventions:
 *   - All spacing / color / typography use tokens from variables.css.
 *   - Layout builds on .container, .container--narrow, .section-spacer,
 *     .grid, .grid--2, .items-center from layout.css.
 *   - No .page-body__intro exists — intro/title/kicker live in
 *     field_page_header_* and are rendered by page-header.html.twig.
 */

/* Root -------------------------------------------------------------- */

.page-body {
  color: var(--kaindl-color-text);
  font-family: var(--kaindl-font-family);
  /* Body prose matches the .page-header__intro scale (kaindl.com uses the
     same size for both). 1rem = 16px, line-height 1.55 for comfortable
     reading on long-form pages. */
  font-size: 1rem;
  line-height: 1.55;
}

/* All headings inside .page-body share a consistent scale regardless of
   which wrapper they live in (.kaindl-copy, page-body__section, etc.). */

.page-body h2 {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.1875rem); /* 28px → 35px */
  line-height: var(--kaindl-leading-title);
  font-weight: 700;
}

.page-body h3 {
  font-size: var(--kaindl-type-title-md);
  line-height: var(--kaindl-leading-title);
  font-weight: 700;
  margin-top: 1.2em;
}

.page-body > * + * {
  margin-top: 0;
}

/* Section rhythm ----------------------------------------------------- */

.page-body__section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.75rem);
}

/* Copy prose blocks -------------------------------------------------- */

.page-body .kaindl-copy {
  /* max-width: 45rem; */
  /* layout.css defines a base ``.kaindl-copy`` with --kaindl-type-card-text
     (~15px). For in-article prose we want the 16–18px scale set on
     ``.page-body``. Inherit explicitly to override the base rule. */
  font-size: inherit;
  line-height: inherit;
}

.page-body .kaindl-copy > * + * {
  margin-top: 1em;
  margin-bottom: 0.5rem;
}

/* (h2/h3 sizing lives at the .page-body scope above so it applies to
   headings outside .kaindl-copy too — feature-list-section, faq, etc.) */

.page-body .kaindl-copy a:not(.btn) {
  color: var(--kaindl-color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.page-body .kaindl-copy a:not(.btn):hover,
.page-body .kaindl-copy a:not(.btn):focus-visible {
  color: var(--kaindl-color-primary-hover);
}

/* Prose lists — replace the default disc bullet with a compact rotated
   square ("diamond" look). Scoped so it doesn't touch the styled list
   components (.page-body__feature-list / __testimonials / __downloads /
   __gallery / __product-grid / __stat-grid / responsibility-members). */
.page-body .kaindl-copy ul,
.page-body .kaindl-copy ol,
.page-body ul:not([class]),
.page-body ol:not([class]),
.page-body__responsibility-members__group > ul {
  padding-left: 1.35em;
  list-style: none;
  margin: 0;
}

.page-body .kaindl-copy ul > li,
.page-body ul:not([class]) > li,
.page-body__responsibility-members__group > ul > li {
  position: relative;
}

.page-body .kaindl-copy ul > li::before,
.page-body ul:not([class]) > li::before,
.page-body__responsibility-members__group > ul > li::before {
  content: "";
  position: absolute;
  left: -1.15em;
  top: 0.55em;
  width: 0.4375rem; /* 7px */
  height: 0.4375rem; /* 7px */
  background: currentColor;
  transform: rotate(45deg);
  opacity: 0.85;
  flex-shrink: 0;
}

/* Numbered prose lists keep their default numeric markers. */
.page-body .kaindl-copy ol > li::before,
.page-body ol:not([class]) > li::before {
  content: none;
}

.page-body .kaindl-copy ol,
.page-body ol:not([class]) {
  list-style: decimal;
  padding-left: 1.5em;
}

/* Compact spacing between prose list items. */
.page-body .kaindl-copy li + li,
.page-body ul:not([class]) li + li,
.page-body ol:not([class]) li + li,
.page-body__responsibility-members__group > ul li + li {
  margin-top: 0.25em;
}

.page-body .kaindl-copy a:not(.btn):focus-visible {
  outline: 2px solid var(--kaindl-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Anchor buttons inside body prose: the theme's layout.css already styles
   ``.btn`` / ``.btn--primary`` / ``.btn--secondary`` (black-bg pill with white
   text, etc.). Prose-inherited font-size is fine; block them out so they
   don't inline next to a paragraph and wear some button-specific spacing. */
.page-body .kaindl-copy a.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2em;
}

.page-body .kaindl-copy > h2:first-child,
.page-body .kaindl-copy > h3:first-child {
  margin-top: 0;
}

/* Two-column text + media ------------------------------------------- */

.page-body__two-col {
  /* Override the theme's .grid--2 fixed two-column layout so the grid
     auto-collapses to a single column below ~720px viewport. min(320px, 100%)
     keeps the min-col width from overflowing viewports narrower than 320px. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: center;
}

/* Copy + CTA variant — no image, button sits in the right column at desktop
   (mirrors kaindl.com's "Regional and sustainable energy production" layout)
   and drops below the copy on mobile. */
.page-body__two-col--cta {
  align-items: start;
}

.page-body__two-col__cta {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .page-body__two-col--cta {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  .page-body__two-col__cta {
    justify-content: flex-end;
    padding-top: 0.5rem;
    margin-top: auto;
  }
}

/* Aside variant — wide main column paired with a narrow sidebar for a
   pull-quote / expert tip. Main column sits on the left, aside on the
   right at desktop; they stack (main first, aside below) on mobile. */
.page-body__two-col--aside {
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

.page-body__two-col--aside .page-body__two-col__main {
  min-width: 0;
}

/* Main-column h2 sits at the very top of its column — reset the global
   h2 margin-top and give it a proper bottom margin so the heading
   breathes above the prose that follows. */
.page-body__two-col--aside .page-body__two-col__main > h2:first-child {
  margin-top: 0;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 768px) {
  .page-body__two-col--aside {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* Responsibility members list — a full-width block appended below a
   two-col section. Heading (`<strong>`) + bulleted list of institutions
   spread across the full container. Lives at the tail of
   `.page-body__section`, so the section's flex-column gap provides the
   vertical rhythm above it. */
.page-body__responsibility-members {
  width: 100%;
  padding-top: clamp(1rem, 2vw, 1.75rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 768px) {
  .page-body__responsibility-members {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-body__responsibility-members__group > p {
  margin: 0 0 clamp(0.5rem, 1vw, 0.875rem);
  font-weight: 700;
}

.page-body__responsibility-members__group > ul {
  list-style: disc;
  padding-left: 1.25em;
  margin: 0;
}

.page-body__responsibility-members__group > ul li {
  margin: 0 0 0.5em;
}

/* Tip block — a designed aside card (expert tip / pull-quote). Not the
   Swiper-driven `.page-body__testimonials`; this is a single static
   callout styled for sidebar placement. Uses the global kaindl font
   family (no serif substitution). */
.page-body__tip {
  --tip-bg: #f5f5f5;
  --tip-accent: var(--kaindl-color-primary, #111);
  --tip-rule: rgba(17, 17, 17, 0.12);
  --tip-meta: #6b6b6b;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.25vw, 1rem);
  padding: clamp(1.5rem, 2.25vw, 2.25rem);
  background: var(--tip-bg);
  isolation: isolate;
  box-sizing: border-box;
}

/* Left-edge accent bar — a single vertical rule in the kaindl primary
   color to anchor the tip box without a heavy border or shadow. */
.page-body__tip::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(1.25rem, 2vw, 1.75rem);
  bottom: clamp(1.25rem, 2vw, 1.75rem);
  width: 2px;
  background: var(--tip-accent);
}

.page-body__tip__eyebrow {
  font-size: 0.6875rem; /* 11px */
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tip-accent);
}

.page-body__tip__quote {
  margin: 0;
  padding: 0;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16 → 18 */
  line-height: 1.6;
  color: var(--kaindl-color-text);
  font-style: normal;
}

.page-body__tip__quote p {
  margin: 0;
}

.page-body__tip__quote p + p {
  margin-top: 0.75em;
}

.page-body__tip__attribution {
  padding-top: clamp(0.5rem, 1vw, 0.75rem);
  border-top: 1px solid var(--tip-rule);
  font-size: 0.8125rem; /* 13px */
  color: var(--tip-meta);
  letter-spacing: 0.01em;
}

/* Photo variant — photographic images (not diagrams).

/* Photo variant — photographic images (not diagrams). Image stretches the
   full card height, rounded corners + subtle shadow for polish. Copy column
   sits in a generous padded panel. Alternates via --flip so every other
   photo section swaps which side the image is on. */
.page-body__two-col--photo {
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.page-body__two-col--photo > .kaindl-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  padding-block: clamp(0.5rem, 2vw, 1.5rem);
}

.page-body__two-col--photo > figure.page-body__media {
  margin: 0;
  height: 100%;
  /* No min/max height cap — `align-items: stretch` matches the figure to
     the copy column's intrinsic height, so short-copy sections stay
     compact and tall-copy sections fill the row naturally. */
  overflow: hidden;
  box-shadow:
    0 0.5rem 1.5rem rgba(17, 17, 17, 0.08),
    0 0.125rem 0.375rem rgba(17, 17, 17, 0.04);
}

.page-body__two-col--photo > figure.page-body__media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .page-body__two-col--photo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
  .page-body__two-col--photo.page-body__two-col--flip {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .page-body__two-col--photo.page-body__two-col--flip > .kaindl-copy {
    order: 2;
  }
  .page-body__two-col--photo.page-body__two-col--flip
    > figure.page-body__media {
    order: 1;
  }
}

/* Portrait variant — for pages where the source image is intrinsically
   small (e.g. 320px headshots). Keeps the figure column narrow so the image
   renders at native resolution instead of upscaling and going blurry. */
.page-body__two-col--portrait {
  align-items: center;
}

.page-body__two-col--portrait > figure.page-body__media {
  margin: 0;
  max-width: 20rem;
  overflow: hidden;
  box-shadow: none;
  height: auto;
  min-height: 0;
}

.page-body__two-col--portrait > figure.page-body__media img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
}

@media (min-width: 768px) {
  .page-body__two-col--portrait {
    grid-template-columns: minmax(20rem, 1fr) minmax(0, 20rem);
  }
  .page-body__two-col--portrait.page-body__two-col--flip {
    grid-template-columns: minmax(0, 20rem) minmax(20rem, 1fr);
  }
  .page-body__two-col--portrait.page-body__two-col--flip > .kaindl-copy {
    order: 2;
  }
  .page-body__two-col--portrait.page-body__two-col--flip
    > figure.page-body__media {
    order: 1;
  }
}

/* Teaser banner (page-body final CTA block) — centered heading, body, button. */
.page-body__teaser-banner {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

.page-body__teaser-banner__headline {
  font-size: var(--kaindl-type-title-lg);
  line-height: var(--kaindl-leading-tight);
  font-weight: 700;
  margin: 0;
}

.page-body__teaser-banner__text p {
  margin: 0;
  font-size: var(--kaindl-type-card-text);
  line-height: var(--kaindl-leading-copy);
  color: var(--kaindl-color-body, #555);
}

.page-body__teaser-banner__cta {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

/* Media figures sitting inside a two-col grid: clamp height so a tall
   portrait image doesn't blow the row height on a narrow column. */
.page-body__two-col > figure.page-body__media img {
  object-fit: cover;
}

.page-body__media {
  margin: 0;
}

.page-body__media img {
  display: block;
  width: 100%;
  height: auto;
}

.page-body__media figcaption {
  font-size: var(--kaindl-type-card-text);
  color: var(--kaindl-color-accent);
  margin-top: 0.5em;
}

/* Product grid — used on reference case studies for "Used products".
   Card shows a square thumbnail + code + decor name; scales to 2 or 3 columns. */

.page-body__product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 560px) {
  .page-body__product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-body__product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-body__product-grid__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.page-body__product-grid__card:hover,
.page-body__product-grid__card:focus-visible {
  transform: translateY(-2px);
}

.page-body__product-grid__image {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.page-body__product-grid__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-body__product-grid__code {
  font-weight: 700;
  font-size: var(--kaindl-type-card-title);
  line-height: var(--kaindl-leading-tight);
  color: var(--kaindl-color-text);
  margin: 0;
}

.page-body__product-grid__name {
  font-size: var(--kaindl-type-card-text);
  line-height: var(--kaindl-leading-copy);
  color: var(--kaindl-color-body, #555);
  margin: 0;
}

/* Grouped product grid — used when kaindl.com groups product cards under
   sub-headings (e.g. formex-village: External walls / Roof / Internal walls
   / Tree trunks). */
.page-body__product-grid-groups {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.page-body__product-grid-group > h3 {
  margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem);
  font-size: var(--kaindl-type-title-md);
  line-height: var(--kaindl-leading-title);
  font-weight: 700;
}

/* Stat grid — big-number cards with count-up animation on scroll.
   Used on /en/company/facts-and-figures/. Each tile is a solid dark
   panel with a huge white value and a small caption beneath. The
   value element carries `data-stat-value` (and optional
   `data-stat-suffix`) which the stat-counter behavior animates from
   0 → target on enter-viewport. */

.page-body__stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 560px) {
  .page-body__stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-body__stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-body__stat-grid__item {
  position: relative;
  background: var(--kaindl-color-primary, #111);
  color: #fff;
  aspect-ratio: 7 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1rem, 2vw, 2rem);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow: hidden;
}

.page-body__stat-grid__value {
  font-size: clamp(2.5rem, 2rem + 2vw, 4.5rem); /* 40 → 72 */
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  /* tabular-nums avoids horizontal jitter while the digits animate. */
  font-variant-numeric: tabular-nums;
}

.page-body__stat-grid__label {
  font-size: 0.9375rem; /* 15px */
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
  max-width: 22ch;
}

/* Feature list (replaces .rich-bullet-list) ------------------------- */

/* Section holding a feature-list: heading margin is already handled by
   the parent `.page-body__section`'s flex-column gap. The section-spacer
   rhythm between sections gives downstream breathing room. */

.page-body__feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .page-body__feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4.5rem);
    row-gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.page-body__feature-list__item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: var(--kaindl-gutter);
  align-items: start;
}

.page-body__feature-list__icon {
  width: 3rem;
  height: 3rem;
  color: var(--kaindl-color-primary);
  flex: none;
}

.page-body__feature-list__icon > svg {
  width: 100%;
  height: 100%;
}

/* Numbered variant — events lists use a solid black square with a white
   digit where the icon would normally sit. The number is generated via a
   CSS counter on the list, so the markup stays clean. */
.page-body__feature-list--numbered {
  counter-reset: feature-number;
}

.page-body__feature-list--numbered .page-body__feature-list__item {
  counter-increment: feature-number;
  grid-template-columns: 3rem 1fr;
  align-items: start;
}

.page-body__feature-list--numbered
  .page-body__feature-list__item
  > .page-body__feature-list__body {
  padding-top: 0.25rem;
}

.page-body__feature-list--numbered .page-body__feature-list__item::before {
  content: counter(feature-number);
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 3rem;
  height: 3rem;
  background: var(--kaindl-color-primary, #111);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
}

/* Event body: tighter hierarchy than the generic feature-list body. */
.page-body__feature-list--numbered .page-body__feature-list__body > h3 {
  margin: 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem); /* 17 → 19 */
  line-height: 1.25;
  font-weight: 700;
}

.page-body__feature-list--numbered .page-body__feature-list__body > h4 {
  margin: 0.4em 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--kaindl-color-text);
}

.page-body__feature-list--numbered .page-body__feature-list__body > p {
  margin: 0.25em 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #6b6b6b;
}

.page-body__feature-list--numbered .page-body__feature-list__body > p a {
  color: var(--kaindl-color-primary, #111);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  word-break: break-word;
}

.page-body__feature-list--numbered .page-body__feature-list__body > p a:hover {
  text-decoration-thickness: 2px;
}

.page-body__feature-list__body > :first-child {
  font-size: var(--kaindl-type-card-title);
  line-height: var(--kaindl-leading-title);
  font-weight: 700;
  margin: 0 0 0.4em;
}

@media (max-width: 600px) {
  .page-body__feature-list__item {
    grid-template-columns: 2.5rem 1fr;
  }
  .page-body__feature-list__icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Downloads (replaces .product-detail__downloads-*) ----------------- */

.page-body__downloads {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: #e5e7eb;
  border: 1px solid #e5e7eb;
}

.page-body__download > a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--kaindl-gutter);
  padding: clamp(12px, 1.6vw, 18px) var(--kaindl-gutter);
  background: #fff;
  color: var(--kaindl-color-text);
  text-decoration: none;
  align-items: baseline;
  transition: background-color 120ms ease;
}

.page-body__download > a:hover,
.page-body__download > a:focus-visible {
  background: #f5f5f5;
}

.page-body__download > a:focus-visible {
  outline: 2px solid var(--kaindl-focus-ring);
  outline-offset: -2px;
}

.page-body__download__title {
  font-weight: 700;
}

.page-body__download__meta {
  color: var(--kaindl-color-accent);
  font-size: var(--kaindl-type-card-text);
}

/* Banner-gallery variant — horizontal topic cards with text on the left
   and a photographic image on the right. Used on /en/company/ (and any
   other hub page needing the same split layout). Whole card is clickable
   via an expanded `::before` on the heading anchor. */

.page-body__gallery.page-body__gallery--banners {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 1.75vw, 1.75rem);
}

@media (min-width: 768px) {
  .page-body__gallery.page-body__gallery--banners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-body__gallery--banners .page-body__gallery__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "head img"
    "sub  img"
    "cta  img";
  gap: 0;
  background: #f5f5f5;
  min-height: clamp(14rem, 22vw, 18rem);
  overflow: hidden;
  transition:
    box-shadow 250ms ease,
    transform 250ms ease;
}

.page-body__gallery--banners .page-body__gallery__item:hover,
.page-body__gallery--banners .page-body__gallery__item:focus-within {
  box-shadow: 0 0.75rem 2rem rgba(17, 17, 17, 0.1);
  transform: translateY(-2px);
}

.page-body__gallery--banners .page-body__gallery__item > img {
  grid-area: img;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-body__gallery--banners .page-body__gallery__item > h3 {
  grid-area: head;
  margin: 0;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1.25rem, 2vw, 2rem) 0;
  font-size: clamp(1.375rem, 1.15rem + 0.5vw, 1.625rem); /* 22 → 26 */
  line-height: 1.2;
  font-weight: 700;
  color: var(--kaindl-color-text);
}

.page-body__gallery--banners .page-body__gallery__item > h3 a {
  color: inherit;
  text-decoration: none;
}

/* Expanded hit area — makes the whole card clickable via the heading
   anchor while keeping the semantic link intact. */
.page-body__gallery--banners .page-body__gallery__item > h3 a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-body__gallery--banners .page-body__gallery__item > h3 a:focus-visible {
  outline: none;
}

.page-body__gallery--banners .page-body__gallery__item:focus-within {
  outline: 2px solid var(--kaindl-focus-ring, #2563eb);
  outline-offset: 2px;
}

.page-body__gallery--banners .page-body__gallery__item > p {
  grid-area: sub;
  margin: 0.5rem 0 0;
  padding: 0 clamp(1.25rem, 2vw, 2rem);
  color: #6b6b6b;
  font-size: 0.9375rem; /* 15 */
  line-height: 1.5;
  max-width: 32ch;
}

/* "Find out more →" CTA, generated purely in CSS so we don't have to
   touch the upstream markup. */
.page-body__gallery--banners .page-body__gallery__item::after {
  grid-area: cta;
  content: "Find out more";
  margin: 0;
  padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 2rem)
    clamp(1.25rem, 2vw, 1.75rem);
  font-size: 0.6875rem; /* 11 */
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kaindl-color-text);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: end;
}

.page-body__gallery--banners .page-body__gallery__item::after {
  /* Trailing arrow glyph appended to the CTA via second ::after */
  content: "Find out more  \2192"; /* → */
}

@media (max-width: 639px) {
  .page-body__gallery--banners .page-body__gallery__item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "img"
      "head"
      "sub"
      "cta";
    min-height: 0;
  }
  .page-body__gallery--banners .page-body__gallery__item > img {
    aspect-ratio: 16 / 10;
    height: auto;
  }
}

/* Gallery (replaces .basic-slider / .caption-slider by default) ----- */

.page-body__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-body__gallery__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-body__gallery__item img {
  display: block;
  width: 100%;
  height: auto;
}

.page-body__gallery--captioned .page-body__gallery__item > h3,
.page-body__gallery--captioned .page-body__gallery__item > p {
  margin: 0;
}

.page-body__gallery--captioned .page-body__gallery__item > h3 {
  font-size: var(--kaindl-type-card-title);
  line-height: var(--kaindl-leading-title);
  font-weight: 700;
  margin-top: 4px;
}

.page-body__gallery--captioned .page-body__gallery__item > h3 a {
  color: var(--kaindl-color-primary);
  text-decoration: none;
}

.page-body__gallery--captioned .page-body__gallery__item > h3 a:hover,
.page-body__gallery--captioned .page-body__gallery__item > h3 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.page-body__gallery--captioned .page-body__gallery__item > p {
  color: var(--kaindl-color-accent);
  font-size: var(--kaindl-type-card-text);
}

.page-body__gallery__item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Steps (replaces .content-carousel) -------------------------------- */

.page-body__steps {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 48px);
}

.page-body__steps__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.6vw, 24px);
}

@media (min-width: 1025px) {
  .page-body__steps__item {
    grid-template-columns: minmax(240px, 1fr) 1.2fr;
    align-items: center;
  }
}

/* Video (replaces .video-slider / .video-embed) --------------------- */

.page-body__videos {
  display: grid;
  gap: clamp(16px, 2vw, 32px);
  /* upgrade_video emits one ``.page-body__videos`` per source
     ``.video-slider`` — typically a single video. Cap the container at a
     comfortable video width and center within the surrounding section so the
     embed doesn't sprawl to 1336px wide on desktop. When a single group ever
     contains multiple figures the ``auto-fit`` rule still flows them 2-up. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  /* ``.page-body__section > .container`` is a flex-column, so block-level
     grid children don't auto-fill the cross axis — force the grid to span
     the container before the max-width cap centers a narrower embed. */
  width: 100%;
  max-width: min(100%, 960px);
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.page-body__video {
  margin: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
}

.page-body__video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
  display: block;
}

.page-body__video figcaption {
  font-size: var(--kaindl-type-card-text);
  line-height: var(--kaindl-leading-copy);
  color: var(--kaindl-color-text);
}

.page-body__video figcaption strong {
  display: block;
  font-size: var(--kaindl-type-card-title);
  margin-bottom: 0.25em;
}

/* Generic fallback: any <iframe> emitted directly inside .page-body (e.g.
   Matterport 3D tour on /company/floor-house/) gets a responsive 16:9 frame
   without needing a bespoke wrapper. .page-body__video iframes have their
   own aspect rule above and take precedence via specificity. */
.page-body iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  background: #000;
}

/* FAQ (replaces .faq-list) ------------------------------------------ */

.page-body__faq {
  border-top: 1px solid #e5e7eb;
}

.page-body__faq-item {
  border-bottom: 1px solid #e5e7eb;
}

.page-body__faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: clamp(14px, 1.6vw, 20px) 0;
  font-weight: 700;
  color: var(--kaindl-color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kaindl-gutter);
}

.page-body__faq-item > summary:focus-visible {
  outline: 2px solid var(--kaindl-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.page-body__faq-item > summary > h2,
.page-body__faq-item > summary > h3,
.page-body__faq-item > summary > h4 {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.page-body__faq-item > summary::-webkit-details-marker {
  display: none;
}

.page-body__faq-item > summary::after {
  content: "+";
  font-size: 1.4em;
  line-height: 1;
  color: var(--kaindl-color-primary);
  transition: transform 120ms ease;
}

.page-body__faq-item[open] > summary::after {
  content: "−";
}

.page-body__faq-item > :not(summary) {
  padding: 0 0 clamp(14px, 1.6vw, 20px);
}

/* Testimonials — Swiper-driven editorial slider --------------------
   JS (testimonials-slider.js) wraps the `.page-body__testimonials` <ul>
   in a `.swiper` container, tags each <li> as `.swiper-slide`, and
   renders autoplay + navigation + pagination. The UL's own layout is
   overridden to a plain flex (Swiper handles alignment); the editorial
   card design on each <li> stays intact. */

.page-body__testimonials,
.page-body__testimonials-slider {
  --tm-serif: "Times New Roman", Times, ui-serif, Georgia, serif;
  --tm-accent: var(--kaindl-color-primary, #111);
  --tm-rule: #d9d9d9;
  --tm-meta: #6b6b6b;
}

.page-body__testimonials {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Pre-init / no-JS fallback: render as a responsive grid so the block
   is still readable if Swiper never hydrates. */
.page-body__testimonials:not(.swiper-wrapper) {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 640px) {
  .page-body__testimonials:not(.swiper-wrapper) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 5rem);
    row-gap: clamp(2rem, 4vw, 4rem);
  }
}

@media (min-width: 1280px) {
  .page-body__testimonials:not(.swiper-wrapper) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Slider container — adds space for the oversized quote glyph (which
   overflows each slide's top edge), pagination dots below, and side
   gutters for the nav buttons. */
.page-body__testimonials-slider.swiper {
  position: relative;
  padding-top: clamp(4rem, 5vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 5vw, 5rem);
  padding-inline: 0;
  overflow: hidden;
  /* Flex-column parent (.page-body__section) gives children min-width: auto
     which lets loop-mode Swiper blow out horizontally. Force a stable width
     so Swiper sizes slides against the real container, not its intrinsic
     (infinite) content width. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Pagination — centered row of round dots below the cards. */
.page-body__testimonials-slider__pagination {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 0.625rem;
}

.page-body__testimonials-slider__pagination .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--tm-rule);
  opacity: 1;
  margin: 0 !important;
  cursor: pointer;
  transition:
    background-color 250ms ease,
    transform 250ms ease;
}

.page-body__testimonials-slider__pagination .swiper-pagination-bullet:hover {
  background: var(--tm-meta);
}

.page-body__testimonials-slider__pagination .swiper-pagination-bullet-active {
  background: var(--tm-accent);
  transform: scale(1.25);
}

/* After Swiper wraps the UL, disable its grid so slide widths obey
   Swiper's flex calculations. */
.page-body__testimonials.swiper-wrapper {
  align-items: stretch;
}

/* Each slide card keeps its editorial styling but needs a stable height
   so the swiper row stays aligned when items have uneven quote lengths. */
.page-body__testimonials.swiper-wrapper > li.swiper-slide {
  height: auto;
  box-sizing: border-box;
}

/* Card: no container chrome, just a hairline top rule + generous padding.
   The hero is a huge hollow serif quote glyph, not a box. */
.page-body__testimonials > li {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  padding: clamp(1.5rem, 2.25vw, 2.5rem) 0 0;
  border-top: 1px solid var(--tm-rule);
  isolation: isolate;
}

/* Giant hollow quote glyph, top-left, negative-offset, serif.
   Low-opacity by default, saturates on hover/focus of the li. */
.page-body__testimonials > li::before {
  content: "\201C"; /* left double quotation mark */
  position: absolute;
  top: -0.6em;
  font-family: var(--tm-serif);
  font-weight: 400;
  font-size: clamp(6rem, 9vw, 9.5rem);
  line-height: 0.9;
  color: var(--tm-accent);
  opacity: 0.08;
  pointer-events: none;
  z-index: -1;
  transition:
    opacity 500ms cubic-bezier(0.2, 0.65, 0.3, 1),
    transform 500ms cubic-bezier(0.2, 0.65, 0.3, 1);
}

.page-body__testimonials > li:hover::before,
.page-body__testimonials > li:focus-within::before {
  opacity: 0.24;
  transform: translate(-0.03em, -0.06em);
}

/* Quote body — set in the theme's sans, slightly larger than body copy.
   No border-left; the glyph is the visual anchor. */
.page-body__testimonials blockquote {
  margin: 0;
  padding: 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem); /* 17 → 19px */
  line-height: 1.55;
  color: var(--kaindl-color-text);
  max-width: 32rem;
}

.page-body__testimonials blockquote p {
  margin: 0;
}

.page-body__testimonials blockquote p + p {
  margin-top: 0.75em;
}

/* Attribution rail — avatar + name/role stacked beside it, separated by a
   thin vertical rule for a "credit bar" feel. */
.page-body__testimonials > li figure {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--tm-rule);
}

.page-body__testimonials > li figure img {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  grid-column: 1;
  filter: grayscale(8%);
}

/* Figures without an image: collapse to a 2-col rule so the name doesn't
   shift left. */
.page-body__testimonials > li figure:not(:has(img)) {
  grid-template-columns: auto 1fr;
}

.page-body__testimonials > li figure::after {
  content: "";
  grid-column: 2;
  align-self: stretch;
  width: 1px;
  background: var(--tm-rule);
  margin-block: 0.25rem;
}

.page-body__testimonials > li figure:not(:has(img))::after {
  display: none;
}

.page-body__testimonials figcaption {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.35;
}

.page-body__testimonials > li figure:not(:has(img)) figcaption {
  grid-column: 2;
}

.page-body__testimonials figcaption br {
  display: none;
}

.page-body__testimonials figcaption strong {
  font-size: 1.0625rem; /* 17px */
}

.page-body__testimonials figcaption span {
  color: var(--tm-meta);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Motion: stagger the entry reveal if the browser supports it, so the
   cards appear in sequence as the section scrolls into view. Degrades
   gracefully on browsers without scroll-driven animation timelines. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .page-body__testimonials > li {
      animation: tm-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
  }
}

@keyframes tm-reveal {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Jobs (replaces .job-list) ----------------------------------------- */

.page-body__jobs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: #e5e7eb;
  border: 1px solid #e5e7eb;
}

.page-body__jobs > li > a {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: clamp(14px, 1.6vw, 20px) var(--kaindl-gutter);
  background: #fff;
  color: var(--kaindl-color-text);
  text-decoration: none;
  gap: var(--kaindl-gutter);
  align-items: baseline;
}

.page-body__jobs > li > a:hover,
.page-body__jobs > li > a:focus-visible {
  background: #f5f5f5;
}

/* Collapsible (generic .collapsible) -------------------------------- */

.page-body__collapsible {
  border: 1px solid #e5e7eb;
  padding: 0 var(--kaindl-gutter);
}

.page-body__collapsible > summary {
  cursor: pointer;
  list-style: none;
  padding: clamp(12px, 1.4vw, 16px) 0;
  font-weight: 700;
}

/* Quote / callout --------------------------------------------------- */

.page-body__quote {
  border-left: 3px solid var(--kaindl-color-primary);
  padding: clamp(12px, 1.4vw, 18px) clamp(16px, 2vw, 24px);
  font-size: var(--kaindl-type-subtitle);
  line-height: var(--kaindl-leading-subtitle);
  margin: 0;
  color: var(--kaindl-color-text);
}


/* --- references-grid (kaindl_references listing) --- */
.references-grid {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.references-grid[hidden] { display: none !important; }

.references-grid__headline {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem) 0;
  text-transform: uppercase;
}

.references-grid__items {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .references-grid__items { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .references-grid__items { grid-template-columns: repeat(3, 1fr); }
}

.references-grid__item { list-style: none; margin: 0; }
.references-grid__item[hidden] { display: none !important; }

.references-grid__card {
  background: #fff;
  box-shadow: 0 2px 6px rgba(18, 18, 18, 0.06);
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.24s ease, transform 0.24s ease;
}
.references-grid__card:hover,
.references-grid__card:focus-visible {
  box-shadow: 0 10px 24px rgba(18, 18, 18, 0.12);
  transform: translateY(-2px);
}

.references-grid__image {
  aspect-ratio: 4 / 3;
  background: #f5f5f5;
  margin: 0;
  overflow: hidden;
}
.references-grid__image img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.references-grid__title {
  color: #111;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.references-grid__load-more {
  display: inline-flex;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
.references-grid__load-more[hidden] { display: none !important; }