/*
 * Wspólne komponenty sekcji phx-* (ładowane raz: front + iframe edytora).
 * Kolory i branding wyłącznie z tokenów: presety (--wp--preset--*), decyzje (--wp--custom--*) i warstwa pochodna
 * (--wp--custom--derived--*, liczona przez motyw z decyzji). Tło sekcji ustawia kontekst (light | dark | brand) przez
 * zmienne --phx-*, z których korzystają wszystkie komponenty – blok nie musi wiedzieć, na jakim tle stoi.
 */

/* ---------- Kontekst kolorów sekcji ---------- */
/* ozdobniki SVG (Ornaments\Styles): adresy kopii per kontekst `--phx-orn-<slot>--<ctx>` → `--phx-orn-<slot>`; poza sekcją
   i w `.phx-bg-none` kontekst light (brak zmiennej = brak tła) */
:root,
.phx-bg-none {
  --phx-orn-heading-divider: var(--phx-orn-heading-divider--light);
  --phx-orn-eyebrow-side: var(--phx-orn-eyebrow-side--light);
  --phx-orn-highlight-under: var(--phx-orn-highlight-under--light);
  --phx-orn-highlight-behind: var(--phx-orn-highlight-behind--light);
  --phx-orn-highlight-behind-text: var(--phx-orn-highlight-behind-text--light, currentColor);
}
/* tło „zdjęcie”: domyślnie jasna treść (kontekst dark); `phx-image-text-dark` – ciemna treść na jasnym zdjęciu (kontekst light) */
.phx-section,
.phx-ctx-light,
.phx-bg-image.phx-image-text-dark,
.wp-block-group.is-style-phx-section,
.wp-block-group.is-style-phx-section-subtle,
.wp-block-group.is-style-phx-section-dark,
.wp-block-group.is-style-phx-section-brand {
  --phx-bg: var(--wp--preset--color--base);
  --phx-fg: var(--wp--preset--color--contrast);
  --phx-fg-muted: var(--wp--preset--color--muted);
  --phx-link: var(--wp--preset--color--brand-text);
  --phx-border: var(--wp--preset--color--border);
  --phx-btn-primary-bg: var(--wp--custom--derived--button--primary--light--bg);
  --phx-btn-primary-bg-image: var(--wp--custom--derived--button--primary--light--bg-image);
  --phx-btn-primary-fg: var(--wp--custom--derived--button--primary--light--fg);
  --phx-btn-primary-border: var(--wp--custom--derived--button--primary--light--border);
  --phx-btn-primary-bg-hover: var(--wp--custom--derived--button--primary--light--bg-hover);
  --phx-btn-primary-fg-hover: var(--wp--custom--derived--button--primary--light--fg-hover);
  --phx-btn-primary-border-hover: var(--wp--custom--derived--button--primary--light--border-hover);
  --phx-btn-secondary-bg: var(--wp--custom--derived--button--secondary--light--bg);
  --phx-btn-secondary-bg-image: var(--wp--custom--derived--button--secondary--light--bg-image);
  --phx-btn-secondary-fg: var(--wp--custom--derived--button--secondary--light--fg);
  --phx-btn-secondary-border: var(--wp--custom--derived--button--secondary--light--border);
  --phx-btn-secondary-bg-hover: var(--wp--custom--derived--button--secondary--light--bg-hover);
  --phx-btn-secondary-fg-hover: var(--wp--custom--derived--button--secondary--light--fg-hover);
  --phx-btn-secondary-border-hover: var(--wp--custom--derived--button--secondary--light--border-hover);
  --phx-eyebrow-fg: var(--wp--custom--derived--eyebrow--light--fg);
  --phx-eyebrow-bg: var(--wp--custom--derived--eyebrow--light--bg);
  --phx-hl-fg: var(--wp--custom--derived--highlight--light--fg);
  --phx-hl-bg: var(--wp--custom--derived--highlight--light--bg);
  --phx-hl-line: var(--wp--custom--derived--highlight--light--line);
  --phx-orn-heading-divider: var(--phx-orn-heading-divider--light);
  --phx-orn-eyebrow-side: var(--phx-orn-eyebrow-side--light);
  --phx-orn-highlight-under: var(--phx-orn-highlight-under--light);
  --phx-orn-highlight-behind: var(--phx-orn-highlight-behind--light);
  --phx-orn-highlight-behind-text: var(--phx-orn-highlight-behind-text--light, currentColor);
  --phx-icon-fg: var(--wp--custom--derived--icon--light--fg);
  --phx-icon-bg: var(--wp--custom--derived--icon--light--bg);
  --phx-icon-border: var(--wp--custom--derived--icon--light--border);
  --phx-card-bg: var(--wp--custom--derived--card--light--bg);
  --phx-card-border: var(--wp--custom--derived--card--light--border);
  --phx-card-shadow: var(--wp--custom--derived--card--light--shadow);
  --phx-card-featured-border: var(--wp--custom--derived--card--featured--light--border);
  --phx-card-featured-shadow: var(--wp--custom--derived--card--featured--light--shadow);
  --phx-field-bg: var(--wp--custom--derived--field--light--bg);
  --phx-field-border: var(--wp--custom--derived--field--light--border);
  --phx-field-border-focus: var(--wp--custom--derived--field--light--border-focus);
  --phx-field-error: var(--wp--custom--derived--field--light--error);
  --phx-field-success: var(--wp--custom--derived--field--light--success);
  color: var(--phx-fg);
}
.phx-bg-subtle,
.wp-block-group.is-style-phx-section-subtle {
  --phx-bg: var(--wp--preset--color--surface);
  --phx-fg: var(--wp--preset--color--on-surface);
  --phx-orn-heading-divider: var(--phx-orn-heading-divider--subtle);
  --phx-orn-eyebrow-side: var(--phx-orn-eyebrow-side--subtle);
  --phx-orn-highlight-under: var(--phx-orn-highlight-under--subtle);
  --phx-orn-highlight-behind: var(--phx-orn-highlight-behind--subtle);
  --phx-orn-highlight-behind-text: var(--phx-orn-highlight-behind-text--subtle, currentColor);
  --phx-card-bg: var(--wp--custom--derived--card--subtle--bg);
  --phx-card-border: var(--wp--custom--derived--card--subtle--border);
  --phx-card-shadow: var(--wp--custom--derived--card--subtle--shadow);
  --phx-card-featured-border: var(--wp--custom--derived--card--featured--subtle--border);
  --phx-card-featured-shadow: var(--wp--custom--derived--card--featured--subtle--shadow);
  --phx-field-bg: var(--wp--custom--derived--field--subtle--bg);
  --phx-field-border: var(--wp--custom--derived--field--subtle--border);
  --phx-field-border-focus: var(--wp--custom--derived--field--subtle--border-focus);
  --phx-field-error: var(--wp--custom--derived--field--subtle--error);
  --phx-field-success: var(--wp--custom--derived--field--subtle--success);
}
.phx-bg-dark,
.phx-bg-image,
.phx-ctx-dark,
.wp-block-group.is-style-phx-section-dark {
  --phx-bg: var(--wp--preset--color--inverse);
  --phx-fg: var(--wp--preset--color--on-inverse);
  --phx-fg-muted: var(--wp--preset--color--on-inverse);
  --phx-link: var(--wp--preset--color--on-inverse);
  --phx-border: color-mix(in srgb, var(--wp--preset--color--on-inverse) 28%, transparent);
  --phx-btn-primary-bg: var(--wp--custom--derived--button--primary--dark--bg);
  --phx-btn-primary-bg-image: var(--wp--custom--derived--button--primary--dark--bg-image);
  --phx-btn-primary-fg: var(--wp--custom--derived--button--primary--dark--fg);
  --phx-btn-primary-border: var(--wp--custom--derived--button--primary--dark--border);
  --phx-btn-primary-bg-hover: var(--wp--custom--derived--button--primary--dark--bg-hover);
  --phx-btn-primary-fg-hover: var(--wp--custom--derived--button--primary--dark--fg-hover);
  --phx-btn-primary-border-hover: var(--wp--custom--derived--button--primary--dark--border-hover);
  --phx-btn-secondary-bg: var(--wp--custom--derived--button--secondary--dark--bg);
  --phx-btn-secondary-bg-image: var(--wp--custom--derived--button--secondary--dark--bg-image);
  --phx-btn-secondary-fg: var(--wp--custom--derived--button--secondary--dark--fg);
  --phx-btn-secondary-border: var(--wp--custom--derived--button--secondary--dark--border);
  --phx-btn-secondary-bg-hover: var(--wp--custom--derived--button--secondary--dark--bg-hover);
  --phx-btn-secondary-fg-hover: var(--wp--custom--derived--button--secondary--dark--fg-hover);
  --phx-btn-secondary-border-hover: var(--wp--custom--derived--button--secondary--dark--border-hover);
  --phx-eyebrow-fg: var(--wp--custom--derived--eyebrow--dark--fg);
  --phx-eyebrow-bg: var(--wp--custom--derived--eyebrow--dark--bg);
  --phx-hl-fg: var(--wp--custom--derived--highlight--dark--fg);
  --phx-hl-bg: var(--wp--custom--derived--highlight--dark--bg);
  --phx-hl-line: var(--wp--custom--derived--highlight--dark--line);
  --phx-orn-heading-divider: var(--phx-orn-heading-divider--dark);
  --phx-orn-eyebrow-side: var(--phx-orn-eyebrow-side--dark);
  --phx-orn-highlight-under: var(--phx-orn-highlight-under--dark);
  --phx-orn-highlight-behind: var(--phx-orn-highlight-behind--dark);
  --phx-orn-highlight-behind-text: var(--phx-orn-highlight-behind-text--dark, currentColor);
  --phx-icon-fg: var(--wp--custom--derived--icon--dark--fg);
  --phx-icon-bg: var(--wp--custom--derived--icon--dark--bg);
  --phx-icon-border: var(--wp--custom--derived--icon--dark--border);
  --phx-card-bg: var(--wp--custom--derived--card--dark--bg);
  --phx-card-border: var(--wp--custom--derived--card--dark--border);
  --phx-card-shadow: var(--wp--custom--derived--card--dark--shadow);
  --phx-card-featured-border: var(--wp--custom--derived--card--featured--dark--border);
  --phx-card-featured-shadow: var(--wp--custom--derived--card--featured--dark--shadow);
  --phx-field-bg: var(--wp--custom--derived--field--dark--bg);
  --phx-field-border: var(--wp--custom--derived--field--dark--border);
  --phx-field-border-focus: var(--wp--custom--derived--field--dark--border-focus);
  --phx-field-error: var(--wp--custom--derived--field--dark--error);
  --phx-field-success: var(--wp--custom--derived--field--dark--success);
}
.phx-bg-brand,
.phx-ctx-brand,
.wp-block-group.is-style-phx-section-brand {
  --phx-bg: var(--wp--custom--derived--fill--primary);
  --phx-fg: var(--wp--preset--color--on-primary);
  --phx-fg-muted: var(--wp--preset--color--on-primary);
  --phx-link: var(--wp--preset--color--on-primary);
  --phx-border: color-mix(in srgb, var(--wp--preset--color--on-primary) 32%, transparent);
  --phx-btn-primary-bg: var(--wp--custom--derived--button--primary--brand--bg);
  --phx-btn-primary-bg-image: var(--wp--custom--derived--button--primary--brand--bg-image);
  --phx-btn-primary-fg: var(--wp--custom--derived--button--primary--brand--fg);
  --phx-btn-primary-border: var(--wp--custom--derived--button--primary--brand--border);
  --phx-btn-primary-bg-hover: var(--wp--custom--derived--button--primary--brand--bg-hover);
  --phx-btn-primary-fg-hover: var(--wp--custom--derived--button--primary--brand--fg-hover);
  --phx-btn-primary-border-hover: var(--wp--custom--derived--button--primary--brand--border-hover);
  --phx-btn-secondary-bg: var(--wp--custom--derived--button--secondary--brand--bg);
  --phx-btn-secondary-bg-image: var(--wp--custom--derived--button--secondary--brand--bg-image);
  --phx-btn-secondary-fg: var(--wp--custom--derived--button--secondary--brand--fg);
  --phx-btn-secondary-border: var(--wp--custom--derived--button--secondary--brand--border);
  --phx-btn-secondary-bg-hover: var(--wp--custom--derived--button--secondary--brand--bg-hover);
  --phx-btn-secondary-fg-hover: var(--wp--custom--derived--button--secondary--brand--fg-hover);
  --phx-btn-secondary-border-hover: var(--wp--custom--derived--button--secondary--brand--border-hover);
  --phx-eyebrow-fg: var(--wp--custom--derived--eyebrow--brand--fg);
  --phx-eyebrow-bg: var(--wp--custom--derived--eyebrow--brand--bg);
  --phx-hl-fg: var(--wp--custom--derived--highlight--brand--fg);
  --phx-hl-bg: var(--wp--custom--derived--highlight--brand--bg);
  --phx-hl-line: var(--wp--custom--derived--highlight--brand--line);
  --phx-orn-heading-divider: var(--phx-orn-heading-divider--brand);
  --phx-orn-eyebrow-side: var(--phx-orn-eyebrow-side--brand);
  --phx-orn-highlight-under: var(--phx-orn-highlight-under--brand);
  --phx-orn-highlight-behind: var(--phx-orn-highlight-behind--brand);
  --phx-orn-highlight-behind-text: var(--phx-orn-highlight-behind-text--brand, currentColor);
  --phx-icon-fg: var(--wp--custom--derived--icon--brand--fg);
  --phx-icon-bg: var(--wp--custom--derived--icon--brand--bg);
  --phx-icon-border: var(--wp--custom--derived--icon--brand--border);
  --phx-card-bg: var(--wp--custom--derived--card--brand--bg);
  --phx-card-border: var(--wp--custom--derived--card--brand--border);
  --phx-card-shadow: var(--wp--custom--derived--card--brand--shadow);
  --phx-card-featured-border: var(--wp--custom--derived--card--featured--brand--border);
  --phx-card-featured-shadow: var(--wp--custom--derived--card--featured--brand--shadow);
  --phx-field-bg: var(--wp--custom--derived--field--brand--bg);
  --phx-field-border: var(--wp--custom--derived--field--brand--border);
  --phx-field-border-focus: var(--wp--custom--derived--field--brand--border-focus);
  --phx-field-error: var(--wp--custom--derived--field--brand--error);
  --phx-field-success: var(--wp--custom--derived--field--brand--success);
}

