figure {
  margin: 0;
}
:root {

  --overlap-radius: 24px;
  --overlap-transition-duration: 350ms;
}
/* GRID dla karuzeli (Simple) */
/* Wrapper, ktory siedzi W SRODKU section__container */
.carousel-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter, 24px);
}

/* Wariant domyslny – 9/12 */
.carousel-grid .overlap-carousel--simple {
  grid-column: 1 / span 9;
  width: 100%;
}

/* Wariant fullgrid – 12/12 */
.carousel-grid.carousel-grid--full .overlap-carousel--simple {
  grid-column: 1 / span 12;
}


/* CAŁA KARUZELA */
.overlap-carousel {
  position: relative;
  width: 100%;
  padding: 48px 0px 40px;
}

/* Wszystko w tym samym gridzie 1200px */
.overlap-slide__header,
.overlap-slide__media, .simple-slide__media {
  max-width: var(--layout-container-max-width); /* Szerokosc grida*/
  margin: 0 auto;
}


/* VIEWPORT + TRACK – tylko jeden slajd naraz */
.overlap-carousel__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.overlap-carousel__track {
  display: flex;
  transition: transform var(--overlap-transition-duration) ease;
  will-change: transform;
}

/* SLAJD = 100% szerokości viewportu */
.overlap-carousel__slide {
  flex: 0 0 100%;
  padding-block: 24px 40px;
}
.simple-carousel__slide {
  flex: 0 0 100%;
  padding-block: 0 40px;
}
/* NAGŁÓWEK SLAJDU (tytuł nad grafiką) */
.overlap-slide__header {
  padding: 0 var(--section-padding-x);
}

.overlap-slide__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 4px;
  opacity: 0.7;
}

.overlap-slide__title {
  margin: 0;
}

/* MEDIA – kontener na duży + mały obraz */
.overlap-slide__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--h3-to-images) var(--section-padding-x) 0;
  overflow: visible; 
}

/* DUŻY OBRAZ — manualna kontrola wysokości i kadru */
.overlap-image--large {
  position: relative;
  flex: 0 0 72%;
  max-width: 63%;
  height: 583px;            /* TU sterujesz wysokością dużego obrazka */
  border-radius: var(--radius-overlap-item);
  overflow: hidden;
  box-shadow: var(--shadow-image-medium);
  z-index: 1; 
}

.overlap-image--large img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* pełne pokrycie maski */
  object-position: 50% 50%;  /* TU sterujesz kadrowaniem: X Y */
}

/* MAŁY OBRAZ – kontrola wysokości i kadru */
.overlap-image--small {
  position: absolute;
  top: 19%;              /* możesz zmieniać */
  width: 48%;            /* możesz zmieniać */
  height: 460px;         /* TU sterujesz wysokością / “zoomem” */
  border-radius: var(--radius-overlap-item);
  overflow: hidden;
  box-shadow: var(--shadow-image-medium);
  z-index: 2;
}

.overlap-image--small img {
  display: block;
  width: 100%;
  height: 100%;          /* ważne – żeby maska działała */
  object-fit: cover;     /* jak background-size: cover */
  object-position: 50% 50%; /* TU kadrujesz: X Y (np. 50% 20%, 30% 70%) */
}


/* LAYOUT A – duży po LEWEJ, mały po PRAWEJ (jak na screenie) */
.overlap-slide--layout-a .overlap-slide__media {
  justify-content: flex-start;   /* duży przy lewej */
}

.overlap-slide--layout-a .overlap-image--small {
  right: 0%;                    /* lekko „poza grid” w prawo */
}

/* LAYOUT B – duży po PRAWEJ, mały po LEWEJ (odwrócony slajd 2) */
.overlap-slide--layout-b .overlap-slide__media {
  justify-content: flex-end;     /* duży przy prawej */
}



.overlap-slide--layout-b .overlap-image--small {
  left: 0%;                     /* mały wchodzi od lewej */
}

/* Aktywny slajd – możesz podbić cień / scale */
.overlap-carousel__slide.is-active .overlap-image--large,
.overlap-carousel__slide.is-active .overlap-image--small {
  box-shadow: var(--shadow-image-dark);
}

/* NAV + PROGRESS (dół) */
.overlap-carousel__controls {
	width:100%;
	max-width: var(--layout-container-max-width);
  /*padding: 0 var(--section-padding-x);*/
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--carousel-nav-gap);
}

.overlap-styling {
	padding: 0 var(--section-padding-x);
	max-width: var(--layout-container-max-width); /* Szerokosc grida*/
	margin: 0 auto var(--section-padding-y);
}
/* PROGRESS */
.overlap-carousel__progress {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

.overlap-carousel__progress-bar {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.overlap-carousel__progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: inherit;
  background: #a855f7;   /* tu podstaw Twój fiolet / brand color */
  transition: width var(--overlap-transition-duration) ease;
}

.overlap-carousel__progress-label {
  /*font-size: 0.85rem;*/
  font-family:var(--font-family-heading);
  white-space: nowrap;
}

/* PRZYCISKI */

.overlap-carousel__nav {
  display: flex;
  align-items: center;
  gap: 12px;
}





/* z MASTERA */
/* Nawigacja – strzałki */
.carousel__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--buttons-gap);
}

