/* =========================================================
   One-page – Byk (CSS)
   Autor: PixelShark.eu
   ========================================================= */

:root{
  --olive:#7A734C;
  --olive-d:#5c5737;
  --white:#ffffff;
  --text:#2a2a2a;
  --cream:#f4f1e9;
  --text-olive:#7f784e;
  --letterbox-bg:#645E3E;
  --maxw:1200px;
  --gap:clamp(16px,3vw,32px);
  --line-offset:60px;
  --line-thickness:1px;
  --logo-strip-h:clamp(70px,12vh,166px);

  /* Desktop: bezpieczne skalowanie logotypów wg wysokości okna */
  --logos-fixed-size: clamp(56px, 10vh, 96px);
  --logos-fixed-bottom: clamp(12px, 3vh, 28px);
  --logos-fixed-right: clamp(12px, 2vw, 32px);
}

/* Reset & base */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:auto}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
[hidden]{display:none !important}

main{
  height:100dvh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scroll-padding-top:0;
  overscroll-behavior-y:contain;
}

section.panel{
  position:relative;
  width:100%;
  height:100dvh;
  scroll-snap-align:start;
  isolation:isolate;
  display:grid;
  place-items:center;
  overflow:hidden;
}

h1,h2{
  font-family:"Cormorant Garamond", Georgia, serif;
  line-height:1.12;
  margin:0 0 .6em;
  letter-spacing:.02em;
}
h1{font-size:clamp(28px,4.5vw,48px);font-weight:700;color:#fff;text-align:center}
h2{font-size:clamp(22px,3vw,34px);font-weight:600;color:var(--olive-d)}
p{font-size:clamp(16px,1.6vw,18px);line-height:1.7;margin:0 0 1em}

.inner{width:min(var(--maxw),92vw);margin-inline:auto;position:relative;z-index:1}

/* ---------- Sekcja 1 ---------- */
#sekcja-1{background:var(--letterbox-bg);}
#sekcja-1 .bg-olive{display:none;} /* desktop domyślnie off */
#sekcja-1 .media{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:0; background:var(--letterbox-bg);
}
#sekcja-1 video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
#sekcja-1 .media .overlay{
  position:absolute; inset:0; background:#7A734C; opacity:.82; pointer-events:none; z-index:2;
}
#sekcja-1 .lead{color:#fff;text-align:center;text-shadow:0 1px 12px rgba(0,0,0,.35)}
#sekcja-1 .lead p{max-width:80ch;margin-inline:auto}

/* Pasek logotypów w sekcji 1 */
.logo-strip{
  position:absolute; left:0; right:0; bottom:0;
  height:var(--logo-strip-h); background:#fff;
  display:flex; align-items:center; justify-content:center;
  padding-inline:24px; z-index:2;
}
.logo-strip img{height:clamp(64px,11vh,110px);width:auto;display:block}

/* Logotypy overlay (po prawej jak w sekcji 3) – DESKTOP */
.logos-fixed{
  position:absolute;
  right:var(--logos-fixed-right);
  bottom:var(--logos-fixed-bottom);
  z-index:2;
}
.logos-fixed img{
  height:var(--logos-fixed-size);
  width:auto; display:block;
}

/* Wariant w-treści (pokazywany tylko na mobile / wąskie) */
.section-logos{display:none}

/* ---------- Sekcja 2 ---------- */
#sekcja-2 .grid{display:grid;grid-template-columns:40% 60%;width:100%;height:100%}
#sekcja-2 .left{background:var(--olive);display:grid;place-items:center}
#sekcja-2 .left .photo{position:relative;width:min(664px,86%);aspect-ratio:3/4;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 40px rgba(0,0,0,.35)}
#sekcja-2 .left .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#sekcja-2 .right{background:#fff;color:var(--text);position:relative;display:flex;align-items:center;padding:clamp(24px,4vw,48px)}
#sekcja-2 .right .content{max-width:min(760px,92%)}
#sekcja-2 .right h2, #sekcja-2 .right p { color: var(--text-olive); }

/* ---------- Wideo i Galeria (sekcje 3 i 4) ---------- */
#sekcja-3{background:#fff}
.video-container{cursor:pointer; position:relative; overflow:hidden;}
.wide-frame{width:clamp(280px,86vw,1200px);aspect-ratio:16/9;background:var(--olive);}
.wide-frame::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;height:0;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;opacity:.9;transition:opacity .3s ease;}

#sekcja-4{background:#fff}
.gallery{width:min(1200px,90vw);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,3vw,28px)}
.tile{aspect-ratio:16/9;background:var(--olive);position:relative}
.tile::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;height:0;border-left:14px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.95;transition:opacity .3s ease;}

