/* layout.css — container, buttons, shared utilities. Loaded on every page. */

.container {
  width: 100%;
  /* --container-max is the CONTENT width (1300, per Figma). The gutter sits
     outside it, so the element max-width must include both gutters. */
  max-width: calc(var(--container-max) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Full-bleed section wrapper keeps inner content in the container */
.section { position: relative; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-xl);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.btn svg { width: 24px; height: 24px; flex: 0 0 auto; }

/* Design-system states (Figma "Buttons"):
 *  - Hover  → underline the label (fill tone barely shifts).
 *  - Focus  → 2px ring in the type's own colour, offset 2px (a11y-boosted from 1px).
 *  - Disabled → muted per type; not interactive. */
.btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.btn:focus-visible { outline: 2px solid var(--color-grey-900); outline-offset: 2px; text-decoration: none; }
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled { pointer-events: none; cursor: not-allowed; text-decoration: none; }

/* Primary (filled dark) */
.btn--dark { background: var(--color-grey-900); color: var(--color-grey-100); }
.btn--dark:hover { background: var(--color-black); }
.btn--dark:disabled,
.btn--dark[aria-disabled="true"],
.btn--dark.is-disabled { background: var(--color-grey-500); color: var(--color-grey-800); }

/* Light (filled white — used on dark backgrounds) */
.btn--light { background: var(--color-white); color: var(--color-grey-900); }
.btn--light:hover { background: var(--color-grey-200); }
.btn--light:focus-visible { outline-color: var(--color-white); }
.btn--light:disabled,
.btn--light[aria-disabled="true"],
.btn--light.is-disabled { background: var(--color-grey-500); color: var(--color-grey-800); }

/* Secondary (outline) */
.btn--outline { background: transparent; color: var(--color-grey-900); border: 1.5px solid var(--color-grey-400); }
.btn--outline:disabled,
.btn--outline[aria-disabled="true"],
.btn--outline.is-disabled { border-color: var(--color-grey-600); color: var(--color-grey-600); background: transparent; }

/* Tertiary (text / ghost) */
.btn--text { background: transparent; color: var(--color-grey-900); padding-inline: 0; border-radius: var(--radius-xs); }
.btn--text:disabled,
.btn--text[aria-disabled="true"],
.btn--text.is-disabled { color: var(--color-grey-600); }

/* Error (filled red) */
.btn--error { background: var(--color-accent); color: var(--color-grey-100); }
.btn--error:focus-visible { outline-color: var(--color-accent); }
.btn--error:disabled,
.btn--error[aria-disabled="true"],
.btn--error.is-disabled { background: var(--color-red-100); color: var(--color-red-900); }

.btn--sm { padding: var(--space-2x) var(--space-s); }
.btn--sm svg { width: 16px; height: 16px; }

/* ---------- Rating stars ---------- */
.rating { display: inline-flex; align-items: center; gap: var(--space-xs); }
.rating__stars { display: inline-flex; gap: 2px; line-height: 0; }
.rating__stars svg { width: 16px; height: 16px; }
.rating__star { color: var(--color-grey-400); }
.rating__star--on { color: var(--color-accent); }
.rating__label { font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 500; }
.rating__label strong { font-weight: 600; }

/* Grayscale image utility (press logos etc.) */
.is-grayscale { filter: grayscale(1); }

/* ---------- Breadcrumbs (shared component) ---------- */
/* Sits in centered heroes (blog post, page hero) - never inherit their centering. */
.breadcrumbs { text-align: left; }
/* Inline flow, not flex: a long current title wraps like text after "Blog /" instead of
   dropping to its own full-width line (client feedback 2026-09, mobile). */
.breadcrumbs__list {
  padding-block: var(--space-3xs);
  font-size: var(--fs-caption);      /* line box = caption metrics, same row height as before */
  line-height: var(--lh-caption);
}
.breadcrumbs__item,
.breadcrumbs__sep {
  display: inline;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
}
.breadcrumbs__sep { margin-inline: var(--space-3xs); }
.breadcrumbs__link { font-weight: 500; color: var(--color-grey-900); }
.breadcrumbs__link:hover { text-decoration: underline; }
.breadcrumbs__current { font-weight: 500; color: var(--color-grey-600); }
.breadcrumbs__sep { color: var(--color-grey-900); }

/* ---------- Alignment utility (section heading + text) ---------- */
/* Drives text-align (inline text), align-items (flex children) and margin-inline
   (position of a max-width column; a no-op on full-width wrappers). Works on block
   and flex-column heading/content wrappers. Sections opt in via the ACF "align" field. */
.u-align-left   { text-align: left;   align-items: flex-start; margin-inline: 0 auto; }
.u-align-center { text-align: center; align-items: center;     margin-inline: auto; }
.u-align-right  { text-align: right;  align-items: flex-end;   margin-inline: auto 0; }

/* ---------- Dynamic table (article "pricing" block + page "table" section) ---------- */
.udi-table-wrap {
  border: 1px solid var(--color-grey-400);
  border-radius: var(--radius-s);
  overflow-x: auto;           /* many columns: horizontal scroll on mobile */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;                                        /* Firefox */
  scrollbar-color: var(--color-grey-400) var(--color-grey-100); /* thumb / track */
}
.udi-table-wrap::-webkit-scrollbar { height: 8px; }
.udi-table-wrap::-webkit-scrollbar-track { background: var(--color-grey-100); border-radius: var(--radius-pill); }
.udi-table-wrap::-webkit-scrollbar-thumb { background: var(--color-grey-400); border-radius: var(--radius-pill); }
.udi-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--color-grey-600); }
.udi-table {
  width: 100%;
  min-width: var(--table-min, 0);
  border-collapse: collapse;
}
.udi-table th,
.udi-table td {
  padding: var(--space-xs);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-grey-900);
  text-align: left;
  vertical-align: middle;
}
.udi-table tbody tr:not(:last-child) th,
.udi-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--color-grey-400); }
.udi-table thead th {
  font-weight: 500;
  padding-block: var(--space-m);
  background: var(--color-grey-100);
  border-bottom: 1px solid var(--color-grey-400);
}
.udi-table__icon { display: inline-flex; color: var(--color-grey-900); }
.udi-table__icon svg { width: 24px; height: 24px; }
.udi-table__icon-img { width: 24px; height: 24px; object-fit: contain; }
.udi-table__bool { display: inline-flex; }
.udi-table__bool svg { width: 20px; height: 20px; }
.udi-table__bool--yes { color: var(--color-grey-900); }
.udi-table__bool--no { color: var(--color-grey-600); }

