/**
 * Custom block styles (front end + editor iframe).
 *
 * Loaded via add_editor_style() and wp_enqueue_scripts() from
 * inc/ui/block-styles.php, so previews match the live site.
 */

/* Visually reverse a Columns block on desktop only. Below 48.875rem
   WordPress stacks the columns, so the first column stays on top on mobile. */
@media (min-width: 782px) {
  .wp-block-columns.is-style-reversed {
    flex-direction: row-reverse;
  }

  /* row-reverse only swaps the columns visually; the inline, physical
     left/right padding stays glued to each column. The Media + Text pattern
     pins the image column to left:80 / right:0, so after the swap the image
     would touch the outer edge. CSS cannot swap two physical values
     generically, so the image column is matched and its padding mirrored.

     Detection is serialization-proof on purpose: the front end renders the
     inline style without spaces (padding-right:0), while the editor iframe
     renders it via React with a space and possibly a unit (padding-right: 0px).
     So instead of matching the zero, we match the column that uses spacing-80
     but does NOT have spacing-80 on its right edge — i.e. the image column.
     The text column (80 on both sides) and the flush image column (no
     spacing-80 at all) are both left untouched. */
  .wp-block-columns.is-style-reversed
    > .wp-block-column[style*="--wp--preset--spacing--80"]:not(
      [style*="padding-right:var(--wp--preset--spacing--80)"]
    ):not([style*="padding-right: var(--wp--preset--spacing--80)"]) {
    padding-left: 0 !important;
    padding-right: var(--wp--preset--spacing--80) !important;
  }
}

/* Badge — background hugs the text instead of the full block width. */
.wp-block-heading.is-style-badge.has-background,
p.is-style-badge.has-background {
  width: fit-content;
  max-width: 100%;
  padding: 0.35em 0.75em;
  border-radius: var(--radius);
}

/* Only the constrained layout needs this: it centres every child with
   !important. Flex parents place the badge themselves, so leave them alone.
   :where() keeps this below the alignment rules, which must still win. */
:where(.is-layout-constrained) > .wp-block-heading.is-style-badge.has-background,
:where(.is-layout-constrained) > p.is-style-badge.has-background {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

.wp-block-heading.is-style-badge.has-background.has-text-align-center,
p.is-style-badge.has-background.has-text-align-center {
  margin-inline: auto !important;
}

.wp-block-heading.is-style-badge.has-background.has-text-align-right,
p.is-style-badge.has-background.has-text-align-right {
  margin-inline-start: auto !important;
  margin-inline-end: 0 !important;
}

/* Highlight — one background rectangle per rendered line. It needs an inline
   box, so it rides the editor's inline highlight format, not a block style. */
.wp-block-heading mark,
p mark {
  padding: 0.25em 0.5em;
  border-radius: var(--radius);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Buttons rendered by the blocks plugin (.c-button: content switcher tabs,
   investment list footer, filters). The plugin styles them through --btn-*
   variables; map those to the button variables in variables.scss, so both
   kinds of button look the same. */
:root {
  --btn-bg-disabled: var(--button-disabled-bg);
  --btn-color-disabled: var(--button-disabled-color);
  --btn-bg-primary: var(--button-primary-bg);
  --btn-color-primary: var(--button-primary-color);
  --btn-bg-secondary: var(--button-secondary-bg);
  --btn-border: var(--button-primary-border-width) solid var(--button-primary-border-color);
  --btn-radius: var(--button-radius);
  --btn-padding-y: var(--button-padding-y);
  --btn-padding-x: var(--button-padding-x);
  --btn-font-family: var(--button-font-family);
  --btn-font-size: var(--button-font-size);
  --btn-font-weight: var(--button-font-weight);
  --btn-letter-spacing: var(--button-letter-spacing);
  --btn-text-transform: var(--button-text-transform);
}

/* .c-button is doubled to outrank the plugin's own
   `.c-button.wp-element-button:hover` rule (0,3,0) without !important on
   everything. */
body .c-button.c-button {
  line-height: var(--button-line-height);
  transition: var(--button-transition);
}

body .c-button--secondary {
  --btn-bg: var(--button-secondary-bg);
  --btn-color: var(--button-secondary-color);
  --btn-border: var(--button-secondary-border-width) solid var(--button-secondary-border-color);
  --btn-padding-y: var(--button-secondary-padding-y);
}

body .c-button.c-button--secondary:hover,
body .c-button.c-button--secondary:focus {
  background: var(--button-secondary-bg-hover) !important;
  border-color: var(--button-secondary-border-color-hover);
  color: var(--button-secondary-color-hover) !important;
}

/* List "Punkty": 8px dot in --primary-light, small uppercase items. */
.wp-block-list.is-style-dots {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-block-list.is-style-dots > li {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  font-family: var(--font-accent);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  gap: var(--space-16);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-heading);
  text-transform: uppercase;
}

.wp-block-list.is-style-dots > li::before {
  background: var(--primary-light);
  border-radius: var(--radius-circle);
  content: "";
  flex: 0 0 auto;
  height: 0.5rem;
  width: 0.5rem;
}

/* Pill — glass label on a tile (Figma "wsparcie", "adam development"). */
p.is-style-pill {
  backdrop-filter: blur(var(--blur-md));
  background: color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: var(--radius-pill);
  color: var(--white);
  font-family: var(--font-accent);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-heading);
  margin: 0;
  padding: 0.75rem var(--space-24);
  text-transform: uppercase;
  width: fit-content;
}

/* Link with arrow — text button in the eyebrow colour with the small Figma
   arrow after it (assets/icons/arrow-right.svg as a mask, so it follows the
   text colour). */
.wp-block-button.is-style-arrow .wp-block-button__link {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--eyebrow);
  display: inline-flex;
  gap: var(--space-8);
  padding: 0;
  text-decoration: none;
}

.wp-block-button.is-style-arrow .wp-block-button__link::after {
  background: currentcolor;
  content: "";
  height: 0.375rem;
  mask: url("../icons/arrow-right.svg") no-repeat center / contain;
  width: 0.875rem;
}

.wp-block-button.is-style-arrow .wp-block-button__link:hover,
.wp-block-button.is-style-arrow .wp-block-button__link:focus-visible {
  background: transparent;
  color: var(--primary);
  text-decoration: none;
}