/**
 * 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-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 — the small tag of the Figma file (18px label in a 30px pill,
   terracotta by default). A background or text colour picked in the editor
   replaces the default one. The top padding is larger on purpose: Figma sets
   the label 2px below the middle. */
p.is-style-pill {
  background: var(--primary);
  border-radius: var(--radius-pill);
  color: var(--background);
  font-family: var(--font-accent);
  font-size: var(--font-size-tag);
  line-height: var(--line-height-heading);
  margin: 0;
  padding: 0.375rem var(--space-16) 0.125rem;
  width: fit-content;
}

p.is-style-pill sup {
  font-size: 0.645em;
  line-height: 0;
}

/* Link with arrow (Figma "Button secondary") — text button with the white
   Figma arrow in a small circle before the label. The asset points down
   (assets/icons/arrow-down-small.svg), so the circle is turned to the right. */
.wp-block-button.is-style-arrow .wp-block-button__link {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--button-text-color);
  display: inline-flex;
  gap: var(--space-16);
  padding: 0;
  text-decoration: none;
}

.wp-block-button.is-style-arrow .wp-block-button__link::before {
  background: var(--button-arrow-bg) url("../icons/arrow-down-small.svg") no-repeat center;
  border-radius: var(--radius-circle);
  content: "";
  flex: 0 0 auto;
  height: var(--button-arrow-size);
  transform: rotate(-90deg);
  transition: background-color var(--transition);
  width: var(--button-arrow-size);
}

.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(--button-text-color-hover);
  text-decoration: none;
}

.wp-block-button.is-style-arrow .wp-block-button__link:hover::before,
.wp-block-button.is-style-arrow .wp-block-button__link:focus-visible::before {
  background-color: var(--button-arrow-bg-hover);
}

/* Circle (Figma: 180px round call to action) — the label sits over the Figma
   arrow (assets/icons/arrow-down.svg as a mask, so it follows the text colour;
   turned to the right like the one above). */
.wp-block-button.is-style-circle .wp-block-button__link {
  align-items: center;
  aspect-ratio: 1;
  background: var(--button-circle-bg);
  border: 0;
  border-radius: var(--radius-circle);
  color: var(--button-circle-color);
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-24);
  justify-content: center;
  line-height: var(--line-height-label);
  padding: var(--button-circle-padding);
  text-align: center;
  width: var(--button-circle-size);
}

.wp-block-button.is-style-circle .wp-block-button__link::after {
  background: currentcolor;
  content: "";
  flex: 0 0 auto;
  height: var(--button-circle-icon-size);
  mask: url("../icons/arrow-down.svg") no-repeat center / contain;
  transform: rotate(-90deg);
  width: var(--button-circle-icon-size);
}

.wp-block-button.is-style-circle .wp-block-button__link:hover,
.wp-block-button.is-style-circle .wp-block-button__link:focus-visible {
  background: var(--button-circle-bg-hover);
  color: var(--button-circle-color-hover);
}

/* A circle without the arrow: the label alone in the middle (Figma "zobacz
   wirtualny spacer"). Added as an extra class next to the Circle style. */
.wp-block-button.is-style-circle.has-no-arrow .wp-block-button__link::after {
  display: none;
}

/* Image markers "Tagi" (Figma: a tag joined to a dot on the photo by a dashed
   line). The label takes the look of the Pill above; the block's icon side
   picks how the tag hangs on the line: "left" puts the line at the tag's left
   end, "right" at its right end, "top" puts the tag under the dot. */
.wp-block-rendart-image-markers.is-style-tags {
  --pin-accent: var(--primary-bright);
  --pin-accent-hover: var(--primary);
  --pin-size: 0.625rem;
  --rendart-marker-line: 11.375rem; /* Figma: 182px */
}

.wp-block-rendart-image-markers.is-style-tags .rendart-image-markers__media {
  overflow: visible;
}

