/* ==========================================================================
   GV Capital · Brand Guidelines
   project-portfolio.css — პროექტების პორტფოლიო

   ერთი სარედაქციო თავი ერთ ეკრანზე, ორ ზოლად:

   1) ზედა ზოლი — მარცხნივ მოკლე განცხადება, მარჯვნივ ორი დოკუმენტი
      ვიზუალად: ბროშურის ყდა თავის ორ ჩამოტვირთვასთან ერთად და
      პრეზენტაციის პირველი სლაიდი თავის ჩამოტვირთვასთან ერთად.
      ყდაზე დაჭერა ხსნის ფაილს, ქვემოთ კი ფორმატებია.
   2) ქვედა ზოლი — სამი პროექტი კიდიდან კიდემდე გაშლილი რენდერებით.
      ბარათის ჩარჩოები, ღრეჩოები და მომრგვალებები მოხსნილია: სამი კადრი
      ერთ უწყვეტ ზოლად იკითხება, ტექსტი კი თავად სურათზე ზის.

   რატომ ასე: წინა ვერსიაში ზედა ბლოკის მარჯვენა მესამედი ცარიელი რჩებოდა,
   ჩარჩოებიანი ჩამოტვირთვის ღილაკები ყველაზე ხმამაღალი ელემენტი იყო, ხოლო
   ყველაზე ღირებული შინაარსი — ფაილების ყდები, ფართობები და რენდერები —
   ყველაზე პატარა. აქ ზუსტად ისინი იკავებენ ყველაზე მეტ ადგილს.
   ========================================================================== */

#project-portfolio{
  --pf-pad:clamp(22px,2.4vw,40px);
  --pf-line:#ffffff26;
  --pf-line-soft:#ffffff17;
  --pf-soft:#a9c2c8;
  --pf-mint:#c7e0e1;
  --pf-scrim:16,28,35;
  --pf-doc-h:clamp(170px,min(31vh,20vw),286px);
  position:relative;
  margin:0;
  padding:0;
  overflow:hidden;
  border-radius:10px;
  background:#16232a;
  color:#fff;
  scroll-margin-top:0;
}
#project-portfolio *{box-sizing:border-box}
#project-portfolio a{text-decoration:none;color:inherit}
#project-portfolio a:focus-visible{outline:2px solid var(--orange,#ff5804);outline-offset:3px}

/* --------------------------------------------------------------------------
   1. ზოლის სათაური
   -------------------------------------------------------------------------- */
#project-portfolio .pf-topline{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:clamp(13px,1.7vh,19px) var(--pf-pad) clamp(10px,1.3vh,14px);
  border-bottom:1px solid var(--pf-line);
  color:var(--pf-soft);
  font:500 10px/1.4 var(--font-title-latin);
  letter-spacing:.085em;
}
#project-portfolio .pf-topline>span:last-child{color:#ffffff85}

/* --------------------------------------------------------------------------
   2. ზედა ზოლი — განცხადება და ორი დოკუმენტი
   -------------------------------------------------------------------------- */
#project-portfolio .pf-feature{
  position:relative;z-index:2;
  padding:clamp(20px,3vh,38px) var(--pf-pad) clamp(19px,2.6vh,30px);
}

/* 2a. განცხადება: მხოლოდ ორი ფენა — ქვესათაური და სათაური.
   აღწერა მოხსნილია: kicker-ი და ქვემოთ სამი პროექტის სახელი იმავეს ამბობს,
   ეკრანზე კი ოთხი ხაზი ტექსტი ზედა ზოლს ხრჩობდა. */
#project-portfolio .pf-head{margin-bottom:clamp(22px,3.6vh,42px)}
#project-portfolio .pf-kicker{
  display:block;margin:0 0 clamp(9px,1.4vh,16px);
  color:var(--pf-mint);
  font:500 10px/1.4 var(--font-title-latin);
  letter-spacing:.115em;
}
#project-portfolio h3{
  margin:0;
  max-width:34ch;
  color:#fff;
  font:500 clamp(27px,2.75vw,44px)/1.06 var(--font-title-latin);
  letter-spacing:-.035em;
  text-transform:none;
  text-wrap:balance;
}

