/* ========================================================================
   Realizacje v6.0 — hidden preview template
   Scoped under .realizacje-v6 so nothing leaks into other pages.
   ======================================================================== */

.realizacje-v6 {
  --rv6-purple: #473d84;
  --rv6-purple-text: #463d82;
  --rv6-gray: #585858;
  --rv6-gray-light: #e2e2e2;
  --rv6-bg: #ffffff;
  --rv6-border: #ddd;
  --rv6-font: "Lato", sans-serif;
  --rv6-container: 1640px;
  --rv6-side-pad: 40px;
  --rv6-hero-breakout: 123px; /* how much the main hero image rises above the card */
  --rv6-hero-pad-bottom: 80px; /* card padding-bottom; visual absorbs it to reach card bottom */
  color: #000;
  font-family: var(--rv6-font);
  position: relative;
  z-index: 1;
  background: #fff;
  padding-bottom: 80px;
}

/* The site wraps everything in .container (max-width 1140px) via header/subpage_banner
   for other templates. Our template lives outside Bootstrap containers, so we size
   our own container widths per section. */

.realizacje-v6 *,
.realizacje-v6 *::before,
.realizacje-v6 *::after {
  box-sizing: border-box;
}

.rv6-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--rv6-gray);
  font-size: 15px;
}

/* ---------- HERO CARD (sits below standard .subpage_banner) ---------- */

.realizacje-v6 .rv6-hero__card-wrap {
  position: relative;
  max-width: var(--rv6-container);
  /* top margin = base 50px + breakout buffer so the image doesn't clash with subpage_banner */
  margin: calc(0px + var(--rv6-hero-breakout)) auto 0;
  padding: 0 var(--rv6-side-pad);
  z-index: 3;
}

.rv6-hero__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--rv6-border);
  border-radius: 0 50px 0 50px; /* top-right + bottom-left rounded */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  padding: 60px 70px 80px;
  min-height: 440px;
  overflow: visible; /* allow main image to break out above */
}

.rv6-hero__slides {
  position: relative;
  min-height: 360px;
}

.rv6-hero__slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: stretch; /* visual fills cell height */
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  pointer-events: none;
}

.rv6-hero__slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Visual column sits inside the card's padding (gap on the left), but the
   main image breaks out upward (negative top) and extends to the card's
   bottom edge via negative margin-bottom on the visual. */
.rv6-hero__slide-visual {
  position: relative;
}

.rv6-hero__slide-img {
  position: absolute;
  overflow: hidden;
  background: #111;
}

.rv6-hero__slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  /* Default (= return-from-hover) transition is fast so the image snaps
     back to the top as soon as the mouse leaves the slider. */
  transition: object-position 0.6s ease-out;
}

/* Hover the hero card → both screenshots scroll top→bottom. --rv6-scroll-dur is
   set per-image in JS, proportional to each screenshot's length, so both columns
   scroll at the same on-screen speed regardless of how long the page is.
   (Hover also pauses the slider autoplay — see mouseenter handler in JS.) */
.rv6-hero__card:hover .rv6-hero__slide-img img {
  object-position: center 100%;
  transition: object-position var(--rv6-scroll-dur, 5s) ease-in-out;
}

/* Main: inset shorthand (top / right / bottom / left).
   - top:    -breakout    → image extends above the card
   - bottom: -pad-bottom  → image extends past the card's padding-bottom to the card's actual edge
   - height is implicit (card height + breakout + pad-bottom). */
.rv6-hero__slide-img--main {
  inset: calc(var(--rv6-hero-breakout) * -1) 30%
    calc(var(--rv6-hero-pad-bottom) * -1) 0;
  z-index: 3;
  filter: drop-shadow(0 4px 27.1px rgba(0, 0, 0, 0.1));
}

/* Alt: behind main, starts a bit below card top, also reaches card's actual bottom edge. */
.rv6-hero__slide-img--alt {
  inset: 10% 0 calc(var(--rv6-hero-pad-bottom) * -1) 55%;
  z-index: 2;
}

/* If only one image (no alt), main spans the full visual column width */
.rv6-hero__slide-visual:not(:has(.rv6-hero__slide-img--alt))
  .rv6-hero__slide-img--main {
  inset: calc(var(--rv6-hero-breakout) * -1) 0
    calc(var(--rv6-hero-pad-bottom) * -1) 0;
}

.rv6-hero__slide-body {
  padding-top: 10px;
  color: var(--rv6-gray);
}

.rv6-hero__slide-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.rv6-hero__slide-title {
  margin: 0;
  font-family: var(--rv6-font);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.1;
  color: var(--rv6-purple-text);
}

.rv6-hero__slide-ext,
.rv6-hero__slide-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rv6-purple-text);
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px;
}

