/*
Theme Name: Michalkiewicz — Tablica
Theme URI: https://www.michalkiewicz.photo
Author: Nicole Michalkiewicz Fotografia
Description: Kolorowa centralka (switchboard) foto & video — autorski motyw jednostronicowy z portfolio (zdjęcia + wideo), edytowalny w całości przez Personalizację (Wygląd → Dostosuj) i typ treści „Realizacje".
Version: 1.2.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nm-tablica
Tags: portfolio, photography, one-page, custom-colors, full-site-editing
*/

/* ============================================================
   TABLICA — kolorowa centralka / switchboard
   Pełnoekranowy przełącznik paneli w estetyce „Studio Kolor".
   Bez scrolla strony: klikasz blok koloru, on rozwija się
   sprężyście na cały ekran, reszta składa się do grzbietów.
   ============================================================ */

:root {
  --cream:   #FBF7EE;
  --cream-2: #F3ECDD;
  --ink:     #181510;
  --ink-2:   #5C564A;
  --ink-3:   #8E8676;
  --line:    #E6DDC9;
  --line-ink:rgba(255,255,255,.16);

  --pink:    #FF5C8A;  --pink-ink:#3A0A1B;
  --yellow:  #FFC42E;  --yellow-ink:#3A2A00;
  --orange:  #EF8A1F;
  --teal:    #1F8A7B;

  --accent:     var(--orange);
  --accent-ink: #2A1700;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-sans:    'Archivo', system-ui, -apple-system, sans-serif;

  --radius: 22px;
  --radius-sm: 14px;
  --spine: 92px;                 /* szerokość zwiniętego grzbietu */
  --bar: 66px;                   /* wysokość górnego paska menu */
  --ease: cubic-bezier(.65,.02,.12,1);
  --spring: cubic-bezier(.34,1.4,.5,1);
}
:root[data-disp="space"]   { --font-display: 'Space Grotesk', system-ui, sans-serif; }
:root[data-disp="archivo"] { --font-display: 'Archivo', system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans); background: var(--ink); color: var(--ink);
  line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased;
  overflow: hidden; position: fixed; inset: 0;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; color: inherit; border: 0; background: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: .98; letter-spacing: -.02em; text-wrap: balance; }

/* ── tag / eyebrow / buttons (z systemu Studio Kolor) ─────── */
.tag { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; padding:8px 14px; border-radius:100px; background:var(--ink); color:var(--cream); }
.tag.pink{background:var(--pink);color:var(--pink-ink);} .tag.yellow{background:var(--yellow);color:var(--yellow-ink);} .tag.accent{background:var(--accent);color:var(--accent-ink);}
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.eyebrow .sq { width:10px; height:10px; border-radius:3px; background:currentColor; }
.btn { display:inline-flex; align-items:center; gap:.6em; font-weight:700; font-size:.94rem; padding:1em 1.6em; border-radius:100px; border:2px solid transparent; transition:transform .2s var(--spring), background .2s, color .2s, box-shadow .2s; white-space:nowrap; }
.btn .arr { transition:transform .25s; } .btn:hover .arr { transform:translateX(4px); }
.btn-accent { background:var(--accent); color:var(--accent-ink); }
.btn-ink { background:var(--ink); color:var(--cream); } .btn-ink:hover{ transform:translateY(-2px); }
.btn-cream { background:var(--cream); color:var(--ink); } .btn-cream:hover{ transform:translateY(-2px); }
.btn-outline { border-color:currentColor; } .btn-outline:hover { transform:translateY(-2px); }