/* ---------- Sekcja i kontener ---------- */
/* sekcje stykają się ze sobą – bez odstępu blockGap WordPressa między blokami treści */
:where(.wp-site-blocks, .wp-block-post-content, .entry-content, .wp-block-template-part) > .phx-section.phx-section { margin-block: 0; }
.phx-section {
  position: relative;
  isolation: isolate;
  background: var(--phx-bg);
  padding-block: var(--wp--custom--derived--space--section);
}
.phx-bg-image { background: var(--wp--preset--color--inverse); }
.phx-bg-image.phx-image-text-dark { background: var(--wp--preset--color--base); }
/* dwie sąsiednie sekcje z tym samym jasnym tłem – bez podwójnego odstępu (także grupa w stylu sekcji obok sekcji) */
:is(.phx-bg-none, .is-style-phx-section) + :is(.phx-bg-none, .is-style-phx-section),
:is(.phx-bg-subtle, .is-style-phx-section-subtle) + :is(.phx-bg-subtle, .is-style-phx-section-subtle) { padding-top: 0; }
.phx-container {
  position: relative;
  max-width: var(--wp--custom--layout--wide-width);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--30);
}
/* jawnie i z wyższą specyficznością: wtyczki z globalnym resetem (np. Tutor LMS: `body.tutor-frontend * { box-sizing:
   border-box }`, 0,1,1) zwężałyby kontener o padding */
