/* =========================================================
   7ELEMENT — style layoutu i sekcji, port 1:1 z prototypu React
   (src/styles/layout.css + base.css + components.css + sections.css +
   program.css). Sprint 9.4 — pełna zgodność stylów/komponentów Home
   i Interdefinicja ze Studio. Nazwy klas i wartości identyczne ze
   źródłem, zmienne --el-* zamienione na odpowiedniki takie jak
   --wp--preset--(...) lub --wp--custom--(...) z theme.json (te same
   wartości liczbowe).
   ========================================================= */

/* ============ WARSTWA BAZOWA (base.css) ============ */
/* Sprint P0 (finalizacja Home+Interdefinicja) — .el-heading--1/2/3 i .el-idf-hero__title
   odwoływały się do var(--wp--preset--font-size--h1/h2/h3) (bez myślnika), ale WordPress
   generuje te zmienne pod nazwami z myślnikiem (--h-1/--h-2/--h-3), bo wewnętrzny
   konwerter slugów na kebab-case wstawia myślnik przy przejściu litera->cyfra, nawet gdy
   slug w theme.json (celowo pozostawiony jako czyste "h1"/"h2"/"h3") go nie ma. Efekt:
   font-size nagłówków H2/H3 (i H1 poza Hero Home, gdzie jest zaszyty na sztywno) zapadał
   się do wartości dziedziczonej (18px, rozmiar akapitu) na całej witrynie. Naprawione
   przez dopisanie myślnika w referencjach var() — potwierdzone jako jedyne miejsca
   odwołań (zero wystąpień w components.css, zero bloków Gutenberga korzystających z tych
   presetów przez UI edytora — sprawdzone w content.raw Home i Interdefinicji). Sam slug
   w sekcji settings.typography.fontSizes theme.json NIE został zmieniony (pozostaje
   "h1"/"h2"/"h3") — zmiana dotyczy wyłącznie stringów var() w tym pliku i w
   theme.json (styles.elements.h1/h2/h3.typography.fontSize). */
.el-heading {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
  text-wrap: balance;
}
.el-heading--1 {
  font-size: var(--wp--preset--font-size--h-1);
  line-height: 1.06;
}
.el-heading--2 {
  font-size: var(--wp--preset--font-size--h-2);
  line-height: 1.18;
}
.el-heading--3 {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.el-heading--4 {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 600;
  line-height: 1.4;
}
.el-link {
  color: var(--wp--preset--color--ink);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--wp--preset--color--line);
  transition: text-decoration-color var(--wp--custom--duration--fast) var(--wp--custom--easing);
}
.el-link:hover {
  text-decoration-color: var(--wp--preset--color--gold-text);
}
.el-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============ LAYOUT (layout.css) ============ */
.el-container {
  width: 100%;
  max-width: var(--wp--style--global--content-size, 1240px);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--gutter);
}
.el-container--narrow { max-width: 880px; }

.el-section {
  position: relative;
  padding-block: var(--wp--preset--spacing--section-y);
}
.el-section--bg { background: var(--wp--preset--color--bg); }
.el-section--white { background: var(--wp--preset--color--white); }
.el-section--beige { background: var(--wp--preset--color--beige); }
.el-section--dark { background: var(--wp--preset--color--dark); color: #E9E8E3; }
.el-section--dark .el-heading,
.el-section--dark h1, .el-section--dark h2, .el-section--dark h3 { color: var(--wp--preset--color--white); }
.el-section--dark .el-lead,
.el-section--dark .el-text,
.el-section--dark .el-small { color: #B3B2AB; }
.el-section--dark .el-eyebrow { color: var(--wp--preset--color--gold); }
.el-section--bg + .el-section--bg,
.el-section--white + .el-section--white { padding-top: 0; }

.el-sec-head {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--4);
  max-width: 760px;
  margin-bottom: var(--wp--preset--spacing--8);
}
.el-sec-head--center { align-items: center; text-align: center; margin-inline: auto; }
.el-sec-head__eyebrow + .el-heading,
.el-sec-head__eyebrow + h1, .el-sec-head__eyebrow + h2, .el-sec-head__eyebrow + h3 {
  margin-top: calc(var(--wp--preset--spacing--2) * -1);
}
.el-grid--split > .el-sec-head { margin-bottom: 0; }

.el-grid { display: grid; gap: var(--wp--preset--spacing--5); }
.el-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.el-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.el-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.el-grid--split {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
@media (max-width: 1024px) {
  .el-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .el-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-grid--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .el-grid--2, .el-grid--3, .el-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.el-stack { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); }
.el-stack--tight { gap: var(--wp--preset--spacing--2); }
.el-stack--loose { gap: var(--wp--preset--spacing--6); }
.el-rule { height: 1px; border: 0; background: var(--wp--preset--color--line); }

/* ============ KOMPONENTY WSPÓLNE (components.css) ============ */
.el-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
}
@media (max-width: 480px) {
  .el-btn-group .el-btn--primary,
  .el-btn-group .el-btn--secondary,
  .el-btn-group .wp-block-button__link { width: 100%; }
}

.el-card__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2); flex: 1 1 auto; }
.el-card--interactive:hover {
  border-color: #C6C1B4;
  box-shadow: var(--wp--custom--shadow-soft);
}
.el-card:focus-within { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.is-style-el-dark .el-card { background: #1F201E; border-color: var(--wp--preset--color--line-dark); }

.el-figure { margin: 0; }
.el-figure__img { width: 100%; border-radius: var(--wp--custom--radius--default); background: var(--wp--preset--color--beige); object-fit: cover; display: block; }
/* Sprint 9.8 — core/image Gutenberga stosuje className bloku wyłącznie do <figure>, nigdy do wewnętrznego <img> (ten zawsze dostaje tylko wp-image-N). Bez tej reguły powyższa nigdy nie trafia w prawdziwy <img>. Czysto addytywne, zero ryzyka regresji. */
.el-figure img { width: 100%; border-radius: var(--wp--custom--radius--default); background: var(--wp--preset--color--beige); object-fit: cover; display: block; }
.el-figure__caption { margin-top: var(--wp--preset--spacing--3); font-size: var(--wp--preset--font-size--small); line-height: 1.5; color: var(--wp--preset--color--muted); }
.el-related__img { aspect-ratio: 3 / 2; }

/* --- Wideo (facada odtwarzania) --- */
.el-video { margin-top: var(--wp--preset--spacing--6); }
.el-video__frame,
.el-video__facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--wp--custom--radius--default);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow-soft);
  background: var(--wp--preset--color--ink);
}
.el-video__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.el-video__facade { padding: 0; border: 0; cursor: pointer; }
.el-video__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.el-video__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--wp--preset--color--white); background: rgba(24, 25, 24, 0.18);
  transition: background var(--wp--custom--duration--base) var(--wp--custom--easing);
}
.el-video__play svg { width: 64px; height: 64px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35)); transition: transform var(--wp--custom--duration--base) var(--wp--custom--easing); }
.el-video__facade:hover .el-video__play,
.el-video__facade:focus-visible .el-video__play { background: rgba(24, 25, 24, 0.3); }
.el-video__facade:hover .el-video__play svg,
.el-video__facade:focus-visible .el-video__play svg { transform: scale(1.06); }

