/* ============================================================
   CASES GALLERY — в языке нового лендинга
   Волосяная сетка, mono-подписи, приглушённые превью.
   База (header/footer/canvas) — /assets/css/app.css
   ============================================================ */

.gal{position:relative;}

/* ---------------- hero ---------------- */
.gal-hero{padding-top:clamp(112px,15vh,190px);padding-bottom:clamp(24px,3vw,40px);}
.gal-hero__top{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;
  padding-bottom:clamp(10px,1.4vw,16px);border-bottom:1px solid var(--line);
}
.gal-kicker{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--plasma);
}
.gal-hero__note{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}

.gal-title{
  margin:clamp(16px,2.8vw,30px) 0 0;
  font-size:clamp(48px,9.6vw,150px);
  font-weight:250;line-height:.88;letter-spacing:-.05em;
}

.gal-hero__grid{display:grid;gap:clamp(22px,3vw,40px);margin-top:clamp(22px,3.4vw,40px);align-items:end;}
@media (min-width:960px){.gal-hero__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);}}
.gal-lead{font-size:clamp(15px,1.25vw,19px);line-height:1.6;color:var(--dim);max-width:62ch;}
.gal-lead b{color:var(--ivory);font-weight:500;}

.gal-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
@media (min-width:700px){.gal-stats{grid-template-columns:repeat(4,minmax(0,1fr));}}
.gal-stats div{background:var(--void);padding:clamp(12px,1.3vw,18px);}
.gal-stats b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(17px,1.9vw,26px);letter-spacing:-.03em;line-height:1.05;}
.gal-stats span{display:block;margin-top:6px;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);line-height:1.5;}

/* ---------------- filters ---------------- */
.gal-filters{
  position:sticky;top:0;z-index:15;
  background:rgba(6,7,10,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-block:1px solid var(--line);
}
.gal-filters__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:9px;}
.gal-chips{display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;min-width:0;}
.gal-chips::-webkit-scrollbar{display:none;}
.gal-chip{
  flex:0 0 auto;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border:1px solid transparent;padding:.72em 1em;
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.gal-chip:hover{color:var(--ivory);border-color:var(--line-strong);}
.gal-chip.is-active,.gal-chip[aria-pressed="true"]{background:var(--ivory);border-color:var(--ivory);color:var(--void);}
.gal-count{flex:0 0 auto;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;}

/* ---------------- grid ---------------- */
.gal-list{padding-block:clamp(22px,3vw,36px) clamp(44px,7vw,88px);}
.gal-grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
@media (min-width:720px){.gal-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1180px){.gal-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}

.gal-card{background:var(--void);min-width:0;transition:background .4s var(--ease);}
.gal-card[hidden]{display:none;}
.gal-card:hover{background:var(--deep);}
.gal-card__link{display:flex;flex-direction:column;height:100%;}

.gal-card__fig{position:relative;margin:0;overflow:hidden;background:var(--deep);border-bottom:1px solid var(--line);aspect-ratio:16/9;}
.gal-card__fig::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,10,.10) 0%,rgba(6,7,10,.02) 42%,rgba(6,7,10,.34) 100%);
  transition:opacity .55s var(--ease);
}
.gal-card:hover .gal-card__fig::after{opacity:.55;}
.gal-card__fig img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.7) brightness(.9) contrast(1.03);
  transform:scale(1.005);
  transition:filter .55s var(--ease),transform .8s var(--ease);
}
.gal-card:hover .gal-card__fig img,
.gal-card:focus-within .gal-card__fig img{filter:saturate(1) brightness(1) contrast(1);transform:scale(1.035);}

.gal-card__body{display:flex;flex-direction:column;gap:7px;padding:clamp(14px,1.5vw,20px);flex:1;}
.gal-card__meta{
  display:flex;justify-content:space-between;gap:10px;
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}
.gal-card__meta i{font-style:normal;color:var(--plasma);}

.gal-card__metric{
  font-family:var(--display);font-weight:300;
  font-size:clamp(19px,1.8vw,25px);letter-spacing:-.03em;line-height:1;
  margin-top:3px;color:var(--ivory);
  transition:color .35s ease;
}
.gal-card:hover .gal-card__metric{color:var(--plasma);}

.gal-card__title{
  font-family:var(--display);font-weight:300;
  font-size:clamp(15px,1.2vw,18px);line-height:1.22;letter-spacing:-.02em;
  text-transform:none;
}
.gal-card__text{
  font-size:clamp(12.5px,.92vw,14px);line-height:1.5;color:var(--dim);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.gal-card__go{
  margin-top:auto;padding-top:11px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  transition:color .3s ease;
}
.gal-card:hover .gal-card__go{color:var(--ivory);}
.gal-card:hover .gal-card__go .arrow{transform:translate(3px,-3px);}

.gal-nda{
  margin-top:clamp(18px,2.4vw,28px);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}

/* ---------------- sign ---------------- */
.gal-sign{border-top:1px solid var(--line);padding-block:clamp(36px,5.4vw,76px);}
.gal-sign__inner{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px 40px;}
.gal-sign__text{
  font-family:var(--display);font-weight:300;
  font-size:clamp(26px,4.4vw,56px);line-height:1.04;letter-spacing:-.03em;
}
.gal-sign__side{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:36ch;}
.gal-sign__side p{font-size:14px;line-height:1.5;color:var(--dim);}

.gal-btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:26px;
  min-height:52px;padding:0 20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--plasma);border:1px solid var(--plasma);color:var(--void);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.gal-btn:hover{background:var(--ivory);border-color:var(--ivory);color:var(--void);}
.gal-btn:hover .arrow{transform:translateX(4px);}

/* ---------------- reveal ---------------- */
html.js [data-gal-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
html.js [data-gal-reveal].is-in{opacity:1;transform:none;}
html:not(.js) [data-gal-reveal]{opacity:1;transform:none;}

/* ---------------- small screens ---------------- */
@media (max-width:560px){
  .gal-hero{padding-top:clamp(96px,13vh,120px);}
  .gal-title{font-size:clamp(46px,15vw,84px);}
  .gal-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gal-count{display:none;}
  .gal-filters__inner{padding-block:8px;}
  .gal-card__text{-webkit-line-clamp:4;}
  .gal-sign__inner{align-items:flex-start;}
  .gal-btn{width:100%;}
}

@media (prefers-reduced-motion:reduce){
  html.js [data-gal-reveal]{opacity:1!important;transform:none!important;transition:none!important;}
  .gal-card__fig img{transition:none!important;}
  .gal-card:hover .gal-card__fig img{transform:none;}
}
.reduced-motion [data-gal-reveal]{opacity:1!important;transform:none!important;transition:none!important;}