.rv6-hero__slide-mark {
  color: var(--rv6-gray);
}

.rv6-hero__slide-tags {
  margin: 8px 0 24px;
}

.rv6-hero__slide-tags span {
  font-size: 12px;
  color: #000;
  opacity: 0.5;
  margin-right: 14px;
}

.rv6-hero__slide-desc {
  font-family: "Plus Jakarta Sans", var(--rv6-font);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  color: var(--rv6-gray);
  margin: 0 0 32px;
  max-width: 460px;
}

.rv6-hero__slide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rv6-purple-text);
  border-radius: 26px;
  color: var(--rv6-purple-text);
  font-family: "Plus Jakarta Sans", var(--rv6-font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.65px;
  padding: 8px 24px;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.rv6-hero__slide-btn:hover {
  background: var(--rv6-purple-text);
  color: #fff;
  text-decoration: none;
}

/* Dots are positioned absolutely so they don't add to the card's content
   height. This keeps the slides area exactly at its min-height and lets the
   hero images' `bottom: -pad-bottom` reach the card's actual bottom edge. */
.rv6-hero__dots {
  position: absolute;
  bottom: 30px;
  right: 70px;
  display: flex;
  gap: 14px;
  z-index: 4;
}

.rv6-hero__dot {
  width: 41px;
  height: 3px;
  border-radius: 16px;
  background: var(--rv6-gray-light);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease;
}

.rv6-hero__dot.is-active {
  background: var(--rv6-purple-text);
}

/* ---------- FILTERS ---------- */

.rv6-filters {
  max-width: var(--rv6-container);
  margin: 60px auto 40px;
  padding: 0 var(--rv6-side-pad);
}

.rv6-filters__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}

.rv6-filters__label {
  font-family: var(--rv6-font);
  font-weight: 400;
  font-size: 13px;
  color: var(--rv6-purple-text);
  margin-right: 10px;
}

.rv6-filters__pill {
  border: none;
  background: none;
  font-family: var(--rv6-font);
  font-weight: 300;
  font-size: 13px;
  color: #000;
  opacity: 0.5;
  cursor: pointer;
  padding: 4px 2px;
  transition:
    opacity 0.2s ease,
    color 0.2s ease;
}

.rv6-filters__pill:hover {
  opacity: 1;
}

.rv6-filters__pill.is-active {
  opacity: 1;
  color: var(--rv6-purple-text);
  font-weight: 400;
}

/* ---------- GRID ---------- */

.rv6-grid {
  max-width: var(--rv6-container);
  margin: 0 auto;
  padding: 0 var(--rv6-side-pad);
}

.rv6-grid__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px 70px;
}

.rv6-card {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rv6-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.rv6-card.is-hidden {
  display: none;
}

/* Frame: the card's container holding bg + tint + screenshot */
.rv6-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 669 / 453;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background-color: var(--rv6-tint, #473d84);
  isolation: isolate;
}

/* Background variants ----------------------------------------------------- */

/* kolor: only tint (already applied via frame background-color) */

/* obraz: full-cover image, no tint */
.rv6-card--bg-obraz .rv6-card__frame {
  background-color: transparent;
}

.rv6-card--bg-obraz .rv6-card__bg {
  opacity: 1;
}

/* gradient: image + color tint blend */
.rv6-card--bg-gradient .rv6-card__bg {
  opacity: 0.6;
}

.rv6-card__bg {
  position: absolute;
  inset: -8% -4%;
  background-size: cover;
  background-position: center;
  z-index: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.6s ease;
  will-change: transform;
}

.rv6-card__tint {
  position: absolute;
  inset: 0;
  background: var(--rv6-tint, #473d84);
  mix-blend-mode: color;
  opacity: 0.7;
  z-index: 2;
  pointer-events: none;
}

.rv6-card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 54px rgba(0, 0, 0, 0.25);
  z-index: 3;
  pointer-events: none;
}

/* Screenshot: long image of the whole page, user-chosen vertical offset via
   --rv6-screen-offset CSS var (0% = top, 100% = bottom). object-position on
   Y axis reveals exactly the chosen fragment of the tall source image. */
.rv6-card__screen {
  position: absolute;
  left: 10%;
  bottom: 0;
  width: 80%;
  aspect-ratio: 541 / 404;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  z-index: 4;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  transform: perspective(1000px) rotateX(0) rotateY(0) scale(1);
  transform-style: preserve-3d;
  transition:
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.6s ease;
  will-change: transform;
  background: #111;
}

.rv6-card__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--rv6-screen-offset, 0%);
  /* Default (= return-from-hover) transition is fast so the image snaps
	   back to the initial offset as soon as the mouse leaves the card. */
  transition: object-position 0.6s ease-out;
}

