/* Fotociaki.pl — arkusz stylów */
:root{
  --bg:#e5e1d9;
  --bg-2:#d9d4ca;
  --maroon:#561b15;
  --maroon-2:#6e2519;
  --orange:#e87a2e;
  --rust:#8a2a07;
  --ink:#3a1510;
  --paper:#f1eee8;
  --radius:14px;
  --f-head:"Alegreya Sans","Trebuchet MS",sans-serif;
  --f-hand:"Patrick Hand","Comic Sans MS",cursive;
  --f-logo:"Cormorant Garamond",Georgia,serif;
  --f-body:"Alegreya Sans","Trebuchet MS",sans-serif;
}
:root{--spectrum:linear-gradient(90deg,#f6d21c,#f08a1c,#e0342f)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);font-family:var(--f-body);font-size:1.125rem;line-height:1.55;
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 600px at 15% 10%,rgba(255,255,255,.55),transparent 70%),
    radial-gradient(900px 700px at 90% 80%,rgba(190,180,165,.45),transparent 70%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rust)}
a:hover{color:var(--maroon)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--maroon);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- Nagłówek ---------- */
.top{position:relative;z-index:30}
.site-header{
  display:grid;grid-template-columns:200px 1fr auto;align-items:center;gap:1rem;
  max-width:1520px;margin:0 auto;padding:1.2rem 2rem;min-height:87px;
}
.logo{
  font-family:var(--f-logo);font-weight:700;font-size:1.85rem;letter-spacing:.2em;
  color:var(--maroon);text-decoration:none;line-height:1;
}
.logo:hover{color:var(--rust)}
.nav{display:flex;justify-content:space-between;gap:.5rem;list-style:none;margin:0;padding:0 1rem 0 4.5rem}
.nav a,.pill{
  display:inline-block;font-family:var(--f-hand);font-size:1.1rem;line-height:1;text-transform:uppercase;
  text-decoration:none;color:var(--rust);
  padding:.55rem 1.7rem;border:1.5px solid var(--orange);border-radius:var(--radius);
  background:transparent;cursor:pointer;transition:background .2s,color .2s;
}
.nav a:hover,.pill:hover{background:rgba(232,122,46,.16);color:var(--maroon)}
.nav a[aria-current="page"]{background:var(--maroon);color:#fff;border-color:var(--maroon)}
.search{
  display:flex;align-items:center;background:var(--maroon);border:1.5px solid var(--maroon);
  border-radius:10px;padding:3px 4px 3px 8px;gap:6px;width:112px;
}
.search label{display:flex}
.search svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:2.4}
.search input{
  width:100%;min-width:0;border:0;border-radius:6px;background:#f3f0ea;padding:.25rem .4rem;
  font:inherit;font-size:.95rem;color:var(--ink);
}
.search:focus-within{width:210px}
.search{transition:width .25s}
.menu-btn{display:none}