/* --- Testimonial --- */
.el-testimonial { max-width: 62ch; margin: var(--wp--preset--spacing--6) auto 0; text-align: center; color: var(--wp--preset--color--ink); }
.el-testimonial svg { color: var(--wp--preset--color--gold-text); margin-bottom: var(--wp--preset--spacing--3); }
.el-testimonial__quote { margin: 0; font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--lead); line-height: 1.18; }
.el-testimonial__attribution { display: block; margin-top: var(--wp--preset--spacing--4); }
.el-testimonial__name { display: block; font-weight: 600; }
.el-testimonial__role { display: block; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

/* ============ HERO ============ */
.el-hero {
  --hero-title-size: clamp(2.6rem, 1.05rem + 3.5vw, 4.25rem);
  --hero-text: #45463F;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--wp--custom--header-height));
  min-height: calc(100dvh - var(--wp--custom--header-height));
  background: var(--wp--preset--color--bg);
  padding-block: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
}
.el-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
  gap: clamp(2rem, 0.5rem + 4.4vw, 4.5rem);
  align-items: center;
  width: 100%;
}
.el-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.25rem, 0.9rem + 1vw, 1.9rem); max-width: 720px; }
.el-hero__title {
  margin: 0; max-width: 18ch; font-size: var(--hero-title-size); line-height: 1;
  letter-spacing: -0.015em; color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--serif);
}
.el-hero__title-line { display: block; }
.el-hero__lead { margin: 0; max-width: 62ch; font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem); line-height: 1.7; color: var(--hero-text); }
.el-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 0.5rem + 1.4vw, 2.25rem); margin-top: var(--wp--preset--spacing--1); }
.el-hero__trust { margin: 0; }
.el-hero__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin: 0;
  padding-top: clamp(1.25rem, 0.9rem + 1vw, 2rem); border-top: 1px solid var(--wp--preset--color--line);
}
.el-hero__fact { padding-inline: clamp(1rem, 2vw, 1.75rem); }
.el-hero__fact:first-child { padding-inline-start: 0; }
.el-hero__fact + .el-hero__fact { border-left: 1px solid var(--wp--preset--color--line); }
.el-hero__fact-value { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.95rem); line-height: 1.08; color: var(--wp--preset--color--ink); margin: 0; }
.el-hero__fact--lead .el-hero__fact-value { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.45rem); }
.el-hero__fact-label { margin: 0.5rem 0 0; max-width: 24ch; font-size: 0.8125rem; line-height: 1.45; color: var(--wp--preset--color--muted); }
.el-hero__media { display: flex; justify-content: flex-end; }
.el-hero__figure { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; margin: 0; }
.el-hero__frame { position: relative; overflow: hidden; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--sm); background: var(--wp--preset--color--beige); }
.el-hero__img { display: block; width: 100%; height: clamp(540px, 62vh, 680px); object-fit: cover; object-position: 50% 18%; }
/* Sprint 9.8 — jak wyżej: <figure> bloku core/image dostaje klasę el-hero__figure, wewnętrzny <img> tylko wp-image-N. */
.el-hero__figure img { display: block; width: 100%; height: clamp(540px, 62vh, 680px); object-fit: cover; object-position: 50% 18%; }
.el-hero__caption { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: clamp(1rem, 1.6vw, 1.5rem); color: var(--wp--preset--color--white); margin: 0; }
.el-hero__caption::before {
  content: ''; position: absolute; inset: -3.5rem 0 0;
  background: linear-gradient(to top, rgba(24,25,24,0.74) 0%, rgba(24,25,24,0.42) 45%, rgba(24,25,24,0) 100%);
  pointer-events: none;
}
.el-hero__caption-name, .el-hero__caption-role { position: relative; }
.el-hero__caption-name { font-size: 0.9375rem; font-weight: 600; }
.el-hero__caption-role { font-size: var(--wp--preset--font-size--small); color: rgba(255,255,255,0.82); }