.video-container video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;pointer-events:none;}
.video-container.is-playing::after{opacity:0;}
.video-container.is-playing video{opacity:1;pointer-events:auto;}

/* ---------- Sekcja 5 ---------- */
#sekcja-5{background:var(--white)}
#sekcja-5 .grid{display:grid;grid-template-columns:60% 40%;width:100%;height:100%}
#sekcja-5 .left{background:#fff;position:relative;display:flex;align-items:center;padding:clamp(44px,7vw,96px) clamp(28px,4.5vw,52px);padding-left:clamp(72px,9vw,140px)}
#sekcja-5 .left p.contact-details{line-height:2;}
#sekcja-5 .logos.under{display:flex;justify-content:center;margin-top:clamp(18px,2.6vw,28px)}
.logos.under img{height:clamp(96px,14vh,148px);width:auto;display:block}
#sekcja-5 .left h2,#sekcja-5 .left p,#sekcja-5 .link{color:var(--text-olive);}

#sekcja-5 .lines{position:absolute;inset:0;pointer-events:none;z-index:6;}
#sekcja-5 .lines-inset::before,#sekcja-5 .lines-inset::after{content:"";position:absolute;background:var(--olive);}
#sekcja-5 .lines-inset::before{
  content:"";
  position:absolute;
  top:var(--line-offset);
  left:0;
  width:100%;
  height:var(--line-thickness);
  background:
    /* lewe ramię: od lewej krawędzi do punktu przecięcia */
    linear-gradient(#7A734C,#7A734C) 0 0 / var(--line-offset) var(--line-thickness) no-repeat,
    /* prawe ramię: od punktu przecięcia w prawo ~30% ekranu */
    linear-gradient(#7A734C,#7A734C) var(--line-offset) 0 / 30vw var(--line-thickness) no-repeat;
}


#sekcja-5 .lines-inset::after{
  content:"";
  position:absolute;
  left:var(--line-offset);
  top:0;
  width:var(--line-thickness);
  height:100%;
  background:
    /* górne ramię: od górnej krawędzi do punktu przecięcia */
    linear-gradient(#7A734C,#7A734C) 0 0 / var(--line-thickness) var(--line-offset) no-repeat,
    /* dolne ramię: od punktu przecięcia w dół ~30% ekranu */
    linear-gradient(#7A734C,#7A734C) 0 var(--line-offset) / var(--line-thickness) 30vh no-repeat;
}

#sekcja-5 .right{position:relative;background:none;padding:0;overflow:hidden}
#sekcja-5 .right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Strzałki ---------- */
.nav-btn{
  position:fixed;z-index:10;top:50%;transform:translateY(-50%);
  width:64px;height:64px;border-radius:50%;border:none;background:var(--olive);color:#fff;
  font-size:28px;line-height:1;display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(0,0,0,.35);cursor:pointer;
  transition:transform .2s ease,opacity .2s ease,background .2s ease,color .2s ease,border-color .2s ease
}
.nav-prev{left:32px}
.nav-next{right:32px}
.nav-prev::after{content:"«"}
.nav-next::after{content:"»"}
.nav-btn:hover{transform:translateY(-50%) scale(1.06)}
.nav-next.light{background:#fff;color:#222;border:1px solid #e6e6e6}

/* Wariant przyklejony w przepływie (JS doda klasę .in-flow na mobile w sekcji 1) */
.nav-btn.in-flow{
  position:static;transform:none;width:56px;height:56px;margin:16px auto 24px; /* NAD białym paskiem */
}

/* Animacje wejścia */
.reveal > *{opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease;}
.reveal.in > *{opacity:1;transform:none;}
.reveal.in > *:nth-child(1){transition-delay:.1s;}
.reveal.in > *:nth-child(2){transition-delay:.15s;}
.reveal.in > *:nth-child(3){transition-delay:.2s;}
.reveal.in > *:nth-child(4){transition-delay:.25s;}
.reveal.in > *:nth-child(5){transition-delay:.3s;}
.reveal.in > *:nth-child(6){transition-delay:.35s;}

/* ============================ RWD: MOBILE ============================ */
@media (max-width:1024px){
  main{scroll-snap-type:none;}
  section.panel{height:auto;min-height:0;padding:25px 0;}
  section.panel:first-of-type{min-height:100dvh;}
  section.panel:last-of-type{padding-bottom:0;}

  #sekcja-2 .grid,#sekcja-5 .grid{display:block;height:auto;}

  #sekcja-2 .right{padding:40px var(--gap);}
  #sekcja-2 .left{padding:20px var(--gap) 0;}
  #sekcja-2 .left .photo{width:min(400px,90%);margin:0 auto;}

  /* Sekcja 1 – FILM POD tekstem, oliwka na CAŁĄ sekcję + NA FILMIE */
  #sekcja-1{padding-bottom:calc(var(--logo-strip-h) + 24px);}
  #sekcja-1 .bg-olive{

    display:none !important; 
  }
  #sekcja-1 .media{
    position:relative;inset:auto;z-index:1;background:transparent;margin-top:16px;display:block;
  }
  #sekcja-1 .media .overlay{
    display:block !important; /* overlay także NA FILMIE */
    position:absolute;inset:0;background:#7A734C;opacity:.82;pointer-events:none;z-index:2;
  }
  #sekcja-1 video{
    width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background-color:var(--letterbox-bg);
    position:relative;z-index:1;
  }

  /* Strzałki: globalne chowamy; JS pokaże i przeniesie .nav-next w sekcji 1 */
  .nav-btn{display:none}
  .nav-btn.in-flow{display:grid}

  /* Logotypy: na mobile wariant w-treści, overlay chowamy */
  .logos-fixed{display:none;}
  .section-logos{display:block;margin-top:40px;text-align:center;}
  .section-logos img{height:75px;width:auto;display:inline-block;}

  /* Galeria 1 kolumna */
  #sekcja-4 .gallery{grid-template-columns:1fr;}

  /* Sekcja 3 – rozmiar kafla jak w sekcji 4 */
  #sekcja-3 .wide-frame{width:min(86vw,500px);aspect-ratio:16/9;margin:0 auto;}
  #sekcja-3 .wide-frame::after{border-left:14px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;}

  /* Sekcja 5 – jak w sekcji 2 */
  #sekcja-5 .left{padding:40px var(--gap);}
  #sekcja-5 .left .content{max-width:min(760px,92%);}
  #sekcja-5 .right{min-height:250px;aspect-ratio:4/3;background:var(--cream);margin:0;}
  #sekcja-5 .right img{object-fit:cover;}

  /* Linie dekoracyjne off */
  #sekcja-5 .lines{display:none;}
}