/* ── TOP BAR (solid menu block — zawsze czytelny) ─────────── */
.topbar {
  position:fixed; top:0; left:0; right:0; height:var(--bar); z-index:130;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:0 clamp(16px,2.4vw,26px);
  background:var(--cream); color:var(--ink); border-bottom:2px solid var(--ink);
}
.brand { display:flex; flex-direction:column; gap:2px; line-height:1; }
.brand .b-main { font-family:var(--font-display); font-weight:800; font-size:1.05rem; letter-spacing:-.02em; }
.brand .b-sub { font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; font-weight:700; color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:clamp(6px,1.3vw,20px); }
.nav-links button { font-weight:700; font-size:.92rem; color:var(--ink); opacity:.5; padding:6px 4px; position:relative; transition:opacity .2s,color .2s; }
.nav-links button:hover { opacity:1; }
.nav-links button .num { font-family:var(--font-sans); font-size:.58rem; font-weight:700; color:var(--accent); vertical-align:super; margin-right:3px; }
.nav-links button.active { opacity:1; }
.nav-links button.active::after { content:''; position:absolute; left:4px; right:4px; bottom:-2px; height:3px; background:var(--accent); border-radius:3px; }
.topcta { display:flex; align-items:center; gap:12px; }
.topcta .phone { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.86rem; }
.topcta .phone svg { width:15px; height:15px; color:var(--accent); }
.topcta .btn { padding:.66em 1.15em; font-size:.85rem; }
/* przełącznik języka PL / EN */
.lang-switch { display:inline-flex; align-items:center; gap:6px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.04em; }
.lang-switch .lang-btn { background:none; border:0; padding:2px; cursor:pointer; color:var(--ink); opacity:.4; font:inherit; letter-spacing:inherit; transition:opacity .18s,color .18s; }
.lang-switch .lang-btn:hover { opacity:.75; }
.lang-switch .lang-btn.active { opacity:1; color:var(--accent); }
.lang-switch .lang-sep { opacity:.3; }
@media (max-width:980px){ .lang-switch { order:-1; } }
@media (max-width:980px){ .nav-links{ display:none; } }
@media (max-width:720px){ .topcta .phone{ display:none; } }

/* tiny legend bottom-left */
.legend { position:fixed; left:16px; bottom:14px; z-index:120; display:flex; align-items:center; gap:8px; color:var(--cream); mix-blend-mode:difference; font-size:.7rem; font-weight:600; letter-spacing:.04em; pointer-events:none; }
.legend kbd { font-family:var(--font-sans); font-weight:700; border:1.4px solid currentColor; border-radius:6px; padding:1px 7px; font-size:.66rem; }
@media (max-width:980px){ .legend{ display:none; } }

/* ── THE BOARD ────────────────────────────────────────────── */
.board { display:flex; width:100vw; height:calc(100vh - var(--bar)); height:calc(100dvh - var(--bar)); margin-top:var(--bar); }

.panel {
  position:relative; flex:none; width:var(--spine); height:100%;
  overflow:hidden; cursor:pointer; isolation:isolate;
  transition:width .8s var(--ease);
  border-right:2px solid rgba(0,0,0,.14);
}
.panel:last-child { border-right:0; }
.panel.open { width:calc(100% - 5 * var(--spine)); cursor:default; }

/* panel colors */
.panel.p-start { background:var(--cream); color:var(--ink); }
.panel.p-prace { background:var(--pink);  color:var(--pink-ink); }
.panel.p-uslugi{ background:var(--yellow); color:var(--yellow-ink); }
.panel.p-omnie { background:var(--teal);  color:var(--cream); }
.panel.p-kontakt{ background:var(--ink);  color:var(--cream); }

/* ── SPINE (collapsed face) ───────────────────────────────── */
.spine { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:20px 0; transition:opacity .4s ease; }
.panel.open .spine { opacity:0; pointer-events:none; }
.spine .s-num { font-family:var(--font-display); font-weight:800; font-size:1.1rem; opacity:.65; }
.spine .s-label { writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,3.4vw,2.6rem); letter-spacing:-.01em; text-transform:uppercase; white-space:nowrap; }
.spine .s-dot { width:12px; height:12px; border-radius:50%; background:currentColor; opacity:.7; transition:transform .3s var(--spring); }
.panel:hover .spine .s-dot { transform:scale(1.7); }

