/* domyślny zapas, zanim JS policzy realną wysokość */
:root { --nav-h: 84px; }

/* płynne przewijanie i globalny offset dla kotwic */
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

/* gdy przeglądarka przewija do elementu z id (kotwica), zostaw miejsce pod navbar */
section[id], [id].anchor { scroll-margin-top: var(--nav-h); }

/* NAV – mocniejszy, ciemniejszy cień */
.navbar.navbar-expand-md.fixed-top .navbar-brand,
.navbar.navbar-expand-md.fixed-top .nav-link{
  color:#fff !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.95),
    0 6px 18px rgba(0,0,0,.95),
    0 12px 40px rgba(0,0,0,.85);
}

/* jeszcze mocniej przy hover */
.navbar.navbar-expand-md.fixed-top .nav-link:hover,
.navbar.navbar-expand-md.fixed-top .nav-link:focus{
  text-shadow:
    0 2px 0 rgba(0,0,0,1),
    0 8px 22px rgba(0,0,0,1),
    0 14px 50px rgba(0,0,0,.9);
}

/* logo też z mocną “poświatą” */
.navbar.navbar-expand-md.fixed-top .navbar-brand img{
  filter: drop-shadow(0 2px 0 rgba(0,0,0,1))
          drop-shadow(0 8px 22px rgba(0,0,0,1))
          drop-shadow(0 14px 50px rgba(0,0,0,.9));
}

/* hamburger biały (żeby nie znikał) */
.navbar.navbar-expand-md.fixed-top .navbar-toggler-icon{
  filter: invert(1) brightness(2) drop-shadow(0 2px 10px rgba(0,0,0,1));
}

/* ===== NAV: tryby pracy ===== */

/* domyślnie: brak tła (dla stron “hero” na samej górze) */
.navbar.navbar-expand-md.fixed-top.nav-hero{
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
  transition: background .22s ease;
}

/* po scrollu na stronach “hero”: czarne tło */
.navbar.navbar-expand-md.fixed-top.nav-hero.is-scrolled{
  background: rgba(0,0,0,.92);
}

/* strony bez hero: zawsze czarne */
.navbar.navbar-expand-md.fixed-top.nav-solid{
  background: rgba(0,0,0,.92);
}


html, body {
    overflow-x: hidden;
}

body {
    color: #000000;
    font-family: "Poppins", sans-serif;
	background-color:white;
}