/* 2b. ორი დოკუმენტი: ყდა და მისივე ფორმატები გვერდიგვერდ, ერთ ჯგუფად.
   ყდაზე დაჭერა ხსნის ფაილს, გვერდით სია კი ჩამოტვირთვისთვისაა. */
#project-portfolio .pf-docs{
  display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:flex-start;
  gap:clamp(20px,2.6vw,48px);
}
/* ორ ჯგუფს შორის სვეტის ხაზი — სიცარიელე განზრახ გამოიყურება */
#project-portfolio .pf-doc-deck{
  border-left:1px solid var(--pf-line);
  padding-left:clamp(20px,2.4vw,46px);
}
#project-portfolio .pf-doc{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:auto minmax(148px,1fr);
  grid-template-rows:auto auto;
  column-gap:clamp(16px,1.7vw,26px);
  align-items:end;
  min-width:0;
}
#project-portfolio .pf-doc-label{
  grid-column:1/-1;grid-row:1;
  margin:0 0 clamp(9px,1.3vh,14px);
  color:var(--pf-soft);
  font:500 9.5px/1.4 var(--font-title-latin);
  letter-spacing:.1em;
}
#project-portfolio a.pf-doc-cover{
  grid-column:1;grid-row:2;
  position:relative;display:block;
  color:#fff;
  box-shadow:0 14px 34px #00000059;
  transition:transform .3s var(--ease,ease),box-shadow .3s var(--ease,ease);
}
#project-portfolio .pf-doc-brochure .pf-doc-cover{width:calc(var(--pf-doc-h) * .7071)}
#project-portfolio .pf-doc-deck .pf-doc-cover{width:calc(var(--pf-doc-h) * 1.7778)}
#project-portfolio .pf-doc-cover img{display:block;width:100%;height:auto}
#project-portfolio .pf-doc-brochure .pf-doc-cover img{aspect-ratio:495/700;object-fit:cover}
#project-portfolio .pf-doc-deck .pf-doc-cover img{aspect-ratio:16/9;object-fit:cover}
#project-portfolio .pf-doc-view{
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  padding:7px 8px;
  background:var(--emerald,#0a6670);
  font:500 8px/1.35 var(--font-title-latin);
  letter-spacing:.02em;
}
#project-portfolio .pf-doc-view>span:first-child{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#project-portfolio a.pf-doc-cover:hover{transform:translateY(-4px);box-shadow:0 22px 46px #0000008c}

/* სია ყდის ქვედა კიდეზეა გასწორებული — ბოლო ხაზი და ყდის ბოლო ერთ
   ხაზზე დგას, სიაც კომპაქტური რჩება. */