/* ── CONTENT (revealed) ───────────────────────────────────── */
.content {
  position:absolute; inset:0; z-index:3; overflow-y:auto; overflow-x:hidden;
  opacity:0; pointer-events:none; transition:opacity .5s ease .1s;
  padding:clamp(34px,5vh,60px) clamp(26px,5vw,80px) clamp(36px,6vh,64px);
  scrollbar-width:thin; scrollbar-color:color-mix(in srgb, currentColor 32%, transparent) transparent;
}
.panel.open .content { opacity:1; pointer-events:auto; }
.content::-webkit-scrollbar { width:10px; }
.content::-webkit-scrollbar-thumb { background:color-mix(in srgb, currentColor 28%, transparent); border-radius:10px; }
.c-inner { max-width:1140px; margin-inline:auto; }

/* mini header inside open panel */
.c-head { display:flex; align-items:center; gap:14px; margin-bottom:clamp(22px,3vw,40px); }
.c-head .c-num { font-family:var(--font-display); font-weight:800; font-size:1.1rem; opacity:.6; }
.c-head .c-kick { font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.c-head .c-line { flex:1; height:2px; background:currentColor; opacity:.18; }

/* entrance animation for content bits */
.panel.open .anim { animation:rise .6s var(--spring) both; }
.panel.open .anim.a1{ animation-delay:.06s } .panel.open .anim.a2{ animation-delay:.12s } .panel.open .anim.a3{ animation-delay:.18s } .panel.open .anim.a4{ animation-delay:.24s } .panel.open .anim.a5{ animation-delay:.3s }
@keyframes rise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .panel.open .anim{ animation:none; } }

/* ── START / HERO panel ───────────────────────────────────── */
.hero-wrap { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,4vw,56px); align-items:center; min-height:100%; }
.hero-wrap > * { min-width:0; }
@media (max-width:900px){ .hero-wrap{ grid-template-columns:1fr; } }
.hero-h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(2.8rem,6.6vw,6rem); line-height:.9; letter-spacing:-.03em; }
.hero-h1 .pill { display:inline-block; background:var(--pink); color:var(--pink-ink); padding:0 .26em; border-radius:18px; transform:rotate(-2deg); }
.hero-h1 .hl { color:var(--accent); }
.hero-sub { font-size:clamp(1.05rem,1.4vw,1.28rem); color:var(--ink-2); max-width:42ch; margin-top:1.3em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:1.8em; }
.hero-stats { display:flex; gap:clamp(20px,3vw,46px); flex-wrap:wrap; margin-top:2.2em; }
.hero-stat .n { font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1; }
.hero-stat .l { font-size:.82rem; color:var(--ink-2); margin-top:4px; }
.hero-fig { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; background:var(--cream-2); }
.hero-fig img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* rotating stamp */
.stamp { position:absolute; right:16px; bottom:16px; z-index:3; width:112px; height:112px; display:grid; place-items:center; }
.stamp svg.ring { width:100%; height:100%; animation:spin 18s linear infinite; }
.stamp .st-dot { position:absolute; inset:0; margin:auto; width:34px; height:34px; background:var(--accent); border-radius:50%; display:grid; place-items:center; color:var(--accent-ink); }
.stamp .st-dot svg { width:16px; height:16px; }
.stamp text { font-family:var(--font-sans); font-size:9.2px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase; fill:var(--ink); }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .stamp svg.ring{ animation:none; } }