@media (max-width: 900px) {
  .el-hero { display: block; min-height: 0; padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
  .el-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 0.9rem + 1vw, 1.9rem); }
  .el-hero__body { display: contents; max-width: none; }
  .el-hero__body > .el-eyebrow { order: 1; }
  .el-hero__title { order: 2; max-width: 22ch; font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3rem); line-height: 1.05; }
  .el-hero__lead { order: 3; }
  .el-hero__actions { order: 4; width: 100%; }
  .el-hero__actions .el-btn,
  .el-hero__actions .wp-block-button__link { width: 100%; justify-content: center; }
  .el-hero__trust { order: 4; }
  .el-hero__media { order: 5; margin-top: 0.75rem; }
  .el-hero__facts { order: 6; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1rem, 4vw, 2rem); row-gap: 1.25rem; }
  .el-hero__fact { padding-inline: 0; }
  .el-hero__fact + .el-hero__fact { border-left: 0; }
  .el-hero__fact--lead { grid-column: 1 / -1; padding-bottom: 1.25rem; border-bottom: 1px solid var(--wp--preset--color--line); }
  .el-hero__fact:last-child { padding-inline-start: clamp(1rem, 4vw, 1.5rem); border-left: 1px solid var(--wp--preset--color--line); }
  .el-hero__img { height: clamp(360px, 52vh, 460px); }
  .el-hero__figure img { height: clamp(360px, 52vh, 460px); }
}
@media (max-width: 480px) {
  .el-hero__title-line { display: inline; }
  .el-hero__title-line + .el-hero__title-line::before { content: ' '; }
  .el-hero__title { max-width: none; }
  .el-hero__facts { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .el-hero__fact + .el-hero__fact { padding-block: 1rem 0; }
  .el-hero__fact--lead { grid-column: auto; }
  .el-hero__fact:last-child { padding-inline-start: 0; border-left: 0; }
  .el-hero__fact-label { max-width: none; }
}

/* ============ ABOUT / PILLARS ============ */
.el-about { margin-bottom: var(--wp--preset--spacing--8); }
.el-pillars { list-style: none; margin: 0; padding: 0; gap: var(--wp--preset--spacing--6); }
.el-pillar { display: flex; flex-direction: column; gap: 0.5rem; padding-top: var(--wp--preset--spacing--4); border-top: 1px solid var(--wp--preset--color--line); }

/* ============ INTERDEFINICJA (teaser na Home) ============ */
.el-idf__intro { max-width: 640px; }
.el-idf__rule { display: block; width: 48px; height: 2px; margin-bottom: var(--wp--preset--spacing--4); background: var(--wp--preset--color--gold); }
.el-idf__title { margin-top: calc(var(--wp--preset--spacing--2) * -1); }
.el-idf__quote { margin: var(--wp--preset--spacing--5) 0 0; max-width: 22ch; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); line-height: 1.35; color: var(--wp--preset--color--ink); }
.el-idf__paragraph { margin-top: var(--wp--preset--spacing--5); }
.el-idf__quote-attribution { margin-top: var(--wp--preset--spacing--3); }
.el-idf__problem { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3); margin-top: var(--wp--preset--spacing--5); }
.el-idf__block { margin-top: var(--wp--preset--spacing--6); }
.el-idf__block .el-tags, .el-idf__block .el-checklist { margin-top: var(--wp--preset--spacing--3); }
.el-idf__outcomes { max-width: 640px; margin-top: clamp(3rem, 2.2rem + 3.5vw, 5rem); }
.el-idf__outcomes .el-checklist { margin-top: var(--wp--preset--spacing--3); }
.el-idf__cta { margin-top: var(--wp--preset--spacing--6); }
.el-idf__diagram {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  column-gap: clamp(2rem, 1.4rem + 2.6vw, 4rem); row-gap: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  margin-top: clamp(3.5rem, 2.6rem + 4vw, 6rem); padding-top: clamp(2.5rem, 1.8rem + 3vw, 4rem); border-top: 1px solid #DCD6C9;
}
.el-idf__core {
  grid-column: 2; grid-row: 1 / 3; justify-self: center; width: 104px; height: 104px; display: flex; align-items: center; justify-content: center;
  color: var(--wp--preset--color--gold); background: var(--wp--preset--color--beige); border: 1px solid var(--wp--preset--color--gold); border-radius: 50%;
}
.el-idf__core svg { width: 52px; height: 52px; }
.el-idf__aspect { display: flex; flex-direction: column; gap: 0.4rem; }
.el-idf__aspect--1 { grid-column: 1; grid-row: 1; }
.el-idf__aspect--2 { grid-column: 3; grid-row: 1; }
.el-idf__aspect--3 { grid-column: 1; grid-row: 2; }
.el-idf__aspect--4 { grid-column: 3; grid-row: 2; }
.el-idf__aspect-num { font-family: var(--wp--preset--font-family--serif); font-size: 0.9375rem; color: var(--wp--preset--color--gold-text); }
@media (max-width: 700px) {
  .el-idf__diagram { grid-template-columns: minmax(0, 1fr); row-gap: var(--wp--preset--spacing--6); }
  .el-idf__core { display: none; }
  .el-idf__aspect--1, .el-idf__aspect--2, .el-idf__aspect--3, .el-idf__aspect--4 { grid-column: 1; grid-row: auto; padding-top: var(--wp--preset--spacing--4); border-top: 1px solid #DCD6C9; }
  .el-idf__aspect--1 { padding-top: 0; border-top: 0; }
}

/* ============ ŚCIEŻKA ROZWOJU (Programs) ============ */
.el-journey { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.el-journey__stage { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.el-journey__stage:first-child { padding-top: 0; }
.el-journey__marker { display: flex; flex-direction: column; align-items: center; }
.el-journey__num { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--wp--preset--color--gold); border-radius: 50%; background: var(--wp--preset--color--beige); font-family: var(--wp--preset--font-family--serif); font-size: 1.1875rem; color: var(--wp--preset--color--gold-text); }
.el-journey__connector { flex: 1 1 auto; width: 1px; min-height: clamp(1.5rem, 1rem + 2vw, 2.5rem); margin-block: var(--wp--preset--spacing--2); background: var(--wp--preset--color--line); }
.el-journey__body { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.el-journey__tagline { margin: 0.35rem 0 var(--wp--preset--spacing--3); font-weight: 600; color: var(--wp--preset--color--ink); }
.el-journey__cta, .el-journey__note, .el-journey__photo { margin-top: var(--wp--preset--spacing--4); }
.el-journey__photo { max-width: 420px; }
.el-programs__foot { margin-top: var(--wp--preset--spacing--6); }

/* ============ SPECJALISTA ============ */
.el-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.el-step { display: flex; align-items: baseline; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.el-step:first-child { border-top: 1px solid var(--wp--preset--color--line); }
.el-step__num { min-width: 2ch; font-family: var(--wp--preset--font-family--serif); font-size: 1rem; color: var(--wp--preset--color--gold-text); }
.el-step__title { font-weight: 500; }
.el-spec__disclaimer { padding: var(--wp--preset--spacing--4); background: var(--wp--preset--color--bg); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--sm); }
.el-spec__graduates { max-width: 62ch; margin-top: clamp(2.5rem, 1.8rem + 3vw, 4rem); padding-top: var(--wp--preset--spacing--6); border-top: 1px solid var(--wp--preset--color--line); }
.el-spec__graduates .el-btn,
.el-spec__graduates .wp-block-button__link { margin-top: var(--wp--preset--spacing--3); }

/* ============ DLA FIRM ============ */
.el-biz__label { margin-bottom: 0.75rem; }
.el-tags--invert .el-tag { background: transparent; border-color: var(--wp--preset--color--line-dark); color: #C2C1BA; }

/* ============ AIMENTO ============ */
.el-aim__head { margin-bottom: var(--wp--preset--spacing--4); }
.el-aim__paragraph { margin-bottom: var(--wp--preset--spacing--5); }
.el-aim__cta { margin-top: var(--wp--preset--spacing--5); }
.el-aim__samples { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3); list-style: none; margin: 0; padding: 0; }
.el-aim__sample { display: flex; align-items: flex-start; gap: 0.85rem; padding: var(--wp--preset--spacing--4); background: #1F201E; border: 1px solid var(--wp--preset--color--line-dark); border-radius: var(--wp--custom--radius--default); }
.el-aim__badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--wp--preset--color--gold); border-radius: 50%; color: var(--wp--preset--color--gold); font-size: 0.75rem; font-weight: 600; }
.el-aim__sample-text { font-size: 0.9375rem; line-height: 1.55; color: #C2C1BA; }

/* ============ MOMENT ============ */
.el-moment {
  position: relative; display: flex; align-items: flex-end;
  min-height: calc(100vh - var(--wp--custom--header-height));
  min-height: calc(100dvh - var(--wp--custom--header-height));
  overflow: hidden; background: var(--wp--preset--color--beige);
}
.el-moment__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Sprint 9.9.1 — jak w Sprint 9.8 (.el-hero__figure/.el-figure/.el-idf-hero__media): core/image
   Gutenberga nakłada className bloku wyłącznie na <figure>, nigdy na wewnętrzny <img>. Ten slot
   był placeholderem w 0.6.2/0.6.3 (className nie miał jeszcze efektu, bo nie było prawdziwego
   <img>), więc luka nie została wtedy wykryta. Po zamianie na realny core/image w Sprincie 9.9
   zdjęcie renderowało się w naturalnych proporcjach (position:static, wysokość znacznie większa
   niż panel sekcji) i było przycinane od góry przez overflow:hidden .el-moment, zamiast być
   wyśrodkowanym cover. Czysto addytywne, ta sama reguła co wyżej, tylko z selektorem potomka. */
.el-moment__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.el-moment__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(24,25,24,0.78) 0%, rgba(24,25,24,0.32) 45%, rgba(24,25,24,0.05) 75%); }
.el-moment__quote {
  position: relative; width: 100%; max-width: 880px; margin: 0;
  padding: clamp(2.5rem, 1.6rem + 3.5vw, 5rem) var(--wp--preset--spacing--gutter) clamp(3rem, 2rem + 4vw, 6rem);
  color: var(--wp--preset--color--white); font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem); line-height: 1.2; letter-spacing: -0.01em;
}
@media (max-width: 700px) {
  .el-moment { min-height: 80vh; min-height: 80dvh; }
}