/* ---------------------------------------------------------------------------
   Links inside editor-authored copy.

   `base.css` resets `a { color: inherit; text-decoration: none }`, which makes
   link styling opt-in per component. Every container rendering a rich-text
   field used to re-declare it — or forget to: `.article__intro`, `.faq__a`,
   `.seg-panel__body`, `.cs-split__body` and `.media-split__body` had no rule at
   all, so their links were indistinguishable from body text. This is the one
   place that treatment lives now; the per-section `a` rules were removed.

   Underline is what carries the distinction, so WCAG 1.4.1 holds without the
   colour. Never drop it on :hover — that hides the affordance exactly when the
   user reaches for it.

   `:not(.btn):not(.wp-block-button__link)`: these selectors are (0,1,1) and
   would otherwise outrank `.btn--dark` (0,1,0) on a button-styled anchor nested
   in editor output — Gutenberg is still on for pages (`udi_disable_block_editor`
   exempts only post/case_study), so `.entry-content` can contain block buttons.

   Adding a section that renders wp_kses_post() output? Add its class here.
   --------------------------------------------------------------------------- */
.article__intro a:not(.btn):not(.wp-block-button__link),
.article__text a:not(.btn):not(.wp-block-button__link),
.article__richtext a:not(.btn):not(.wp-block-button__link),
.content-section__block a:not(.btn):not(.wp-block-button__link),
.cs-split__body a:not(.btn):not(.wp-block-button__link),
.entry-content a:not(.btn):not(.wp-block-button__link),
.faq__a a:not(.btn):not(.wp-block-button__link),
.media-split__body a:not(.btn):not(.wp-block-button__link),
.seg-panel__body a:not(.btn):not(.wp-block-button__link),
.tcat__desc a:not(.btn):not(.wp-block-button__link),
.team-about__text a:not(.btn):not(.wp-block-button__link),
.team-hero__bio a:not(.btn):not(.wp-block-button__link),
.team__section-desc a:not(.btn):not(.wp-block-button__link),
.text-sec__body a:not(.btn):not(.wp-block-button__link),
.treatments__intro a:not(.btn):not(.wp-block-button__link),
.udi-prose a:not(.btn):not(.wp-block-button__link) {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.article__intro a:not(.btn):not(.wp-block-button__link):hover,
.article__text a:not(.btn):not(.wp-block-button__link):hover,
.article__richtext a:not(.btn):not(.wp-block-button__link):hover,
.content-section__block a:not(.btn):not(.wp-block-button__link):hover,
.cs-split__body a:not(.btn):not(.wp-block-button__link):hover,
.entry-content a:not(.btn):not(.wp-block-button__link):hover,
.faq__a a:not(.btn):not(.wp-block-button__link):hover,
.media-split__body a:not(.btn):not(.wp-block-button__link):hover,
.seg-panel__body a:not(.btn):not(.wp-block-button__link):hover,
.tcat__desc a:not(.btn):not(.wp-block-button__link):hover,
.team-about__text a:not(.btn):not(.wp-block-button__link):hover,
.team-hero__bio a:not(.btn):not(.wp-block-button__link):hover,
.team__section-desc a:not(.btn):not(.wp-block-button__link):hover,
.text-sec__body a:not(.btn):not(.wp-block-button__link):hover,
.treatments__intro a:not(.btn):not(.wp-block-button__link):hover,
.udi-prose a:not(.btn):not(.wp-block-button__link):hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

/* Instagram embed placeholders ship their own inline link colours (grey on
   white, no underline). They're not editorial links — leave them alone.
   The `:not()` chain is repeated verbatim: the rule above is (0,3,1), so a
   plain `.instagram-media a` (0,1,1) would lose and the placeholder links
   would render red until embed.js swaps in the iframe (or forever, if it
   fails to load). Matching specificity lets source order decide. */
.instagram-media a:not(.btn):not(.wp-block-button__link),
.instagram-media a:not(.btn):not(.wp-block-button__link):hover {
  color: inherit;
  text-decoration: none;
}

/* ---------- Separator: custom height per breakpoint ---------- */
/* Size "Własna wysokość" of the separator block/section: the template sets --sep-d
   (desktop) and optionally --sep-t (tablet) / --sep-m (phone); an empty smaller screen
   inherits the next larger one. Here, not in a section file, because the page
   separator ships no asset of its own (layout.css is always loaded, no CSS shift). */
.udi-sep-custom { height: var(--sep-d, var(--space-2xl)); }
@media (max-width: 1024px) {
  .udi-sep-custom { height: var(--sep-t, var(--sep-d, var(--space-2xl))); }
}
@media (max-width: 600px) {
  .udi-sep-custom { height: var(--sep-m, var(--sep-t, var(--sep-d, var(--space-2xl)))); }
}