/* Single blog post: hero, two-column article, TOC, content blocks, CF7 ask card,
   bibliography, author bio, related posts, mobile bottom CTA. Loaded on is_single('post'). */

/* Blog-post content column is 1300px (matches the global container; kept explicit). */
.blog-post .container { max-width: calc(1300px + (var(--gutter) * 2)); }

/* ============ Hero ============ */
.blog-post__hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
  padding-top: var(--space-s);
  text-align: center;
}
/* Breadcrumbs span the full grid width and stay left-aligned (heading/meta are centered). */
.blog-post__hero-inner .breadcrumbs { width: 100%; }
.blog-post__heading { display: flex; flex-direction: column; align-items: center; gap: var(--space-2x); width: 100%; }
.blog-post__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2x) var(--space-s);
  background: var(--color-grey-100);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption);
  font-weight: 500; color: var(--color-grey-900);
}
.blog-post__title {
  font-family: var(--font-heading); font-weight: 400;
  font-size: var(--fs-h-xl); line-height: var(--lh-h-xl); letter-spacing: var(--ls-h-xl);
  color: var(--color-grey-900); max-width: 800px;
}
.blog-post__meta { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); width: 100%; }
.blog-post__author { display: inline-flex; }
.blog-post__author-link, .blog-post__author { display: inline-flex; align-items: center; gap: 10px; }
.blog-post__author-avatar img, .blog-post__author-avatar .avatar { width: 32px; height: 32px; border-radius: var(--radius-pill); object-fit: cover; }
.blog-post__author-name { font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 500; color: var(--color-grey-900); }
.blog-post__author-link:hover .blog-post__author-name { text-decoration: underline; }
.blog-post__readtime { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); font-weight: 600; color: var(--color-grey-800); }
.blog-post__dates { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s); }
.blog-post__date { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--color-grey-600); }
.blog-post__media { width: 100%; aspect-ratio: 1400 / 467; border-radius: var(--radius-s); overflow: hidden; background: var(--color-grey-200); }
.blog-post__media-img { width: 100%; height: 100%; object-fit: cover; }

/* ============ Two-column layout ============ */
.blog-post__content { padding-block: var(--space-3xl); }
.blog-post__grid {
  display: grid;
  /* Client: wide content (~3/4) + 380px sidebar, larger gap. */
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-6xl);
  /* rail column stretches to full row height so the sticky card can travel. */
}
.blog-post__body { min-width: 0; grid-column: 1; }
.blog-post__rail { min-width: 0; grid-column: 2; }
.blog-post__rail-sticky { position: sticky; top: calc(var(--header-h) + var(--space-l)); }

/* Breadcrumbs styles live in layout.css (shared component). */

/* ============ Table of contents ============ */
.toc {
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-400);
  border-radius: var(--radius-s);
  padding: var(--space-l);
}
.toc__head { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space-s); }
.toc__title { font-size: 18px; line-height: 28px; font-weight: 500; color: var(--color-grey-900); }
.toc__chevron { transition: transform .2s ease; transform: rotate(-90deg); }     /* points up when expanded */
.toc[data-collapsed] .toc__chevron { transform: rotate(90deg); }
.toc__body { margin-top: var(--space-xs); position: relative; }
.toc[data-collapsed] .toc__body { display: none; }
.toc__list { display: flex; flex-direction: column; }
.toc__item { }
.toc__link { display: flex; align-items: center; gap: var(--space-2x); padding: var(--space-3xs); font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
.toc__item--h3 .toc__link { padding-left: var(--space-l); }
.toc__marker { width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--color-grey-900); flex: 0 0 auto; }
.toc__item--h3 .toc__marker { background: var(--color-grey-600); }
.toc__link:hover .toc__text { text-decoration: underline; }
.toc__link.is-active .toc__text { font-weight: 600; }
.toc__text { min-width: 0; }
/* Collapsed-to-max-height variant (long TOCs): JS adds data-clamped + shows toggle. */
.toc[data-clamped] .toc__list { max-height: 360px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.toc[data-clamped][data-open] .toc__list { max-height: none; -webkit-mask-image: none; mask-image: none; }
.toc__overflow { padding-top: var(--space-2x); text-align: center; }
.toc__more { width: 100%; font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: #000; text-align: center; }

/* ============ Article body ============ */
/* Client: H2s inside a post / problem / treatment sit one notch below the page
   headings - 32px ("size m") on desktop, 28px on mobile. Held in local vars
   because five H2 flavours (prose, richtext, FAQ, CTA banner, related posts)
   have to stay in sync; base.css has no "size s" token, so 28px/40px is spelled
   out the same way .article__h3 does it. Scoped to the two template wrappers so
   the page-pool FAQ / CTA / table sections keep their 40px. */
.blog-post,
.treatment {
  --fs-art-h2: var(--fs-h-m);
  --lh-art-h2: var(--lh-h-m);
  --ls-art-h2: var(--ls-h-m);
}
@media (max-width: 600px) {
  .blog-post,
  .treatment { --fs-art-h2: 28px; --lh-art-h2: 40px; --ls-art-h2: -1px; }
}

.blog-post__body > * + * { margin-top: var(--space-3xl); }
.article > * + * { margin-top: var(--space-3xl); }

.article__intro { font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
.article__intro p + p { margin-top: var(--space-s); }

.article__prose > * + * { margin-top: var(--space-s); }
.article__h2 { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-art-h2); line-height: var(--lh-art-h2); letter-spacing: var(--ls-art-h2); color: var(--color-grey-900); scroll-margin-top: calc(var(--header-h) + var(--space-l)); }
/* Section-card headings that also live in the TOC need the same anchor offset. */
.keypoints__title, .leadmagnet__heading, .faq__heading { scroll-margin-top: calc(var(--header-h) + var(--space-l)); }
.article__h3 { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 40px; letter-spacing: -1px; color: var(--color-grey-900); scroll-margin-top: calc(var(--header-h) + var(--space-l)); }

.article__text { font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
.article__text > * + * { margin-top: var(--space-s); }
.article__text strong, .article__text b { font-weight: 700; }
.article__text ul, .article__text ol { padding-left: var(--space-l); }
.article__text ul { list-style: disc; }
.article__text ol { list-style: decimal; }
.article__text li + li { margin-top: var(--space-3xs); }

/* Free WYSIWYG content section (richtext layout — shared by posts + treatments) */
.article__richtext {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-grey-900);
  scroll-margin-top: calc(var(--header-h) + var(--space-l));
}
.article__richtext > * { margin: 0; }
.article__richtext > * + * { margin-top: var(--space-s); }
.article__richtext h1,
.article__richtext h2,
.article__richtext h3,
.article__richtext h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-grey-900);
  scroll-margin-top: calc(var(--header-h) + var(--space-l));
}
.article__richtext h1 { font-size: var(--fs-h-xl); line-height: var(--lh-h-xl); letter-spacing: var(--ls-h-xl); }
.article__richtext h2 { font-size: var(--fs-art-h2); line-height: var(--lh-art-h2); letter-spacing: var(--ls-art-h2); }
.article__richtext h3 { font-size: 28px; line-height: 40px; letter-spacing: -1px; }
.article__richtext h4 { font-size: var(--fs-h-m); line-height: var(--lh-h-m); letter-spacing: var(--ls-h-m); }
/* More breathing room before headings (except the first element). */
.article__richtext > h1 + *, .article__richtext > h2 + *, .article__richtext > h3 + *, .article__richtext > h4 + * { margin-top: var(--space-s); }
.article__richtext > * + h1, .article__richtext > * + h2, .article__richtext > * + h3, .article__richtext > * + h4 { margin-top: var(--space-xl); }
.article__richtext strong, .article__richtext b { font-weight: 700; }
.article__richtext ul, .article__richtext ol { padding-left: var(--space-l); }
.article__richtext ul { list-style: disc; }
.article__richtext ol { list-style: decimal; }
.article__richtext li + li { margin-top: var(--space-3xs); }
.article__richtext img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-s); }
.article__richtext figure { margin: 0; }
.article__richtext figure img { width: 100%; }
.article__richtext figcaption { margin-top: var(--space-2x); font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--color-grey-600); }
.article__richtext blockquote { padding-left: var(--space-l); border-left: 2px solid var(--color-grey-300, #d4d4d4); color: var(--color-grey-700, #4e4e4e); }
/* Instagram embeds (the blockquote and the iframe embed.js swaps in) ship an inline
   min-width:326px - wider than a phone column, so the page scrolled sideways (client
   feedback 2026-09). Cap them to the column; !important beats the inline style.
   embed.js keeps the iframe position:absolute until the post loads - forever for a
   removed post - and then 100% means the viewport, not the column: keep it in flow. */
.article .instagram-media { min-width: 0 !important; max-width: 100% !important; position: relative !important; }
.article blockquote.instagram-media { overflow: hidden; }
/* YouTube facade inside article text (udi_kses_article()). A block <button> does not
   stretch by itself - the wrap class owns width and radius (see media-embed.css). */
.article .article__video { width: 100%; border-radius: var(--radius-s); margin-block: var(--space-l); }
/* `.article__richtext img { height: auto }` outranks `.smedia__video { height: 100% }`:
   the 4:3 thumbnail kept its own height and the 16:9 box clipped it from the bottom,
   showing YouTube's top letterbox bar instead of a centred cover crop. */
.article .article__video .smedia__video { height: 100%; border-radius: 0; }

/* Imported TablePress tables (.udi-table-wrap) inside WYSIWYG article bodies:
   figure is margin-reset (and `.article__richtext figure { margin: 0 }` beats the
   `* + *` rhythm, while `.article__intro` only spaces `p + p`), so give the table
   an explicit top gap. Higher specificity than the figure reset by design. */
.article__intro .udi-table-wrap,
.article__text .udi-table-wrap,
.article__richtext .udi-table-wrap { margin-top: var(--space-l); }

/* Quote */
.article__quote { display: flex; flex-direction: column; align-items: center; gap: var(--space-l); padding: var(--space-5xl) var(--space-s); text-align: center; }
.article__quote-mark { font-family: var(--font-heading); font-size: var(--fs-h-xl); line-height: 1; color: var(--color-grey-900); }
.article__quote-text { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h-m); line-height: var(--lh-h-m); letter-spacing: var(--ls-h-m); color: var(--color-grey-900); }
.article__quote-author { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); font-weight: 500; color: var(--color-grey-800); text-transform: uppercase; }