/* ============ GALERIA ============ */
.el-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--4); list-style: none; margin: 0; padding: 0; }
.el-gallery__img { aspect-ratio: 3 / 2; }
/* Sprint 9.8.1 — .el-gallery__img samo nigdy nie miało object-fit (tak samo jak w Studio: tam kadrowanie daje wspólnie użyta klasa .el-figure__img na tym samym <img>). W Gutenbergu core/image nie da się nałożyć dwóch klas na <img> w ten sam sposób, więc dodajemy je tu wprost, skopowane do .el-gallery__item, żeby zadziałało niezależnie od tego, jaką dokładnie klasę dostanie <figure> po konwersji. Czysto addytywne, zero zmian wyglądu innych sekcji. */
.el-gallery__item img { object-fit: cover; }
.el-gallery__item { position: relative; overflow: hidden; border-radius: var(--wp--custom--radius--default); }
.el-gallery__item:focus-within { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.el-gallery__caption {
  position: absolute; inset: auto 0 0 0; margin: 0; padding: var(--wp--preset--spacing--3);
  font-size: var(--wp--preset--font-size--small); line-height: 1.4; color: var(--wp--preset--color--white);
  background: linear-gradient(to top, rgba(24,25,24,0.82) 0%, rgba(24,25,24,0.35) 60%, rgba(24,25,24,0) 100%);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--wp--custom--duration--base) var(--wp--custom--easing), transform var(--wp--custom--duration--base) var(--wp--custom--easing);
  pointer-events: none;
}
.el-gallery__item:hover .el-gallery__caption,
.el-gallery__item:focus-within .el-gallery__caption { opacity: 1; transform: translateY(0); }
@media (max-width: 960px) { .el-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .el-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============ PASEK DOWODOWY (Proof) ============ */
.el-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--5); margin: 0; }
.el-proof__item { padding-inline: clamp(1rem, 2vw, 1.75rem); }
.el-proof__item:first-child { padding-inline-start: 0; }
.el-proof__item + .el-proof__item { border-left: 1px solid var(--wp--preset--color--line); }
.el-proof__value { font-family: var(--wp--preset--font-family--serif); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.05; color: var(--wp--preset--color--ink); margin: 0; }
.el-proof__label { margin: 0.5rem 0 0; max-width: 28ch; font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--muted); }
@media (max-width: 700px) {
  .el-proof { grid-template-columns: minmax(0, 1fr); row-gap: var(--wp--preset--spacing--6); }
  .el-proof__item { padding-inline: 0; border-left: 0; }
}

/* ============ CENTRUM WIEDZY (Knowledge) ============ */
.el-knowledge { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.el-knowledge__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem); padding-block: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); border-top: 1px solid var(--wp--preset--color--line); }
.el-knowledge__row:first-child { border-top: 0; padding-top: 0; }
.el-knowledge__index { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1; color: var(--wp--preset--color--gold-text); }
.el-knowledge__content { display: flex; flex-direction: column; gap: 0.4rem; }
.el-knowledge__kicker { margin-bottom: 0.15rem; }
.el-knowledge__title.el-heading,
.el-knowledge__title { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); }
.el-knowledge__cta { align-self: center; white-space: nowrap; }
.el-knowledge__foot { margin-top: var(--wp--preset--spacing--6); }
.el-knowledge__note { margin-top: var(--wp--preset--spacing--3); }
@media (max-width: 700px) {
  .el-knowledge__row { grid-template-columns: auto minmax(0, 1fr); }
  .el-knowledge__cta { grid-column: 2; justify-self: start; align-self: auto; margin-top: 0.25rem; }
}

/* ============ NASTĘPNY KROK (FinalCta) ============ */
.el-final__portrait { display: block; width: 72px; height: 72px; margin: 0 auto var(--wp--preset--spacing--4); border-radius: 50%; object-fit: cover; box-shadow: var(--wp--custom--shadow-soft); background: var(--wp--preset--color--beige); }
/* Sprint 9.9.1 — jak wyżej przy .el-moment__img: core/image Gutenberga nakłada className bloku
   wyłącznie na <figure>, nigdy na wewnętrzny <img>, więc powyższa reguła (object-fit/border-radius/
   rozmiar) nigdy nie trafiała w prawdziwy <img> po zamianie z placeholdera w Sprincie 9.9 — portret
   renderował się z domyślnym object-fit:fill, czyli wizualnie rozciągnięty w kole 72×72. Czysto
   addytywne, ta sama reguła co wyżej, tylko z selektorem potomka. */
.el-final__portrait img { display: block; width: 72px; height: 72px; margin: 0 auto var(--wp--preset--spacing--4); border-radius: 50%; object-fit: cover; box-shadow: var(--wp--custom--shadow-soft); background: var(--wp--preset--color--beige); }
/* Sprint 9.6 Etap 4 — wariant .el-final__portrait, gdy zdjęcie jeszcze nie
   jest zaimportowane: ten sam docelowy kadr 72×72 + box-shadow co realne
   zdjęcie (klasa bazowa powyżej), tylko z przerywaną obwódką zamiast
   wypełnionego tła, więc po podmianie na <picture><img> nie trzeba
   przebudowywać markupu ani CSS. */
.el-final__portrait--placeholder { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--wp--preset--color--line); font-size: 1rem; }
.el-final__head { margin-bottom: var(--wp--preset--spacing--6); }
.el-final__actions { justify-content: center; }