.fullscreen-video {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.fullscreen-video .bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Domyślnie pokazuj poziom */
.bg-video--portrait { display: none; }
.bg-video--landscape { display: block; }

/* Na wąskich ekranach przełącz na pion */
@media (max-width: 767px){
  .bg-video--portrait { display: block; }
  .bg-video--landscape { display: none; }

}

.pain-breaker{
  margin: 4rem 0;
}




.overlay-content {
    position: absolute;
    top: 66%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    z-index: 10;
}
h1 {
     font-family: "Great Vibes", cursive;
    font-size: 90px !important; 
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}
h2 {
     font-family: "Great Vibes", cursive;
    font-size: 70px !important;
}
h4 {
    font-weight: 300;
    font-size: 24px;
}



.btn-black {
    padding: 10px 40px;
    border-radius:0px;
	  border:1px black solid;
	  color:black;
	  background-color:transparent;
    font-size:14px;
    text-transform: uppercase;
    border-radius: 10px;
    text-decoration: none;
}
.btn-black:hover,
.btn-black:focus,
.btn-black:active {
  border: 1px solid black;
  color: white;
  background-color: black;
  text-decoration: none;
}

.btn-white {
    padding: 10px 40px;
    border-radius:0px;
	  border:1px white solid;
	  color:white;
	  background-color:transparent;
    font-size:14px;
    text-transform: uppercase;
    border-radius: 10px;
    text-decoration: none;
}
.btn-white:hover,
.btn-white:focus,
.btn-white:active {
	border:1px black solid;
	color:black;
	background-color:white; 
}
p{
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
}

.about-content{
  max-width: 420px;   
}

.about-text{
  font-size: 15px;
  line-height: 1.8;
  
}

/* ====== menu rozwijane ====== */
.dropdown-menu {
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
}

.dropdown-item {
  font-size: 14px;
  text-transform: uppercase;
}

.dropdown-item:hover {
  background: black;
  color: white;
}

/* ===== pain-breaker: ABOUT (Janek) ===== */
.about-janek{
  padding: 4rem 0 ; /* mniejszy dół */
}


.about-janek .container{
  background: transparent;
  padding: 0 12px; /* opcjonalnie: minimalny oddech po bokach */
}

.about-janek-card{
  background: #e5e5e5;
  padding: 4rem 3rem 0 3rem;  /* UWAGA: dół = 0 */
  overflow: hidden;          /* ważne przy zaokrągleniu */
}


/* tekst */
.about-janek .aboutbox{
  max-width: 760px;
  width: 100%;
  text-align: left;
  padding-left: 10px;         /* delikatnie w stronę zdjęcia */
}

/* przycisk po prawej pod tekstem */
.about-janek .aboutbox-btn{
  margin-top: 40px;
  text-align: right;
}

/* zdjęcie przyklejone do dołu kolumny */
.about-janek .aboutbox-imgcol{
  display: flex;
  align-items: flex-end;
}

/* żeby nie robiło dziwnych odstępów */
.about-janek .aboutbox-img{
  display: block;
  margin: 0;
}

/* mobile */
@media (max-width: 768px){
  .about-janek{
    padding: 4rem 0;
  }

  .about-janek-card{
    padding: 2.5rem 1.5rem 0 1.5rem;
  }

  .about-janek .aboutbox{
    text-align: center;
    padding-left: 0;
  }

  .about-janek .aboutbox-btn{
    text-align: center;
  }

}

/* ======plenery ślubne i filmy ślubne====== */
/* ===== DUAL SHOWCASE ===== */

@media (max-width: 576px){
  h2{
    font-size: 14px;      /* dopasuj pod siebie */
    line-height: 1.2;
  }
}
@media (max-width: 768px){
  h2{
    font-size: 14px;      /* dopasuj pod siebie */
    line-height: 1.2;
  }
}
@media (max-width: 992px){
    h2{
    font-size: 14px;      /* dopasuj pod siebie */
    line-height: 1.2;
  }
}
.dual-showcase{
  width: 100%;
  padding: 0rem 0 4rem 0; /* mniejszy top, dół zostaje */
  position: relative;
}


.dual-grid{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* wspólne */
.dual-item{
  position: relative;
  width: 52%;
  overflow: hidden;
}

.dual-item img{
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}

/* pierwsze zdjęcie – lewa strona */
.dual-left{
  align-self: flex-start;
  z-index: 1;
}

/* drugie zdjęcie – prawa strona */
.dual-right{
  align-self: flex-end;
  margin-top: -120px; /* delikatne nachodzenie */
  z-index: 2;
}

/* overlay */
.dual-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.dual-content h2{
 
  margin-bottom: 25px;
  font-weight: 300;
}
.dual-row{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 2.5rem;
}

.dual-textbox{
  flex: 1;
  background: #fff;
  border-radius: 18px;
  padding: 34px 34px;
  display: flex;
  align-items: center;
}

.dual-textbox p{
  margin: 0;
  line-height: 1.8;
  font-size: 16px;
  color: rgba(0,0,0,.75);
}

/* żeby 52% nadal obowiązywało w tym układzie flex */
.dual-row .dual-item{
  flex: 0 0 52%;
}


/* mobile */
@media (max-width: 992px){

  .dual-item{
    width: 100%;
  }

  .dual-right{
    margin-top: 0;
  }

  .dual-item img{
    height: 420px;
  }
   .dual-row{
    flex-direction: column;
    gap: 1.2rem;
  }

  .dual-row .dual-item{
    flex: 0 0 auto;
    width: 100%;
  }

  .dual-textbox{
    padding: 22px 18px;
  }
}


/* ===== próbna wersja  WERSJA 2: szare tło full-width + niższa ===== */
.dual-showcase-wide{
  background: #f2f2f2;     /* szare tło na całą szerokość */
  padding: 2.2rem 0;       /* mniejszy pionowy oddech całej sekcji */
}

/* żeby wersja 2 była wyraźnie “niższa” */
.dual-showcase-wide .dual-item img{
  height: 360px;           /* było 520px – tu obniżamy tylko w wersji 2 */
}

/* mniejszy panel tekstu w wersji 2 */
.dual-showcase-wide .dual-textbox{
  background: transparent;     /* zamiast #fff */
  border-radius: 0;            /* usuń zaokrąglenia */
  padding: 12px 0;             /* mniejszy padding, bo nie ma "karty" */
  box-shadow: none;            /* gdyby gdzieś był cień */
}

/* mniejszy tytuł na zdjęciu w wersji 2 */
.dual-showcase-wide .dual-content h2{
       
  margin-bottom: 18px;
}

/* jeśli nachodzenie w wersji 2 ma być delikatniejsze */
.dual-showcase-wide .dual-right{
  margin-top: -70px;       /* było -120px */
}

/* mobile dla wersji 2 */
@media (max-width: 992px){
  .dual-showcase-wide{
    padding: 1.6rem 0;
  }

  .dual-showcase-wide .dual-item img{
    height: 300px;
  }

  .dual-showcase-wide .dual-right{
    margin-top: 0;
  }
}






/* ===== Plenery ślubne ===== */
.hero-slider{
  width:100%;
  height:100vh;        /* pełna wysokość ekranu */
  position:relative;
  overflow:hidden;
}

.hero-slider .swiper{
  width:100%;
  height:100%;
}

.hero-slider .swiper-slide{
  width:100%;
  height:100%;
}

.hero-slider img{
  width:100%;
  height:100%;
  object-fit:cover;    /* wypełnia ekran bez deformacji */
  display:block;
}




.hero-cta{
  width:100%;
  height:70vh;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment: fixed;
}


/* --- PORTFOLIO: layout --- */
.portfolio-section{
  padding-top: 4rem; 
  display: block;
 
}
.portfolio-section .container{
  padding: 0 12px;
  text-align: center;
}



.portfolio-title{
  
  color:#000;
  margin: 0 0 28px 0;
  text-shadow: none;
}

.portfolio-card{
  background: #e5e5e5;
  padding: 60px 40px;
}
/* 2 rzędy po 4 kafelki */
.portfolio-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* kafelek 9:16 */
.portfolio-tile{
  position:relative;
  display:block;
  border-radius: 16px;
  overflow:hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0,0,0,.25);
}

.portfolio-tile img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1);
  transition: transform .35s ease;
}

