/* ==========================================================================
   PORTFOLIO — dark / cinematic theme
   Zmienne w :root pozwalają szybko zmienić kolory, fonty i odstępy.
   ========================================================================== */

:root {
  --bg:          #FFFFFF;      /* biel */
  --bg-elevated: #F3F5F1;      /* jasne panele / placeholdery */
  --fg:          #033D26;      /* tekst — British Racing Green */
  --muted:       #5E7A6C;      /* stonowana zieleń */
  --line:        #C4CFC8;      /* jasna linia */
  --accent:      #004225;      /* British Racing Green */
  --accent-2:    #013D25;
  --brg:         #004225;      /* British Racing Green */
  --max:         1400px;
  --gap:         clamp(8px, 1.4vw, 22px);
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --font:        "Helvetica Neue", Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

html { background: var(--bg); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.85);
  border-bottom: 3px solid var(--line);
}
.nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: clamp(84px, 10vw, 120px); position: relative;
}
.brand {
  grid-column: 2; justify-self: center; text-align: center; line-height: 1;
}
.brand-name {
  display: block; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; font-size: clamp(21px, 3.5vw, 44px);
}
/* napisy w BRG, gruba czcionka */
.brand-name, .section-head h2, .project-head h1 {
  color: var(--brg); font-weight: 900;
}
.brand-name span { color: var(--brg); }
.brand-studio {
  display: block; margin-top: 8px; color: var(--muted);
  font-size: clamp(9px, .95vw, 12px); letter-spacing: .32em; text-transform: uppercase;
}
.nav-links { grid-column: 1; justify-self: start; display: flex; gap: clamp(16px, 2.4vw, 36px); list-style: none; }
.header-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 18px; }
.header-socials { display: flex; gap: 18px; list-style: none; align-items: center; }
.header-socials a, .feed-link { display: block; color: var(--muted); transition: color .2s var(--ease); }
.header-socials a:hover, .feed-link:hover, .feed-link.active { color: var(--accent); }
.header-socials svg, .feed-link svg { display: block; }

/* rozwijane menu „Prace" */
.has-dropdown { position: relative; }
.nav-links .caret { font-size: .68em; opacity: .7; }
.dropdown {
  position: absolute; top: 100%; left: -14px; min-width: 168px; list-style: none;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px; margin-top: 12px; z-index: 70;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown li { padding: 0; }
.dropdown a {
  display: block; padding: 10px 14px; border-radius: 6px; color: var(--muted);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.dropdown a::after { display: none; }
.dropdown a:hover { color: var(--fg); background: rgba(255,255,255,.05); }
.nav-links a {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); transition: color .25s var(--ease);
  position: relative; padding: 4px 0;
}
.nav-links a:hover, .nav-links a.active { color: var(--fg); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 3px; background: var(--accent);
}
.nav-toggle { display: none; background: none; border: 0; color: var(--fg); cursor: pointer; grid-column: 1; justify-self: start; }

@media (max-width: 780px) {
  .nav-toggle { display: block; font-size: 24px; }
  .nav { height: 74px; }
  .brand-name { font-size: 22px; }
  .brand-studio { font-size: 9px; letter-spacing: .28em; margin-top: 5px; }
  .header-socials { display: none; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; grid-column: 1 / -1;
    flex-direction: column; gap: 0;
    background: var(--bg-elevated); border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); z-index: 60;
  }
  .nav-links.open { max-height: 460px; }
  .nav-links > li > a { padding: 16px clamp(16px,4vw,48px); border-top: 1px solid var(--line); display: block; }
  /* rozwijane na mobile — pozycje w linii, wcięte */
  .nav-links .caret { display: none; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; min-width: 0;
  }
  .dropdown a {
    padding: 15px clamp(16px,4vw,48px) 15px calc(clamp(16px,4vw,48px) + 20px);
    border-top: 1px solid var(--line); border-radius: 0; color: var(--muted);
  }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 78vh; display: flex; align-items: flex-end;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,.2) 0%, rgba(10,10,11,.55) 60%, var(--bg) 100%);
}
.hero video, .hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -1;
}
.hero-inner { position: relative; z-index: 2; padding-bottom: clamp(40px, 8vh, 90px); }
.hero h1 {
  font-size: clamp(38px, 8vw, 104px); line-height: .95;
  font-weight: 800; letter-spacing: -.02em; text-transform: uppercase;
}
.hero p { color: var(--muted); margin-top: 18px; max-width: 46ch; font-size: clamp(15px,2vw,19px); }

/* ---------- Section title ---------- */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin: clamp(48px,8vh,96px) 0 28px; flex-wrap: wrap;
}
.section-head h2 {
  font-size: clamp(22px, 3vw, 34px); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700;
}
.section-head .eyebrow { color: var(--accent); letter-spacing: .2em; font-size: 12px; text-transform: uppercase; }

