/**
 * Keep design CSS working when markup is wrapped in wp-block-* chrome.
 */

.main .wp-block-group {
  box-sizing: border-box;
}

/*
 * Group blocks wrap children in .wp-block-group__inner-container.is-layout-flow,
 * which breaks flex/grid (cennik rows) and adds huge WP block gaps.
 * display:contents lets design flex/grid see the real children.
 */
.main .wp-block-group > .wp-block-group__inner-container,
.editor-styles-wrapper .wp-block-group > .wp-block-group__inner-container {
  display: contents !important;
}

/*
 * Editor: flatten only the group inner list so design flex/grid on the group works.
 * Do NOT set display:contents on .wp-block chrome — that makes paragraphs/prices
 * unselectable/uneditable in the canvas (click hits the parent group only).
 * Skip .why-kos-med: its design grids put 40px|1fr on the Group shell, and with
 * contents the only real child (.block-editor-inner-blocks) collapses into 40px.
 */
.editor-styles-wrapper .wp-block-group:not(.why-kos-med):not(.why-kos-med-grid):not(.why-kos-med-grid-2):not(.why-kos-med-grid-3):not(.why-kos-med-grid-4):not(.why-kos-med-stack):not(.why-kos-med-stack-2):not(.why-kos-med-stack-3):not(.why-kos-med-stack-4):not(.why-kos-med-stack-5):not(.why-kos-med-media):not(.why-kos-med-media-2) > .block-editor-block-list__layout,
.editor-styles-wrapper .wp-block-group:not(.why-kos-med):not(.why-kos-med-grid):not(.why-kos-med-grid-2):not(.why-kos-med-grid-3):not(.why-kos-med-grid-4):not(.why-kos-med-stack):not(.why-kos-med-stack-2):not(.why-kos-med-stack-3):not(.why-kos-med-stack-4):not(.why-kos-med-stack-5):not(.why-kos-med-media):not(.why-kos-med-media-2) > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: contents;
}

/*
 * Homepage “why-kos-med” in the editor:
 * Design CSS puts display:grid (e.g. 40px|1fr) on the Group. In the canvas the
 * Group’s only child is .block-editor-inner-blocks — so that wrapper sits in the
 * 40px track and all copy wraps to 1 character. Neutralize layout on the Group
 * shell; apply flex/grid on the inner block list instead.
 */
.editor-styles-wrapper .why-kos-med-grid,
.editor-styles-wrapper .why-kos-med-grid-2,
.editor-styles-wrapper .why-kos-med-grid-3,
.editor-styles-wrapper .why-kos-med-grid-4,
.editor-styles-wrapper .why-kos-med-stack,
.editor-styles-wrapper .why-kos-med-stack-2,
.editor-styles-wrapper .why-kos-med-stack-3,
.editor-styles-wrapper .why-kos-med-stack-4,
.editor-styles-wrapper .why-kos-med-stack-5,
.editor-styles-wrapper .why-kos-med-media,
.editor-styles-wrapper .why-kos-med-media-2 {
  display: block !important;
}

.editor-styles-wrapper .why-kos-med .block-editor-inner-blocks {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.editor-styles-wrapper .why-kos-med .block-editor-block-list__layout {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  gap: 0;
}

/* Direct-child layouts only — nested .block-editor-block-list__layout must stay flex column */
.editor-styles-wrapper .why-kos-med-grid > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .why-kos-med-grid > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(40px, 5vw, 80px) !important;
  align-items: center !important;
}

.editor-styles-wrapper .why-kos-med-grid-2 > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .why-kos-med-grid-2 > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
}

.editor-styles-wrapper .why-kos-med-stack > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .why-kos-med-stack > .block-editor-block-list__layout {
  gap: 14px !important;
  padding-top: 56px;
}

.editor-styles-wrapper .why-kos-med-stack-2 > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .why-kos-med-stack-2 > .block-editor-block-list__layout {
  gap: 28px !important;
}

.editor-styles-wrapper .why-kos-med-stack-3 > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .why-kos-med-stack-3 > .block-editor-block-list__layout {
  gap: 14px !important;
}