.portfolio-tile:hover img{
  transform: scale(1.06);
}

/* ikonka play */
.portfolio-play{
  position:absolute;
  inset:auto 12px 12px auto;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  border: 1px solid rgba(255,255,255,.25);
}

/* ===== YouTube modal – powiększenie odtwarzacza ===== */
#ytModal .modal-dialog{
  max-width: 1200px; /* możesz dać 1400px jeśli chcesz jeszcze większy */
}

#ytModal .modal-content{
  background: #000;
  border: 0;
}

#ytModal .modal-body{
  padding: 0 16px 16px 16px; /* mniej “luźnego” czarnego */
}

/* Responsywny player 16:9 */
#ytModal .yt-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}

/* iframe ma wypełnić CAŁY kontener */
#ytModal #ytFrame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* --- RESPONSIVE --- */
@media (max-width: 991px){
  .portfolio-grid{ grid-template-columns: repeat(2, 1fr); }
  .portfolio-title{ font-size: 36px; }
}

@media (max-width: 420px){
  .portfolio-grid{ grid-template-columns: 1fr; }
}



.wide-break{
  width:100%;
  min-height:60vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;

  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* konkretne zdjęcia */
.wide-break-1{
  background-image:url("../img/plener7.webp");
}

.wide-break-2{
  background-image:url("../img/plener8.webp");
}

.wide-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
}

.wide-content{
  max-width:800px;
}

.wide-content p{
  font-size:20px;
  line-height:1.8;
  color:#fff;
  font-weight:300;
}





/* -------Pytania i Odpowiedzi----------- */
.faq-title{
  
  font-size: 42px;
  text-align: center;
  margin-bottom: 40px;
}

.faq-section{
  margin: 6rem 0;      /* identycznie jak pain-breaker */
  padding: 0;          /* bez dodatkowego pompowania wysokości */
}

.faq-card{
  background: #e5e5e5;
  border-radius: 24px;
  padding: 40px 30px;   /* zamiast 10px 30px */
}

.faq-item + .faq-item{
  border-top: 1px solid rgba(0,0,0,.18);
}

.faq-q{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;

  padding: 22px 0;
  background: transparent;
  border: 0;
  text-align:left;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 500;
  cursor: pointer;
}

.faq-ico{
  width: 34px;
  height: 34px;
  position: relative;
  flex: 0 0 34px;
}

.faq-ico:before,
.faq-ico:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 22px;
  height: 2px;
  background: #111;
  transform: translate(-50%,-50%);
}

.faq-ico:after{
  transform: translate(-50%,-50%) rotate(90deg); /* plus */
}

.faq-item.is-open .faq-ico:after{
  transform: translate(-50%,-50%) rotate(0deg);  /* minus */
}

.faq-a{
  display:none;
  padding: 0 0 22px 0;
}

.faq-a p{
  margin: 0;
  max-width: 920px;
  color: rgba(0,0,0,.75);
  line-height: 1.8;
  font-size: 16px;
}

/* mobile */
@media (max-width: 768px){
  .faq-card{ padding: 10px 18px; }
  .faq-q{ font-size: 18px; padding: 18px 0; }
}

/* ===== STATS / LICZBY ===== */
.stats-section{
  padding: 90px 0;
}

.stats-title{
  
  text-align: center;
  margin: 0 0 45px 0;
}

.stats-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  width: min(1100px, 92%);
  margin: 0 auto;
}

.stat-card{
  text-align: center;
  transform: scale(.86);
  opacity: 0;
  transition: transform .55s ease, opacity .55s ease;
}

/* zoom-in po wejściu w viewport */
.stat-card{
  text-align: center;
  transform: scale(.05);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity 1s ease;
}

/* pojawienie */
.stat-card.is-in{
  transform: scale(1);
  opacity: 1;
}


.stat-circle{
  width: 210px;
  height: 210px;
  border-radius: 999px;
  margin: 0 auto 18px auto;
  display:flex;
  align-items:center;
  justify-content:center;

  /* elegancki cienki ring */
  border: 2px solid rgba(0,0,0,.25);
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
}

.stat-number{
  font-family: 'Bodoni Moda', serif;
  font-size: 54px;
  line-height: 1;
}

.stat-suffix{
  font-size: 26px;
  position: relative;
  top: -10px;
}

.stat-label{
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

/* responsive */
@media (max-width: 991px){
  .stats-grid{ grid-template-columns: 1fr; }
  .stat-circle{ width: 190px; height: 190px; }
  .stat-number{ font-size: 50px; }
}