/* =========================================================
   Block: Video Banner IL
   File: blocks/video-banner-il/style.css
   ========================================================= */

.video-banner-il-section,
.video-banner-il-editor {
  position: relative;
  width: 100%;
  max-width: none !important;
  min-height: var(--vb-il-min-height, 770px);
  overflow: hidden;
  isolation: isolate;
  background: var(--vb-il-section-bg, #f0f0f0);
  border-style: none !important;
}

.video-banner-il-section {
  margin: 0;
}

.video-banner-il-section::before,
.video-banner-il-editor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 78% 28%,
      var(--vb-il-decorative-overlay-color, rgba(255, 255, 255, 0.08)),
      transparent 28rem
    ),
    linear-gradient(
      90deg,
      var(--vb-il-decorative-overlay-color, rgba(255, 255, 255, 0.08)),
      transparent 46%
    );
  opacity: var(--vb-il-decorative-overlay-opacity, 0.7);
}


/* =========================================================
   Media
   ========================================================= */

.video-banner-il__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--vb-il-section-bg, #f0f0f0);
}

.video-banner-il__video,
.video-banner-il__poster {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--vb-il-object-position, center center);
  opacity: var(--vb-il-media-opacity, 1);
  transform: scale(var(--vb-il-media-scale, 1));
  transform-origin: center center;
}

.video-banner-il__video {
  pointer-events: none;
}

.video-banner-il__poster {
  pointer-events: none;
}

/* Domyślnie pokazujemy media desktopowe, a mobile ukrywamy */
.video-banner-il__video--mobile,
.video-banner-il__poster--mobile {
  display: none;
}

.video-banner-il__video--desktop,
.video-banner-il__poster--desktop {
  display: block;
}

.video-banner-il__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--vb-il-overlay-color, rgba(26, 48, 26, 0.22));
}

.video-banner-il__placeholder {
  width: 100%;
  height: 100%;
  min-height: var(--vb-il-min-height, 770px);
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      135deg,
      rgba(240, 240, 240, 1) 0%,
      rgba(204, 204, 204, 1) 100%
    );
  color: rgba(26, 48, 26, 0.72);
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
}


/* =========================================================
   Layout
   ========================================================= */

.video-banner-il__container {
  position: relative;
  z-index: 5;
  width: min(
    calc(100% - (var(--vb-il-container-padding-x, 48px) * 2)),
    var(--vb-il-container-max-width, 1440px)
  );
  max-width: none;
  min-height: var(--vb-il-min-height, 770px);
  margin-inline: auto;
  display: flex;
  align-items: var(--vb-il-content-align-y, flex-start);
  justify-content: var(--vb-il-content-align-x, center);
  box-sizing: border-box;
}

.video-banner-il-section[style*="--vb-il-container-max-width:none"] .video-banner-il__container,
.video-banner-il-editor[style*="--vb-il-container-max-width:none"] .video-banner-il__container {
  width: calc(100% - (var(--vb-il-container-padding-x, 48px) * 2));
  max-width: none;
}

.video-banner-il__content {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: var(--vb-il-content-max-width, 620px);
  padding-top: var(--vb-il-content-offset-top, 90px);
  margin-left: var(--vb-il-content-offset-left, 0px);
  text-align: var(--vb-il-text-align, left);
  box-sizing: border-box;
}


/* =========================================================
   Eyebrow
   ========================================================= */

.video-banner-il__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--vb-il-eyebrow-line-gap, 8px);
  margin: 0 0 var(--vb-il-eyebrow-margin-bottom, 10px);
  color: var(--vb-il-eyebrow-color, #4a8a4a);
  font-family: var(--vb-il-eyebrow-family, Inter, Arial, sans-serif);
  font-size: var(--vb-il-eyebrow-size, 13px);
  font-weight: var(--vb-il-eyebrow-weight, 700);
  line-height: var(--vb-il-eyebrow-line, 1);
  letter-spacing: var(--vb-il-eyebrow-spacing, 0em);
  text-transform: var(--vb-il-eyebrow-transform, uppercase);
}