.phx-container.phx-container { box-sizing: content-box; }
.phx-container--narrow { max-width: var(--wp--custom--layout--content-width); }
@media (min-width: 782px) {
  .phx-container { padding-inline: var(--wp--preset--spacing--40); }
}
/* Grupa core/group w stylu sekcji (Blocks\GroupStyles): pełna szerokość jak sekcja phx (także w layoucie constrained
   treści strony), rytm pionowy i marginesy boczne kontenera, dzieci w szerokości kontenera */
:where(.wp-site-blocks, .wp-block-post-content, .entry-content, .wp-block-template-part) > .wp-block-group[class*="is-style-phx-section"] { margin-block: 0; }
.wp-block-group.wp-block-group:is(.is-style-phx-section, .is-style-phx-section-subtle, .is-style-phx-section-dark, .is-style-phx-section-brand) {
  --phx-group-max: none;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  max-width: var(--phx-group-max);
  background: var(--phx-bg);
  padding-block: var(--wp--custom--derived--space--section);
  padding-inline: var(--wp--preset--spacing--30);
}
.wp-block-group:is(.is-style-phx-section, .is-style-phx-section-subtle, .is-style-phx-section-dark, .is-style-phx-section-brand) > * {
  max-width: var(--wp--custom--layout--wide-width);
  margin-inline: auto;
}
@media (min-width: 782px) {
  .wp-block-group.wp-block-group:is(.is-style-phx-section, .is-style-phx-section-subtle, .is-style-phx-section-dark, .is-style-phx-section-brand) { padding-inline: var(--wp--preset--spacing--40); }
}
/* <main> szablonów dla treści spoza sekcji (page, singular, index – strony wtyczek, konto klienta, wpisy): szerokość
   i marginesy boczne jak .phx-container (szerokość daje layout constrained grupy), odstęp w pionie jak sekcja */