/* Media */
.article__media { display: flex; flex-direction: column; gap: var(--space-2x); }
.article__media-img { width: 100%; border-radius: var(--radius-s); }
/* Split-media widget variant (video / YouTube / image with a fixed ratio). */
.article__media-frame { width: 100%; border-radius: var(--radius-s); background: var(--color-grey-200); }
.article__media-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--color-grey-600); }

/* Callout */
.article__callout { display: flex; align-items: center; gap: var(--space-2x); flex-wrap: wrap; padding: var(--space-l); background: var(--color-grey-100); border: 1px solid var(--color-grey-400); border-radius: var(--radius-s); }
.article__callout-line { width: 3px; align-self: stretch; min-height: 36px; background: var(--color-grey-400); flex: 0 0 auto; }
.article__callout-label { font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 600; color: var(--color-grey-900); }
.article__callout-link { font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 500; color: var(--color-grey-900); text-decoration: underline; }
/* Callout — "note" variant (info icon + heading + body) */
.article__callout--note { flex-direction: column; align-items: flex-start; gap: var(--space-2x); }
.article__callout-note-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.article__callout-icon { color: var(--color-grey-900); }
.article__callout-note-label { font-size: var(--fs-body-m); line-height: var(--lh-body-m); font-weight: 600; color: var(--color-grey-900); }
.article__callout-note-text { font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }

/* Key points */
.keypoints { display: flex; flex-direction: column; gap: var(--space-l); padding: var(--space-2xl); background: var(--color-grey-100); border-radius: var(--radius-s); }
.keypoints__title { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 40px; letter-spacing: -1px; color: var(--color-grey-900); text-align: center; }
.keypoints__list { display: flex; flex-direction: column; gap: var(--space-2x); padding: 10px; }
.keypoints__item { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
.keypoints__icon { flex: 0 0 auto; margin-top: var(--space-3xs); }
.keypoints__text { min-width: 0; }

/* Lead magnet (ebook download card) */
.leadmagnet { display: flex; flex-direction: column; align-items: center; background: var(--color-grey-100); border-radius: var(--radius-s); overflow: hidden; padding-top: var(--space-3xl); padding-bottom: var(--space-2xl); }
/* Size affects only the centered cover image; the grey box stays full width with top padding. */
.leadmagnet--medium .leadmagnet__img { max-width: 66.6667%; }
.leadmagnet--small .leadmagnet__img { max-width: 240px; }
@media (max-width: 600px) { .leadmagnet--medium .leadmagnet__img { max-width: 100%; } .leadmagnet--small .leadmagnet__img { max-width: 200px; } }
.leadmagnet__media { width: 100%; display: flex; justify-content: center; }
.leadmagnet__img { width: 100%; height: auto; }
.leadmagnet__content { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-s) var(--space-l); text-align: center; }
.leadmagnet__heading { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 40px; letter-spacing: -1px; color: var(--color-grey-900); max-width: 700px; }
.leadmagnet__subtitle { font-size: var(--fs-body-m); line-height: var(--lh-body-m); font-weight: 500; color: var(--color-grey-900); }
.leadmagnet__benefits { display: flex; flex-direction: column; gap: var(--space-2x); width: 100%; max-width: 400px; padding: 10px var(--space-xs); }
.leadmagnet__benefit { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
.leadmagnet__icon { flex: 0 0 auto; margin-top: var(--space-3xs); }
.leadmagnet__cta { padding-top: var(--space-s); }
.leadmagnet__btn { padding: var(--space-xs) var(--space-xl); }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: var(--space-l); padding-block: var(--space-xs); }
.faq__heading { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-art-h2); line-height: var(--lh-art-h2); letter-spacing: var(--ls-art-h2); color: var(--color-grey-900); }
.faq__list { display: flex; flex-direction: column; padding-inline: var(--space-3xs); }
.faq__item { border-bottom: 1px solid var(--color-grey-400); }
.faq__q { display: flex; align-items: center; gap: var(--space-s); justify-content: space-between; padding-block: var(--space-s); cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q-text { font-size: var(--fs-body-m); line-height: var(--lh-body-m); font-weight: 500; color: var(--color-grey-900); }
.faq__icon { flex: 0 0 auto; transition: transform .2s ease; }
.faq__item[open] .faq__icon { transform: rotate(90deg); }
/* With JS, aria-expanded drives the chevron so it turns immediately on toggle —
 * the closing animation keeps [open] set until it finishes, so aria wins here. */
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(90deg); }
.faq__q[aria-expanded="false"] .faq__icon { transform: rotate(0deg); }
.faq__a { padding-bottom: var(--space-s); font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-800); }
.faq__a > * + * { margin-top: var(--space-s); }

/* Listing cards (linked treatments / related links) */
.article__listing { display: flex; flex-direction: column; gap: 10px; }
.article__listing-heading { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 40px; letter-spacing: -1px; color: var(--color-grey-900); scroll-margin-top: calc(var(--header-h) + var(--space-l)); }
.article__listing-list { display: flex; flex-direction: column; gap: 10px; }
.listing-card { display: flex; align-items: center; gap: var(--space-l); padding: var(--space-s); background: #fff; border: 1px solid var(--color-grey-400); border-radius: var(--radius-s); transition: border-color .2s ease, background-color .2s ease; }
.listing-card:hover { border-color: var(--color-grey-400); background: var(--color-grey-100); }
.listing-card__media { flex: 0 0 auto; width: 72px; height: 72px; border-radius: var(--radius-xs); overflow: hidden; background: var(--color-grey-200); }
.listing-card__img { width: 100%; height: 100%; object-fit: cover; }
.listing-card__title { flex: 1 1 0; min-width: 0; font-size: 18px; line-height: 28px; font-weight: 500; color: var(--color-grey-900); }
.listing-card__arrow { flex: 0 0 auto; color: var(--color-grey-900); transition: transform .2s ease; }
.listing-card:hover .listing-card__arrow { transform: translateX(4px); }

/* Inline CTA (heading + description + dark button) */
.article__cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); padding-block: var(--space-s); text-align: center; }
.article__cta-heading { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h-l); line-height: var(--lh-h-l); letter-spacing: var(--ls-h-l); color: var(--color-grey-900); }
.article__cta-text { font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); max-width: 567px; }
.article__cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-xl); background: var(--color-grey-900); color: var(--color-grey-100); border-radius: var(--radius-s); font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 500; transition: opacity .2s ease; }
.article__cta-btn:hover { opacity: .9; }

/* Separator (custom spacing) — overrides the default block rhythm. */
.article__sep { width: 100%; }
.article__sep--s { height: var(--space-s); }
.article__sep--m { height: var(--space-l); }
.article__sep--l { height: var(--space-2xl); }
.article__sep--xl { height: var(--space-3xl); }
.article__sep--2xl { height: var(--space-5xl); }

/* ============ Article meta: dates + bibliography ============ */
.article-meta { display: flex; flex-direction: column; gap: var(--space-l); }
.article-meta__dates { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-s); }
.article-meta__date { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--color-grey-700); }
.bibliography { display: flex; flex-direction: column; gap: var(--space-l); align-items: flex-start; }
.bibliography__list { display: flex; flex-direction: column; gap: 10px; counter-reset: ref; list-style: none; }
.bibliography__item { display: flex; gap: 10px; font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--color-grey-800); }
.bibliography__item::before { counter-increment: ref; content: counter(ref) "."; flex: 0 0 auto; }
.bibliography.is-collapsed .bibliography__list { display: none; }

/* ============ Author bio ============ */
.author-bio { display: flex; flex-direction: column; gap: var(--space-l); padding-top: var(--space-3xl); border-top: 1px solid var(--color-grey-400); }
.author-bio__heading { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 40px; letter-spacing: -1px; color: var(--color-grey-900); }
.author-bio__box { display: flex; align-items: center; gap: var(--space-s); }
.author-bio__avatar img, .author-bio__avatar .avatar { width: 48px; height: 48px; border-radius: var(--radius-pill); object-fit: cover; }
.author-bio__meta { display: flex; flex-direction: column; }
.author-bio__name { font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 500; color: var(--color-grey-900); }
.author-bio__role { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); font-weight: 500; color: var(--color-grey-700); }
.author-bio__text { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--color-grey-900); }

/* ============ Ask question card (CF7) ============ */
.askcard { display: flex; flex-direction: column; gap: var(--space-l); align-items: center; padding: var(--space-l); border: 1px solid var(--color-grey-400); border-radius: var(--radius-s); }
/* Sidebar variant: fields sit right under the "Zapytaj nasz zespół" header (client). */
.askcard--rail { gap: var(--space-2x); }
.askcard--inline { display: none; }
.askcard__header { display: flex; flex-direction: column; align-items: center; gap: var(--space-3xs); width: 100%; text-align: center; }
.askcard__avatar { width: 48px; height: 48px; border-radius: var(--radius-pill); object-fit: cover; }
.askcard__title { font-size: 18px; line-height: 28px; font-weight: 500; color: #000; }
.askcard__subtitle { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: #000; }
.askcard__form { width: 100%; }
.askcard .wpcf7-form > p { margin: 0; }
.askform__fields { display: flex; flex-direction: column; gap: var(--space-2x); }
.askcard .askform__field { margin: 0; }
.askcard .askform__field label { display: block; font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--color-grey-900); }
.askform__req { color: var(--color-accent); }
.askcard .wpcf7-form-control-wrap { display: block; }
.askcard input[type="text"], .askcard input[type="email"], .askcard textarea {
  width: 100%; border: 1px solid #cecece; border-radius: var(--radius-s); padding: var(--space-2x);
  font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--color-grey-900); background: #fff;
}
.askcard textarea { height: 101px; min-height: 101px; resize: vertical; }
.askcard input::placeholder, .askcard textarea::placeholder { color: var(--color-grey-700); }
.askcard .wpcf7-acceptance { display: block; margin-top: var(--space-xs); }
.askcard .wpcf7-list-item { margin: 0; }
.askcard .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: var(--space-2x); cursor: pointer; }
.askcard .wpcf7-list-item-label { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--color-grey-900); }
/* A link added inside the CF7 consent text (e.g. to the privacy policy) reads as a link. */
.askcard .wpcf7-list-item-label a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.askcard .wpcf7-list-item-label a:hover { color: var(--color-grey-900); }
/* Custom consent checkbox to match Figma: 20px, radius 4, dark-on-check with white tick. */
.askcard .wpcf7-acceptance input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 20px; height: 20px; margin: 0;
  border: 1px solid #cecece; border-radius: var(--radius-s); background: #fff;
  position: relative; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.askcard .wpcf7-acceptance input[type="checkbox"]:checked { background: var(--color-grey-900); border-color: var(--color-grey-900); }
