/* Youngcraft Ltd — Projects / Project Experience V2
   Keeps the landing page restrained while giving each project a useful detail page.
*/

.project-feature__media{position:relative;overflow:hidden}
.project-feature__photo-count{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;min-height:30px;padding:6px 10px;background:rgba(8,11,15,.86);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

.project-record__identity h2 a{color:inherit;text-decoration:none}
.project-record__identity h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.project-record__link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:var(--ink,#0b0f14);font-size:.72rem;font-weight:800;text-decoration:none}
.project-record__link span{transition:transform .18s ease}
.project-record__link:hover span{transform:translate(2px,-2px)}

.project-gallery-v2-section{padding-top:68px!important;padding-bottom:72px!important}
.project-gallery-v2-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:24px}
.project-gallery-v2-heading>div{max-width:760px}
.project-gallery-v2-heading__count{color:#7a7f84;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}

.project-gallery-v2{display:grid;gap:14px}
.project-gallery-v2__stage{position:relative;background:#111;min-height:0;overflow:hidden}
.project-gallery-v2__slide{margin:0;background:#fff}
.project-gallery-v2__slide[hidden]{display:none!important}
.project-gallery-v2__slide>button{display:block;width:100%;height:min(65vw,690px);min-height:460px;padding:0;border:0;background:#101215;cursor:zoom-in;overflow:hidden}
.project-gallery-v2__slide picture,.project-gallery-v2__slide img{display:block;width:100%;height:100%}
.project-gallery-v2__slide img{object-fit:cover;transform:none;transition:transform .35s ease}
.project-gallery-v2__slide>button:hover img{transform:scale(1.012)}
.project-gallery-v2__slide figcaption{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;padding:14px 16px;background:#fff;border:1px solid var(--line,#e5e7eb);border-top:0}
.project-gallery-v2__slide figcaption strong{font-size:.82rem}
.project-gallery-v2__slide figcaption span{max-width:720px;color:#727980;font-size:.72rem;line-height:1.55}

.project-gallery-v2__controls{position:absolute;right:16px;bottom:62px;z-index:4;display:flex;align-items:center;gap:0;background:rgba(8,11,15,.88);color:#fff;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.project-gallery-v2__controls button{width:42px;height:42px;border:0;background:transparent;color:#fff;cursor:pointer;font:inherit;font-size:1rem}
.project-gallery-v2__controls button:hover{background:rgba(255,255,255,.1)}
.project-gallery-v2__controls span{min-width:58px;text-align:center;font-size:.7rem;color:rgba(255,255,255,.78)}
.project-gallery-v2__controls b{color:#fff}

.project-gallery-v2__thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.project-gallery-v2__thumb{position:relative;aspect-ratio:16/10;padding:0;border:1px solid transparent;background:#e8e8e5;overflow:hidden;cursor:pointer;opacity:.68;transition:opacity .18s,border-color .18s}
.project-gallery-v2__thumb.is-active{border-color:#0b0f14;opacity:1}
.project-gallery-v2__thumb:hover{opacity:1}
.project-gallery-v2__thumb picture,.project-gallery-v2__thumb img{display:block;width:100%;height:100%}
.project-gallery-v2__thumb img{object-fit:cover}

.project-experience-back{padding:34px 0 72px;background:#fff}

@media (max-width:980px){
  .project-gallery-v2__slide>button{height:min(72vw,590px);min-height:390px}
  .project-gallery-v2__thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:680px){
  .project-gallery-v2-section{padding-top:48px!important;padding-bottom:50px!important}
  .project-gallery-v2-heading{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:18px}
  .project-gallery-v2__slide>button{height:62vw;min-height:240px}
  .project-gallery-v2__slide figcaption{display:block;padding:12px 13px}
  .project-gallery-v2__slide figcaption span{display:block;margin-top:6px}
  .project-gallery-v2__controls{right:10px;bottom:70px}
  .project-gallery-v2__thumbs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .project-feature__photo-count{right:10px;bottom:10px}
}