.phx-main {
  padding-block: var(--wp--custom--derived--space--section);
  padding-inline: var(--wp--preset--spacing--30);
}
@media (min-width: 782px) {
  .phx-main { padding-inline: var(--wp--preset--spacing--40); }
}
.phx-section__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.phx-section__bg .phx-image,
.phx-section__bg img { width: 100%; height: 100%; object-fit: cover; }
.phx-section__bg::after { content: ""; position: absolute; inset: 0; background: var(--wp--preset--color--inverse); opacity: 0.6; }
.phx-image-text-dark .phx-section__bg::after { background: var(--wp--preset--color--base); }
.phx-overlay-none .phx-section__bg::after { content: none; }
.phx-overlay-light .phx-section__bg::after { opacity: 0.4; }
.phx-overlay-strong .phx-section__bg::after { opacity: 0.75; }
/* kolor nakładki z palety (po regule phx-image-text-dark, więc wygrywa także przy ciemnej treści) */
.phx-overlay-color-primary .phx-section__bg::after { background: var(--wp--preset--color--primary); }
.phx-overlay-color-secondary .phx-section__bg::after { background: var(--wp--preset--color--secondary); }
.phx-overlay-color-accent .phx-section__bg::after { background: var(--wp--preset--color--accent); }
/* ---------- Grafika tła sekcji (decoration_*) ---------- */
/* warstwy w izolowanej sekcji: tło (-1) < grafika (0) < cała treść za nią (1) – kontener, pas nagłówka strony, figura
   phx-media na pełną szerokość; :where() bez specyficzności, więc własne `position` bloku (absolute, sticky, fixed) wygrywa.
   Wymiary i pozycje to literały układu */