/* ============================ DESKTOP TWEAKS ============================ */
/* Sekcja 1 – wertykalne wyśrodkowanie i większy opis (desktop) */
@media (min-width:1025px){
  #sekcja-1 .lead{
    display:grid;align-content:center;justify-items:center;
    min-height:calc(100dvh - var(--logo-strip-h));
  }
  #sekcja-1 .lead p{
    font-size:clamp(18px,1.4vw,22px);
  }
}

/* Gęste ekrany pionowo (H < 1000px): zmniejszamy paddings i skalujemy elementy,
   logotypy po prawej NIE są przycinane i nie nachodzą na treść/film */
@media (min-width:1025px) and (max-height:999px){
  /* Bezpieczniejsze pady treści, by wszystko się mieściło */
  #sekcja-2 .right{padding:clamp(12px,2vh,24px) clamp(16px,2vw,32px);}
  #sekcja-2 .left .photo{width:min(520px,86%);}
  #sekcja-3 .wide-frame{width:clamp(560px,70vw,1000px);} /* niższy współczynnik, by nie ciąć dołu */
  #sekcja-4 .gallery{gap:clamp(12px,2vh,24px);}

  /* Logotypy – mniejsze i nieco wyżej/przy krawędzi */
  :root{
    --logos-fixed-size: clamp(48px, 8vh, 80px);
    --logos-fixed-bottom: clamp(10px, 2.5vh, 22px);
    --logos-fixed-right: clamp(10px, 1.8vw, 24px);
  }
}

/* Bardzo duże ekrany: lekki margines bezpieczeństwa */
@media (min-width:1920px){
  :root{
    --logos-fixed-size: clamp(72px, 8vh, 96px);
    --logos-fixed-bottom: clamp(16px, 3vh, 32px);
    --logos-fixed-right: clamp(16px, 2vw, 32px);
  }
}

@media (max-width:820px){
  .gallery{grid-template-columns:1fr}
  .logo-strip{height:var(--logo-strip-h)}
  .logo-strip img{height:clamp(58px,10vh,100px)}
  #sekcja-1 h1{font-size:clamp(24px,7vw,36px)}
  #sekcja-1 .lead p{font-size:clamp(15px,4vw,17px);}
}

@media (prefers-reduced-motion:reduce){
  .reveal > *{transition:none;}
}