.askcard .wpcf7-acceptance input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 6px; top: 2.5px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.askcard .wpcf7-acceptance input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-grey-900); outline-offset: 2px; }
/* Form focus ring is black in the sidebar (client), not the global accent. */
.askcard input:focus-visible, .askcard textarea:focus-visible { outline-color: var(--color-grey-900); }
.askcard .wpcf7-submit {
  width: 100%; margin-top: var(--space-xs); background: var(--color-grey-900); color: var(--color-grey-100);
  border-radius: var(--radius-s); padding: var(--space-2x) var(--space-xs);
  font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 500; border: 0; cursor: pointer;
}
.askcard .wpcf7-submit:hover { background: var(--color-grey-800); }
/* CF7 AJAX spinner is not in the Figma card — keep it out of the layout flow. */
.askcard .wpcf7-spinner { display: none; }
.askcard .wpcf7-response-output { margin: var(--space-xs) 0 0; font-size: var(--fs-caption); line-height: var(--lh-caption); }
/* The validation/response area is empty until submit — don't reserve height for it. */
.askcard .wpcf7-response-output:empty { display: none; margin: 0; }

/* ============ Related posts ============ */
.related { padding-block: var(--space-2xl); }
.related__inner { display: flex; flex-direction: column; gap: var(--space-l); }
.related__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-l); }
.related__heading { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-art-h2); line-height: var(--lh-art-h2); letter-spacing: var(--ls-art-h2); color: var(--color-grey-900); }
.related__nav { display: flex; gap: var(--space-s); flex: 0 0 auto; }
/* One row, always — a 5th card used to wrap to a second row on desktop (client fix).
   Horizontal scroll works without JS; treatment.js only wires the arrows and hides
   them via .carousel--no-overflow when everything fits. Card basis keeps the former
   4-up desktop rhythm: four cards plus three gaps fill the container exactly. */
.related__cards {
  display: flex;
  gap: var(--space-l);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.related__cards::-webkit-scrollbar { display: none; }
.related__cards .post-card { flex: 0 0 calc((100% - 3 * var(--space-l)) / 4); scroll-snap-align: start; }

/* Shared post card (also used on the blog archive). */
.post-card { position: relative; display: flex; flex-direction: column; gap: var(--space-s); }
.post-card__media { aspect-ratio: 332 / 249; border-radius: var(--radius-xs); overflow: hidden; background: var(--color-grey-200); }
.post-card__img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; gap: var(--space-s); color: var(--color-grey-900); }
.post-card__head { display: flex; flex-direction: column; }
.post-card__meta, .post-card__date { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; letter-spacing: var(--ls-caption); }
.post-card__title { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 40px; letter-spacing: -1px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Image and title are separate links (SEO feedback 2026-09) - no whole-card stretched link. */
.post-card__link:hover,
.post-card__media:hover + .post-card__body .post-card__link { text-decoration: underline; }

/* ============ Bottom CTA (mobile/tablet) ============ */
.bottomcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding-top: var(--space-l); padding-bottom: var(--space-l);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 30%);
  transform: translateY(120%); transition: transform .3s ease; pointer-events: none;
}
.bottomcta.is-visible { transform: translateY(0); pointer-events: auto; }
.bottomcta[hidden] { display: none; }
.bottomcta__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-2x); }
.bottomcta__text { display: flex; flex-direction: column; align-items: center; gap: var(--space-3xs); text-align: center; }
.bottomcta__avatar { width: 48px; height: 48px; border-radius: var(--radius-pill); object-fit: cover; }
.bottomcta__heading { font-size: 18px; line-height: 28px; font-weight: 500; color: #000; }
.bottomcta__subtitle { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: #000; }
.bottomcta__btn { width: 100%; }

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .blog-post__grid { grid-template-columns: 1fr; }
  .blog-post__body { grid-column: auto; }   /* reset desktop placement for single-column */
  .blog-post__rail { display: none; }
  .askcard--inline { display: flex; }
  .blog-post__title { font-size: var(--fs-h-l); line-height: var(--lh-h-l); }
  /* Form inputs ≥16px on touch so iOS doesn't auto-zoom (screen drift) on focus. */
  .askcard input[type="text"], .askcard input[type="email"], .askcard textarea { font-size: 16px; }
  /* Related scroller stays within the container margins (client: was full-bleed).
     The scroller itself is the base style now — only the card width and the firmer
     snap are touch-specific. */
  .related__cards { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .related__cards .post-card { flex-basis: 300px; }
}

@media (min-width: 1025px) {
  .bottomcta { display: none; }
}

@media (max-width: 600px) {
  .blog-post__title { font-size: var(--fs-h-m); line-height: var(--lh-h-m); letter-spacing: var(--ls-h-m); }
  .article__quote { padding-block: var(--space-3xl); }
  .article__quote-text { font-size: 28px; line-height: 40px; }
  .keypoints { padding: var(--space-l); }
}

@media (prefers-reduced-motion: reduce) {
  .bottomcta { transition: none; }
}

/* ---------- Content block: facts table ---------- */
.article__facts { display: flex; flex-direction: column; gap: var(--space-l); }
.facts-table {
  border: 1px solid var(--color-grey-400);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.facts-table__row { display: flex; }
.facts-table__row:not(:last-child) { border-bottom: 1px solid var(--color-grey-400); }
.facts-table__label,
.facts-table__value {
  flex: 1 1 0;
  min-width: 120px;
  padding: var(--space-xs);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-grey-900);
}
.facts-table__label { font-weight: 500; }

/* ---------- Content block: feature grid ---------- */
.article__features { padding-block: var(--space-2xl); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--color-grey-400);
}
.feature-card__icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-grey-100);
  border-radius: var(--radius-m);
  color: var(--color-grey-900);
}
.feature-card__icon svg { width: 24px; height: 24px; }
.feature-card__icon-img { width: 32px; height: 32px; object-fit: contain; }
.feature-card__body { display: flex; flex-direction: column; }
.feature-card__title {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  font-weight: 500;
  color: var(--color-grey-900);
}
.feature-card__text {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-grey-800);
}