/* ── PRACE / portfolio ────────────────────────────────────── */
.pf-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; }
.filter { font-weight:700; font-size:.84rem; padding:.5em 1.15em; border-radius:100px; border:1.6px solid color-mix(in srgb, currentColor 38%, transparent); color:inherit; background:transparent; transition:.2s; }
.filter:hover { border-color:currentColor; }
.filter.active { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.pf-count { font-size:.8rem; font-weight:700; opacity:.7; white-space:nowrap; }
.gal { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:8px; gap:14px; grid-auto-flow:row dense; }
.gal-item.hide { display:none; }
.gal-item { position:relative; overflow:hidden; border-radius:var(--radius-sm); cursor:pointer; background:rgba(0,0,0,.06); grid-column:span 3; grid-row:span 16; }
.gal-item img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.gal-item:hover img { transform:scale(1.06); }
.gal-item::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,12,7,.55), transparent 55%); opacity:0; transition:opacity .35s; }
.gal-item:hover::after { opacity:1; }
.gal-item .cap { position:absolute; left:14px; bottom:13px; right:14px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px; opacity:0; transform:translateY(8px); transition:.35s; }
.gal-item:hover .cap { opacity:1; transform:none; }
.gal-item .cap .c-t { color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.1rem; }
.gal-item .cap .c-plus { width:32px; height:32px; border-radius:50%; background:var(--cream); color:var(--ink); display:grid; place-items:center; flex:none; }
.gal-item .vflag { position:absolute; top:12px; left:12px; z-index:3; }
.gal-item .play { position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; background:rgba(251,247,238,.92); color:var(--ink); display:grid; place-items:center; z-index:3; transition:transform .3s var(--spring), background .25s, color .25s; box-shadow:0 10px 26px rgba(0,0,0,.32); }
.gal-item .play svg { width:22px; height:22px; margin-left:3px; }
.gal-item.is-video:hover .play { transform:scale(1.12); background:var(--accent); color:var(--accent-ink); }
/* Kształt kafelka podąża za zdjęciem — szerokość wg orientacji, wysokość (row-span) liczy JS (masonry) wg proporcji obrazu. Rodzina spanów {3,6,12} składa się równo do 12 kolumn. */
.gal-item.o-portrait { grid-column:span 3; }
.gal-item.o-square   { grid-column:span 3; }
.gal-item.o-land     { grid-column:span 6; }
.gal-item.o-pano     { grid-column:span 12; }
.gal-item.o-feature  { grid-column:span 6; }
@media (max-width:900px){
  .gal { grid-template-columns:repeat(6,1fr); }
  .gal-item.o-portrait, .gal-item.o-square { grid-column:span 3; }
  .gal-item.o-land, .gal-item.o-pano, .gal-item.o-feature { grid-column:span 6; }
}
@media (max-width:560px){
  .gal { grid-template-columns:repeat(2,1fr); grid-auto-rows:6px; }
  .gal-item.o-portrait, .gal-item.o-square { grid-column:span 1; }
  .gal-item.o-land, .gal-item.o-pano, .gal-item.o-feature { grid-column:span 2; }
}

/* ── USŁUGI ───────────────────────────────────────────────── */
.svc-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.svc-grid > * { min-width:0; }
@media (max-width:860px){ .svc-grid{ grid-template-columns:1fr; } }
.svc { position:relative; border-radius:var(--radius); padding:clamp(22px,2.4vw,32px); min-height:260px; display:flex; flex-direction:column; justify-content:space-between; gap:24px; transition:transform .3s var(--spring); cursor:pointer; }
.svc:hover { transform:translateY(-6px); }
.svc.s-pink { background:var(--pink); color:var(--pink-ink); }
.svc.s-cream { background:var(--cream); color:var(--ink); }
.svc.s-ink { background:var(--ink); color:var(--cream); }
.svc .s-num { font-family:var(--font-display); font-weight:800; opacity:.55; }
.svc h3 { font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:.4em; }
.svc p { font-size:.94rem; opacity:.86; }
.svc .s-list { list-style:none; display:flex; flex-wrap:nowrap; justify-content:center; gap:8px; margin:16px 0 0; padding:0; }
.svc .s-list li { font-size:.74rem; font-weight:700; padding:5px 12px; border-radius:100px; background:color-mix(in srgb, currentColor 16%, transparent); white-space:nowrap; }
.svc .s-go { width:42px; height:42px; border-radius:50%; border:2px solid currentColor; display:grid; place-items:center; transition:transform .25s var(--spring); }
.svc:hover .s-go { transform:rotate(-45deg); }
.proc-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:18px; }
.proc-row > * { min-width:0; }
@media (max-width:760px){ .proc-row{ grid-template-columns:repeat(2,1fr); } }
.proc-step { border:1.5px solid color-mix(in srgb, currentColor 26%, transparent); border-radius:var(--radius-sm); padding:16px; }
.proc-step .ps-n { width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--yellow); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:.9rem; margin-bottom:10px; }
.proc-step h4 { font-size:1.05rem; } .proc-step p { font-size:.82rem; opacity:.8; margin-top:4px; }