.editor-styles-wrapper .why-kos-med-stack-5 > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .why-kos-med-stack-5 > .block-editor-block-list__layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.editor-styles-wrapper .why-kos-med-grid-3 > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .why-kos-med-grid-3 > .block-editor-block-list__layout,
.editor-styles-wrapper .why-kos-med-grid-4 > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .why-kos-med-grid-4 > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
  width: 100% !important;
}

.editor-styles-wrapper .why-kos-med .block-editor-block-list__block {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.editor-styles-wrapper .why-kos-med-grid > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block,
.editor-styles-wrapper .why-kos-med-grid-2 > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block,
.editor-styles-wrapper .why-kos-med-stack-2 > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block,
.editor-styles-wrapper .why-kos-med-stack-4 > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block {
  width: 100%;
}

.editor-styles-wrapper .why-kos-med-grid-3 > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:first-child,
.editor-styles-wrapper .why-kos-med-grid-4 > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:first-child {
  width: 40px;
  max-width: 40px;
  overflow: hidden !important;
}

.editor-styles-wrapper .why-kos-med-grid-3 > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:nth-child(2),
.editor-styles-wrapper .why-kos-med-grid-4 > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:nth-child(2) {
  width: auto;
  min-width: 0;
}

/*
 * Empty badge <p> dots are 12×12 — Gutenberg still paints “Wciśnij / …” placeholder
 * inside, which wraps to 1ch and stacks letters beside the feature copy. Clip it.
 */
.editor-styles-wrapper .why-kos-med-badge,
.editor-styles-wrapper .why-kos-med-badge-2,
.editor-styles-wrapper .why-kos-med-badge-3,
.editor-styles-wrapper .why-kos-med-badge-4,
.editor-styles-wrapper .block-editor-block-list__block.why-kos-med-badge,
.editor-styles-wrapper .block-editor-block-list__block.why-kos-med-badge-2,
.editor-styles-wrapper .block-editor-block-list__block.why-kos-med-badge-3,
.editor-styles-wrapper .block-editor-block-list__block.why-kos-med-badge-4 {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  min-height: 12px !important;
  max-height: 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin-top: 7px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  border-radius: 50% !important;
}

.editor-styles-wrapper .why-kos-med-badge .block-editor-rich-text__editable,
.editor-styles-wrapper .why-kos-med-badge-2 .block-editor-rich-text__editable,
.editor-styles-wrapper .why-kos-med-badge-3 .block-editor-rich-text__editable,
.editor-styles-wrapper .why-kos-med-badge-4 .block-editor-rich-text__editable,
.editor-styles-wrapper .why-kos-med-badge [contenteditable],
.editor-styles-wrapper .why-kos-med-badge-2 [contenteditable],
.editor-styles-wrapper .why-kos-med-badge-3 [contenteditable],
.editor-styles-wrapper .why-kos-med-badge-4 [contenteditable] {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  caret-color: transparent !important;
}

.editor-styles-wrapper .why-kos-med-badge .block-editor-rich-text__editable::before,
.editor-styles-wrapper .why-kos-med-badge-2 .block-editor-rich-text__editable::before,
.editor-styles-wrapper .why-kos-med-badge-3 .block-editor-rich-text__editable::before,
.editor-styles-wrapper .why-kos-med-badge-4 .block-editor-rich-text__editable::before,
.editor-styles-wrapper .why-kos-med-badge [data-rich-text-placeholder]::before,
.editor-styles-wrapper .why-kos-med-badge-2 [data-rich-text-placeholder]::before,
.editor-styles-wrapper .why-kos-med-badge-3 [data-rich-text-placeholder]::before,
.editor-styles-wrapper .why-kos-med-badge-4 [data-rich-text-placeholder]::before {
  content: none !important;
  display: none !important;
}

.editor-styles-wrapper .why-kos-med-grid-3 .block-list-appender,
.editor-styles-wrapper .why-kos-med-grid-4 .block-list-appender,
.editor-styles-wrapper .why-kos-med-stack-5 .block-list-appender {
  display: none !important;
}

/* Media tiles keep aspect boxes; images fill via absolute rules below */
.editor-styles-wrapper .why-kos-med-media {
  border-radius: 999px 999px 24px 24px;
  overflow: hidden;
  aspect-ratio: 3 / 4.4;
  position: relative !important;
  width: 100% !important;
  min-height: 280px;
}

.editor-styles-wrapper .why-kos-med-media-2 {
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
  aspect-ratio: 1;
  position: relative !important;
  width: 100% !important;
  min-height: 120px;
}

.editor-styles-wrapper .why-kos-med-media > .block-editor-inner-blocks,
.editor-styles-wrapper .why-kos-med-media-2 > .block-editor-inner-blocks,
.editor-styles-wrapper .why-kos-med-media > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .why-kos-med-media-2 > .block-editor-inner-blocks > .block-editor-block-list__layout {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/*
 * Spans→paragraphs get UA margins (~1em) that original <span> never had — doubles card gaps
 * (e.g. variants-display under price). Low specificity via :where so design margins
 * like .konsultacja-text-4 { margin: 28px 0 0 } still win.
 */
.main :where(p[class]),
.editor-styles-wrapper :where(p[class]) {
  margin-block: 0;
}

.main .wp-block-group > .wp-block-group__inner-container > p:not([class]),
.main .wp-block-group > p:not([class]),
.editor-styles-wrapper .wp-block-group > .wp-block-group__inner-container > p:not([class]),
.editor-styles-wrapper .wp-block-group > p:not([class]) {
  margin-top: 0;
  margin-bottom: 0;
}

/*
 * Neutralize WP block-gap (low specificity via :where) so flex/grid `gap` from design CSS
 * is not doubled — but design rules like .konsultacja-text-4 { margin: 28px 0 0 } still win.
 */
.main :where(.is-layout-flow) > * + *,
.editor-styles-wrapper :where(.is-layout-flow) > * + * {
  margin-block-start: 0;
}

/*
 * Editor: WP paints ~28px vertical margins on nested group blocks (not only * + *).
 * With display:contents on inner layouts those margins collapse out of full-bleed
 * sections and open a beige strip (e.g. indywidualna green → Cena / KOS-MED cards).
 */
.editor-styles-wrapper .block-editor-block-list__block.wp-block-group {
  margin-block-start: 0;
  margin-block-end: 0;
}

/*
 * Empty .page-box spacers (height: var(--section-spacing) in page CSS) must stay
 * visible in the canvas — WP html blocks can collapse without an explicit rule here
 * when the page sheet uses a rewritten .editor-styles-wrapper prefix.
 */
.editor-styles-wrapper .page-box,
.main .page-box {
  display: block;
  width: 100%;
  height: var(--section-spacing);
  flex-shrink: 0;
}

.main .wp-block-heading {
  /* theme headings already set margin:0 via page CSS class */
}

.main .wp-block-image {
  margin: 0;
  line-height: 0;
}

.main .wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
 * Card / arch / clinic media: figure.wp-block-image is position:absolute
 * (fills like the original bare <img>). Parent MUST be position:relative,
 * otherwise the photo escapes to the viewport (O gabinecie / about-clinic).
 */
.main [class*="-card"],
.main [class*="-media"],
.editor-styles-wrapper [class*="-card"],
.editor-styles-wrapper [class*="-media"] {
  position: relative;
}

.main [class*="-card"] .wp-block-image,
.main [class*="-media"] .wp-block-image,
.editor-styles-wrapper [class*="-card"] .wp-block-image,
.editor-styles-wrapper [class*="-media"] .wp-block-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  max-width: none !important;
}

.main [class*="-card"] .wp-block-image img,
.main [class*="-media"] .wp-block-image img,
.editor-styles-wrapper [class*="-card"] .wp-block-image img,
.editor-styles-wrapper [class*="-media"] .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/*
 * about-me portrait: original <img> was position:relative + contain/bottom
 * (not absolute cover like clinic cards). Keep figure in normal flow + above decor.
 */
.main .about-me-media .wp-block-image,
.main figure.about-me-image,
.editor-styles-wrapper .about-me-media .wp-block-image,
.editor-styles-wrapper figure.about-me-image {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}

.main .about-me-media .wp-block-image img,
.main figure.about-me-image img,
.editor-styles-wrapper .about-me-media .wp-block-image img,
.editor-styles-wrapper figure.about-me-image img {
  object-fit: contain !important;
  object-position: 50% 100% !important;
}

/* Clinic / other media photos stay above any decorative siblings */
.main [class*="-media"] > .wp-block-image,
.main [class*="-media"] .wp-block-image,
.editor-styles-wrapper [class*="-media"] .wp-block-image {
  z-index: 1;
}

/*
 * O gabinecie “Czytaj dalej”: page CSS uses .bio-more { display: contents }
 * which can override the HTML [hidden] attribute in some browsers.
 */
.main .bio-more[hidden] {
  display: none !important;
}
.main .bio-more:not([hidden]) {
  display: contents;
}

/* Certificate lightbox: page CSS sets display:flex which can beat [hidden] */
.overlay[hidden] {
  display: none !important;
}

/* Class was on <img>, now often on <figure> — keep cover behavior */
.main figure[class*="-image"],
.editor-styles-wrapper figure[class*="-image"] {
  margin: 0;
}
.main figure[class*="-image"] img,
.editor-styles-wrapper figure[class*="-image"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.main .wp-block-list {
  box-sizing: border-box;
}

.main .wp-block-buttons {
  margin: 0;
}

/* Custom cennik blocks share design classes on the root */
.main .wp-block-kosmed-price-row,
.editor-styles-wrapper .wp-block-kosmed-price-row {
  box-sizing: border-box;
}

.main .wp-block-kosmed-price-heading,
.editor-styles-wrapper .wp-block-kosmed-price-heading {
  box-sizing: border-box;
}

/* Bullet / pill badges & price stacks converted from <span> → <p> */
.main p[class*="-badge"],
.editor-styles-wrapper p[class*="-badge"] {
  margin: 0;
  flex-shrink: 0;
}

.main p[class*="-stack"],
.editor-styles-wrapper p[class*="-stack"] {
  margin: 0;
}

/* Editor canvas mirrors .main */
.editor-styles-wrapper .wp-block-group {
  box-sizing: border-box;
}

.editor-styles-wrapper .wp-block-image {
  margin: 0;
  line-height: 0;
}

/*
 * Twarz price rows: <a.therapies-link> → group + editable paragraphs + cover link.
 * Cover handles frontend navigation; hidden in editor so text stays clickable.
 */
.main .therapies-link {
  position: relative;
}

.main .therapies-link-cover {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-indent: -9999px;
  overflow: hidden;
}

.editor-styles-wrapper .therapies-link-cover {
  display: none !important;
}

/*
 * Regulamin (vouchery): item is grid 56px | 1fr.
 * Spans→paragraphs and group chrome need min-width so text fills the 1fr track
 * (not a few-character column). Also cover legacy <li> wrapping in the editor.
 */
.main .regulamin-item > .regulamin-text-2,
.main .regulamin-item > p.regulamin-text-2,
.editor-styles-wrapper .regulamin-item > .regulamin-text-2,
.editor-styles-wrapper .regulamin-item > p.regulamin-text-2 {
  min-width: 0;
  width: auto;
  max-width: none;
}

.main p.regulamin-display,
.editor-styles-wrapper p.regulamin-display {
  margin: 0;
}

.editor-styles-wrapper li.regulamin-item {
  grid-template-columns: 56px minmax(0, 1fr) !important;
}

.editor-styles-wrapper li.regulamin-item > .block-editor-rich-text__editable,
.editor-styles-wrapper li.regulamin-item > [contenteditable="true"] {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 16px;
  min-width: 0;
  width: 100%;
  grid-column: 1 / -1;
}

.editor-styles-wrapper li.regulamin-item .regulamin-display {
  flex: 0 0 56px;
  width: 56px;
}

.editor-styles-wrapper li.regulamin-item .regulamin-text-2 {
  flex: 1 1 auto;
  min-width: 0;
}