/* ---------- Work grid ---------- */
.work-top { padding-top: clamp(24px, 5vh, 52px); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.filters button {
  background: transparent; border: 3px solid var(--line); color: var(--muted);
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  transition: all .25s var(--ease);
}
.filters button:hover { color: var(--brg); border-color: var(--brg); }
.filters button.active { background: var(--brg); color: #fff; border-color: var(--brg); }

.grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
/* wersja mobilna — wszystko w jednej kolumnie, jedno pod drugim */
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }

.card {
  position: relative; overflow: hidden; background: var(--bg-elevated);
  aspect-ratio: 4 / 3; border-radius: 4px; border: 3px solid var(--line);
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .3s var(--ease);
}
.card:hover { border-color: var(--brg); }
.card.in { opacity: 1; transform: none; }
.card img, .card video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.card:hover img, .card:hover video { transform: scale(1.06); }
.card .meta {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 20px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.82));
  transform: translateY(8px); opacity: .0; transition: all .45s var(--ease);
}
.card:hover .meta { transform: none; opacity: 1; }
.card .meta h3 { font-size: 17px; text-transform: uppercase; letter-spacing: .04em; }
.card .meta span { color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.card .badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  color: var(--fg); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
}
.card .badge.video::before { content: "▶ "; color: var(--accent); }

/* placeholder gdy brak obrazka */
.ph {
  width: 100%; height: 100%;
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  color: #9CA99F; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- Project detail ---------- */
.project-hero {
  height: clamp(46vh, 62vh, 70vh); position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
}
.project-hero img, .project-hero video { position: absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.project-hero::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.94) 100%); }
.project-hero .ph { position: absolute; inset: 0; }
.project-head { position: relative; z-index: 2; padding: clamp(28px,6vh,70px) 0; }
.project-head .eyebrow { color: var(--accent); letter-spacing: .2em; font-size: 12px; text-transform: uppercase; }
.project-head h1 { font-size: clamp(30px,6vw,72px); text-transform: uppercase; letter-spacing: -.01em; line-height: 1; margin-top: 10px; }
.project-head .desc { color: var(--muted); max-width: 60ch; margin-top: 18px; }

.media-stack { display: grid; gap: var(--gap); margin: clamp(36px,7vh,72px) 0; }
.media-stack .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
/* na telefonie pary zdjęć/filmów też jedno pod drugim */
@media (max-width: 768px){ .media-stack .row-2 { grid-template-columns: 1fr; } }
.media-stack figure { overflow: hidden; background: var(--bg-elevated); border-radius: 4px; border: 3px solid var(--line); }
.media-stack img { width: 100%; height: auto; }
.media-stack .ph { aspect-ratio: 16/10; }

.video-embed { position: relative; aspect-ratio: 16/9; background:#000; border-radius:4px; overflow:hidden; }
.video-embed iframe, .video-embed video { position:absolute; inset:0; width:100%; height:100%; border:0; }

.back-link { display:inline-block; margin: 8px 0 0; color: var(--muted); font-size:13px; letter-spacing:.1em; text-transform:uppercase; transition: color .25s var(--ease);}
.back-link:hover { color: var(--fg); }
.project-nav { display:flex; justify-content:space-between; gap:16px; border-top:3px solid var(--line); padding: 40px 0; margin-top: 40px;}
.project-nav a span { display:block; color:var(--muted); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.project-nav a strong { font-size:18px; text-transform:uppercase; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(5,5,6,.95); align-items: center; justify-content: center;
  padding: 4vw;
}
.lightbox.open { display: flex; }
.lightbox img, .lightbox video { max-width: 92vw; max-height: 90vh; object-fit: contain; }
.lightbox .lb-close, .lightbox .lb-nav {
  position: absolute; background: none; border: 0; color: var(--fg);
  cursor: pointer; font-size: 34px; opacity: .8; transition: opacity .2s;
}
.lightbox .lb-close:hover, .lightbox .lb-nav:hover { opacity: 1; }
.lb-close { top: 20px; right: 28px; }
.lb-nav.prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-nav.next { right: 20px; top: 50%; transform: translateY(-50%); }

/* ---------- Live feed z Instagrama (widget) ---------- */
.ig-live:not(:empty) { margin-bottom: clamp(28px, 5vh, 56px); }

/* ---------- Reels / Film — mozaika wg formatu ---------- */
/* Masonry na kolumnach CSS: każdy film zachowuje swój format (16:9, 9:16,
   1:1...) i upakowuje się w kolumnach. 3 kolumny desktop → 2 → 1 na telefonie. */
.reels-mosaic {
  column-count: 3;
  column-gap: var(--gap);
}
@media (max-width: 1000px){ .reels-mosaic { column-count: 2; } }
@media (max-width: 768px){ .reels-mosaic { column-count: 1; } } /* telefon: jedno pod drugim */

.reel {
  break-inside: avoid;
  margin: 0 0 var(--gap);
  background: var(--bg-elevated);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.reel .frame {
  position: relative;
  width: 100%;
  background: #000;
}
.reel .frame iframe,
.reel .frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; object-fit: cover; display: block;
}
.reel .ph { position: absolute; inset: 0; }
.reel .tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  color: var(--fg); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
}
/* Instagram embed sam ustala wysokość — nie wymuszamy proporcji */
.reel.ig { background: transparent; }
.reel.ig .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; }