/* ── OFERTA — pełne podstrony usług (6. blok) ─────────────── */
.panel.p-oferta { background:var(--cream-2); color:var(--ink); }
.svc-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(22px,3vw,34px); }
.svc-tab { font-weight:700; font-size:.9rem; padding:.58em 1.2em; border-radius:100px; border:1.6px solid var(--line); background:var(--cream); color:var(--ink-2); transition:.2s; }
.svc-tab:hover { border-color:var(--ink); color:var(--ink); }
.svc-tab.active { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.svc-page { display:none; }
.svc-page.active { display:block; animation:rise .5s var(--spring) both; }
.sp-head { margin-bottom:clamp(22px,3vw,34px); }
.sp-head .tag { margin-bottom:14px; }
.sp-head { margin-bottom:clamp(16px,2vw,24px); }
.sp-head .tag { margin-bottom:14px; }
.sp-head h2 { font-size:clamp(1.9rem,3.4vw,2.9rem); margin-bottom:.3em; }
.sp-head p { font-size:clamp(1rem,1.25vw,1.16rem); color:var(--ink-2); max-width:46ch; }
.sp-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.5vw,48px); align-items:start; }
.sp-grid > * { min-width:0; }
.sp-text { display:flex; flex-direction:column; }
.sp-text .sp-cta { margin-top:clamp(18px,2.4vw,28px); }
@media (max-width:860px){ .sp-grid{ grid-template-columns:1fr; } }
.sp-block + .sp-block { margin-top:clamp(14px,1.8vw,22px); }
.sp-block h4 { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; font-family:var(--font-sans); font-weight:700; }
.sp-list { list-style:none; display:flex; flex-direction:column; gap:11px; }
.sp-list li { display:flex; gap:12px; align-items:flex-start; font-size:1rem; line-height:1.4; }
.sp-list li .ck { width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; flex:none; margin-top:1px; }
.sp-list li .ck svg { width:12px; height:12px; }
.sp-tags { display:flex; flex-wrap:wrap; gap:8px; }
.sp-tags span { font-size:.8rem; font-weight:700; padding:6px 12px; border-radius:100px; background:var(--cream); border:1px solid var(--line); }
.sp-gal { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:start; }
.sp-gal .g { position:relative; overflow:hidden; border-radius:var(--radius-sm); cursor:zoom-in; background:var(--cream); aspect-ratio:4/5; }
.sp-gal .g.tall { grid-column:span 2; aspect-ratio:16/9; }
.sp-gal .g img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.sp-gal .g:hover img { transform:scale(1.05); }
.sp-gal .g::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,12,7,.4), transparent 50%); opacity:0; transition:opacity .35s; }
.sp-gal .g:hover::after { opacity:1; }
.sp-cta { margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.sp-note { font-size:.86rem; color:var(--ink-3); font-weight:600; }

/* ── O MNIE (teal) ────────────────────────────────────────── */
.about-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,4vw,52px); align-items:center; }
.about-grid > * { min-width:0; }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
.about-fig { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; background:rgba(0,0,0,.12); }
.about-fig img { width:100%; height:100%; object-fit:cover; }
.about-fig .badge { position:absolute; left:14px; top:14px; }
.about-body h2 { font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:.5em; color:var(--cream); }
.about-body h2 .hl { color:var(--accent); }
.about-body p { color:rgba(251,247,238,.82); max-width:52ch; }
.about-body p + p { margin-top:1em; }
.about-stats { display:flex; gap:26px; flex-wrap:wrap; margin-top:1.6em; }
.about-stats .n { font-family:var(--font-display); font-weight:800; font-size:1.9rem; line-height:1; }
.about-stats .l { font-size:.76rem; opacity:.7; margin-top:3px; }
.quote { margin-top:1.8em; border-left:3px solid var(--cream); padding-left:18px; }
.quote blockquote { font-size:1.05rem; color:var(--cream); }
.quote .who { font-size:.82rem; opacity:.75; margin-top:8px; font-weight:700; }
.sign { display:flex; align-items:center; gap:14px; margin-top:1.5em; }
.sign .s-line { width:40px; height:2px; background:var(--cream); } .sign .s-name { font-weight:700; letter-spacing:.04em; color:var(--cream); }