@media (max-width: 600px) {
  .features-grid { grid-template-columns: 1fr; }
}

/* Dynamic table (.udi-table*) styles live in assets/css/layout.css — shared
   with the page "table" section. */

/* ---------- Content block: image mosaic ---------- */
/* Grid type is chosen per block (.article__mosaic--<type>); geometry mirrors the
   Figma "MediaMosaic" board. Equal cells are 4:5; featured/collage repeat a 3-image
   unit (1 big + 2); masonry keeps natural image ratios. */
.article__mosaic { --mgap: var(--space-l); }               /* desktop gap = 24 */
.mosaic-item {
  margin: 0;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--color-grey-200);
  min-width: 0;                 /* let grid tracks size cells, not image min-content */
  min-height: 0;
}
.mosaic-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Video / YouTube tile: the split-media widget fills the cell the grid sized. */
.mosaic-item > .smedia { width: 100%; height: 100%; border-radius: inherit; }

/* --- Equal grids: N columns of 4:5 cells --- */
.article__mosaic--2-equal,
.article__mosaic--3-equal,
.article__mosaic--4-equal { display: grid; gap: var(--mgap); }
.article__mosaic--2-equal { grid-template-columns: repeat(2, 1fr); }
.article__mosaic--3-equal { grid-template-columns: repeat(3, 1fr); }
.article__mosaic--4-equal { grid-template-columns: repeat(4, 1fr); }
/* Cell ratio: 4:5 from Figma, overridable per block (--mosaic-ratio from the
   `grid_ratio` field). Ratio stays on the CELLS so a row shares one height. */
.article__mosaic--2-equal .mosaic-item,
.article__mosaic--3-equal .mosaic-item,
.article__mosaic--4-equal .mosaic-item { aspect-ratio: var(--mosaic-ratio, 4 / 5); }

/* --- Masonry: independent columns; each cell uses a FIXED repeating height pattern
   from Figma (not the image's own ratio), images cover-cropped. The grid dictates the
   cell size; the editor supplies images with a matching-ish ratio. Pattern maps to the
   Figma columns because multicol fills column-by-column (8 cells = 4 columns x 2). --- */
.article__mosaic--masonry { column-count: 4; column-gap: var(--mgap); }
.article__mosaic--masonry .mosaic-item { break-inside: avoid; margin: 0 0 var(--mgap); }
.article__mosaic--masonry .mosaic-item:nth-child(8n+1) { aspect-ratio: 436.5 / 642; }
.article__mosaic--masonry .mosaic-item:nth-child(8n+2) { aspect-ratio: 436.5 / 297; }
.article__mosaic--masonry .mosaic-item:nth-child(8n+3) { aspect-ratio: 436.5 / 469.5; }
.article__mosaic--masonry .mosaic-item:nth-child(8n+4) { aspect-ratio: 436.5 / 469.5; }
.article__mosaic--masonry .mosaic-item:nth-child(8n+5) { aspect-ratio: 436.5 / 620; }
.article__mosaic--masonry .mosaic-item:nth-child(8n+6) { aspect-ratio: 436.5 / 319; }
.article__mosaic--masonry .mosaic-item:nth-child(8n+7) { aspect-ratio: 436.5 / 393.375; }
.article__mosaic--masonry .mosaic-item:nth-child(8n)   { aspect-ratio: 436.5 / 545.625; }

/* --- Featured + collage: repeating 3-image unit --- */
/* Aspect-ratios live on the CELLS (not the grid container), so cells in a row share
   one height automatically and are not pushed taller by the images' intrinsic size. */
.article__mosaic--featured-left,
.article__mosaic--featured-right,
.article__mosaic--collage { display: flex; flex-direction: column; gap: var(--mgap); }
.mosaic-unit { display: grid; gap: var(--mgap); }
/* Big is first in the DOM but pinned to the last column in featured-right; dense flow
   keeps the two small cells on row 1 instead of wrapping them below. */
.article__mosaic--featured-right .mosaic-unit { grid-auto-flow: dense; }

/* Featured desktop: [big | small | small] in one equal-height row */
.article__mosaic--featured-left  .mosaic-unit[data-n="3"] { grid-template-columns: 596fr 378fr 378fr; }
.article__mosaic--featured-right .mosaic-unit[data-n="3"] { grid-template-columns: 378fr 378fr 596fr; }
.article__mosaic--featured-right .mosaic-unit[data-n="3"] .mosaic-item--big { grid-column: 3; }
.article__mosaic--featured-left  .mosaic-unit[data-n="2"] { grid-template-columns: 596fr 378fr; }
.article__mosaic--featured-right .mosaic-unit[data-n="2"] { grid-template-columns: 378fr 596fr; }
.article__mosaic--featured-right .mosaic-unit[data-n="2"] .mosaic-item--big { grid-column: 2; }
.article__mosaic--featured-left  .mosaic-item--big,
.article__mosaic--featured-right .mosaic-item--big { aspect-ratio: 596 / 450; }
.article__mosaic--featured-left  .mosaic-item:not(.mosaic-item--big),
.article__mosaic--featured-right .mosaic-item:not(.mosaic-item--big) { aspect-ratio: 378 / 450; }

/* Collage desktop: big left spans both rows; right cells (703x361) set the height */
.article__mosaic--collage .mosaic-unit[data-n="3"],
.article__mosaic--collage .mosaic-unit[data-n="2"] { grid-template-columns: 1091fr 703fr; }
.article__mosaic--collage .mosaic-unit[data-n="3"] .mosaic-item--big { grid-row: 1 / span 2; }
/* Big has no ratio of its own — it fills the height the right column dictates. Take its
   image out of flow so it can't inflate the rows. */
.article__mosaic--collage .mosaic-item--big { position: relative; }
.article__mosaic--collage .mosaic-item--big img { position: absolute; inset: 0; }
.article__mosaic--collage .mosaic-unit[data-n="3"] .mosaic-item:not(.mosaic-item--big) { aspect-ratio: 703 / 361; }
.article__mosaic--collage .mosaic-unit[data-n="2"] .mosaic-item--big { aspect-ratio: 1091 / 746; }
.article__mosaic--collage .mosaic-unit[data-n="2"] .mosaic-item:not(.mosaic-item--big) { aspect-ratio: 703 / 746; }
.article__mosaic--collage .mosaic-unit[data-n="1"] .mosaic-item--big { aspect-ratio: 1091 / 746; }