/* ============ INTERDEFINICJA (podstrona) — z program.css ============ */
.el-idf-hero { padding-block: clamp(3.5rem, 2.4rem + 5vw, 6rem) clamp(2.5rem, 1.8rem + 3vw, 4rem); }
.el-idf-hero__title { margin-top: var(--wp--preset--spacing--3); max-width: 20ch; font-size: var(--wp--preset--font-size--h-1); line-height: 1.06; color: var(--wp--preset--color--ink); }
.el-idf-hero__lead { margin-top: var(--wp--preset--spacing--4); max-width: 56ch; }
.el-idf-hero__cta { margin-top: var(--wp--preset--spacing--6); }
.el-idf-hero__media { margin: clamp(2.5rem, 1.8rem + 3vw, 4rem) 0 0; }
.el-idf-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 1500 / 843; border-radius: var(--wp--custom--radius--default); object-fit: cover; background: var(--wp--preset--color--beige); }
/* Sprint 9.8 — jak wyżej: sam <figure> core/image dostaje klasę el-idf-hero__media (blok użyto z tą klasą wprost), wewnętrzny <img> tylko wp-image-N. */
.el-idf-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 1500 / 843; border-radius: var(--wp--custom--radius--default); object-fit: cover; background: var(--wp--preset--color--beige); }
.el-idf-split-head { margin-bottom: var(--wp--preset--spacing--4); }
.el-idf-next-step__media { margin-bottom: var(--wp--preset--spacing--6); }
.el-idf-final__media { margin-bottom: var(--wp--preset--spacing--5); }
.el-idf-quote { margin: 0; max-width: 26ch; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); line-height: 1.35; color: var(--wp--preset--color--ink); }
.el-idf-quote--small { margin-top: var(--wp--preset--spacing--6); max-width: 40ch; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); }
.el-checklist-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem 2rem; }
@media (min-width: 701px) { .el-checklist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.el-for-whom__reassurance { margin-top: var(--wp--preset--spacing--5); padding-top: var(--wp--preset--spacing--4); border-top: 1px solid var(--wp--preset--color--line); }
.el-scope__box { padding: var(--wp--preset--spacing--5); background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--default); }
.el-scope__completion { margin-top: var(--wp--preset--spacing--5); color: var(--wp--preset--color--muted); }
.el-idf-journey__community { margin-top: var(--wp--preset--spacing--6); max-width: 62ch; }
.el-idf-journey__community-title { margin-bottom: var(--wp--preset--spacing--3); }
.el-idf-journey__people { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--7); margin: var(--wp--preset--spacing--6) 0 0; padding: 0; list-style: none; }
.el-idf-journey__person { display: flex; flex-direction: column; align-items: center; width: clamp(9rem, 22vw, 11rem); text-align: center; }
.el-idf-journey__avatar { width: clamp(7.5rem, 10vw, 8.75rem); height: clamp(7.5rem, 10vw, 8.75rem); border-radius: 50%; object-fit: cover; background: var(--wp--preset--color--beige); }
/* Sprint 9.6 Etap 2 — miejsce na zdjęcie ambasadora przed importem mediów.
   Ten sam kołowy rozmiar co docelowy .el-idf-journey__avatar, ale bez
   długiej notatki "🔶 PLACEHOLDER — ..." używanej w większych kadrach
   (Hero/Gallery/Business itd.) — przy ~140px średnicy taki tekst nie
   mieści się czytelnie. Pełny kontekst (imię, oczekiwanie na import)
   trafia do aria-label, więc czytnik ekranu i redaktor dalej wiedzą,
   czego dotyczy to miejsce; wizualnie to spokojny krążek z jedną ikoną,
   nie techniczny baner. */
.el-idf-journey__avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(7.5rem, 10vw, 8.75rem);
  height: clamp(7.5rem, 10vw, 8.75rem);
  border-radius: 50%;
  background: var(--wp--preset--color--beige);
  border: 1px dashed var(--wp--preset--color--line);
  font-size: 1.5rem;
}
.el-idf-journey__name { margin-top: var(--wp--preset--spacing--4); font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--wp--preset--color--muted); }
.el-idf-journey__role { margin-top: 0.15rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wp--preset--color--muted); }
.el-idf-journey__closing { margin: var(--wp--preset--spacing--7) auto 0; max-width: 42ch; text-align: center; }
.el-instructors { gap: var(--wp--preset--spacing--6); }
.el-instructor { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2); }
.el-idf-final { margin-top: clamp(3rem, 2.2rem + 3.5vw, 5rem); padding-top: clamp(2.5rem, 1.8rem + 3vw, 4rem); border-top: 1px solid var(--wp--preset--color--line); max-width: 62ch; }
.el-idf-final__text { margin-bottom: var(--wp--preset--spacing--5); }

/* --- Wysoki kontrast wymuszony systemowo --- */
@media (forced-colors: active) {
  .el-hero__frame, .el-figure__img, .el-idf-hero__img { border: 1px solid CanvasText; }
}

/* --- Placeholder mediów (Sprint 9.4 — bez importu zdjęć) ---
   Uniwersalny zastępnik miejsca na obraz: zachowuje proporcje/wysokość
   docelowego kadru, pokazuje istniejącą notatkę PLACEHOLDER (bez
   fabrykowania treści). Usuwane w Sprint 9.5 wraz z realnym importem. */
.el-media-placeholder,
.el-hero__frame--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 2rem;
  background: var(--wp--preset--color--beige);
  border: 1px dashed var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--sm);
}
.el-hero__frame--placeholder { min-height: clamp(360px, 52vh, 680px); }
.el-media-placeholder .el-placeholder-note,
.el-hero__frame--placeholder .el-placeholder-note {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
  text-align: center;
  color: var(--wp--preset--color--muted);
}
.el-moment .el-media-placeholder {
  position: absolute;
  inset: 0;
  min-height: 100%;
  border-radius: 0;
  border: 0;
  padding: 2rem;
}
.el-gallery__item--placeholder { display: flex; flex-direction: column; }
.el-gallery__item--placeholder .el-media-placeholder { aspect-ratio: 3 / 2; min-height: 0; }
.el-gallery__item--placeholder .el-gallery__caption {
  position: static;
  opacity: 1;
  transform: none;
  background: none;
  color: var(--wp--preset--color--muted);
  padding: 0.6rem 0 0;
  text-align: center;
}


/* --- Diagram 4 etapow "Dlaczego 7ELEMENT" (Sprint P2.3, wersja 0.6.8) ---
   Natywna wizualizacja sekwencji Zrozumienie -> Swiadomy wybor -> Praktyka ->
   Zmiana dzialania (tresc juz wczesniej zatwierdzona w
   HOME_NOWE_SEKCJE_ZAUFANIA.md, wczesniej renderowana jako pojedyncza linia
   tekstu ze strzalkami). Cztery bloki core/group.el-stage wewnatrz
   core/group.el-stages, kazdy z numerem i naglowkiem. Numer celowo BEZ
   okragłego oznaczenia/ramki — plaski, zloty numer serif, ten sam jezyk co
   .el-idf__aspect-num w Studio (aspekty Interdefinicji), zgodnie z brifem
   "zero nowego jezyka wizualnego" / "jeden akcent koloru, reszta - linia i
   typografia". Cienki poziomy lacznik miedzy numerami na desktopie, ukryty
   na mobile. */