.phx-section__decor { position: absolute; z-index: 0; pointer-events: none; line-height: 0; width: 280px; }
.phx-section__decor img { display: block; width: 100%; height: auto; }
:where(.phx-section > .phx-section__decor) ~ * { position: relative; z-index: 1; }
.phx-decor--s { width: 160px; }
.phx-decor--l { width: 420px; }
.phx-decor--top-left { top: 0; left: 0; }
.phx-decor--top-right { top: 0; right: 0; }
.phx-decor--bottom-left { bottom: 0; left: 0; }
.phx-decor--bottom-right { bottom: 0; right: 0; }
/* wystawanie o połowę wysokości grafiki; sekcja nad tłem sąsiadów (późniejsza sekcja malowałaby się na grafice) */
.phx-decor--overhang:is(.phx-decor--top-left, .phx-decor--top-right) { translate: 0 -50%; }
.phx-decor--overhang:is(.phx-decor--bottom-left, .phx-decor--bottom-right) { translate: 0 50%; }
.phx-section.phx-has-overhang { z-index: 1; }
/* bez przewijania w poziomie; clip (nie hidden) zostawia overflow-y widoczny dla wystawania */
.phx-section:has(> .phx-section__decor) { overflow-x: clip; }
@media (max-width: 781px) {
  .phx-decor-m--scale { width: 154px; }
  .phx-decor-m--scale.phx-decor--s { width: 88px; }
  .phx-decor-m--scale.phx-decor--l { width: 231px; }
  .phx-decor-m--hide { display: none; }
}
.phx-stack > * + * { margin-top: var(--wp--custom--derived--space--stack); }
.phx-empty { padding: var(--wp--preset--spacing--30); border: 1px dashed var(--wp--preset--color--muted); color: var(--wp--preset--color--muted); }

/* ---------- Okruszki (Seo\Breadcrumbs: hero strony, archiwa) ---------- */
.phx-breadcrumbs { margin-bottom: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--xs); color: var(--phx-fg-muted); }
.phx-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); margin: 0; padding: 0; list-style: none; }
.phx-breadcrumbs li:not(:last-child)::after { content: "/"; margin-inline-start: var(--wp--preset--spacing--10); color: var(--phx-fg-muted); }
.phx-breadcrumbs a { color: var(--phx-link); }

/* ---------- Typografia ---------- */
.phx-heading {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: var(--wp--custom--type--heading--weight);
  line-height: var(--wp--custom--type--heading--line-height);
  letter-spacing: var(--wp--custom--type--heading--letter-spacing);
  text-transform: var(--wp--custom--type--heading--transform);
  color: inherit;
  text-wrap: balance;
}
.phx-heading--jumbo-2 { font-size: var(--wp--custom--derived--type--jumbo--2); }
.phx-heading--jumbo-1 { font-size: var(--wp--custom--derived--type--jumbo--1); }
.phx-heading--display { font-size: var(--wp--preset--font-size--xxxl); }
.phx-heading--hero { font-size: var(--wp--preset--font-size--xxl); }
.phx-heading--section { font-size: var(--wp--preset--font-size--xl); }
.phx-heading--item { font-size: var(--wp--preset--font-size--l); }
.phx-heading--small { font-size: var(--wp--preset--font-size--m); }
.phx-lead { font-size: var(--wp--preset--font-size--m); }
.phx-muted { color: var(--phx-fg-muted); }

.phx-hl {
  color: var(--phx-hl-fg);
  background: linear-gradient(var(--phx-hl-line), var(--phx-hl-line)) 0 100% / 100% var(--wp--custom--derived--highlight--thickness) no-repeat, var(--phx-hl-bg);
  padding-inline: var(--wp--custom--derived--highlight--padding-inline);
  border-radius: var(--wp--custom--derived--highlight--radius);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.phx-eyebrow {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--custom--derived--eyebrow--size);
  font-weight: var(--wp--custom--type--eyebrow--weight);
  letter-spacing: var(--wp--custom--type--eyebrow--letter-spacing);
  text-transform: var(--wp--custom--type--eyebrow--transform);
  color: var(--phx-eyebrow-fg);
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--10);
}
.phx-eyebrow__text {
  background: var(--phx-eyebrow-bg);
  padding-block: var(--wp--custom--derived--eyebrow--padding-block);
  padding-inline: var(--wp--custom--derived--eyebrow--padding-inline);
  border-radius: var(--wp--custom--derived--eyebrow--radius);
}
.phx-eyebrow::before {
  content: "";
  display: var(--wp--custom--derived--eyebrow--line);
  width: 2.5rem;
  height: 2px;
  background: currentColor;
}