/* ---- Tablet (<= 1024) ---- */
@media (max-width: 1024px) {
  .article__mosaic--2-equal,
  .article__mosaic--3-equal,
  .article__mosaic--4-equal { --mgap: var(--space-m); }     /* 20 */
  .article__mosaic--masonry { column-count: 3; }
  .article__mosaic--masonry .mosaic-item:nth-child(6n+1) { aspect-ratio: 457.333 / 642; }
  .article__mosaic--masonry .mosaic-item:nth-child(6n+2) { aspect-ratio: 457.333 / 297; }
  .article__mosaic--masonry .mosaic-item:nth-child(6n+3) { aspect-ratio: 457.333 / 469.5; }
  .article__mosaic--masonry .mosaic-item:nth-child(6n+4) { aspect-ratio: 457.333 / 469.5; }
  .article__mosaic--masonry .mosaic-item:nth-child(6n+5) { aspect-ratio: 457.333 / 367.333; }
  .article__mosaic--masonry .mosaic-item:nth-child(6n)   { aspect-ratio: 457.333 / 571.667; }

  /* Featured collapses: big on top (full width) + two below (per-cell ratios) */
  .article__mosaic--featured-left  .mosaic-unit[data-n="1"],
  .article__mosaic--featured-left  .mosaic-unit[data-n="2"],
  .article__mosaic--featured-left  .mosaic-unit[data-n="3"],
  .article__mosaic--featured-right .mosaic-unit[data-n="1"],
  .article__mosaic--featured-right .mosaic-unit[data-n="2"],
  .article__mosaic--featured-right .mosaic-unit[data-n="3"] { grid-template-columns: 1fr 1fr; }
  .article__mosaic--featured-left  .mosaic-unit[data-n="2"] .mosaic-item--big,
  .article__mosaic--featured-left  .mosaic-unit[data-n="3"] .mosaic-item--big,
  .article__mosaic--featured-right .mosaic-unit[data-n="2"] .mosaic-item--big,
  .article__mosaic--featured-right .mosaic-unit[data-n="3"] .mosaic-item--big { grid-column: 1 / -1; }
  .article__mosaic--featured-left  .mosaic-item--big,
  .article__mosaic--featured-right .mosaic-item--big { aspect-ratio: 1124 / 869; }
  .article__mosaic--featured-left  .mosaic-item:not(.mosaic-item--big),
  .article__mosaic--featured-right .mosaic-item:not(.mosaic-item--big) { aspect-ratio: 550 / 655; }

  /* Collage keeps big-left, tablet proportions */
  .article__mosaic--collage .mosaic-unit[data-n="3"],
  .article__mosaic--collage .mosaic-unit[data-n="2"] { grid-template-columns: 844fr 552fr; }
  .article__mosaic--collage .mosaic-unit[data-n="3"] .mosaic-item:not(.mosaic-item--big) { aspect-ratio: 552 / 361; }
}

/* ---- Mobile (<= 600) ---- */
@media (max-width: 600px) {
  .article__mosaic--2-equal,
  .article__mosaic--3-equal,
  .article__mosaic--4-equal,
  .article__mosaic--featured-left,
  .article__mosaic--featured-right { --mgap: 8px; }
  .article__mosaic--4-equal { grid-template-columns: repeat(2, 1fr); }
  .article__mosaic--3-equal { grid-template-columns: 1fr; }
  /* "2 równe" is the only equal grid that stays two-up on phones; the ACF switch
     "Na telefonie jeden pod drugim" stacks it, for tiles (typically video) that
     get unreadably small at half the screen width. Two classes so it outranks
     the single-class grid rule above. */
  .article__mosaic--2-equal.article__mosaic--stack-m { grid-template-columns: 1fr; }
  .article__mosaic--masonry { column-count: 2; }
  .article__mosaic--masonry .mosaic-item:nth-child(4n+1) { aspect-ratio: 416 / 642; }
  .article__mosaic--masonry .mosaic-item:nth-child(4n+2) { aspect-ratio: 416 / 297; }
  .article__mosaic--masonry .mosaic-item:nth-child(4n+3) { aspect-ratio: 416 / 419; }
  .article__mosaic--masonry .mosaic-item:nth-child(4n)   { aspect-ratio: 416 / 520; }

  /* Collage collapses: big on top (full width) + two in a row */
  .article__mosaic--collage .mosaic-unit[data-n="3"] { grid-template-columns: 1fr 1fr; }
  .article__mosaic--collage .mosaic-unit[data-n="3"] .mosaic-item--big { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 856 / 746; }
  .article__mosaic--collage .mosaic-unit[data-n="3"] .mosaic-item:not(.mosaic-item--big) { aspect-ratio: 416 / 299; }
}

/* ---------- Content block: specialists carousel ---------- */
.article__specialists { display: flex; flex-direction: column; gap: var(--space-l); }
.specialists__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-l);
}
.specialists__head .article__h2 { margin: 0; max-width: 800px; }
.specialists__nav { display: flex; gap: var(--space-xs); flex: 0 0 auto; }
.carousel-arrow {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-grey-200);
  color: var(--color-grey-900);
  cursor: pointer;
  transition: background-color .2s ease;
}
.carousel-arrow:hover { background: var(--color-grey-400); }
.carousel-arrow svg { width: 24px; height: 24px; }
/* treatment.js adds .carousel--no-overflow when the track fits (nothing to scroll). */
.carousel--no-overflow [data-carousel-prev],
.carousel--no-overflow [data-carousel-next] { display: none; }
.specialists__track {
  display: flex;
  gap: var(--space-s);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
.specialists__track::-webkit-scrollbar { display: none; }
.doc-card {
  flex: 0 0 316px;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  text-decoration: none;
  color: var(--color-grey-900);
  scroll-snap-align: start;
}
.doc-card__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--color-grey-200);
  margin-bottom: var(--space-3xs);
}
.doc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.doc-card__loc {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-grey-900);
}
.doc-card__name { font-size: var(--fs-body-m); line-height: var(--lh-body-m); font-weight: 500; }
@media (max-width: 600px) { .doc-card { flex-basis: 260px; } }

/* ---------- Content block: specialists — stacked (vertical list) ----------
   Same rows as .listing-card (border, hover, arrow that nudges right), but the
   media is a 4:5 portrait like .doc-card and the row carries two lines of text:
   city over name. Used on blog posts, where the carousel variant was overkill
   for the one or two doctors an article actually credits. */