.carousel__btn {
  background: transparent;
  color:var(--color-text-on-action-outline);
  border-color: var(--color-border-action-outline);
}

.carousel__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.03);
  color:var(--color-text-on-action-outline-hover);
  border-color:var(--color-border-action-outline-hover);
  box-shadow: var(--shadow-elevation-md);
  background-color: rgba(122, 39, 204, 0.05);
}

.carousel__btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}



/* Pasek postępu */
.carousel__footer {
  margin-top: 8px;
  background: var(--color-border-disabled);
  width: max-content;
  margin-left: auto;
}

.carousel__progress {
  position: relative;
  display: flex;
  gap: 6px;
  height: 1px;
  width: 300px;
}

.carousel__progress-dot {
  flex: 1 1 0;
  height: 1px;
  border-radius: 999px;
  background: var(--color-border-disabled);
}

.carousel__progress-active {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  /*border-radius: 999px;*/
  background: var(--color-border-action-outline);
  pointer-events: none;
  transition: left 0.4s ease, width 0.4s ease; /* ten sam czas/easing co slajdy */
}


/* Simple carousel – desktop-first max-height control */
.carousel-wrapper {
  width: calc(100% * 9 / 12); /* np. 75% szerokości grida */
  max-width: inherit;         /* przejmuje max-width rodzica */
}


@media (min-width: 1024px) {
  .carousel-wrapper {
    width: min(1200px, 75%);
  }
}


:root {
  /* Default (desktop) */
  --overlap-simple-max-height: 720px;
}
.simple-slide__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /*padding: 0 var(--section-padding-x);*/
  overflow: visible; 
}
/* SLIDE WRAPPER */
.overlap-carousel--simple .simple-slide__media {
  width: 100%;
}

/* FIGURE as responsive viewport */
.overlap-carousel--simple .overlap-image--full {
  position: relative;
  width: 100%;
  max-height: var(--overlap-simple-max-height);
  overflow: hidden;
  border-radius: 16px;
  height:720px;
  box-shadow: var(--shadow-image-medium);
}

/* IMAGE inside */
.overlap-carousel--simple .overlap-image--full img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* SIMPLE – wariant intrinsic
   Wysokosc slajdu wynika z proporcji obrazka
-------------------------------------------------- */

.overlap-carousel--simple-intrinsic .overlap-image--full {
  /* nadal chcemy radius + clip */
  overflow: hidden;
  border-radius: 16px;

  /* zdejmujemy ograniczenia wysokosci z wariantu max-height */
  max-height: none;
  height: auto;
  min-height: 0;
  box-shadow: var(--shadow-image-medium);
}

/* kluczowe: obrazek wraca do normalnego flow i skaluje sie po szerokosci */
.overlap-carousel--simple-intrinsic .overlap-image--full img {
  position: static;   /* nadpisuje position:absolute z wariantu podstawowego */
  inset: auto;        /* reset inset */
  width: 100%;
  height: auto;       /* proporcje obrazka wymuszaja wysokosc */
  object-fit: contain; /* albo zostaw domyslne; przy height:auto i tak nie gra roli */
  display: block;
}

/* Wariant PNG – zdejmujemy box-shadow z wrappera... */
.overlap-carousel--simple-png .overlap-image--full {
  box-shadow: none;
  background: transparent; /* na wszelki wypadek */
  overflow: visible; /*widoczność cieni rzucanych przez png bez tła*/
}

/* ...i przenosimy cień na sam obrazek, ale jako drop-shadow (uwzględnia alpha) */
.overlap-carousel--simple-png .overlap-image--full img {
  /* przykład 1: zbliżony do shadow-image-medium */
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.16));

  /* jeśli chcesz bardziej „mocny” – możesz podbić wartości:
     filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2));
   */
}


/* SIMPLE – poszerzony viewport i lekkie wyjście poza grid - Widoczność cieni */
@media (min-width: 769px) {
  .overlap-carousel--simple .overlap-carousel__viewport {
    width: calc(100% + 64px);
    margin-left: -32px;
    margin-right: -32px;
    overflow: hidden;
  }

  .overlap-carousel--simple .overlap-image--full,
  .overlap-carousel--simple-intrinsic .overlap-image--full {
    width: calc(100% - 64px);
    margin: 0 auto;
  }
}



/* ---------- RESPONSYWNOŚĆ ---------- */

@media (max-width: 1539px) {
.overlap-image--large {
  height: 520px;
}

/* MAŁY OBRAZ – kontrola wysokości i kadru */
.overlap-image--small {
  height: 420px;
}

:root {
  /* Default (desktop) */
  --overlap-simple-max-height: 620px;
}

}

@media (max-width: 1199px) {
.overlap-carousel {
    padding: 48px 0px 0;
}
  .overlap-slide__media, .simple-slide__media {
    max-width: 960px;
  }

  .overlap-image--large {
	height:400px;
  }

  .overlap-image--small {
	height:340px;
	top: 18%;
  }
  
 .overlap-slide--layout-a .overlap-image--small {
  right: var(--section-padding-x); 
}

.overlap-slide--layout-b .overlap-image--small {
  left: var(--section-padding-x);  
}

  :root {
    --overlap-simple-max-height: 520px;
  }

}