/* On hover the long screenshot slowly scrolls down to the bottom of the
   page, so users can preview the whole page without leaving the grid.
   --rv6-scroll-dur is set per-card in PHP, proportional to the screenshot's
   length, so every card scrolls at the same speed (longer = longer duration,
   not faster). Falls back to 5s if image dimensions are unavailable. */
.rv6-card:hover .rv6-card__screen img {
  object-position: center 100%;
  transition: object-position var(--rv6-scroll-dur, 5s) ease-in-out;
}

/* hover zoom on bg (subtle). JS adds per-card parallax on top of this. */
.rv6-card:hover .rv6-card__bg {
  transform: translate3d(0, 0, 0) scale(1.05);
}

.rv6-card:hover .rv6-card__screen {
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

/* meta row below frame: title on the left, tags+icons group on the right */
.rv6-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.rv6-card__title {
  margin: 0;
  font-family: var(--rv6-font);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.2;
  color: var(--rv6-purple-text);
  flex: 0 1 auto;
}

.rv6-card__icons {
  display: flex;
  gap: 14px;
  align-items: center;
}

.rv6-card__tags {
  display: flex;
  gap: 14px;
  margin-right: 4px;
}

.rv6-card__tags span {
  font-family: var(--rv6-font);
  font-weight: 300;
  font-size: 12px;
  color: #000;
  opacity: 0.5;
  white-space: nowrap;
}

.rv6-card__ext,
.rv6-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rv6-purple-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  opacity: 0.8;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* Disabled (no link / no screenshot): gray and inert. */
.rv6-card__ext.is-disabled,
.rv6-card__mark.is-disabled {
  color: #b3b3b3;
  cursor: default;
  pointer-events: none;
  opacity: 0.7;
}

.rv6-card__ext:hover,
.rv6-card__mark:hover {
  opacity: 1;
}

.rv6-card__desc {
  font-family: "Plus Jakarta Sans", var(--rv6-font);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  color: #000;
  margin: 16px 0 0;
  max-width: 661px;
}

/* ---------- LOAD MORE ---------- */

.rv6-grid__more {
  display: flex;
  justify-content: center;
  margin: 70px 0 0;
}

.rv6-grid__loadmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rv6-purple-text);
  background: #fff;
  border-radius: 26px;
  color: var(--rv6-purple-text);
  font-family: "Plus Jakarta Sans", var(--rv6-font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.65px;
  padding: 8px 34px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.rv6-grid__loadmore:hover {
  background: var(--rv6-purple-text);
  color: #fff;
}

.rv6-grid__loadmore[hidden] {
  display: none;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1200px) {
  .realizacje-v6 {
    --rv6-side-pad: 30px;
    --rv6-hero-breakout: 90px;
    --rv6-hero-pad-bottom: 60px;
  }
  .rv6-hero__card {
    padding: 40px 40px 60px;
    border-radius: 0 28px 0 28px;
  }
  .rv6-hero__slide {
    gap: 40px;
  }
  .rv6-hero__slide-title {
    font-size: 32px;
  }
  .rv6-hero__dots {
    right: 40px;
    bottom: 24px;
  }
}

@media (max-width: 991px) {
  .realizacje-v6 {
    --rv6-hero-breakout: 40px;
    --rv6-hero-pad-bottom: 0px; /* at mobile visual stacks above body — no bottom breakout */
  }
  .rv6-hero__card {
    padding: 30px 24px 50px;
    border-radius: 0 16px 0 16px;
  }
  .rv6-hero__slide {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .rv6-hero__slide-visual {
    min-height: 260px;
  }
  .rv6-hero__slide-img--alt {
    inset: 15% 0 0 55%;
  }
  .rv6-hero__slides {
    min-height: 520px;
  }
  .rv6-hero__slide-title {
    font-size: 26px;
  }
  .rv6-grid__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .rv6-card__title {
    font-size: 24px;
  }
}

@media (max-width: 575px) {
  .realizacje-v6 {
    --rv6-side-pad: 16px;
  }
  .rv6-hero__slide-title {
    font-size: 22px;
  }
  .rv6-filters__inner {
    gap: 6px 14px;
  }
}

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
  .rv6-card,
  .rv6-card__bg,
  .rv6-card__screen,
  .rv6-card__screen img,
  .rv6-hero__slide,
  .rv6-hero__slide-img img {
    transition: none !important;
  }
  .rv6-hero__card:hover .rv6-hero__slide-img img {
    object-position: center top;
  }
  .rv6-card {
    opacity: 1;
    transform: none;
  }
  .rv6-card:hover .rv6-card__bg,
  .rv6-card:hover .rv6-card__screen {
    transform: none !important;
  }
  .rv6-card:hover .rv6-card__screen img {
    object-position: center var(--rv6-screen-offset, 0%);
  }
}