.el-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--5);
  margin-top: var(--wp--preset--spacing--6);
}
.el-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--2);
  text-align: center;
}
.el-stage .el-journey__num {
  width: auto;
  height: auto;
  border: 0;
  background: none;
  border-radius: 0;
  font-size: 0.9375rem;
}
.el-stage:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0.7rem;
  left: calc(50% + 22px);
  width: calc(100% - 44px);
  height: 1px;
  background: var(--wp--preset--color--line);
}
@media (max-width: 700px) {
  .el-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--wp--preset--spacing--6);
  }
  .el-stage:not(:last-child)::after {
    display: none;
  }
}
@media (max-width: 480px) {
  .el-stages {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* 0.6.9: minimalna poprawka full-bleed dla Moment — przywrocenie 1:1 ze
   Studio. Sekcja .el-moment w Studio nie ma zadnego wrappera Section/
   Container (patrz komentarz w Moment.tsx), wiec zajmuje pelna szerokosc
   naturalnie. W Gutenbergu kazdy blok jest zagniezdzony w
   is-layout-constrained z max-width:1240px, a wbudowany mechanizm WP
   (root-padding-aware alignfull) usuwa tylko wewnetrzny padding, nie
   przebija twardego max-width rodzica. Ta regula to standardowy,
   klasyczny wzorzec WP dla alignfull (calc(50% - 50vw)), celowany
   wylacznie w .el-moment, zeby nie wplynac na zadna inna sekcje. */
.is-layout-constrained > .alignfull.el-moment {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ============================================================
   0.7.2 — AiMento (Home, #aimento) — Wariant C3 (finalny polish), zatwierdzony przez
   właściciela 2026-08-08. Zastępuje w całości blok 0.7.0 (5 niezależnych obszarów grid,
   które przy różnych wysokościach kolumn tworzyły duże puste przestrzenie). Ten sam tekst,
   ten sam asset (media ID 3552) — wyłącznie proporcje, hierarchia i rytm odstępów.
   Zakres wyłącznie sekcja AiMento. Nic innego w tym pliku nie zostało zmienione.
   ============================================================ */

/* Full-bleed AiMento — identyczny mechanizm jak .el-moment powyżej (wbudowany alignfull
   WordPressa usuwa tylko wewnętrzny padding, nie przebija twardego max-width rodzica
   is-layout-constrained, więc potrzebna jest ta sama addytywna reguła co przy Moment).
   Selektor celowany po unikalnym id "aimento" (istniejący anchor bloku), żeby nie ruszać
   żadnej innej sekcji korzystającej z .el-section--dark. */
.is-layout-constrained > .alignfull#aimento {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* AiMento — dwie równoważne kolumny (1fr/1fr). Reguła scoped wyłącznie do
   .el-grid--split.el-aim — NIE dotyka globalnego .el-grid--split używanego w innych
   sekcjach (Dla Firm, O Instytucie, Interdefinicja itd). Gutenberg: dwie nowe grupy
   .el-aim__col-left / .el-aim__col-right (bezpośrednie dzieci grida) zamiast poprzednich
   5 niezależnych obszarów — eliminuje "dziury powietrzne" z układu 0.7.0. */
.el-grid--split.el-aim {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 32px;
}
.el-grid--split.el-aim > .el-aim__col-left,
.el-grid--split.el-aim > .el-aim__col-right {
  display: flex;
  flex-direction: column;
}

/* Rytm odstępów w lewej kolumnie (content -> value -> cta). Wewnątrz .el-aim__content
   (eyebrow/H2/opis/tagi) rytm ściągnięty do 8/16/16px. */
.el-grid--split.el-aim > .el-aim__col-left > .el-aim__content { margin-bottom: 24px; }
.el-grid--split.el-aim > .el-aim__col-left > .el-aim__value { margin-bottom: 24px; }
.el-grid--split.el-aim > .el-aim__col-left > .el-aim__cta { margin-bottom: 0; }
.el-aim__content .el-sec-head.el-aim__head { margin-bottom: 24px; }
.el-aim__content .el-sec-head.el-aim__head .el-eyebrow { margin-bottom: 8px; }
.el-aim__content .el-sec-head.el-aim__head .el-heading { margin-bottom: 16px; }
.el-aim__content .el-sec-head.el-aim__head .el-lead { margin-bottom: 0; }
.el-aim__content .el-tags { margin-bottom: 0; }

/* Prawa kolumna: grafika bezpośrednio nad przykładami, bez odstępu z układu 0.7.0. */
.el-grid--split.el-aim > .el-aim__col-right > .el-aim__visual { margin-bottom: 16px; }
.el-grid--split.el-aim > .el-aim__col-right > .el-aim__samples { margin-bottom: 0; }

/* AiMento — wyodrębniona wartość „3 miesiące AiMento w prezencie” (ten sam, niezmieniony
   tekst — wyłącznie wizualne wyróżnienie). Kolor/border z istniejących tokenów motywu
   (--wp--preset--color--gold), bez nowych barw. */
.el-aim__value {
  border: 1px solid var(--wp--preset--color--gold);
  border-radius: var(--wp--custom--radius--default);
  background: rgba(173, 135, 68, 0.08);
  padding: 18px 24px;
}
.el-aim__value .el-aim__paragraph { margin-bottom: 0; }
/* Wariant C3: podniesiona hierarchia frazy „3 miesiące w prezencie” — ten sam <strong>,
   dodatkowa klasa wynosi go na osobną, większą, złotą linię. Tekst bez zmian. */
.el-aim__value .el-aim__paragraph .el-aim__highlight {
  display: block;
  font-size: 23px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--wp--preset--color--gold);
  margin: 6px 0;
}

/* AiMento — duży element wizualny w prawej kolumnie (istniejący, wgrany ręcznie przez
   właściciela asset AiMento, media ID 3552). Gutenberg nakłada className bloku wyłącznie na
   <figure>, nigdy na wewnętrzny <img> (ten sam, już znany wzorzec co .el-moment__img/
   .el-figure__img), więc docelowa reguła celuje w selektor potomka. */
.el-aim__visual { margin: 0; border-radius: var(--wp--custom--radius--default); overflow: hidden; }
.el-aim__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--wp--custom--radius--default);
}
/* Wariant C3: grafika -10% względem poprzedniej szerokości kolumny, obie kolumny
   pozostają równoważne co do szerokości (tylko obraz w prawej kolumnie jest węższy). */
@media (min-width: 861px) {
  .el-grid--split.el-aim > .el-aim__col-right > .el-aim__visual { width: 511px; }
  .el-aim__visual img { aspect-ratio: 1448 / 1086; height: auto; }
}

/* ===== MOBILE: content -> value -> CTA -> visual -> samples, skompresowane odstępy =====
   .el-aim__col-left / .el-aim__col-right stają się "przezroczyste" (display:contents),
   dzięki czemu ich dzieci wracają jako bezpośrednie elementy grida i można je dowolnie
   ułożyć przez grid-template-areas — bez zmiany kolejności w Gutenbergu. */
@media (max-width: 860px) {
  .el-grid--split.el-aim {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "content"
      "value"
      "cta"
      "visual"
      "samples";
  }
  .el-grid--split.el-aim > .el-aim__col-left,
  .el-grid--split.el-aim > .el-aim__col-right {
    display: contents;
  }
  .el-aim__content { grid-area: content; margin-bottom: 20px; }
  .el-aim__value { grid-area: value; margin-bottom: 16px; padding: 14px 18px; }
  .el-aim__cta { grid-area: cta; margin-bottom: 20px; }
  .el-aim__visual { grid-area: visual; margin-bottom: 16px; width: auto; }
  .el-aim__samples { grid-area: samples; margin-bottom: 0; }

  .el-aim__content .el-sec-head.el-aim__head { margin-bottom: 14px; }
  .el-aim__content .el-sec-head.el-aim__head .el-eyebrow { margin-bottom: 6px; }
  .el-aim__content .el-sec-head.el-aim__head .el-heading { margin-bottom: 10px; }
  .el-aim__value .el-aim__paragraph .el-aim__highlight { font-size: 18px; margin: 4px 0; }
  .el-aim__visual img { height: auto; aspect-ratio: 1448 / 1086; max-height: 220px; object-fit: cover; }
  .el-aim__samples { gap: 8px; }
  .el-aim__sample { padding: 12px; }
}

/* --- 0.7.3 — Interdefinicja full-bleed hotfix -----------------------------
   Ten sam problem co przy .el-moment/#aimento: wbudowany mechanizm WP
   dla alignfull (root-padding-aware) usuwa tylko wewnętrzny padding,
   nie przebija twardego max-width:1240px rodzica (.is-layout-constrained).
   Zamiast 14 osobnych selektorów po ID sekcji — jedna reguła scoped
   wyłącznie do strony Interdefinicja przez body.page-id-3419, działająca
   na każdą bezpośrednią sekcję .alignfull tej strony. Nie wpływa na
   żadną inną stronę ani na wewnętrzne kontenery treści (.el-container
   zachowuje swoją własną, niezmienioną szerokość). */
body.page-id-3419 .is-layout-constrained > .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- 0.7.4 — Szkoła Trenerów Mentalnych full-bleed hotfix -----------------
   Identyczny problem i identyczny mechanizm naprawy jak przy Interdefinicji
   (body.page-id-3419 powyżej): wbudowany alignfull WordPressa usuwa tylko
   wewnętrzny padding, nie przebija twardego max-width:1240px rodzica
   .is-layout-constrained. Reguła scoped wyłącznie do strony Szkoła Trenerów
   Mentalnych przez body.page-id-3422. Nie wpływa na Interdefinicję, Home,
   AiMento, Moment ani żadną inną stronę. */
body.page-id-3422 .is-layout-constrained > .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- 0.7.5 — Szkoła Hipnoterapii full-bleed hotfix -------------------------
   Identyczny problem i identyczny mechanizm naprawy jak przy Interdefinicji
   (body.page-id-3419) i Szkole Trenerów Mentalnych (body.page-id-3422)
   powyżej: wbudowany alignfull WordPressa usuwa tylko wewnętrzny padding,
   nie przebija twardego max-width:1240px rodzica .is-layout-constrained.
   Reguła scoped wyłącznie do strony Szkoła Hipnoterapii przez
   body.page-id-3423. Nie wpływa na Interdefinicję, Szkołę Trenerów
   Mentalnych, Home, AiMento, Moment ani żadną inną stronę. */
body.page-id-3423 .is-layout-constrained > .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- 0.7.6 — Dla Firm full-bleed hotfix -------------------------------------
   Identyczny problem i identyczny mechanizm naprawy jak przy Interdefinicji
   (body.page-id-3419), Szkole Trenerów Mentalnych (body.page-id-3422) i
   Szkole Hipnoterapii (body.page-id-3423) powyżej: wbudowany alignfull
   WordPressa usuwa tylko wewnętrzny padding, nie przebija twardego
   max-width:1240px rodzica .is-layout-constrained. Reguła scoped wyłącznie
   do strony Dla Firm przez body.page-id-3421. Nie wpływa na Interdefinicję,
   Szkołę Trenerów Mentalnych, Szkołę Hipnoterapii, Home, AiMento, Moment
   ani żadną inną stronę. */
body.page-id-3421 .is-layout-constrained > .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- 0.7.7 — Rozwój Osobisty full-bleed hotfix -------------------------------
   Identyczny problem i identyczny mechanizm naprawy jak przy Interdefinicji
   (body.page-id-3419), Szkole Trenerów Mentalnych (body.page-id-3422),
   Szkole Hipnoterapii (body.page-id-3423) i Dla Firm (body.page-id-3421)
   powyżej: wbudowany alignfull WordPressa usuwa tylko wewnętrzny padding,
   nie przebija twardego max-width:1240px rodzica .is-layout-constrained.
   Reguła scoped wyłącznie do strony Rozwój Osobisty przez body.page-id-3418.
   Nie wpływa na Interdefinicję, Szkołę Trenerów Mentalnych, Szkołę
   Hipnoterapii, Dla Firm, Home, AiMento, Moment ani żadną inną stronę. */
body.page-id-3418 .is-layout-constrained > .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- el-path — trzy karty ścieżek (Katalog Rozwoju i pochodne) ------------
   Brakujący komponent design systemu, dotąd niezaimplementowany w WP mimo
   że istnieje w Studio (Ścieżki A/B/C, katalog-rozwoju/). Zbudowany
   wyłącznie z istniejących tokenów: .el-path korzysta z bazowego .el-card
   (border/radius/tło/padding, patrz components.css), dokłada tylko
   figure-bleed (obraz wychodzący poza padding karty do samej góry) i
   motyw SVG w kolorze gold-text. Wartości potwierdzone empirycznie na
   komputowanym CSS Studio: figure margin = -padding karty (var(--spacing--6)),
   motyw = dokładnie --wp--preset--color--gold-text, brak dodatkowych
   efektów/cieni poza .el-card--interactive:hover (już istnieje). */
.el-paths {
  list-style: none;
  margin: 0;
  padding: 0;
}
.el-path__figure {
  margin: calc(-1 * var(--wp--preset--spacing--6, 2rem)) calc(-1 * var(--wp--preset--spacing--6, 2rem)) 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--wp--custom--radius--default, 10px) var(--wp--custom--radius--default, 10px) 0 0;
  overflow: hidden;
}
.el-path__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.el-path__motif {
  display: flex;
  color: var(--wp--preset--color--gold-text);
}