/* Podmenu Kursy */
.subnav{
  position:absolute;left:170px;top:84px;display:flex;gap:.55rem;padding:.6rem;
  background:var(--maroon);border-radius:18px;margin:0;list-style:none;
  box-shadow:0 10px 24px rgba(60,20,10,.25);
}
.subnav[hidden]{display:none}
.subnav a{
  display:flex;align-items:center;justify-content:center;text-align:center;width:112px;height:66px;
  font-family:var(--f-hand);font-size:1.02rem;line-height:1.05;text-transform:uppercase;color:#fff;
  text-decoration:none;background:var(--maroon-2);border:1.5px solid var(--orange);border-radius:var(--radius);padding:.3rem;
  transition:background .2s;
}
.subnav a:hover{background:#852d1d;color:#fff}
.subnav a[aria-current="page"]{background:var(--orange);color:var(--maroon);border-color:var(--orange)}

/* ---------- Social ---------- */
.social{
  position:fixed;right:68px;top:176px;display:flex;flex-direction:column;gap:5px;z-index:20;
}
.social a{display:block;width:40px;height:40px;border-radius:9px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .15s}
.social a:hover{transform:translateX(-4px)}
.social svg{width:100%;height:100%;display:block}

/* ---------- Hero ---------- */
main{display:block}
.has-subnav main{padding-top:0}
.hero{
  max-width:1520px;margin:0 auto;padding:6.2rem 2rem 0;
  display:grid;grid-template-columns:1fr minmax(300px,510px) 1fr;column-gap:1rem;align-items:stretch;
  min-height:760px;
}
.hero-col{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:space-between;padding-bottom:4rem}
.hero-title{
  font-family:var(--f-head);font-weight:500;font-size:clamp(1.5rem,2.4vw,2.05rem);letter-spacing:.04em;
  line-height:1.05;text-transform:uppercase;color:var(--rust);margin:.5rem 0 0;
}
.hero-title.small{font-size:clamp(1.5rem,2.3vw,1.95rem)}
.camera-logo{width:200px;height:auto;margin:auto 0}
.hero-photo{align-self:end;margin:0;position:relative}
.hero-photo img{width:100%;height:auto}
.chevrons{
  display:grid;place-items:center;width:84px;height:84px;margin:auto 0;border:0;background:none;cursor:pointer;
  color:var(--rust);animation:nudge 2.6s ease-in-out 1.5s 2;
}
.chevrons svg{width:84px;height:84px}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}

/* ---------- Sekcje ---------- */
.wrap{max-width:1040px;margin:0 auto;padding:0 2rem}
.section{padding:5rem 0}
.section.tint{background:rgba(86,27,21,.06)}
h1,h2,h3{font-family:var(--f-head);font-weight:500;line-height:1.1;color:var(--rust);letter-spacing:.02em;margin:0 0 1rem}
h1{font-size:clamp(2rem,4.4vw,3.2rem);text-transform:uppercase}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem);text-transform:uppercase}
h3{font-size:1.4rem}
p{margin:0 0 1rem;max-width:68ch}
.lead{font-size:1.3rem;max-width:56ch}
.page-head{padding:9.5rem 0 2rem}
.page-head.no-sub{padding-top:3.5rem}
.rows{list-style:none;margin:2rem 0 0;padding:0}
.rows li{
  display:grid;grid-template-columns:minmax(200px,1fr) 2fr auto;gap:1.5rem;align-items:center;
  padding:1.6rem 0;border-top:1.5px solid var(--orange);
}
.rows li:last-child{border-bottom:1.5px solid var(--orange)}
.rows h3{margin:0}
.rows p{margin:0}
.btn{
  display:inline-block;font-family:var(--f-hand);font-size:1.15rem;text-transform:uppercase;text-decoration:none;
  color:#fff;background:var(--maroon);border:1.5px solid var(--orange);border-radius:var(--radius);padding:.7rem 1.6rem;cursor:pointer;
  transition:background .2s;
}
.btn:hover{background:var(--maroon-2);color:#fff}
.btn.ghost{background:transparent;color:var(--rust)}
.btn.ghost:hover{background:rgba(232,122,46,.16);color:var(--maroon)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:3rem}
.cols>div{border-left:1.5px solid var(--orange);padding-left:1.4rem}
.ticks{list-style:none;padding:0;margin:0 0 1.2rem}
.ticks li{padding:.35rem 0 .35rem 1.7rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.9rem;width:.9rem;height:.9rem;border-radius:50%;background:conic-gradient(#f6d21c 0 25%,#e0342f 0 50%,#a0359a 0 75%,#2aa7d8 0)}
.actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.6rem}
.note{font-size:.95rem;opacity:.8}

/* ---------- Formularze ---------- */
form.card{display:grid;gap:1.1rem;max-width:640px}
.field{display:grid;gap:.3rem}
.field label{font-family:var(--f-hand);font-size:1.1rem;text-transform:uppercase;color:var(--rust)}
.field input,.field select,.field textarea{
  font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--orange);border-radius:10px;padding:.7rem .9rem;width:100%;
}
.field textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.98rem}
.check input{margin-top:.35rem;accent-color:var(--maroon)}
.status{padding:1rem 1.2rem;border-radius:10px;border:1.5px solid var(--orange);background:var(--paper);margin-bottom:1.5rem;max-width:640px}
.status[hidden]{display:none}
.status.err{border-color:#b3261e}

/* ---------- Wyszukiwarka ---------- */
.results{list-style:none;padding:0;margin:1.5rem 0 0}
.results li{padding:1.1rem 0;border-top:1.5px solid var(--orange)}
.results a{font-family:var(--f-head);font-size:1.35rem}

/* ---------- Okno miejscowości ---------- */
dialog{
  border:0;border-radius:18px;padding:0;background:var(--paper);color:var(--ink);width:min(440px,92vw);
  box-shadow:0 20px 60px rgba(40,10,5,.45);
}
dialog::backdrop{background:rgba(40,12,8,.55)}
.dlg-in{padding:1.6rem}
.dlg-in h2{font-size:1.5rem}
.cities{list-style:none;padding:0;margin:1rem 0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.cities button{width:100%;font-family:var(--f-hand);font-size:1.1rem;padding:.6rem;border:1.5px solid var(--orange);border-radius:10px;background:transparent;color:var(--rust);cursor:pointer}
.cities button:hover,.cities button[aria-pressed="true"]{background:var(--maroon);color:#fff;border-color:var(--maroon)}

/* ---------- Stopka ---------- */
.site-footer{background:var(--maroon);color:#f0e4dc;margin-top:3rem;padding:3rem 0 2rem}
.site-footer a{color:#ffd9b8}
.foot{max-width:1040px;margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
.foot h2{font-size:1.15rem;color:var(--orange);margin-bottom:.6rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:.15rem 0}
.copy{max-width:1040px;margin:2rem auto 0;padding:1.2rem 2rem 0;border-top:1px solid rgba(255,255,255,.18);font-size:.95rem;opacity:.85}
.site-footer .logo{color:#fff;font-size:1.6rem;display:inline-block;margin-bottom:.8rem}

/* ---------- Responsywność ---------- */
@media (max-width:1200px){
  .site-header{grid-template-columns:auto 1fr auto}
  .nav{padding-left:1.5rem}
  .nav a{padding:.5rem 1rem}
  .social{right:14px}
  .subnav{left:2rem}
}
@media (max-width:960px){
  .site-header{grid-template-columns:1fr auto auto;padding:1rem 1.2rem}
  .menu-btn{display:inline-block}
  .nav{
    display:none;grid-column:1/-1;flex-direction:column;padding:.5rem 0;gap:.5rem
  }
  .nav.open{display:flex}
  .nav a{display:block;text-align:center}
  .search{grid-row:1;grid-column:3}
  .subnav{position:static;margin:0 1.2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.45rem}
  .subnav[hidden]{display:none}
  .subnav a{width:100%;height:58px;font-size:.85rem}
  .logo{font-size:1.35rem;letter-spacing:.12em}
  .search{width:92px}.search:focus-within{width:150px}
  .social{position:static;flex-direction:row;justify-content:center;margin:1rem 0}
  .page-head{padding-top:2.5rem}
  .rows li{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
/* === Podmenu Kursy: tylko po najechaniu === */
.subnav{display:none;top:76px}
.subnav.is-open{display:flex}
.hero{padding-top:2.5rem}
.page-head{padding-top:3.5rem}
@media (max-width:960px){
  .subnav{display:grid;top:auto}
}
/* Własny obrazek strzałki */
.chevrons{width:100px;height:auto}
.chevrons img{width:100%;height:auto;display:block}


/* Menu: przyciski blisko siebie, wyśrodkowane */
@media (min-width:961px){
  .site-header{grid-template-columns:1fr auto 1fr}
  .nav{justify-content:center;gap:1rem;padding:0}
  .search{margin-left:auto}
  .logo-link img{width:210px;height:auto}
}
/* Tytuły podstron niżej o jeden "enter" */
.page-head,
.page-head.no-sub{padding-top:9.5rem}
@media (max-width:960px){
  .page-head,
  .page-head.no-sub{padding-top:4rem}
}

/* ===== Zdjęcia Maksa na podstronach: tekst po stronie, w którą patrzy chłopiec ===== */
.split{max-width:1280px;margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,440px);column-gap:3rem;align-items:end;min-height:calc(100vh - 110px)}
.split--photo-left{grid-template-columns:minmax(220px,440px) minmax(0,1fr)}
.split--photo-left .split-photo{order:-1}
.split-text{align-self:start;min-width:0}
.split-text .wrap{max-width:none;padding:0}
.split-text .section{padding-bottom:3rem}
.split-photo{margin:0;align-self:end;position:sticky;bottom:0;line-height:0;pointer-events:none}
.split-photo img{width:100%;height:auto;max-height:min(82vh,840px);object-fit:contain;object-position:center bottom;margin:0 auto}
.split-page .site-footer{margin-top:0}
.split h2{font-size:clamp(1.3rem,2vw,1.7rem)}
.split .cols{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}
.split .rows li{grid-template-columns:1fr auto;grid-template-areas:"t b" "p p";gap:.6rem 1.2rem}
.split .rows li h3{grid-area:t}
.split .rows li p{grid-area:p}
.split .rows li .btn{grid-area:b}
@media (min-width:961px) and (max-width:1500px){
  .split{padding-right:7rem}
}
/* Tablet: zdjęcie nadal obok tekstu, tylko węższe */
@media (min-width:721px) and (max-width:960px){
  .split,.split--photo-left{column-gap:2rem;padding:0 1.5rem}
  .split{grid-template-columns:minmax(0,1fr) minmax(200px,34vw)}
  .split--photo-left{grid-template-columns:minmax(200px,34vw) minmax(0,1fr)}
  .split .cols{grid-template-columns:1fr}
}
/* Telefon: Maks „stoi” na linii pod nagłówkiem, przy krawędzi ekranu, a treść idzie pod spodem */
@media (max-width:720px){
  .split,.split--photo-left{
    --ph:clamp(120px,34vw,230px);
    display:grid;min-height:0;padding:0 1.2rem;column-gap:.8rem;align-items:end;
    grid-template-columns:minmax(0,1fr) var(--ph);
  }
  .split--photo-left{grid-template-columns:var(--ph) minmax(0,1fr)}
  .split-text{display:contents}
  .split-text .page-head{grid-row:1;grid-column:1;align-self:center;padding-top:2.5rem;padding-bottom:1.5rem}
  .split--photo-left .split-text .page-head{grid-column:2}
  .split-text .section{grid-row:2;grid-column:1/-1;padding-top:1.2rem!important;padding-bottom:2.5rem}
  .split-photo,.split--photo-left .split-photo{
    grid-row:1;grid-column:2;order:0;position:static;width:auto;height:auto;overflow:visible;
    margin:0 -1.2rem 0 0;align-self:end;
  }
  .split--photo-left .split-photo{grid-column:1;margin:0 0 0 -1.2rem}
  .split-photo img{width:100%;max-height:none;object-fit:contain;object-position:center bottom}
  .split-page h1{font-size:clamp(1.25rem,5.8vw,1.9rem);overflow-wrap:break-word}
  .split-page .lead{font-size:1.02rem}
  .split .cols{grid-template-columns:1fr}
  /* cienka linia, na której „stoi” Maks (zastępuje górną kreskę pierwszego wiersza) */
  .split::before{content:"";grid-row:1;grid-column:1/-1;align-self:end;border-bottom:1.5px solid var(--orange)}
  .split-text .section{padding-top:1.4rem!important}
  .split .rows{margin-top:0}
  .split .rows li:first-child{border-top:0;padding-top:.3rem}
}

/* ===== Drobne poprawki stylizacji ===== */
/* spójny odstęp tytułów podstron (zamiast <br> w HTML) */
.page-head,.page-head.no-sub{padding-top:11rem}
@media (max-width:960px){.page-head,.page-head.no-sub{padding-top:4rem}}
/* stopka bez jasnego paska nad nią */
.site-footer{margin-top:0}
/* logo w stopce: ciemne logo na jasnej plakietce, żeby było widoczne na bordowym tle */
.site-footer .logo{background:var(--paper);padding:.55rem .9rem;border-radius:12px;margin-bottom:1rem;line-height:0}
.site-footer .logo img{width:210px;max-width:100%;height:auto}
/* logo w nagłówku na telefonie (wcześniej zmniejszało się do ~70 px) */
@media (max-width:960px){
  .logo-link img{width:150px;height:auto}
  .search{width:104px}
  .search input::placeholder{font-size:.85rem}
  body{background-attachment:scroll}
}

/* Strona główna: pasek social nie zasłania prawej kolumny hero */
@media (min-width:961px) and (max-width:1500px){
  .hero{padding-right:5rem}
}
@media (min-width:961px) and (max-width:1200px){
  .hero{grid-template-columns:1fr minmax(280px,40vw) 1fr}
  .hero .pill{padding:.55rem 1rem;line-height:1.15;text-align:center}
}
/* Podmenu na bardzo wąskich telefonach: bez wypychania strony w bok */
@media (max-width:960px){
  .subnav li{min-width:0}
  .subnav a{padding:.2rem;overflow-wrap:anywhere}
}
@media (max-width:400px){
  .subnav a{font-size:.74rem}
  .subnav{margin:0 .8rem}
}
/* Najwęższe telefony: dłuższe słowa w nagłówkach się nie wylewają, logo ma miejsce w nagłówku */
h1,h2,h3{overflow-wrap:break-word}
@media (max-width:420px){
  h2{font-size:clamp(1.2rem,6vw,1.5rem)}
  .site-header{gap:.6rem;padding:1rem .9rem}
  .menu-btn{padding:.5rem .95rem}
  .search{width:96px}
}
/* Podmenu „Kursy” na telefonie: tylko w sekcji Kursy (nie na stronie głównej, w Kontakcie, O nas itd.) */
@media (max-width:960px){
  .subnav{display:none}
  body.has-subnav.split-page .subnav{display:grid}
}

/* ===== Strona główna: Maks zawsze z boku, nigdy pod treścią =====
   Tablet (721–960 px): jak na komputerze, trzy kolumny (tekst | Maks | tekst), tylko węższe. */
@media (min-width:721px) and (max-width:960px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(240px,38vw) minmax(0,1fr);padding:2rem 1.5rem 0;column-gap:.8rem;min-height:640px}
  .hero-title,.hero-title.small{font-size:clamp(1.15rem,2.9vw,1.5rem);margin-top:2rem!important}
  .hero-col{padding-bottom:3rem}
  .camera-logo{width:130px}
  .chevrons{width:80px}
  .hero .pill{padding:.55rem .9rem;line-height:1.15;text-align:center}
}
/* Telefon (do 720 px): Maks po prawej, obok logo aparatu i przycisku; napisy nad i pod nim */
@media (max-width:720px){
  .hero{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,54vw);column-gap:.6rem;row-gap:.6rem;
    padding:1.2rem 1.2rem 0;min-height:0;align-items:center;justify-items:center;
  }
  .hero-col{display:contents}
  .hero-title,.hero-title.small{grid-column:1/-1;margin:0!important;font-size:clamp(1.3rem,6.2vw,1.8rem)}
  .hero-title:not(.small){grid-row:1}
  .camera-logo{grid-column:1;grid-row:2;width:min(120px,100%);margin:0;align-self:end}
  .hero-col.left .pill{grid-column:1;grid-row:3;align-self:start;padding:.5rem .7rem;font-size:.95rem;line-height:1.15;text-align:center}
  .hero-photo{grid-column:2;grid-row:2/4;align-self:end;justify-self:end;margin:0 -1.2rem 0 0;max-width:none;width:100%}
  .hero-title.small{grid-row:4;margin-top:1.4rem!important}
  .chevrons{grid-column:1/-1;grid-row:5;width:72px;margin:0}
  .hero-col.right .pill{grid-column:1/-1;grid-row:6;margin-bottom:2rem}
}
/* Przyciski w wierszach nie rozciągają się na całą szerokość na tablecie/telefonie */
@media (max-width:960px){
  .rows li>.btn{justify-self:start}
}