@media (max-width: 959px) {
 .overlap-slide__media, .simple-slide__media {
    max-width: 960px;
  }

  .overlap-image--large {
    flex-basis: 75%;
    max-width: 60%;
	height:360px;
  }

  .overlap-image--small {
    width: 51%;
	height:300px;
	top: 19%;
  }


}

@media (max-width: 768px) {
  .overlap-carousel {
    padding: 24px 0 0;
  }

  .overlap-carousel__slide {
    padding-block: 16px 24px;
  }

  .overlap-slide__title {
   /* font-size: 1.25rem;*/
  }

  .overlap-carousel__controls {
    flex-direction: row;
    align-items: stretch;
    gap: var(--carousel-nav-gap);
  }

  .overlap-carousel__nav {
    justify-content: flex-end;
  }
  /* DUŻY OBRAZ — manualna kontrola wysokości i kadru */
.overlap-image--large {
  height: 292px;
  max-width: 56%;
}

/* MAŁY OBRAZ – kontrola wysokości i kadru */
.overlap-image--small {
  height: 241px;    
  width: 50%;
}

  :root {
    --overlap-simple-max-height: 320px;
  }
  .carousel-grid {
  display: block; /* Simple Carousel na FullWidth */
}

}

/* MOBILE – pionowy układ: mały w gridzie, duży full-width */
@media (max-width: 640px) {
/* Tytuł + nawigacja w gridzie 420px */
.overlap-slide__header {
    margin: 0 0 16px;
	width: 93%;
  }
  
  /* Bez bocznego paddingu – żeby duży mógł być full-width */
  .overlap-carousel {
    padding-inline: 0;
  }

  .overlap-slide__media, .simple-slide__media {
    width: 100%;                /* = szerokość viewportu */
    max-width: none;            /* brak ograniczenia 420px na kontenerze */
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;          /* cień małego może wychodzić poza grid */
	padding:0;
  }

  /* MAŁY – wąski grid, z cieniem, nad dużym */
  .overlap-image--small {
    position: relative;
    order: 1;
    width: calc(100vw - var(--layout-container-padding-x) * 2);
    /*max-width: 420px;    */       /* szerokość grida na mobile */
	/*padding: var(--section-padding-y) var(--section-padding-x);*/
    margin-inline: auto;
    box-shadow: var(--shadow-image-medium);
    z-index: 3;                 /* na wierzchu */
    transform: translateY(8%);  /* delikatny overlap w dół */
  }

  /* DUŻY – pełna szerokość ekranu, bez radiusa i bez cienia */
  .overlap-image--large {
    position: relative;
    order: 2;
    width: 100%;                /* 100% kontenera */
    max-width: 100%;
    margin: 0;
    border-radius: 0;           /* brak radiusa na mobile */
    box-shadow: none;           /* brak cienia na mobile */
    margin-top: -12%;           /* overlap z małym */
    z-index: 1;                 /* pod małym */
  }

/* LAYOUT A — mały u góry */
.overlap-slide--layout-a .overlap-image--small {
  order: 1;
  transform: translateY(8%);   /* mały nachodzi w dół */
  right:auto;
}

.overlap-slide--layout-a .overlap-image--large {
  order: 2;
  margin-top: -4%;            /* duży podciągnięty pod mały */
}

/* LAYOUT B — duży u góry, mały pod nim */
.overlap-slide--layout-b .overlap-image--large {
  order: 1;
  margin-top: 0;               /* stoi normalnie, nie podjeżdża do nagłówka */
}

.overlap-slide--layout-b .overlap-image--small {
  order: 2;
  margin-top: -8%;            /* mały wchodzi POD duży */
  transform: translateY(0);    /* bez dodatkowego przesunięcia, sam margin wystarczy */
  left:auto;
}


  /* Progress + label – jak wcześniej */
.carousel__progress {
  width: 100%;
}


  .overlap-carousel__progress {
    flex-direction: column;
    align-items: stretch;
  }

  .overlap-carousel__progress-label {
    align-self: flex-end;
	display:none;
  }
  
  /* MOBILE: progress + nav w jednej linii */
.overlap-styling {
	padding: 0;
}

.overlap-carousel__controls {
	width:100%;
  /*max-width: var(--layout-container-max-width);*/
  padding: 0 var(--section-padding-x);
  margin: 0 auto 0; /* margin: 0 auto var(--section-padding-y); */
  display: flex;
  justify-content: space-between;
  align-items: center;   /* wyrównanie pionowe */
  flex-direction: row;   /* ważne: jedna linia */
  gap: var(--carousel-nav-gap);
}

/* Pasek postępu – niech zajmuje całą możliwą szerokość */
.overlap-carousel__progress {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Nawigacja – prawa strona w jednej linii */
.carousel__nav {
  display: flex;
  flex-shrink: 0;
}

.overlap-carousel--simple-intrinsic .overlap-image--full {
  border-radius: 0;
}


}