/* ---------- Nagłówek sekcji ---------- */
.phx-section-header { max-width: var(--wp--custom--layout--content-width); margin-bottom: var(--wp--custom--derived--space--gap); }
.phx-section-header:last-child { margin-bottom: 0; }
.phx-section-header.phx-align-center { margin-inline: auto; text-align: center; }
.phx-section-header.phx-align-center .phx-eyebrow { justify-content: center; }
.phx-section-header.phx-align-center .phx-buttons { justify-content: center; }
.phx-section-header__intro { margin: var(--wp--preset--spacing--20) 0 0; font-size: var(--wp--preset--font-size--m); color: var(--phx-fg-muted); }
/* intro z max-width (np. hero) – przy wyśrodkowaniu sam akapit też na środku, nie tylko tekst */
.phx-section-header.phx-align-center .phx-section-header__intro { margin-inline: auto; }
.phx-section-header .phx-buttons { margin-top: var(--wp--preset--spacing--30); }

/* ---------- Przyciski ---------- */
.phx-buttons { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); align-items: center; }
.phx-button,
.phx-embed .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--10);
  box-sizing: border-box; /* min-height = pełna wysokość przycisku (z paddingiem i obramowaniem) */
  min-height: 3.0625rem;
  padding-block: var(--wp--preset--spacing--10);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--s);
  font-weight: var(--wp--custom--type--button--weight);
  letter-spacing: var(--wp--custom--type--button--letter-spacing);
  text-transform: var(--wp--custom--type--button--transform);
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--wp--custom--derived--radius--button);
  /* gradient wypełnienia od krawędzi obramowania: przy domyślnym padding-box powtarza się pod przezroczystym
     borderem i na zaokrągleniach widać paski z przeciwnego końca gradientu */
  background-origin: border-box;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.phx-button--primary,
.phx-embed .wpcf7-submit {
  padding-inline: var(--wp--custom--derived--button--primary--padding-inline);
  background-color: var(--phx-btn-primary-bg);
  background-image: var(--phx-btn-primary-bg-image);
  color: var(--phx-btn-primary-fg);
  border-color: var(--phx-btn-primary-border);
  text-decoration: var(--wp--custom--derived--button--primary--decoration);
}
.phx-button--primary:hover,
.phx-embed .wpcf7-submit:hover:not(:disabled) {
  background-color: var(--phx-btn-primary-bg-hover);
  background-image: none;
  color: var(--phx-btn-primary-fg-hover);
  border-color: var(--phx-btn-primary-border-hover);
}
.phx-button--secondary {
  padding-inline: var(--wp--custom--derived--button--secondary--padding-inline);
  background-color: var(--phx-btn-secondary-bg);
  background-image: var(--phx-btn-secondary-bg-image);
  color: var(--phx-btn-secondary-fg);
  border-color: var(--phx-btn-secondary-border);
  text-decoration: var(--wp--custom--derived--button--secondary--decoration);
}
.phx-button--secondary:hover {
  background-color: var(--phx-btn-secondary-bg-hover);
  background-image: none;
  color: var(--phx-btn-secondary-fg-hover);
  border-color: var(--phx-btn-secondary-border-hover);
}
.phx-button__arrow { display: none; }
.phx-button--primary .phx-button__arrow { display: var(--wp--custom--derived--button--primary--arrow); }
.phx-button--secondary .phx-button__arrow { display: var(--wp--custom--derived--button--secondary--arrow); }
.phx-button__arrow .phx-svg { width: 1.1em; height: 1.1em; transition: transform 0.15s ease; }
.phx-button:hover .phx-button__arrow .phx-svg { transform: translateX(2px); }

/* ---------- Ikony ---------- */
.phx-svg { width: 1.5rem; height: 1.5rem; flex: none; }
.phx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--phx-icon-fg);
  background: var(--phx-icon-bg);
  border: 2px solid var(--phx-icon-border);
  border-radius: var(--wp--custom--derived--icon--radius);
  padding: var(--wp--custom--derived--icon--padding);
}
.phx-icon .phx-svg { width: var(--wp--custom--derived--icon--size); height: var(--wp--custom--derived--icon--size); }

/* ---------- Karta ---------- */
.phx-card { display: flex; flex-direction: column; gap: var(--wp--custom--derived--space--stack); min-width: 0; }
.phx-card.is-boxed {
  background: var(--phx-card-bg);
  border: 1px solid var(--phx-card-border);
  box-shadow: var(--phx-card-shadow);
  border-radius: var(--wp--custom--derived--radius--element);
  padding: var(--wp--custom--derived--space--card);
}
/* wąski ekran: wypełnienie karty co najwyżej kroku 30 skali (przy 40 i marginesie kontenera tekst ma ~260 px szerokości) */
@media (max-width: 599px) {
  .phx-card.is-boxed { padding: min(var(--wp--custom--derived--space--card), var(--wp--preset--spacing--30)); }
}
/* karta wyróżniona (token card.featured): obrys i cień z warstwy pochodnej; `filled` – render nadaje karcie kontekst brand/dark */
.phx-card.is-featured {
  border-color: var(--phx-card-featured-border);
  border-width: var(--wp--custom--derived--card--featured--border-width);
  box-shadow: var(--phx-card-featured-shadow);
}
.phx-card.is-featured-filled {
  background: var(--phx-bg);
  color: var(--phx-fg);
}
@media (min-width: 600px) {
  .phx-card.is-featured-raised { transform: translateY(-4px); }
}
.phx-card__media { order: 0; }
.phx-card__media img { display: block; width: 100%; height: auto; border-radius: var(--wp--custom--derived--radius--element); }
.phx-card__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); flex: 1 1 auto; }
.phx-card__eyebrow { margin: 0; font-size: var(--wp--custom--derived--eyebrow--size); font-weight: var(--wp--custom--type--eyebrow--weight); letter-spacing: var(--wp--custom--type--eyebrow--letter-spacing); text-transform: var(--wp--custom--type--eyebrow--transform); color: var(--phx-eyebrow-fg); }
.phx-card .phx-buttons { margin-top: auto; padding-top: var(--wp--preset--spacing--10); }