.article__specstack { display: flex; flex-direction: column; gap: 10px; }
.article__specstack-heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 40px;
  letter-spacing: -1px;
  color: var(--color-grey-900);
  scroll-margin-top: calc(var(--header-h) + var(--space-l));
}
.article__specstack-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.spec-card {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  padding: var(--space-s);
  background: #fff;
  border: 1px solid var(--color-grey-400);
  border-radius: var(--radius-s);
  text-decoration: none;
  color: var(--color-grey-900);
  transition: border-color .2s ease, background-color .2s ease;
}
.spec-card:hover { background: var(--color-grey-100); }
.spec-card__media {
  flex: 0 0 auto;
  width: 58px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--color-grey-200);
}
.spec-card__img { width: 100%; height: 100%; object-fit: cover; }
.spec-card__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3xs); }
.spec-card__loc {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-grey-900);
}
.spec-card__name { font-size: 18px; line-height: 28px; font-weight: 500; }
.spec-card__arrow { flex: 0 0 auto; color: var(--color-grey-900); transition: transform .2s ease; }
.spec-card:hover .spec-card__arrow { transform: translateX(4px); }

/* ---------- Content block: testimonials mosaic ---------- */
.article__testimonials { display: flex; flex-direction: column; gap: var(--space-l); }
/* Outer box carries the border and the optional height cap; the inner
   __cols wrapper is always multicol (masonry). Multicol needs an
   unconstrained height to balance columns — capping the outer box instead
   keeps the masonry flow and sends overflow down (scroll/clip), not into
   extra side columns. */
.reviews-mosaic {
  border: 1px solid var(--color-grey-400);
  border-radius: var(--radius-s);
  padding: var(--space-l);
}
.reviews-mosaic__cols {
  column-count: 3;
  column-gap: var(--space-s);
}
.tmcard {
  break-inside: avoid;
  margin-bottom: var(--space-s);
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
  padding: var(--space-l);
  border: 1px solid var(--color-grey-400);
  border-radius: var(--radius-xs);
}
.tmcard__stars { display: flex; justify-content: center; padding-block: var(--space-2x); }
/* Client: stars in the Flexible "Opinie" block are black (hero rating stays red). */
.tmcard__stars .rating__star--on { color: var(--color-grey-900); }
.tmcard__text {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-grey-900);
  text-align: center;
}
.tmcard__divider { display: block; width: 100%; height: 1px; background: var(--color-grey-200); }
.tmcard__author {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  font-weight: 500;
  text-align: center;
}
@media (max-width: 1024px) { .reviews-mosaic__cols { column-count: 2; } }
@media (max-width: 600px) {
  .reviews-mosaic__cols { column-count: 1; }
  /* Editor-set px cap (ACF "Maks. wysokość na mobile"): clipped at the cap so
     a partial next review peeks out; scrollable for the rest. */
  .reviews-mosaic--capped { max-height: var(--tm-max-h); overflow-y: auto; }
}
/* Editor-set px cap for tablet/desktop (ACF "Maks. wysokość na desktop"). */
@media (min-width: 601px) {
  .reviews-mosaic--capped-d { max-height: var(--tm-max-h-d); overflow-y: auto; }
}
/* Expand mode (ACF "Zachowanie po przycięciu"): no inner scroll — the capped box
   clips behind a white fade and the button below reveals / collapses the rest. */
.reviews-mosaic--expand { position: relative; }
.reviews-mosaic--expand::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 72px;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--color-white) 80%);
  pointer-events: none;
  opacity: 0;
}
@media (max-width: 600px) {
  .reviews-mosaic--expand.reviews-mosaic--capped:not(.is-expanded) { overflow: hidden; }
  .reviews-mosaic--expand.reviews-mosaic--capped:not(.is-expanded)::after { opacity: 1; }
}
@media (min-width: 601px) {
  .reviews-mosaic--expand.reviews-mosaic--capped-d:not(.is-expanded) { overflow: hidden; }
  .reviews-mosaic--expand.reviews-mosaic--capped-d:not(.is-expanded)::after { opacity: 1; }
}
/* .is-expanded (2 classes) outranks the single-class cap rules above. */
.reviews-mosaic.is-expanded { max-height: none; overflow: visible; }

/* The toggle shows only in the viewport range whose cap is set. */
.reviews-more { display: none; align-self: center; }
@media (max-width: 600px) { .reviews-more--m { display: inline-flex; } }
@media (min-width: 601px) { .reviews-more--d { display: inline-flex; } }

/* ---------- Content block: CTA section (centered, 2 buttons) ---------- */
.article__ctasection {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
  /* alignment comes from the .u-align-* utility (ACF "align" field) */
}
.ctasection__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-art-h2);
  line-height: var(--lh-art-h2);
  letter-spacing: var(--ls-art-h2);
  color: var(--color-grey-900);
}
.ctasection__text {
  max-width: 567px;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-grey-900);
}
.ctasection__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-m);
}
.ctasection__or { font-size: var(--fs-body-s); font-weight: 500; color: var(--color-grey-900); }
@media (max-width: 600px) {
  /* Buttons stack vertically full-width with the "lub" centered between them.
     width:100% beats the shrink-to-fit from the section's .u-align-* utility. */
  .ctasection__actions { flex-direction: column; align-items: stretch; width: 100%; gap: 5px; }
  .ctasection__actions .btn { width: 100%; justify-content: center; }
  .ctasection__or { text-align: center; }
}

/* ---------- Content block: before / after ---------- */
.article__beforeafter { display: flex; flex-direction: column; gap: var(--space-l); }
.ba-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); }
/* Landscape variant: entries whose effect_category is set to 3-column /
   landscape photos (ec_columns). All-landscape grids drop to 2 columns. */
.ba-grid--landscape { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ba-card--landscape .ba-card__slide { aspect-ratio: 3.21 / 2; }
.ba-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding: var(--space-s);
  border: 1px solid var(--color-grey-400);
  border-radius: var(--radius-s);
}
.ba-card__carousel { position: relative; }
.ba-card__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  border-radius: var(--radius-xs);
}
.ba-card__track::-webkit-scrollbar { display: none; }
.ba-card__slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1 / 1; }
/* Crop from the top (like the before/after archive grids): source photos carry a
   caption strip at the bottom that must fall out of the crop. */