#project-portfolio .pf-doc-links{
  grid-column:2;grid-row:2;align-self:end;
  display:flex;flex-direction:column;
}
#project-portfolio .pf-brochure-lang{
  display:flex;align-items:center;gap:5px;
  padding:0 0 8px;
  color:var(--pf-soft);
  font:500 9px/1.35 var(--font-title-latin);
  letter-spacing:.05em;
}
#project-portfolio .pf-brochure-lang>span{margin-right:auto}
#project-portfolio .pf-brochure-lang button{
  min-width:28px;padding:4px 5px;
  border:1px solid var(--pf-line);border-radius:3px;
  background:transparent;color:#fff;
  font:inherit;cursor:pointer;
}
#project-portfolio .pf-brochure-lang button[aria-pressed="true"]{
  border-color:var(--pf-mint);background:var(--emerald,#0a6670);
}
#project-portfolio .pf-brochure-lang button:focus-visible{
  outline:2px solid var(--orange,#ff5804);outline-offset:2px;
}
#project-portfolio a.pf-file{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-content:start;align-items:center;
  gap:2px 8px;
  padding:9px 8px 10px 0;
  border-top:1px solid var(--pf-line);
  color:#fff;
  transition:background .22s var(--ease,ease),padding-left .22s var(--ease,ease);
}
#project-portfolio a.pf-file:hover{background:#ffffff0f;padding-left:7px}
#project-portfolio .pf-file-name{
  grid-column:1;grid-row:1;
  font:500 9.5px/1.35 var(--font-title-latin);
  letter-spacing:.05em;
}
#project-portfolio .pf-file svg{
  grid-column:2;grid-row:1;
  width:14px;height:14px;
  color:var(--pf-mint);
  transition:transform .22s var(--ease,ease);
}
#project-portfolio a.pf-file:hover svg{transform:translateY(3px)}
#project-portfolio .pf-file-meta{
  grid-column:1;grid-row:2;
  color:var(--pf-soft);
  font:400 10.5px/1.4 var(--font-text-latin);
}

/* --------------------------------------------------------------------------
   3. ქვედა ზოლი — სამი პროექტი
   -------------------------------------------------------------------------- */
#project-portfolio .pf-plates{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  min-height:0;
}
#project-portfolio .pf-plate{
  position:relative;
  display:flex;align-items:flex-end;
  min-width:0;min-height:0;
  overflow:hidden;
  isolation:isolate;
  background:#0f181e;
}
/* გამყოფი ბორდერით და არა ჩრდილით: სურათი inset:0-ით padding box-ს ავსებს
   და ბორდერს არ ფარავს. */
#project-portfolio .pf-plate+.pf-plate{border-left:1px solid #ffffff24}
#project-portfolio .pf-plate-img{
  position:absolute;left:0;right:0;bottom:0;top:auto;z-index:0;
  width:100%;height:var(--pf-img-h,134%);
  object-fit:cover;object-position:center bottom;
  transition:transform .8s var(--ease,cubic-bezier(.2,.7,.2,1));
}
/* მსუბუქი გრადიენტი — კადრის ზედა ორი მესამედი სუფთა რჩება */
#project-portfolio .pf-plate:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(var(--pf-scrim),.97) 0%,
    rgba(var(--pf-scrim),.94) 24%,
    rgba(var(--pf-scrim),.8) 38%,
    rgba(var(--pf-scrim),.44) 52%,
    rgba(var(--pf-scrim),.12) 68%,
    rgba(var(--pf-scrim),0) 80%);
  transition:opacity .4s var(--ease,ease);
}
#project-portfolio .pf-plate-body{
  position:relative;z-index:2;
  width:100%;
  padding:clamp(15px,2vh,22px) clamp(20px,1.7vw,30px) clamp(16px,2.1vh,23px);
}
/* საინდექსო ხაზი: ნომერი + პროექტის ტიპი + გამყოფი ხაზი.
   ტიპი აქ დგას და არა სახელის გვერდით, რომ სამივე ფირფიტის ტექსტი ერთ
   სიმაღლეზე დაიწყოს ნებისმიერ ენასა და სიგანეზე (გრძელი სახელი აღარ
   წყვეტს ხაზს და ბადეს არ ხრის). */
#project-portfolio .pf-index{
  display:flex;align-items:center;gap:clamp(8px,.8vw,12px);
  margin-bottom:clamp(8px,1.1vh,12px);
  min-width:0;
}
#project-portfolio .pf-index-num{
  flex:0 0 auto;
  color:var(--pf-mint);
  font:500 10px/1 var(--font-title-latin);
  letter-spacing:.14em;
}
#project-portfolio .pf-plate-type{
  margin:0;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--pf-soft);
  font:400 clamp(10px,.8vw,12px)/1.3 var(--font-text-latin);
}
#project-portfolio .pf-index:after{content:"";flex:1 1 auto;min-width:14px;height:1px;background:#ffffff33}
#project-portfolio .pf-plate h4{
  margin:0;
  color:#fff;
  font:500 clamp(20px,1.85vw,28px)/1.1 var(--font-title-latin);
  letter-spacing:-.03em;
}

/* ციფრები — ამ სექციის მთავარი გასაყიდი შინაარსი, ამიტომ ისინია ყველაზე
   დიდი ტიპოგრაფია ფირფიტაზე. ფართობი პირველადია, დოკები — მეორეული.
   მარკაპში dt წინ დგას (სწორი dl-სტრუქტურა), ვიზუალურად კი order-ით
   ციფრის ქვეშ ჩადის. */
#project-portfolio .pf-stats{
  display:flex;align-items:baseline;gap:clamp(16px,1.7vw,30px);
  margin:clamp(14px,1.9vh,20px) 0 0;
  min-height:clamp(53px,6.7vh,70px);
}
#project-portfolio .pf-stats>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
#project-portfolio .pf-stats dt{
  order:2;margin:5px 0 0;
  color:var(--pf-soft);
  font:500 9px/1.3 var(--font-title-latin);
  letter-spacing:.085em;
}
#project-portfolio .pf-stats dd{
  order:1;margin:0;
  color:#fff;
  font:500 clamp(25px,2.25vw,36px)/1 var(--font-title-latin);
  letter-spacing:-.035em;
  white-space:nowrap;
}
#project-portfolio .pf-stats .pf-stat-minor dd{font-size:clamp(19px,1.5vw,25px)}
#project-portfolio .pf-stats dd span{
  margin-left:2px;
  color:var(--pf-mint);
  font-size:.4em;
  letter-spacing:0;
}
#project-portfolio .pf-note{
  display:flex;align-items:flex-end;
  margin:clamp(11px,1.5vh,16px) 0 0;
  max-width:32ch;
  min-height:clamp(53px,6.7vh,70px);
  color:#d3dfe2;
  font:400 11.5px/1.5 var(--font-text-latin);
}

#project-portfolio a.pf-action{
  position:static;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:clamp(14px,1.8vh,19px);
  padding-top:clamp(12px,1.5vh,15px);
  border-top:1px solid #ffffff38;
  color:#fff;
  font:500 9.5px/1.4 var(--font-title-latin);
  letter-spacing:.075em;
  transition:border-color .25s var(--ease,ease);
}
/* ტექსტის ბლოკი მთლიანად დაწკაპუნებადია — მიზანი დიდია, ხილული ბმული კი
   რჩება წარწერად. */
#project-portfolio a.pf-action:after{content:"";position:absolute;inset:0;z-index:3}
#project-portfolio .pf-action>span:last-child{flex:0 0 auto;color:var(--pf-mint)}
#project-portfolio .pf-plate:hover .pf-plate-img{transform:scale(1.045)}
#project-portfolio .pf-plate:hover:after{opacity:.93}
#project-portfolio .pf-plate:hover .pf-action,
#project-portfolio .pf-plate:focus-within .pf-action{border-color:var(--pf-mint)}

/* --------------------------------------------------------------------------
   4. სლაიდის ბადე — დესკტოპზე სექცია ზუსტად ერთი ეკრანია
   -------------------------------------------------------------------------- */
@media (min-width:900px) and (min-height:640px){
  .story-edition #project-portfolio.st-section{
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr);
    height:100svh;min-height:100svh;max-height:100svh;
    padding:0;
    gap:0;
    justify-content:normal;
    scroll-snap-align:start;scroll-snap-stop:always;
  }
}

/* დაბალი ეკრანი: ზედა ზოლი იკუმშება, რომ ფოტოების ზოლს ადგილი დარჩეს */
@media (min-width:900px) and (max-height:820px) and (min-height:640px){
  #project-portfolio{--pf-doc-h:clamp(156px,min(26.5vh,16.5vw),222px)}
  #project-portfolio .pf-feature{padding-top:clamp(16px,2.2vh,22px);padding-bottom:17px}
  #project-portfolio .pf-head{margin-bottom:clamp(18px,2.6vh,28px)}
  #project-portfolio .pf-stats,#project-portfolio .pf-note{min-height:52px}
  #project-portfolio .pf-plate-body{padding-top:16px;padding-bottom:16px}
}

/* --------------------------------------------------------------------------
   5. ვიწრო ეკრანები
   -------------------------------------------------------------------------- */
@media (max-width:1099px){
  #project-portfolio .pf-doc{grid-template-columns:auto minmax(140px,1fr)}
  #project-portfolio .pf-file-meta{font-size:10px}
  #project-portfolio .pf-file-name{font-size:9px}
  #project-portfolio .pf-plate-body{padding-left:16px;padding-right:16px}
}

@media (max-width:899px){
  #project-portfolio{--pf-pad:clamp(18px,4vw,26px);--pf-doc-h:clamp(132px,17vw,180px)}
  #project-portfolio h3{max-width:none;font-size:clamp(25px,3.6vw,34px)}
  #project-portfolio .pf-docs{gap:clamp(18px,3vw,30px)}
  #project-portfolio .pf-doc{grid-template-columns:auto minmax(126px,1fr)}
  #project-portfolio .pf-plate{min-height:330px}
  #project-portfolio .pf-stats{flex-wrap:wrap;gap:12px 18px;min-height:0}
  #project-portfolio .pf-note{min-height:0}
}

/* ვიწრო ეკრანზე ორი დოკუმენტი ერთმანეთის ქვეშ ჩამოდის და ყდების სიგანე
   აღარ არის საერთო სიმაღლეზე მიბმული — თითოეულს თავისი პროპორცია რჩება,
   სიის სვეტს კი საკმარისი ადგილი. */
@media (max-width:760px){
  #project-portfolio .pf-docs{flex-direction:column;align-items:stretch;gap:clamp(16px,3vh,24px)}
  #project-portfolio .pf-doc{grid-template-columns:auto minmax(132px,1fr)}
  #project-portfolio .pf-doc-deck{border-left:0;border-top:1px solid var(--pf-line);padding:clamp(14px,2.4vh,20px) 0 0}
  #project-portfolio .pf-doc-brochure .pf-doc-cover{width:clamp(96px,17vw,132px)}
  #project-portfolio .pf-doc-deck .pf-doc-cover{width:clamp(150px,30vw,238px)}
  #project-portfolio .pf-doc-view{font-size:8.5px}
  #project-portfolio .pf-doc-view>span:first-child{white-space:normal;overflow:visible;text-overflow:clip}
}

@media (max-width:650px){
  #project-portfolio{border-radius:8px}
  #project-portfolio .pf-doc-brochure .pf-doc-cover{width:clamp(88px,27vw,124px)}
  #project-portfolio .pf-doc-deck .pf-doc-cover{width:clamp(138px,45vw,210px)}
  #project-portfolio .pf-topline{font-size:8.5px;gap:10px}
  #project-portfolio h3{font-size:clamp(22px,6.4vw,28px)}
  #project-portfolio .pf-plates{grid-template-columns:1fr}
  #project-portfolio .pf-plate{min-height:min(62vh,340px)}
  #project-portfolio .pf-plate+.pf-plate{border-left:0;border-top:1px solid #ffffff24}
  #project-portfolio .pf-stats{min-height:0}
  #project-portfolio .pf-note{min-height:0;max-width:none}
}

@media (prefers-reduced-motion:reduce){
  #project-portfolio *,#project-portfolio *:before,#project-portfolio *:after{transition:none!important}
  #project-portfolio .pf-plate:hover .pf-plate-img{transform:none}
}

@media print{
  #project-portfolio{break-inside:avoid;overflow:visible}
  #project-portfolio .pf-plate-img{position:static;height:180px}
}