/* Kafelki z danych Behold (JSON) — obrazek zachowuje format posta */
.reel .reel-link { display: block; position: relative; }
.reel .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease); }
.reel:hover .frame img { transform: scale(1.05); }
.reel { border: 3px solid var(--line); }

/* Przycisk „play" na filmach/reelsach */
.reel .play-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; z-index: 3;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255,255,255,.85);
  transition: transform .25s var(--ease), background .25s;
}
.reel .play-overlay::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.reel:hover .play-overlay { transform: translate(-50%, -50%) scale(1.12); background: var(--accent); }
.reel:hover .play-overlay::after { border-left-color: #111; }
.reel .album-badge {
  position: absolute; top: 12px; right: 12px; z-index: 3; color: #fff;
  font-size: 14px; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* ---------- About / Contact ---------- */
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px,5vw,64px); align-items: start; margin-top: clamp(36px,7vh,72px); }
@media (max-width: 780px){ .about-grid { grid-template-columns: 1fr; } }
.about-grid p { color: var(--fg); margin-bottom: 18px; max-width: 62ch; }
.about-portrait { aspect-ratio: 3/4; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; }
.about-portrait .ph { aspect-ratio: 3/4; }
.stats { display:flex; gap: 40px; flex-wrap: wrap; margin: 28px 0; }
.stats .num { font-size: clamp(28px,4vw,44px); font-weight: 800; color: var(--accent); }
.stats .lbl { color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,5vw,64px); margin-top: clamp(36px,7vh,72px); }
@media (max-width: 780px){ .contact-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 18px; }
.field label { display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.field input, .field textarea {
  width:100%; background: var(--bg-elevated); border:3px solid var(--line);
  color: var(--fg); padding: 14px 16px; border-radius: 4px; font-family: inherit; font-size:15px;
  transition: border-color .25s var(--ease);
}
.field input:focus, .field textarea:focus { outline:none; border-color: var(--accent); }
.btn {
  display:inline-block; background: var(--brg); color:#fff; border:0;
  padding: 14px 30px; border-radius: 999px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; font-size:13px; cursor:pointer; transition: transform .2s var(--ease), background .2s;
}
.btn:hover { transform: translateY(-2px); background: #063a24; }
.contact-detail a { color: var(--fg); border-bottom: 1px solid var(--line); }
.contact-detail a:hover { border-color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 3px solid var(--line); margin-top: clamp(60px,10vh,120px);
  padding: 44px 0; color: var(--muted); font-size: 13px;
}
.site-footer .wrap { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.socials { display:flex; gap: 20px; list-style:none; align-items:center; }
.socials a { display:block; color: var(--muted); transition: color .2s; }
.socials a:hover { color: var(--accent); }
.socials svg { display:block; }

/* ---------- Zgoda na cookie (RODO) ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: #fff; border-top: 3px solid var(--brg);
  transform: translateY(100%); transition: transform .35s var(--ease);
}
.cookie-banner.show { transform: none; }
.cookie-inner {
  max-width: var(--max); margin: 0 auto; padding: 16px clamp(16px,4vw,48px);
  display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cookie-inner p { color: var(--fg); font-size: 14px; line-height: 1.6; margin: 0; max-width: 72ch; }
.cookie-btns { display: flex; gap: 12px; align-items: center; }
.cookie-reject {
  background: transparent; border: 3px solid var(--line); color: var(--fg);
  padding: 11px 22px; border-radius: 999px; font-weight: 800; text-transform: uppercase;
  font-size: 12px; letter-spacing: .08em; cursor: pointer; transition: border-color .2s var(--ease);
}
.cookie-reject:hover { border-color: var(--brg); }
.cookie-settings { color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.cookie-settings:hover { color: var(--brg); }

/* blok „treść zablokowana do czasu zgody” */
.consent-block {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  gap: 14px; align-items: center; justify-content: center; text-align: center;
  padding: 24px; background: var(--bg-elevated);
}
.consent-block p { color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 40ch; margin: 0; }
.feed-consent {
  position: relative; min-height: 220px; border: 3px solid var(--line); border-radius: 4px; overflow: hidden;
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }