/* ===================================================================
   Tomas Lebedevas — Fotografija
   Rašalo mėlyna + smėlis, serifinė tipografija, teminės sekcijos.
   =================================================================== */

:root{
  /* Paletė: rašalo mėlyna + smėlis. Mėlyna sąmoningai gili ir
     prislopinta - tokia tamsi veikia beveik kaip juoda ir nekonkuruoja
     su kadrais, bet spalva dar atpažįstama. Šiltas smėlis atsveria. */
  --tamsi:      #182634;
  --tamsi-gili: #101b26;
  --krem:       #f2ebdd;
  --krem-sokis: #e3d8c3;   /* plyteles fonas, kol nuotrauka dar nekrauta */
  --tekstas:    #182634;
  --tekstas-svelnus: #5a6672;
  --ant-tamsios: #f2ebdd;
  --ant-tamsios-svelnus: #bfc8d2;
  --linija:     #dccfb7;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --max: 1440px;
  --tarpas: 14px;

  /* Galerijos stulpeliu kiekis. Keiciamas per media uzklausas ir
     atskirai "Selected work" sekcijai, todel visur tik viena vieta. */
  --stulpeliai: 4;

  /* Lipni antraste. Naudojama ir sekciju scroll-margin skaiciavimui,
     kad nuoroda i #travel nenuslinktu po antraste. */
  --antrastes-h: 72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--krem);
  color:var(--tekstas);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* --- Antraštė ------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:calc(14px + env(safe-area-inset-top)) calc(40px + env(safe-area-inset-right)) 14px calc(40px + env(safe-area-inset-left));
  background:var(--tamsi);
  color:var(--ant-tamsios);
}
/* Vardas ir po juo smulkus "Photography" - identiteto zenklas, o ne
   viena ilga eilute. Ta pati smulki isretinta tipografija kaip
   .sekcija__kiekis ir lightbox meta eiluteje. */
.brand{
  display:block;
  font-family:var(--serif);
  font-size:24px;font-weight:500;letter-spacing:.01em;line-height:1.12;
}
.brand span{
  display:block;
  margin-top:3px;
  font-family:var(--sans);
  font-size:10.5px;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--ant-tamsios-svelnus);
  /* Centruojam po vardu. Del letter-spacing po paskutine raide lieka
     tarpas, todel be sios kompensacijos eilute optiskai pasislinktu
     i desine. */
  text-align:center;
  margin-right:-.26em;
}
.site-header nav{display:flex;gap:26px;font-size:14px;letter-spacing:.02em}
.site-header nav a{color:var(--ant-tamsios-svelnus);padding-bottom:3px;border-bottom:1px solid transparent}
.site-header nav a:hover{color:var(--ant-tamsios);border-bottom-color:var(--ant-tamsios)}
/* Kuriame puslapyje esam - zymima generuojant HTML. */
.site-header nav a[aria-current]{color:var(--ant-tamsios);border-bottom-color:var(--ant-tamsios)}

/* --- Titulinio įžanga: nuotrauka per visą plotį ---------------------- */
/* Fotografo puslapyje pirmas ekranas turi buti fotografija, o ne
   spalvotas staciakampis. Kadras parinktas blankus ir miglotas -
   tekstas ant jo gulasi nekonkuruodamas. */
.hero{
  position:relative;
  min-height:min(78vh,780px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:var(--tamsi);
  color:var(--ant-tamsios);
}
.hero__foto{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}
/* Uzdanga: be jos tekstas ant sviesaus dangaus nebutu iskaitomas.
   Melynas atspalvis riso hero su palete. */
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(24,38,52,.66),rgba(24,38,52,.34) 45%,rgba(24,38,52,.58));
}
.hero__vidus{
  position:relative;z-index:2;
  text-align:center;
  padding:96px 28px 132px;
}
.hero .lankas{z-index:3}
.hero h1{
  font-family:var(--serif);
  margin:0 0 14px;
  font-size:clamp(3rem,8vw,6rem);
  font-weight:400;letter-spacing:.04em;line-height:1;
  text-shadow:0 1px 24px rgba(10,17,24,.5);
}
.hero p{
  margin:0 auto;max-width:34em;
  color:var(--krem);
  font-size:1.02rem;letter-spacing:.02em;
  text-shadow:0 1px 16px rgba(10,17,24,.6);
}