.video-banner-il__eyebrow::before {
  content: "";
  display: var(--vb-il-eyebrow-line-display, inline-block);
  width: var(--vb-il-eyebrow-line-width, 18px);
  height: var(--vb-il-eyebrow-line-thickness, 1px);
  flex: 0 0 var(--vb-il-eyebrow-line-width, 18px);
  background: var(--vb-il-eyebrow-line-color, #4a8a4a);
}


/* =========================================================
   Heading
   ========================================================= */

.video-banner-il__heading {
  display: block;
  max-width: 100%;
  margin: 0 0 var(--vb-il-heading-margin-bottom, 0);
  color: var(--vb-il-heading-color, #000000);
  font-family: var(--vb-il-heading-family, Inter, Arial, sans-serif);
  font-size: var(--vb-il-heading-size, 54px);
  font-weight: var(--vb-il-heading-weight, 800);
  line-height: var(--vb-il-heading-line, 0.98);
  letter-spacing: var(--vb-il-heading-spacing, -0.04em);
  text-transform: var(--vb-il-heading-transform, none);
}

.video-banner-il__heading span {
  display: inline;
}

.video-banner-il__heading-highlight {
  color: var(--vb-il-heading-highlight-color, #26ad21) !important;
  background: transparent;
  font: inherit;
}


/* =========================================================
   Optional description
   ========================================================= */

.video-banner-il__description {
  max-width: 100%;
  margin: var(--vb-il-description-margin-top, 20px) 0 0;
  color: var(--vb-il-description-color, #ffffff);
  font-family: var(--vb-il-description-family, Lato, Arial, sans-serif);
  font-size: var(--vb-il-description-size, 16px);
  font-weight: var(--vb-il-description-weight, 400);
  line-height: var(--vb-il-description-line, 1.6);
  letter-spacing: var(--vb-il-description-spacing, 0em);
  text-transform: var(--vb-il-description-transform, none);
}


/* =========================================================
   Button
   ========================================================= */

.video-banner-il__actions {
  position: absolute;
  left: 50%;
  bottom: var(--vb-il-button-bottom, 38px);
  z-index: 7;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin-top: var(--vb-il-button-margin-top, 0);
}

.video-banner-il__url-control {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  max-width: calc(100vw - 48px);
}

.video-banner-il__button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: var(--vb-il-button-padding-top, 18px);
  padding-right: var(--vb-il-button-padding-right, 22px);
  padding-bottom: var(--vb-il-button-padding-bottom, 18px);
  padding-left: var(--vb-il-button-padding-left, 22px);
  color: var(--vb-il-button-color, #ffffff);
  background: var(--vb-il-button-bg, #4a8a4a);
  border-width: var(--vb-il-button-stroke-size, 1px);
  border-style: solid;
  border-color: var(--vb-il-button-stroke-color, transparent);
  border-radius: var(--vb-il-button-radius, 999px);
  font-family: var(--vb-il-button-family, Lato, Arial, sans-serif);
  font-size: var(--vb-il-button-size, 15px);
  font-weight: var(--vb-il-button-weight, 700);
  line-height: var(--vb-il-button-line, 1);
  letter-spacing: var(--vb-il-button-spacing, 0em);
  text-transform: var(--vb-il-button-transform, none);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    filter 0.25s ease;
}

.video-banner-il__button:hover {
  color: var(--vb-il-button-color-hover, #ffffff);
  background: var(--vb-il-button-bg-hover, #26ad21);
  border-color: var(--vb-il-button-stroke-hover, transparent);
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.video-banner-il__button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.video-banner-il__button-style-outline {
  color: var(--vb-il-button-color, #ffffff);
  background: transparent;
}

.video-banner-il__button-style-outline:hover {
  color: var(--vb-il-button-color-hover, #ffffff);
  background: var(--vb-il-button-bg-hover, rgba(38, 173, 33, 0.18));
}

.video-banner-il__button-style-text {
  min-height: auto;
  padding: 0;
  color: var(--vb-il-button-color, #ffffff);
  background: transparent;
  border-color: transparent;
  border-radius: 0;
}

.video-banner-il__button-style-text:hover {
  color: var(--vb-il-button-color-hover, #26ad21);
  background: transparent;
  border-color: transparent;
  transform: translateX(2px);
}


/* =========================================================
   Editor
   ========================================================= */

.wp-block-agrimpex-video-banner-il {
  max-width: none !important;
  width: 100% !important;
}

.video-banner-il-editor {
  margin: 0;
}

.video-banner-il-editor .video-banner-il__media,
.video-banner-il-editor .video-banner-il__video,
.video-banner-il-editor .video-banner-il__poster,
.video-banner-il-editor .video-banner-il__overlay {
  pointer-events: none;
}

.video-banner-il-editor .video-banner-il__button {
  pointer-events: none;
}

.video-banner-il-editor .video-banner-il__heading [contenteditable="true"],
.video-banner-il-editor .video-banner-il__eyebrow[contenteditable="true"],
.video-banner-il-editor .video-banner-il__button[contenteditable="true"],
.video-banner-il-editor .video-banner-il__description[contenteditable="true"] {
  cursor: text;
}

.video-banner-il-editor .video-banner-il__heading [contenteditable="true"]:focus,
.video-banner-il-editor .video-banner-il__eyebrow[contenteditable="true"]:focus,
.video-banner-il-editor .video-banner-il__button[contenteditable="true"]:focus,
.video-banner-il-editor .video-banner-il__description[contenteditable="true"]:focus {
  outline: 2px solid rgba(74, 138, 74, 0.5);
  outline-offset: 5px;
}

.wp-block-agrimpex-video-banner-il.is-selected .video-banner-il-editor,
.wp-block-agrimpex-video-banner-il.has-child-selected .video-banner-il-editor {
  outline: 2px solid #007cba;
  outline-offset: -2px;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1100px) {
  .video-banner-il__container {
    width: min(
      calc(100% - (var(--vb-il-container-padding-x, 48px) * 2)),
      var(--vb-il-container-max-width, 1440px)
    );
    max-width: none;
  }

  .video-banner-il-section[style*="--vb-il-container-max-width:none"] .video-banner-il__container,
  .video-banner-il-editor[style*="--vb-il-container-max-width:none"] .video-banner-il__container {
    width: calc(100% - (var(--vb-il-container-padding-x, 48px) * 2));
    max-width: none;
  }

  .video-banner-il__heading {
    font-size: clamp(34px, 5vw, var(--vb-il-heading-size, 54px));
  }
}

@media (max-width: 767px) {
  .video-banner-il-section,
  .video-banner-il-editor {
    min-height: var(--vb-il-mobile-min-height, 620px);
  }

  .video-banner-il__media,
  .video-banner-il__placeholder {
    min-height: var(--vb-il-mobile-min-height, 620px);
  }

  .video-banner-il__container {
    width: calc(100% - (var(--vb-il-mobile-container-padding-x, 24px) * 2));
    max-width: none;
    min-height: var(--vb-il-mobile-min-height, 620px);
    align-items: var(--vb-il-mobile-content-align-y, flex-start);
    justify-content: var(--vb-il-mobile-content-align-x, flex-start);
  }

  .video-banner-il-section[style*="--vb-il-container-max-width:none"] .video-banner-il__container,
  .video-banner-il-editor[style*="--vb-il-container-max-width:none"] .video-banner-il__container {
    width: calc(100% - (var(--vb-il-mobile-container-padding-x, 24px) * 2));
    max-width: none;
  }

  .video-banner-il__content {
    max-width: var(--vb-il-mobile-content-max-width, 1000px);
    padding-top: var(--vb-il-mobile-content-offset-top, 64px);
    margin-left: var(--vb-il-mobile-content-offset-left, 0px);
    text-align: var(--vb-il-mobile-text-align, left);
  }

  .video-banner-il__heading {
    max-width: 100%;
    font-size: var(--vb-il-mobile-heading-size, 42px);
    line-height: var(--vb-il-mobile-heading-line, 1.04);
    letter-spacing: var(--vb-il-mobile-heading-spacing, -0.04em);
  }

  .video-banner-il__description {
    font-size: var(--vb-il-mobile-description-size, 16px);
    line-height: var(--vb-il-mobile-description-line, 1.6);
  }

  .video-banner-il__actions {
    bottom: var(--vb-il-mobile-button-bottom, 24px);
  }

  .video-banner-il__button {
    padding-top: var(--vb-il-mobile-button-padding-top, 14px);
    padding-right: var(--vb-il-mobile-button-padding-right, 20px);
    padding-bottom: var(--vb-il-mobile-button-padding-bottom, 14px);
    padding-left: var(--vb-il-mobile-button-padding-left, 20px);
    font-size: var(--vb-il-mobile-button-size, 14px);
    white-space: normal;
    text-align: center;
  }

  /* Jeżeli dodano mobile video/poster, ukryj desktop */
  .video-banner-il__video--desktop.has-mobile-video,
  .video-banner-il__poster--desktop.has-mobile-video {
    display: none;
  }

  .video-banner-il__video--mobile,
  .video-banner-il__poster--mobile {
    display: block;
    object-position: var(--vb-il-mobile-object-position, center center);
  }
}

@media (max-width: 480px) {
  .video-banner-il-section,
  .video-banner-il-editor {
    min-height: var(--vb-il-small-mobile-min-height, 560px);
  }

  .video-banner-il__media,
  .video-banner-il__placeholder {
    min-height: var(--vb-il-small-mobile-min-height, 560px);
  }

  .video-banner-il__container {
    min-height: var(--vb-il-small-mobile-min-height, 560px);
  }

  .video-banner-il__heading {
    font-size: clamp(28px, 10vw, var(--vb-il-mobile-heading-size, 42px));
  }

  .video-banner-il__eyebrow {
    font-size: min(var(--vb-il-eyebrow-size, 13px), 11px);
  }
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .video-banner-il__button,
  .video-banner-il__video,
  .video-banner-il__poster {
    transition: none !important;
  }

  .video-banner-il__button:hover {
    transform: none;
  }
}