/* ---------- Formularze (Contact Form 7) ---------- */
/* zakres .phx-embed (+ .wpcf7) – specyficzność wyższa niż arkusz CF7 ładowany po motywie; kolory z kontekstu tła (--phx-field-*) */
.phx-embed .wpcf7-form { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.phx-embed .wpcf7-form > p,
.phx-embed .wpcf7-form fieldset { margin: 0; }
.phx-embed .wpcf7-form label,
.phx-embed .wpcf7-form legend {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
  font-size: var(--wp--preset--font-size--s);
  font-weight: 600;
}
.phx-embed .wpcf7-form label > br { display: none; }
.phx-embed .wpcf7-form-control-wrap { display: block; }
.phx-embed .wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], textarea, select) {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding-block: var(--wp--preset--spacing--10);
  padding-inline: var(--wp--preset--spacing--20);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--s);
  font-weight: 400;
  line-height: 1.4;
  color: var(--phx-fg);
  background-color: var(--phx-field-bg);
  border: 1px solid var(--phx-field-border);
  border-radius: var(--wp--custom--derived--radius--element);
  transition: border-color 0.15s ease;
}
.phx-embed .wpcf7-form textarea { height: 10rem; min-height: 6rem; resize: vertical; }
.phx-embed .wpcf7-form :is(input, textarea)::placeholder { color: var(--phx-fg-muted); opacity: 1; }
.phx-embed .wpcf7-form :is(input, textarea, select):hover { border-color: var(--phx-field-border-focus); }
.phx-embed .wpcf7-form :is(input, textarea, select):focus { border-color: var(--phx-field-border-focus); }

/* grupy pól wyboru i zgoda */
.phx-embed .wpcf7-form fieldset { padding: 0; border: 0; min-width: 0; }
.phx-embed .wpcf7-form legend { padding: 0; margin-bottom: var(--wp--preset--spacing--10); }
.phx-embed .wpcf7-checkbox,
.phx-embed .wpcf7-radio { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }
.phx-embed .wpcf7-list-item { display: block; margin: 0; }
.phx-embed .wpcf7-form .wpcf7-list-item label { flex-direction: row; align-items: baseline; font-weight: 400; cursor: pointer; }
.phx-embed .wpcf7-list-item input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--phx-field-border-focus); cursor: pointer; }
.phx-embed .wpcf7-acceptance .wpcf7-list-item-label { font-size: var(--wp--preset--font-size--xs); color: var(--phx-fg-muted); }

/* wysyłka: wygląd przycisku głównego (reguły .phx-button / .phx-button--primary) */
.phx-embed .wpcf7-form > p:has(.wpcf7-submit) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20); }
.phx-embed .wpcf7-submit { align-self: flex-start; }
.phx-embed .wpcf7-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.phx-embed .wpcf7-spinner { margin: 0; }

/* walidacja i komunikat po wysyłce */
/* błąd: obrys pogrubiony obwódką wewnętrzną (bez zmiany rozmiaru pola); przy fokusie zostaje globalny pierścień :focus-visible */
.phx-embed .wpcf7-form .wpcf7-not-valid { border-color: var(--phx-field-error); }
.phx-embed .wpcf7-form .wpcf7-not-valid:not(:focus-visible) { outline: 1px solid var(--phx-field-error); outline-offset: -2px; }
.phx-embed .wpcf7-not-valid-tip { margin-top: var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--xs); font-weight: 600; color: var(--phx-field-error); }
.phx-embed .wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding-block: var(--wp--preset--spacing--10);
  padding-inline: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--s);
  color: var(--phx-fg);
  border: 2px solid var(--phx-field-border);
  border-radius: var(--wp--custom--derived--radius--element);
}
.phx-embed .wpcf7 form.sent .wpcf7-response-output { border-color: var(--phx-field-success); }
.phx-embed .wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output { border-color: var(--phx-field-error); }

