/* --------------------------------------------------------------------------
  Centralized block styles (used in editor and frontend)
  Keep block style variants here so the editor and frontend share rules.
  ----------------------------------------------------------------------- */

/* Heading block — Icon before heading variant (.is-style-fastech-icon-heading)
  Uses the theme icon URL exposed as a CSS variable to draw an icon left of headings */
.is-style-fastech-icon-heading {
  display: flex;
  align-items: center; /* center icon with the heading text */
  gap: 1rem;
}

/* Respect the block's text alignment classes by aligning the flex container */
.is-style-fastech-icon-heading.has-text-align-center,
.is-style-fastech-icon-heading.aligncenter {
  justify-content: center;
}
.is-style-fastech-icon-heading.has-text-align-right,
.is-style-fastech-icon-heading.alignright {
  justify-content: flex-end;
}
.is-style-fastech-icon-heading.has-text-align-left,
.is-style-fastech-icon-heading.alignleft {
  justify-content: flex-start;
}

h1.is-style-fastech-icon-heading,
h2.is-style-fastech-icon-heading,
h3.is-style-fastech-icon-heading,
h4.is-style-fastech-icon-heading,
h5.is-style-fastech-icon-heading,
h6.is-style-fastech-icon-heading {
  margin: 0;
  line-height: 1em;
}

/* Icon element for the heading variant */
.is-style-fastech-icon-heading:before {
  content: "";
  display: inline-block;
  width: 1.25em; /* size relative to the font size */
  height: 1.25em;
  background-image: var(--fastech-icon-url);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  align-self: center;
  position: relative;
  top: 0.05em; /* dostosuj wartość według potrzeby */
  aspect-ratio: 1;
}

/* List block — Horizontal list variant (.is-style-horizontal-list)
   Renders list items horizontally while preserving list markers */
.is-style-horizontal-list {
  display: inline-flex;
  flex-wrap: nowrap;
  list-style: disc;
  list-style-position: inside;
  padding-left: 0.5rem;
}

.is-style-horizontal-list li {
  margin-right: 2rem;
}

@media (max-width: 768px) {
  .is-style-horizontal-list {
    flex-wrap: wrap;
  }

  .is-style-horizontal-list li {
    margin-right: 1rem;
  }
}

/* List block — Checklist variant (.wp-block-list.is-style-checklist)
  Replace default markers with a custom check icon */
.wp-block-list.is-style-checklist {
  list-style: none;
  padding-left: 0;
}

.wp-block-list.is-style-checklist li {
  position: relative;
  padding-left: 40px; /* space for the icon */
  margin-bottom: 0.6rem;
}

/* Custom check icon for checklist items */
.wp-block-list.is-style-checklist li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 4L9 15L4 10V16' stroke='%23FF2D55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 16L9 21L20 10V4' stroke='%23FF2D55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}



/* Responsive: hide heading icon on small screens */
@media (max-width: 768px) {
  .is-style-fastech-icon-heading:before {
    display: none;
  }
}

/* Columns block — Reverse on mobile variant (.is-style-reverse-mobile)
   Stacks columns in reverse order on small screens */
@media (max-width: 768px) {
  .is-style-reverse-mobile .wp-block-columns,
  .is-style-reverse-mobile.wp-block-columns {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* Image block — SVG mask variants
  Apply SVG masks to image elements as block styles */
.is-style-mask-horizontal {
  -webkit-mask-image: url("../masks/mask-image-horizontal-white.svg");
  mask-image: url("../masks/mask-image-horizontal-white.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}

/* Image block — Vertical mask variant (.is-style-mask-vertical)
   Uses the vertical SVG mask file to crop images to the vertical shape */
.is-style-mask-vertical {
  -webkit-mask-image: url("../masks/mask-image-vertical-white.svg");
  mask-image: url("../masks/mask-image-vertical-white.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.is-style-mask-vertical {
  -webkit-mask-image: url("../masks/mask-image-vertical-white.svg");
  mask-image: url("../masks/mask-image-vertical-white.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}