/* ── KONTAKT (ink) ────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,52px); }
.contact-grid > * { min-width:0; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-left h2 { font-size:clamp(2.2rem,4.6vw,3.6rem); margin-bottom:.3em; color:var(--cream); }
.contact-left h2 .hl { color:var(--accent); }
.contact-left .lead { color:rgba(251,247,238,.72); font-size:1.05rem; max-width:42ch; }
.cd { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.cd a { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--radius-sm); background:rgba(255,255,255,.05); border:1px solid var(--line-ink); transition:transform .2s, border-color .2s; }
.cd a:hover { transform:translateX(4px); border-color:var(--accent); }
.cd a > span:not(.ic) { display:flex; flex-direction:column; gap:5px; min-width:0; }
.cd .ic { width:42px; height:42px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; flex:none; }
.cd .ic svg { width:18px; height:18px; }
.cd .l { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(251,247,238,.6); font-weight:700; }
.cd .v { font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--cream); }
.form-card { background:rgba(255,255,255,.04); border:1px solid var(--line-ink); border-radius:var(--radius); padding:clamp(22px,2.6vw,34px); }
.form { display:grid; gap:15px; }
.form-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.form-row > * { min-width:0; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:rgba(251,247,238,.7); }
.field input, .field textarea { font-family:inherit; font-size:1rem; color:var(--cream); background:rgba(255,255,255,.06); border:1.5px solid transparent; border-radius:12px; padding:12px 14px; transition:border-color .2s; min-width:0; width:100%; }
.field textarea { resize:vertical; min-height:96px; }
.field input::placeholder, .field textarea::placeholder { color:rgba(251,247,238,.4); }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--accent); }
.field.invalid input, .field.invalid textarea { border-color:#E04B3C; }
.field .err { font-size:.74rem; color:#E04B3C; display:none; } .field.invalid .err { display:block; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font-size:.82rem; font-weight:600; padding:.5em 1em; border-radius:100px; border:1.5px solid var(--line-ink); color:var(--cream); transition:.2s; }
.chip:hover { border-color:var(--accent); } .chip.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.form-ok { display:none; align-items:center; gap:12px; padding:14px 16px; border-radius:12px; background:color-mix(in srgb, var(--accent) 22%, var(--ink)); border:1px solid var(--accent); color:var(--cream); font-weight:600; }
.form-ok.show { display:flex; }

/* ── MOBILE: pionowy akordeon ─────────────────────────────── */
@media (max-width:760px){
  body { position:relative; overflow:auto; }
  .board { flex-direction:column; width:100vw; height:auto; min-height:calc(100dvh - var(--bar)); margin-top:var(--bar); }
  .panel { width:100% !important; height:var(--spine); transition:height .7s var(--ease); border-right:0; border-bottom:2px solid rgba(0,0,0,.14); }
  .panel.open { width:100% !important; height:auto; min-height:88vh; }
  .spine { flex-direction:row; align-items:center; justify-content:space-between; padding:0 22px; }
  .spine .s-label { writing-mode:horizontal-tb; transform:none; font-size:2rem; }
  .content { position:relative; inset:auto; padding:84px 22px 48px; }
  .hero-wrap, .about-grid, .contact-grid { min-height:0; }
}