.ba-card__slide img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: var(--radius-xs); display: block; }
.ba-card__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-grey-200);
  color: var(--color-grey-900);
  cursor: pointer;
  z-index: 2;
}
.ba-card__arrow--prev { left: -15px; }
.ba-card__arrow--next { right: -15px; }
.ba-card__arrow svg { width: 16px; height: 16px; }
/* Arrows reveal on hover (like the effects archive); always visible on touch. */
.ba-card__arrow { opacity: 0; transition: opacity .2s ease, background-color .2s ease; }
.ba-card__carousel:hover .ba-card__arrow,
.ba-card__arrow:focus-visible { opacity: 1; }
@media (hover: none) { .ba-card__arrow { opacity: 1; } }
/* min-height keeps the empty spacer (single-photo cards) as tall as a dot row. */
.ba-card__dots { display: flex; gap: var(--space-2x); justify-content: center; margin-top: var(--space-2x); min-height: 8px; }
.ba-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-grey-400); }
.ba-card__dot.is-active { background: var(--color-grey-900); }
.ba-card__body { display: flex; flex-direction: column; gap: var(--space-3xs); }
.ba-card__name { font-size: 18px; line-height: 28px; font-weight: 500; color: var(--color-grey-900); }
.ba-card__sub {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  font-weight: 500;
  color: var(--color-grey-900);
}
.ba-card__details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ba-card__detail {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: 500;
  color: var(--color-grey-700);
  margin-top: var(--space-3xs);
  padding-top: var(--space-3xs);
  border-top: 1px solid var(--color-grey-400);
}
.ba-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2x);
  width: 100%;
  padding-block: var(--space-xs);
  padding-inline: 0; /* also rendered as <button> (modal trigger) - drop the UA padding */
  font-size: var(--fs-body-s);
  font-weight: 500;
  color: var(--color-grey-900);
  text-decoration: none;
}
.ba-card__cta svg { width: 24px; height: 24px; }
.ba-gallery-link { width: 100%; }

@media (max-width: 1024px) { .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ba-grid { grid-template-columns: 1fr; } }

/* ---------- Content block: map ---------- */
.article__map { display: flex; flex-direction: column; gap: var(--space-l); }
.article__map-head { display: flex; flex-direction: column; gap: var(--space-s); }
.map-embed {
  aspect-ratio: 859 / 421;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--color-grey-200);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 600px) { .map-embed { aspect-ratio: 3 / 2; } }

/* ---------- Content block: segmented / tabbed content ---------- */
.article__segmented { display: flex; flex-direction: column; gap: var(--space-l); }
.seg-control {
  align-self: flex-start;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2x);
  padding: var(--space-2x);
  background: var(--color-grey-100);
  border-radius: var(--radius-m);
  overflow-x: auto;
  scrollbar-width: none;
}
.seg-control::-webkit-scrollbar { display: none; }
.seg-tab {
  flex: 0 0 auto;
  padding: var(--space-3xs) var(--space-s);
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: 500;
  color: var(--color-grey-900);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.seg-tab.is-active { background: var(--color-grey-900); color: var(--color-grey-100); }
/* Panels: max 2 columns regardless of count (1 = full width, 2 = side by side,
   3+ = wrap in a 2-column grid — never 3+ columns). */
.seg-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); align-items: stretch; }
.seg-group[hidden] { display: none; }
.seg-panel:only-child { grid-column: 1 / -1; }
.seg-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
  padding: var(--space-l);
  background: var(--color-grey-100);
  border-radius: var(--radius-s);
}
.seg-panel__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 40px;
  letter-spacing: -1px;
  color: var(--color-grey-900);
}
.seg-panel__body { font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
/* Restore markers killed by the global `ul, ol { list-style: none }` reset. */
.seg-panel__body ul,
.seg-panel__body ol { margin: 0; padding-left: var(--space-l); }
.seg-panel__body ul { list-style: disc; }
.seg-panel__body ol { list-style: decimal; }
@media (max-width: 768px) { .seg-group { grid-template-columns: 1fr; } }

/* ---------- Content block: related articles ("Przeczytaj również") ---------- */
.article__related { display: flex; flex-direction: column; gap: var(--space-xl); padding-block: var(--space-3xl); }
.related-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-l); }
.related-head .article__h2 { margin: 0; }
.related-nav { display: flex; gap: var(--space-s); flex: 0 0 auto; }
.related-track {
  display: flex;
  gap: var(--space-l);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}
.related-track::-webkit-scrollbar { display: none; }
.relcard {
  flex: 0 0 332px;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  text-decoration: none;
  color: var(--color-grey-900);
  scroll-snap-align: start;
}
.relcard__media {
  aspect-ratio: 332 / 249;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--color-grey-200);
}
.relcard__media img { width: 100%; height: 100%; object-fit: cover; }
/* Equal-height cards: body fills the (stretched) card, date pinned to the bottom. */
.relcard__body { display: flex; flex-direction: column; gap: var(--space-s); flex: 1 1 auto; }
.relcard__date { margin-top: auto; }
.relcard:hover .relcard__title { text-decoration: underline; text-underline-offset: 3px; }
.relcard__head { display: flex; flex-direction: column; gap: var(--space-2x); }
.relcard__meta,
.relcard__date {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  font-weight: 500;
  color: var(--color-grey-900);
}
.relcard__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 40px;
  letter-spacing: -1px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 600px) { .relcard { flex-basis: 280px; } }

/* ---------- Content block: patient reels (video carousel) ---------- */
.article__reels { display: flex; flex-direction: column; gap: var(--space-l); padding-block: var(--space-2xl); }
.reels-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-l); }
.reels-head__text { display: flex; flex-direction: column; gap: 13px; max-width: 800px; }
.reels-head__text .article__h2 { margin: 0; }
.reels-head__sub { font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
.reels-nav { display: flex; gap: var(--space-xs); flex: 0 0 auto; }
.reels-track {
  display: flex;
  gap: var(--space-s);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}
.reels-track::-webkit-scrollbar { display: none; }
.reel {
  position: relative;
  display: block;
  flex: 0 0 253px;
  max-width: 70%;
  aspect-ratio: 253 / 450;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--color-grey-200);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}
.reel__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel[data-play="click"] { cursor: pointer; }
.reel__sound {
  position: absolute;
  top: 11px;
  left: 11px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
}
.reel__sound svg { width: 24px; height: 24px; }
/* Muted state: a diagonal slash over the badge (reels start muted). */
.reel__sound::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(13, 13, 13, .45);
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0;
  transition: opacity .15s ease;
}
.reel.is-muted .reel__sound::after { opacity: 1; }
/* Play overlay — shown on hover for click-to-play reels, hidden while playing. */
.reel__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 13, 13, .5);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 2;
}
.reel__play svg { width: 28px; height: 28px; }
.reel__play-icon { display: inline-flex; }
.reel__play-icon--pause { display: none; }
.reel.is-playing .reel__play-icon--play { display: none; }
.reel.is-playing .reel__play-icon--pause { display: inline-flex; }
.reel[data-play="click"]:hover .reel__play { opacity: 1; }
@media (max-width: 600px) { .reel { flex-basis: 220px; } }