/* --- Katalog Rozwoju — Final CTA portrait 88×88px -------------------------
   .el-final__portrait (bazowy wzorzec, 72×72px, patrz wyżej) jest reużyty
   1:1 pod względem stylu (border-radius:50%, object-fit:cover, cień) — tu
   tylko scoped override rozmiaru do 88×88px, zgodnie z rzeczywistym
   rozmiarem tego elementu w Studio (potwierdzone empirycznie: 88×88px na
   katalog-rozwoju/, nie 72×72 jak wzorzec bazowy). Scoped wyłącznie do
   strony Katalog Rozwoju przez body.page-id-3417 — nie zmienia
   .el-final__portrait na żadnej innej stronie. */
body.page-id-3417 img.el-final__portrait {
  width: 88px;
  height: 88px;
}

/* --- 0.7.8 — Katalog Rozwoju full-bleed hotfix -----------------------------
   Identyczny problem i identyczny mechanizm naprawy jak przy Interdefinicji
   (body.page-id-3419), Szkole Trenerów Mentalnych (body.page-id-3422),
   Szkole Hipnoterapii (body.page-id-3423), Dla Firm (body.page-id-3421) i
   Rozwój Osobisty (body.page-id-3418) powyżej: wbudowany alignfull
   WordPressa usuwa tylko wewnętrzny padding, nie przebija twardego
   max-width:1240px rodzica .is-layout-constrained. Potwierdzone empirycznie
   po zapisaniu treści: 0/4 sekcje full-bleed (width:1240 zamiast 1920).
   Reguła scoped wyłącznie do strony Katalog Rozwoju przez body.page-id-3417.
   Nie wpływa na żadną inną stronę. */