/* ── Lightbox ─────────────────────────────────────────────── */
.lb { position:fixed; inset:0; z-index:9600; background:rgba(15,12,7,.95); display:none; align-items:center; justify-content:center; padding:4vmin; }
.lb.open { display:flex; }
.lb img { max-width:92vw; max-height:88vh; object-fit:contain; border-radius:8px; }
.lb .lb-cap { position:absolute; bottom:22px; left:0; right:0; text-align:center; font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(251,247,238,.8); }
.lb .lb-x, .lb .lb-nav { position:absolute; border:1.5px solid rgba(251,247,238,.3); color:var(--cream); width:52px; height:52px; border-radius:50%; display:grid; place-items:center; transition:.2s; }
.lb .lb-x:hover, .lb .lb-nav:hover { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.lb .lb-x { top:22px; right:22px; } .lb .lb-nav.prev { left:22px; top:50%; transform:translateY(-50%); } .lb .lb-nav.next { right:22px; top:50%; transform:translateY(-50%); }
.lb .lb-video { width:min(1000px,92vw); aspect-ratio:16/9; background:#000; display:grid; place-items:center; text-align:center; padding:30px; border-radius:10px; color:var(--cream); }
@media (max-width:620px){ .lb .lb-nav{ display:none; } }

/* version switch */
.ver-switch { position:fixed; right:16px; bottom:14px; z-index:120; display:inline-flex; align-items:center; gap:9px; padding:7px 14px; background:var(--cream); color:var(--ink-2); border-radius:100px; font-size:.7rem; font-weight:600; box-shadow:0 10px 30px -12px rgba(0,0,0,.5); }
.ver-switch a { color:var(--ink); border-bottom:1.5px solid var(--accent); }
@media (max-width:760px){ .ver-switch{ display:none; } }


/* ============================================================
   PALETY KOLORYSTYCZNE + TŁO PORTFOLIO  (sterowane Tweaks / Personalizacją)
   ============================================================ */
:root { --prace-bg: var(--ink); --prace-ink: var(--cream); }
.panel.p-prace { background: var(--prace-bg); color: var(--prace-ink); }
/* Nowy układ kolorów sekcji: prace grafit · oferta róż · kontakt krem */
.panel.p-oferta  { background: var(--pink); color: var(--pink-ink); }
.panel.p-kontakt { background: var(--cream); color: var(--ink); }
.board .panel.p-kontakt .spine { background: var(--cream); }

/* Paleta: Cytrusowa (ciepła) */
:root[data-palette="cytrus"] {
  --pink:#FF7A3D;   --pink-ink:#3A1400;
  --yellow:#FFB638; --yellow-ink:#3A2700;
  --orange:#F0731A;
  --teal:#3E8E5B;
  --cream-2:#F4EAD8;
}
/* Paleta: Studio (chłodna, elegancka) */
:root[data-palette="studio"] {
  --pink:#3F7CA6;   --pink-ink:#EAF4FB;
  --yellow:#E8B33A; --yellow-ink:#2E2300;
  --orange:#D98A2B;
  --teal:#1F8A7B;
  --cream-2:#ECE7DA;
}
/* Paleta: Ziemista (stonowana, naturalna) */
:root[data-palette="ziemista"] {
  --pink:#D98A6E;   --pink-ink:#2E1206;
  --yellow:#E7C36A; --yellow-ink:#2E2400;
  --orange:#C2763C;
  --teal:#5E8B73;
  --cream-2:#EFE7D6;
}

/* Tło sekcji „Prace" (osobno od palety — żeby przetestować róż vs neutralne/grafit) */
:root[data-pf="pink"]  { --prace-bg:var(--pink); --prace-ink:var(--pink-ink); }
:root[data-pf="cream"] { --prace-bg:#ECE3D2; --prace-ink:#2A1700; }
:root[data-pf="ink"]   { --prace-bg:var(--ink); --prace-ink:var(--cream); }
/* Domyślnie ciemne tło prac → aktywny filtr w kolorze akcentu; dla jasnych teł wracamy do grafitu */
.panel.p-prace .filter.active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
:root[data-pf="pink"] .panel.p-prace .filter.active,
:root[data-pf="cream"] .panel.p-prace .filter.active { background:var(--ink); color:var(--cream); border-color:var(--ink); }

/* ============================================================
   OFERTA na różowym tle — czytelność tekstu pomocniczego
   ============================================================ */
.panel.p-oferta .sp-head p,
.panel.p-oferta .sp-block h4,
.panel.p-oferta .sp-note { color: var(--pink-ink); opacity:.78; }
/* Spójna paleta na różowym tle: wino (pink-ink) + krem — bez orange/yellow/teal */
.panel.p-oferta .sp-head .tag { background:var(--pink-ink); color:var(--cream); }
.panel.p-oferta .sp-list li .ck { background:var(--pink-ink); color:var(--cream); }
.panel.p-oferta .sp-tags span { background:transparent; border-color:color-mix(in srgb, var(--pink-ink) 38%, transparent); color:var(--pink-ink); }
.panel.p-oferta .svc-tab { background:transparent; border-color:color-mix(in srgb, var(--pink-ink) 34%, transparent); color:color-mix(in srgb, var(--pink-ink) 78%, transparent); }
.panel.p-oferta .svc-tab:hover { border-color:var(--pink-ink); color:var(--pink-ink); }
.panel.p-oferta .svc-tab.active { background:var(--pink-ink); color:var(--cream); border-color:var(--pink-ink); }
.panel.p-oferta .btn-accent { background:var(--pink-ink); color:var(--cream); }
.panel.p-oferta .c-head .c-kick, .panel.p-oferta .c-head .c-num { color:var(--pink-ink); }

/* ============================================================
   KONTAKT na jasnym (kremowym) tle — formularz i dane
   ============================================================ */
.panel.p-kontakt .contact-left h2 { color: var(--ink); }
.panel.p-kontakt .contact-left .lead { color: var(--ink-2); }
.panel.p-kontakt .cd a { background:var(--cream-2); border-color:var(--line); }
.panel.p-kontakt .cd a:hover { border-color:var(--accent); }
.panel.p-kontakt .cd .l { color:var(--ink-3); }
.panel.p-kontakt .cd .v { color:var(--ink); }
.panel.p-kontakt .form-card { background:var(--cream-2); border-color:var(--line); }
.panel.p-kontakt .field label { color:var(--ink-2); }
.panel.p-kontakt .field input, .panel.p-kontakt .field textarea { background:#fff; color:var(--ink); border-color:var(--line); }
.panel.p-kontakt .field input::placeholder, .panel.p-kontakt .field textarea::placeholder { color:var(--ink-3); }
.panel.p-kontakt .field input:focus, .panel.p-kontakt .field textarea:focus { background:#fff; border-color:var(--accent); }
.panel.p-kontakt .chip { border-color:var(--line); color:var(--ink-2); }
.panel.p-kontakt .chip:hover { border-color:var(--accent); }
.panel.p-kontakt .form-ok { background:color-mix(in srgb, var(--accent) 16%, #fff); border-color:var(--accent); color:var(--ink); }

/* ============================================================
   „ZAUFALI MI" — pasek logotypów w sekcji O mnie
   ============================================================ */
.trust { margin-top:clamp(26px,3vw,40px); padding-top:22px; border-top:1px solid color-mix(in srgb, currentColor 22%, transparent); }
.trust-l { display:block; font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; opacity:.6; margin-bottom:14px; }
.trust-logos { display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; }
.trust-logos span { font-family:var(--font-display); font-weight:700; font-size:clamp(1.05rem,1.7vw,1.4rem); letter-spacing:-.01em; opacity:.82; white-space:nowrap; transition:opacity .2s; }
.trust-logos span:hover { opacity:1; }
@media (max-width:600px){ .trust-logos { gap:10px 18px; } }