.wp-block-rendart-image-markers.is-style-tags .rendart-image-markers__pin {
  flex-direction: column;
  gap: var(--rendart-marker-line);
}

.wp-block-rendart-image-markers.is-style-tags .rendart-image-markers__pin--icon-left {
  align-items: flex-start;
  transform: translate(calc(-1 * var(--pin-anchor) / 2), calc(-100% + var(--pin-anchor) / 2));
}

.wp-block-rendart-image-markers.is-style-tags .rendart-image-markers__pin--icon-right {
  align-items: flex-end;
  transform: translate(calc(-100% + var(--pin-anchor) / 2), calc(-100% + var(--pin-anchor) / 2));
}

.wp-block-rendart-image-markers.is-style-tags .rendart-image-markers__pin--icon-top {
  flex-direction: column-reverse;
}

.wp-block-rendart-image-markers.is-style-tags .rendart-image-markers__label {
  border-radius: var(--radius-pill);
  font-family: var(--font-accent);
  font-size: var(--font-size-tag);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  line-height: var(--line-height-heading);
  padding: 0.375rem var(--space-16) 0.125rem;
  text-transform: none;
}

.wp-block-rendart-image-markers.is-style-tags .rendart-image-markers__dot {
  background: var(--black);
  position: relative;
}

/* The dashed line between the tag and its dot (Figma: 12px dashes). */
.wp-block-rendart-image-markers.is-style-tags .rendart-image-markers__dot::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--border-dashed) 0 0.75rem,
    transparent 0.75rem 1.5rem
  );
  bottom: 100%;
  content: "";
  height: var(--rendart-marker-line);
  left: calc(50% - 0.5px);
  position: absolute;
  width: 1px;
}

.wp-block-rendart-image-markers.is-style-tags
  .rendart-image-markers__pin--icon-top
  .rendart-image-markers__dot::before {
  bottom: auto;
  top: 100%;
}

/* On phones the block keeps only the dots and shows a tag on tap; the line
   would then end in nothing. */
@media (max-width: 767px) {
  .wp-block-rendart-image-markers.is-style-tags .rendart-image-markers__pin {
    gap: var(--space-8);
  }

  .wp-block-rendart-image-markers.is-style-tags .rendart-image-markers__dot::before {
    display: none;
  }
}

/* Image markers "Etykiety" (Figma: the location maps). A marker is a dark dot
   with its name beside it in button type, no plate; the note of a marker (the
   travel time) is lighter. The main marker shows only its icon, the logo, in
   a terracotta circle. */
.wp-block-rendart-image-markers.is-style-labels {
  --pin-accent: var(--black);
  --pin-accent-hover: var(--primary);
  /* Dots and names shrink with the map (Figma sizes on a 1000px map), so a
     dense map stays readable on a narrower screen. */
  --pin-size: clamp(0.75rem, 2.4cqw, 1.5rem);
}

.wp-block-rendart-image-markers.is-style-labels .rendart-image-markers__media {
  container-type: inline-size;
}

.wp-block-rendart-image-markers.is-style-labels .rendart-image-markers__pin {
  gap: clamp(0.25rem, 0.8cqw, var(--space-8));
}

.wp-block-rendart-image-markers.is-style-labels .rendart-image-markers__label {
  background: transparent;
  color: var(--pin-accent);
  font-family: var(--font-button);
  font-size: clamp(0.625rem, 1.6cqw, var(--font-size-button));
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-label);
  padding: 0.125rem 0 0;
  transition: color var(--transition);
}

.wp-block-rendart-image-markers.is-style-labels
  .rendart-image-markers__pin--icon-left
  .rendart-image-markers__label {
  text-align: left;
}

.wp-block-rendart-image-markers.is-style-labels
  .rendart-image-markers__pin--icon-right
  .rendart-image-markers__label {
  text-align: right;
}