/* Lenktas perėjimas iš tamsios juostos į kreminę.
   Elipsė platesnė už ekraną, todėl lankas švelnus.
   Rodom tik du: viena ten, kur tamsi puslapio pradzia atsiveria i
   nuotraukas, ir viena puslapio gale. Anksciau ju buvo sesi ir jie
   virto sablonu; be to hero lankas atsidurdavo tarp dvieju tamsiu
   juostu ir palikdavo keista smelio ruozeli. */
.lankas{
  position:absolute;left:-10%;right:-10%;bottom:-1px;
  height:110px;
  background:var(--krem);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.lankas--virsus{
  top:-1px;bottom:auto;
  border-radius:0 0 50% 50% / 0 0 100% 100%;
}

/* --- Sekcija ------------------------------------------------------- */
.sekcija{
  margin:0 0 10px;
  /* Kad #travel ir kt. nuorodos nenuslystu po lipnia antraste. */
  scroll-margin-top:var(--antrastes-h);
}

.sekcija__juosta{
  position:relative;
  background:var(--tamsi);color:var(--ant-tamsios);
  text-align:center;
  padding:68px 28px 76px;
}
.sekcija__juosta h1,
.sekcija__juosta h2{
  font-family:var(--serif);
  margin:0 0 10px;
  font-size:clamp(2.4rem,6vw,4.2rem);
  font-weight:400;letter-spacing:.08em;text-transform:uppercase;line-height:1;
}
.sekcija__juosta p{
  margin:0 auto;max-width:32em;
  color:var(--ant-tamsios-svelnus);
  font-size:.98rem;letter-spacing:.02em;
}
/* Be opacity: su .7 kontrastas buvo 3.6:1, o tai maziausias
   ir labiausiai isretintas tekstas puslapyje. Dabar 5.6:1. */
.sekcija__kiekis{
  display:block;margin-top:16px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ant-tamsios-svelnus);
}
/* Tituliniame po hero nuotrauka tamsi juosta butu per sunki - antraste
   ten guli ant smelio. Tamsios juostos lieka darbu puslapiams. */
.sekcija__juosta--sviesi{
  background:none;color:var(--tekstas);
  padding:66px 28px 8px;
}
.sekcija__juosta--sviesi p{color:var(--tekstas-svelnus)}
.sekcija__juosta--sviesi .sekcija__kiekis{color:var(--tekstas-svelnus)}

/* Lankas tik ties pirmaja juosta - ten tamsa atsiveria i nuotraukas. */
.sekcija .lankas{display:none}
.sekcija:first-of-type .sekcija__juosta{
  overflow:hidden;
  padding-bottom:150px;
  /* Hero aukstis islenda trupmeninis, o dvi gretimos vienodos spalvos
     dezes tokiu atveju gali palikti plauko linija. 1px persidengimas
     ta panaikina - tas pats triukas kaip lanko bottom:-1px. */
  margin-top:-1px;
}
.sekcija:first-of-type .sekcija__juosta .lankas{display:block}

/* --- Galerija ------------------------------------------------------ */
/* Murinis isdestymas. Nuotrauku proporcijos ivairios (3:2, 4:5, staciai),
   o tinklelyje su vienoda eilute auksciausias kadras diktavo eiles auksti
   ir po zemesniais likdavo iki 26% tusciu vietu. Stulpeliai supakuoja be
   tarpu ir nieko neapkarpo - kaina tik ta, kad skaitymo eile vertikali. */
.galerija{
  max-width:var(--max);
  margin:0 auto;
  padding:56px calc(40px + env(safe-area-inset-left)) 76px calc(40px + env(safe-area-inset-right));
  column-count:var(--stulpeliai);
  column-gap:var(--tarpas);
}
/* Kuruota atranka - platesni kadrai, maziau stulpeliu. */
#selected .galerija{--stulpeliai:3;max-width:1180px}

.tile{
  break-inside:avoid;
  margin:0 0 var(--tarpas);padding:0;border:0;
  position:relative;overflow:hidden;
  background:var(--krem-sokis);
  cursor:zoom-in;
}
.tile img{
  width:100%;height:auto;display:block;
  transition:transform .6s ease;
}
.tile:hover img{transform:scale(1.035)}
.tile:focus-visible{outline:2px solid var(--tamsi);outline-offset:3px}
.tile figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:30px 16px 14px;
  font-family:var(--serif);
  font-size:1.05rem;letter-spacing:.02em;text-align:left;color:#fff;
  background:linear-gradient(transparent,rgba(12,20,28,.8));
  opacity:0;transition:opacity .3s;
}
.tile:hover figcaption,.tile:focus-visible figcaption{opacity:1}

.empty{column-span:all;text-align:center;color:var(--tekstas-svelnus);padding:60px 0}
.empty code{background:var(--krem-sokis);padding:2px 6px;border-radius:3px;font-size:.9em}

/* --- Darbų kūnai (titulinio įėjimai) -------------------------------- */
.kunai{
  max-width:var(--max);
  margin:0 auto;
  padding:8px calc(40px + env(safe-area-inset-left)) 104px calc(40px + env(safe-area-inset-right));
}
.kunai h2{
  font-family:var(--serif);
  font-size:clamp(1.7rem,3vw,2.3rem);
  font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 22px;text-align:center;
}
.kunai__eile{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--tarpas);
}
.kunas{
  position:relative;display:block;overflow:hidden;
  background:var(--krem-sokis);
}
.kunas img{
  width:100%;height:clamp(200px,24vw,300px);
  object-fit:cover;display:block;
  transition:transform .6s ease;
}
.kunas:hover img{transform:scale(1.04)}
.kunas:focus-visible{outline:2px solid var(--tamsi);outline-offset:3px}
.kunas__vardas,.kunas__kiekis{
  position:relative;z-index:2;display:block;text-align:center;color:#fff;
}
/* Uzdanga po tekstu - kitaip vardas ant sviesaus kadro dingtu. */
.kunas::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:56%;
  background:linear-gradient(transparent,rgba(12,20,28,.82));
}
.kunas__vardas{
  position:absolute;left:0;right:0;bottom:30px;
  font-family:var(--serif);font-size:1.6rem;letter-spacing:.06em;
}
.kunas__kiekis{
  position:absolute;left:0;right:0;bottom:14px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.78);
}

/* --- Kitas darbų kūnas (puslapio apačioje) -------------------------- */
.toliau{
  max-width:var(--max);
  margin:0 auto;
  padding:0 calc(40px + env(safe-area-inset-right)) 104px calc(40px + env(safe-area-inset-left));
  text-align:right;
}
.toliau a{
  display:inline-block;
  font-family:var(--serif);font-size:1.9rem;letter-spacing:.04em;
  border-bottom:1px solid var(--linija);padding-bottom:4px;
}
.toliau a:hover{border-bottom-color:var(--tekstas)}
.toliau span{
  display:block;
  font-family:var(--sans);font-size:11px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekstas-svelnus);
  margin-bottom:4px;
}

/* --- Apie / kontaktai ---------------------------------------------- */
.puslapio-galas{
  position:relative;
  overflow:hidden;   /* tas pats - lankas neturi tempti horizontalios slinkties */
  background:var(--tamsi-gili);color:var(--ant-tamsios);
  padding:140px 28px calc(70px + env(safe-area-inset-bottom));
}
.vidus{max-width:620px;margin:0 auto;text-align:center}
.puslapio-galas h2{
  font-family:var(--serif);
  font-size:2rem;font-weight:400;letter-spacing:.06em;
  margin:0 0 18px;
}
.puslapio-galas p{color:var(--ant-tamsios-svelnus);margin:0 0 16px}
.puslapio-galas a.pastas{
  font-family:var(--serif);font-size:1.3rem;
  color:var(--ant-tamsios);border-bottom:1px solid rgba(242,235,221,.35);
  padding-bottom:3px;
}
.puslapio-galas a.pastas:hover{border-bottom-color:var(--ant-tamsios)}
.skyrikis{
  width:46px;height:1px;background:rgba(242,235,221,.3);
  margin:34px auto;
}
.fine{font-size:12.5px;letter-spacing:.04em;opacity:.6}

/* --- Lightbox ------------------------------------------------------ */
.lightbox{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,17,24,.975);
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:84vh;object-fit:contain}
.lb-close,.lb-nav{
  position:absolute;background:none;border:0;color:var(--krem);
  cursor:pointer;line-height:1;opacity:.6;transition:opacity .2s;
}
.lb-close:hover,.lb-nav:hover{opacity:1}
.lb-close{top:calc(22px + env(safe-area-inset-top));right:28px;font-size:34px}
.lb-nav{top:50%;transform:translateY(-50%);font-size:50px;padding:12px 22px}
.lb-prev{left:6px}
.lb-next{right:6px}
.lb-caption{
  position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));left:0;right:0;
  text-align:center;color:var(--krem);
  font-family:var(--serif);font-size:1.15rem;letter-spacing:.03em;
}
.lb-caption span{
  display:block;margin-top:5px;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.55;
}

/* --- Platus ekranai ------------------------------------------------ */
@media(max-width:1200px){
  :root{--stulpeliai:3}
  #selected .galerija{--stulpeliai:3}
}
@media(max-width:900px){
  :root{--stulpeliai:2}
  #selected .galerija{--stulpeliai:2}
}

/* --- Planšetė / didelis telefonas ----------------------------------- */
@media(max-width:760px){
  :root{--antrastes-h:108px}
  .site-header{
    flex-direction:column;gap:12px;
    padding:calc(16px + env(safe-area-inset-top)) 18px 14px;
  }
  .brand{font-size:20px}
  .brand span{font-size:9.5px;letter-spacing:.22em}
  .site-header nav{gap:18px;font-size:13px}
  .hero{min-height:min(66vh,560px)}
  .hero__vidus{padding:64px 20px 96px}
  .sekcija__juosta{padding:52px 22px 58px}
  .sekcija__juosta--sviesi{padding:44px 22px 4px}
  /* "Selected work" yra du zodziai - be sito telefone luztu i dvi eilutes */
  .sekcija__juosta--sviesi h2{font-size:clamp(1.75rem,7vw,4.2rem)}
  .sekcija:first-of-type .sekcija__juosta{padding-bottom:100px}
  .lankas{height:70px}
  .kunai{padding:4px 14px 72px}
  .kunai__eile{grid-template-columns:1fr;gap:8px}
  .kunas img{height:190px}
  .toliau{padding:0 18px 72px}
  .toliau a{font-size:1.5rem}
  .galerija{padding:32px 10px 44px;column-gap:8px}
  .tile{margin-bottom:8px}
  .tile figcaption{display:none}
  .puslapio-galas{padding:100px 22px calc(56px + env(safe-area-inset-bottom))}
  .lb-nav{font-size:36px;padding:10px}
}

/* --- Telefonas ------------------------------------------------------ */
/* Kadras dviejuose stulpeliuose su paraštėmis buvo ~174x116 px - per mazas,
   kad i ji ziuretum. Nuimam sonines paraštes ir daliname pagal paskirti:
   kuruota atranka - per visa ploti po viena (tie 20 kadru to verti),
   naršymo sekcijos - po du, kitaip 122 nuotrauku puslapis issitemptu
   i beveik 50 000 px slinkties. */
@media(max-width:620px){
  :root{--stulpeliai:2}
  .galerija{padding:26px 0 38px;column-gap:3px}
  .tile{margin-bottom:3px;background:none}
  .tile:hover img{transform:none}

  #selected .galerija{--stulpeliai:1;padding-bottom:30px}
  #selected .tile{margin-bottom:24px}
  .kunai{padding-left:0;padding-right:0}
  .kunai h2{padding:0 18px}
  .kunas img{height:210px}
  /* Pavadinima rodom tik ten, kur kadras pilno plocio - hover telefone
     neegzistuoja, tad kitaip antrasciu isvis nebutu matyti. */
  #selected .tile figcaption{
    display:block;position:static;
    opacity:1;background:none;
    color:var(--tekstas-svelnus);
    padding:9px 18px 0;
    font-size:.98rem;
  }
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}