/* ---------- Treść (rich text) ---------- */
.phx-prose { max-width: var(--wp--custom--layout--content-width); }
.phx-prose > :first-child { margin-top: 0; }
.phx-prose > :last-child { margin-bottom: 0; }
.phx-prose p,
.phx-prose ul,
.phx-prose ol,
.phx-prose blockquote,
.phx-prose table { margin-block: 0 var(--wp--preset--spacing--20); }
.phx-prose h3,
.phx-prose h4 { margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10); font-family: var(--wp--preset--font-family--heading); font-weight: var(--wp--custom--type--heading--weight); line-height: var(--wp--custom--type--heading--line-height); }
.phx-prose h3 { font-size: var(--wp--preset--font-size--l); }
.phx-prose h4 { font-size: var(--wp--preset--font-size--m); }
.phx-prose a { color: var(--phx-link); text-decoration: underline; text-underline-offset: 0.2em; }
.phx-prose a:hover { text-decoration-thickness: 2px; }
.phx-prose ul { list-style: var(--wp--custom--derived--list--style); padding-inline-start: var(--wp--preset--spacing--30); }
.phx-prose ul li { position: relative; }
.phx-prose ul li::before {
  content: var(--wp--custom--derived--list--symbol);
  display: var(--wp--custom--derived--list--symbol-display);
  position: absolute;
  inset-inline-start: -1.25em;
  color: var(--phx-link);
  font-weight: 700;
}
.phx-prose ul li::marker,
.phx-prose ol li::marker { color: var(--phx-link); }
.phx-prose ol { padding-inline-start: var(--wp--preset--spacing--30); }
.phx-prose li + li { margin-top: var(--wp--preset--spacing--10); }
.phx-prose blockquote { margin-inline: 0; padding-inline-start: var(--wp--preset--spacing--30); border-inline-start: 3px solid var(--phx-link); font-size: var(--wp--preset--font-size--m); }
.phx-prose table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--s); }
.phx-prose caption { text-align: start; padding-bottom: var(--wp--preset--spacing--10); color: var(--phx-fg-muted); }
.phx-prose th,
.phx-prose td { padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); border-bottom: 1px solid var(--phx-border); text-align: start; vertical-align: top; }
.phx-prose th { font-weight: 700; }
.phx-prose-scroll { overflow-x: auto; }

/* ---------- Media ---------- */
.phx-image { display: block; max-width: 100%; height: auto; }
.phx-picture { display: contents; }
.phx-media-frame { overflow: hidden; border-radius: var(--wp--custom--derived--radius--element); }
.phx-media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* zdjęcie w naturalnych proporcjach: nie szersze niż oryginał (--phx-img-w z View\Image – powiększenie traci jakość),
   ramka opina zdjęcie i jest wyśrodkowana; bez wymiarów (SVG) fallback 100vw = cała szerokość jak dotąd */
.phx-media-frame--natural { width: fit-content; max-width: 100%; margin-inline: auto; }
.phx-media-frame--natural img { width: var(--phx-img-w, 100vw); max-width: 100%; height: auto; }
.phx-ratio-landscape { aspect-ratio: 3 / 2; }
.phx-ratio-square { aspect-ratio: 1 / 1; }
.phx-ratio-portrait { aspect-ratio: 3 / 4; }
.phx-ratio-video { aspect-ratio: 16 / 9; }

.phx-video { position: relative; overflow: hidden; background: var(--wp--preset--color--inverse); }
.phx-video--inline { aspect-ratio: 16 / 9; border-radius: var(--wp--custom--derived--radius--element); }
.phx-video__poster,
.phx-video__poster img,
.phx-video__frame,
.phx-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.phx-video__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--inverse);
  color: var(--wp--preset--color--on-inverse);
  cursor: pointer;
}
.phx-video__play .phx-svg { width: 2rem; height: 2rem; }
.phx-video--background { position: absolute; inset: 0; background: transparent; }
.phx-video__toggle {
  position: absolute;
  inset: auto var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) auto;
  z-index: 2;
  display: inline-flex;
  padding: var(--wp--preset--spacing--10);
  border: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--inverse);
  color: var(--wp--preset--color--on-inverse);
  cursor: pointer;
}
.phx-video__icon-play { display: none; }
.phx-video.is-paused .phx-video__icon-play { display: block; }
.phx-video.is-paused .phx-video__icon-pause { display: none; }

.phx-embed { width: 100%; }

/* ---------- Dostępność ---------- */
.phx-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:where(.phx-section, .phx-header, .phx-footer) :focus-visible {
  outline: 2px solid var(--phx-link);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .phx-section *,
  .phx-section *::before,
  .phx-section *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Pas nagłówka strony (fragment page-header, rdzenie szablonów sklepu) ---------- */
/* pas na pełną szerokość sekcji, przed kontenerem; odstęp od treści jak odstęp sekcji */
.phx-section--page-header { padding-top: 0; }
.phx-page-header {
  background: var(--phx-bg);
  color: var(--phx-fg);
  padding-block: var(--wp--custom--derived--space--section);
  margin-bottom: var(--wp--custom--derived--space--section);
}
.phx-page-header__content { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.phx-page-header__content > * { margin-block: 0; }
.phx-page-header a:where(:not(.phx-button)) { color: var(--phx-link); }