.wp-block-rendart-image-markers.is-style-labels
  .rendart-image-markers__pin:hover
  .rendart-image-markers__label,
.wp-block-rendart-image-markers.is-style-labels
  .rendart-image-markers__pin:focus-visible
  .rendart-image-markers__label,
.wp-block-rendart-image-markers.is-style-labels
  .rendart-image-markers__pin.is-active
  .rendart-image-markers__label {
  background: transparent;
  color: var(--pin-accent-hover);
}

.wp-block-rendart-image-markers.is-style-labels .rendart-image-markers__pin--primary {
  --pin-icon-size: clamp(3rem, 10cqw, 6.25rem); /* Figma: 100px circle */
}

.wp-block-rendart-image-markers.is-style-labels
  .rendart-image-markers__pin--primary
  .rendart-image-markers__label {
  display: none;
}

.wp-block-rendart-image-markers.is-style-labels
  .rendart-image-markers__pin--primary
  .rendart-image-markers__icon {
  align-items: center;
  background: var(--primary);
  border-radius: var(--radius-circle);
  display: flex;
  justify-content: center;
}

/* Figma: the logo is 46 × 48 in the 100px circle. */
.wp-block-rendart-image-markers.is-style-labels
  .rendart-image-markers__pin--primary
  .rendart-image-markers__icon
  img {
  height: 48%;
  width: 46%;
}

/* On phones the block keeps only the dots and shows a name on tap: smaller
   dots, and a plate under the name so it reads over the neighbours. */
@media (max-width: 767px) {
  .wp-block-rendart-image-markers.is-style-labels {
    --pin-size: clamp(0.5rem, 3cqw, 0.75rem);
  }

  .wp-block-rendart-image-markers.is-style-labels .rendart-image-markers__pin--primary {
    --pin-icon-size: clamp(1.75rem, 10cqw, 2.5rem);
  }

  .wp-block-rendart-image-markers.is-style-labels .rendart-image-markers__label,
  .wp-block-rendart-image-markers.is-style-labels
    .rendart-image-markers__pin.is-active
    .rendart-image-markers__label,
  .wp-block-rendart-image-markers.is-style-labels
    .rendart-image-markers__pin:focus-visible
    .rendart-image-markers__label {
    background: var(--background);
    font-size: var(--font-size-small);
    padding: 0.25rem var(--space-8);
  }
}

/* Content switcher "Tagi" (Figma: the tags of the standard section): the tabs
   are small pills that wrap, the active one dark green, and the panel under
   them is one uppercase line. */
.wp-block-rendart-content-switcher.is-style-tags .button-bar {
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: flex-start;
  margin-bottom: var(--space-40);
}

.wp-block-rendart-content-switcher.is-style-tags .content-switcher__tab.c-button {
  --btn-bg: var(--accent-light);
  --btn-border: 0;
  --btn-color: var(--accent-dark);
  background: var(--btn-bg);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: none;
  color: var(--btn-color);
  cursor: pointer;
  font-family: var(--font-accent);
  font-size: var(--font-size-tag);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  line-height: var(--line-height-heading);
  min-height: 0;
  min-width: 0;
  padding: 0.375rem var(--space-16) 0.125rem;
  text-transform: none;
  transition:
    background-color var(--transition),
    color var(--transition);
}

/* !important: the plugin's own hover rule for .c-button--secondary sets both
   with !important (see the bridge above). */
.wp-block-rendart-content-switcher.is-style-tags .content-switcher__tab.c-button:hover,
.wp-block-rendart-content-switcher.is-style-tags .content-switcher__tab.c-button:focus-visible,
.wp-block-rendart-content-switcher.is-style-tags .content-switcher__tab.c-button.active {
  background: var(--accent-dark) !important;
  color: var(--white) !important;
}

.wp-block-rendart-content-switcher.is-style-tags .content-switcher-tab p {
  margin: 0;
  max-width: 32rem;
  text-transform: uppercase;
}