body.page-id-3417 .is-layout-constrained > .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- el-tr-member — zdjęcie trenera w karcie (Trenerzy) -------------------
   Brakujący modyfikator .el-figure__img, analogiczny do już istniejącego
   .el-related__img (aspect-ratio: 3/2 powyżej). Wartość potwierdzona
   empirycznie na komputowanym CSS Studio: aspect-ratio 4/5 (portret).
   Jedna właściwość, zero nowego projektowania. */
.el-tr-member__img {
  aspect-ratio: 4 / 5;
}

/* --- 0.7.9 — Trenerzy full-bleed hotfix ------------------------------------
   Identyczny problem i identyczny mechanizm naprawy jak przy poprzednich
   stronach powyżej: wbudowany alignfull WordPressa usuwa tylko wewnętrzny
   padding, nie przebija twardego max-width:1240px rodzica
   .is-layout-constrained. Potwierdzone empirycznie po zapisaniu treści:
   0/10 sekcji full-bleed (width:1240 zamiast 1920). Reguła scoped wyłącznie
   do strony Trenerzy przez body.page-id-3415. Nie wpływa na żadną inną
   stronę. */
body.page-id-3415 .is-layout-constrained > .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- 0.8.0 — Element Wiedzy full-bleed hotfix ------------------------------
   Identyczny problem i identyczny mechanizm naprawy jak przy poprzednich
   stronach powyżej: wbudowany alignfull WordPressa usuwa tylko wewnętrzny
   padding, nie przebija twardego max-width:1240px rodzica
   .is-layout-constrained. Potwierdzone empirycznie po zapisaniu treści:
   0/6 sekcji full-bleed (width:1240 zamiast 1920). Reguła scoped wyłącznie
   do strony Element Wiedzy przez body.page-id-3424. Nie wpływa na żadną
   inną stronę. */
body.page-id-3424 .is-layout-constrained > .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- 0.8.1 — el-knowledge: obraz artykułu (Element Wiedzy) -----------------
   Minimalne rozszerzenie istniejącego komponentu, nie nowy system: jedna
   nowa kolumna (.el-knowledge__figure) dodana na początku istniejącego
   grida wiersza (figure | index | content | cta), reużywająca tokenu
   promienia i wzorca object-fit:cover już użytego w .el-figure__img /
   .el-related__img powyżej. Rzeczywiste pliki artykułów to 2240x1260,
   czyli dokładnie 16/9 — wartość potwierdzona, nie wymyślona. Docelowa
   szerokość kolumny 280–320px (właściciel), stąd clamp w tym przedziale.
   Zero nowych kolorów/efektów — wyłącznie istniejące tokeny.
   0.8.2 — HOTFIX P0-1 (global acceptance sweep): selektor niżej pierwotnie
   był `.el-knowledge__row` bez zawężenia, więc nadpisywał bazową regułę
   3-kolumnową (linia ~426) dla WSZYSTKICH wierszy .el-knowledge__row w
   serwisie — łącznie z wierszami bez obrazu (sekcja „Wiedza” na Home i
   Rozwój Osobisty), rezerwując pustą kolumnę 280px i ściskając kolumnę
   CTA do 0px, co powodowało poziomy scroll przy ok. 768px. Poprawka:
   zawężenie przez :has(.el-knowledge__figure) — czysto CSS-owy,
   semantyczny modifier oparty o istniejącą już klasę obrazu w markupie,
   bez page-id i bez żadnej zmiany treści/Gutenberga. Bazowa reguła
   (linia ~426, 3 kolumny: index|content|cta) znów obowiązuje domyślnie
   dla wierszy bez obrazu — Home i Rozwój Osobisty wracają do poprzedniego
   layoutu. Element Wiedzy (jedyne wiersze z .el-knowledge__figure)
   zachowuje układ 4-kolumnowy bez zmian. */
.el-knowledge__row:has(.el-knowledge__figure) {
  grid-template-columns: clamp(280px, 22vw, 320px) auto minmax(0, 1fr) auto;
}
.el-knowledge__figure {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--wp--custom--radius--default);
  background: var(--wp--preset--color--beige);
}
.el-knowledge__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 700px) {
  /* Pod 700px wiersz staje się jedną kolumną: obraz na pełną szerokość,
     potem index, potem treść (kicker/tytuł/data/opis/powiązane), potem
     CTA — dokładnie w tej kolejności co w DOM, zgodnie z życzeniem
     właściciela. Nadpisuje regułę bazową (linia ~437) przez kolejność
     w pliku, ta sama specyficzność. */
  .el-knowledge__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .el-knowledge__figure,
  .el-knowledge__index,
  .el-knowledge__content,
  .el-knowledge__cta {
    grid-column: 1;
  }
  .el-knowledge__cta {
    justify-self: start;
    margin-top: 0.25rem;
  }
}

/* 0.8.7 — mobile content gutter correction.
   Some alignwide content wrappers were built without the .el-container
   class and therefore never receive the site's horizontal gutter
   (padding-inline: var(--wp--preset--spacing--gutter)) — at desktop this
   is hidden by the centering margin, but below ~1240px the margin
   collapses to 0 and text sits flush against the viewport edge.
   This restores the existing gutter token, mobile-only, without touching
   any wrapper that already gets its padding from a nested .el-container
   (avoids double-padding on sections that are already correct). */
@media (max-width: 700px) {
  .entry-content .alignwide.has-global-padding.is-layout-constrained:not(.el-container):not(:has(.el-container)) {
    padding-left: var(--wp--preset--spacing--gutter);
    padding-right: var(--wp--preset--spacing--gutter);
  }
}