/* Afazari Parts — "Our Work" page only: the photo grid and the full-size viewer.
   styles.css supplies the shared header, footer, buttons and filter chips. */

.work-sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
[hidden]{display:none !important;}
.shop-hero h1.work-title{max-width:24ch;}

/* ---------- photo grid ---------- */
.work-feed{padding:48px 0 96px;}
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.work-status{
  grid-column:1/-1; padding:60px 24px; text-align:center; color:var(--ink-dim);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg);
}
.work-status a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;}
.work-more{display:flex; justify-content:center; margin-top:40px;}

.work-tile{
  position:relative; display:block; aspect-ratio:1 / 1; overflow:hidden;
  border-radius:var(--radius); background:var(--panel); color:#fff;
}
.work-tile img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease;}
.work-tile:hover img{transform:scale(1.04);}
/* before & after: the two photos side by side */
.work-tile-split{display:grid; grid-template-columns:1fr 1fr; gap:2px; width:100%; height:100%; background:var(--bg);}
.work-tile-icon{position:absolute; top:10px; right:10px; width:24px; height:24px; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.65));}
.work-tile-icon svg{width:24px; height:24px;}
.work-tile-cap{
  position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:2px; text-align:left;
  padding:34px 12px 11px; background:linear-gradient(transparent, rgba(15,12,9,0.85));
  opacity:0; transition:opacity .15s ease;
}
.work-tile-cap strong{
  font-size:14px; font-weight:600; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.work-tile-cap span{font-size:12px; color:rgba(255,255,255,0.8);}
.work-tile:hover .work-tile-cap, .work-tile:focus-visible .work-tile-cap{opacity:1;}
/* touch screens have no hover, so keep the title visible */
@media (hover:none){
  .work-tile-cap{opacity:1;}
}

/* ---------- full-size viewer ---------- */
html.lb-open{overflow:hidden;}
.lb{
  width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:transparent; color:var(--ink); overflow:hidden;
}
.lb::backdrop{background:rgba(10,8,6,0.9);}

.lb-shell{
  --lb-maxh:calc(100vh - 48px);
  position:absolute; top:24px; bottom:24px; left:0; right:0; margin:0 auto; width:min(1180px, calc(100% - 140px));
  display:grid; grid-template-columns:minmax(0,1fr) 360px;
  background:var(--panel); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
@supports (height:100dvh){
  .lb-shell{--lb-maxh:calc(100dvh - 48px);}
}
.lb-media{position:relative; background:#000; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0;}
/* The frame takes the post's shape and is as large as the space allows, so a portrait post is never taller than the screen. */
.lb-frame{
  position:relative; aspect-ratio:var(--ar, 1.3333);
  width:min(100%, calc(var(--lb-maxh) * var(--ar, 1.3333)));
}
.lb-frame img{
  display:block; object-fit:contain; background-size:contain; background-position:center; background-repeat:no-repeat;
}
.lb-frame > img{position:absolute; inset:0; width:100%; height:100%;}

.lb-close, .lb-side{
  position:absolute; z-index:5; width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,0.16);
  transition:background .15s ease;
}
.lb-close:hover, .lb-side:hover:not(:disabled){background:rgba(255,255,255,0.3);}
.lb-close svg, .lb-side svg{width:22px; height:22px;}
.lb-close{top:12px; right:12px;}
.lb-side{top:50%; transform:translateY(-50%);}
.lb-side-prev{left:13px;}
.lb-side-next{right:13px;}
.lb-side:disabled{opacity:0.3; cursor:default;}
.lb-close:focus-visible, .lb-side:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.lb-info{
  display:flex; flex-direction:column; gap:12px; padding:26px 24px; overflow-y:auto;
  border-left:1px solid var(--line); background:var(--panel);
}
.lb-meta{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-dim);}
.lb-vehicle{color:var(--accent); font-weight:600;}
.lb-info h2{font-size:24px; line-height:1.2;}
.lb-summary{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.lb-details{display:flex; flex-direction:column; gap:12px;}
.lb-details-toggle{display:none;}
.lb-caption{font-size:14.5px; color:var(--ink-dim); white-space:pre-line; overflow-wrap:anywhere;}
.lb-hint{font-size:12.5px; color:var(--ink-dim);}
.lb-ask{align-self:flex-start; margin-top:4px;}
.lb-postnav{display:none; gap:8px; margin-top:auto; padding-top:10px;}
.lb-postnav .btn{flex:1; justify-content:center; padding:10px 12px; font-size:13.5px;}
.lb-postnav .btn:disabled{opacity:0.4; cursor:default; transform:none; filter:none;}

/* photo set: native horizontal scroll-snap, so swiping works on phones */
.lb-track{
  position:absolute; inset:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; overscroll-behavior-x:contain;
}
.lb-track::-webkit-scrollbar{display:none;}
.lb-track img{flex:0 0 100%; width:100%; height:100%; scroll-snap-align:center; scroll-snap-stop:always;}
.lb-track:focus-visible{outline:2px solid var(--accent); outline-offset:-4px;}
.lb-count{
  position:absolute; top:12px; left:12px; z-index:3; pointer-events:none;
  font-size:12px; font-weight:600; color:#fff; background:rgba(15,12,9,0.7); padding:3px 10px; border-radius:999px;
}
.lb-nav{
  position:absolute; top:50%; z-index:3; transform:translateY(-50%); width:38px; height:38px; padding:0;
  border:0; border-radius:50%; cursor:pointer; background:rgba(15,12,9,0.7); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.lb-nav svg{width:18px; height:18px;}
.lb-nav[data-dir="-1"]{left:10px;}
.lb-nav[data-dir="1"]{right:10px;}
.lb-nav:disabled{visibility:hidden;}
.lb-nav:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.lb-dots{
  position:absolute; left:50%; bottom:10px; z-index:3; transform:translateX(-50%);
  display:flex; gap:2px; padding:2px 6px; border-radius:999px; background:rgba(15,12,9,0.55);
}
.lb-dot{width:20px; height:20px; border:0; padding:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.lb-dot::before{content:''; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.5);}
.lb-dot[aria-current="true"]::before{background:#fff;}
@media (hover:none){
  .lb-nav{display:none;}
}

/* before / after: an invisible full-size range input drives the divider, so touch, mouse and keyboard all work */
.lb-ba{--pos:50%; touch-action:pan-y;}
.lb-ba .ba-layer{position:absolute; inset:0; width:100%; height:100%;}
.lb-ba .ba-after{clip-path:inset(0 0 0 var(--pos));}
.ba-label{
  position:absolute; bottom:12px; z-index:2; pointer-events:none;
  font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.5px;
  color:#fff; background:rgba(15,12,9,0.7); padding:3px 10px; border-radius:var(--radius);
}
.ba-label-before{left:12px;}
.ba-label-after{right:12px;}
.ba-handle{
  position:absolute; top:0; bottom:0; left:var(--pos); z-index:3; width:2px; margin-left:-1px;
  background:#fff; box-shadow:0 0 0 1px rgba(15,12,9,0.35); pointer-events:none;
}
.ba-handle::after{
  content:''; position:absolute; top:50%; left:50%; width:40px; height:40px; margin:-20px 0 0 -20px;
  border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(15,12,9,0.45);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317130F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
  background-size:24px 24px; background-position:center; background-repeat:no-repeat;
}
.ba-range{
  position:absolute; inset:0; z-index:4; width:100%; height:100%; margin:0; padding:0;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent;
}
.ba-range::-webkit-slider-runnable-track{height:100%; background:transparent;}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none; width:1px; height:100%; background:transparent; border:0;}
.ba-range::-moz-range-track{height:100%; background:transparent;}
.ba-range::-moz-range-thumb{width:1px; height:100%; background:transparent; border:0;}
.lb-ba:has(.ba-range:focus-visible) .ba-handle::after{outline:2px solid var(--accent); outline-offset:3px;}

/* ---------- tablets and phones ---------- */
@media (max-width:900px){
  /* Keep the photo in the available viewport; details open only when requested. */
  .lb-shell{
    inset:0; width:100%; display:flex; flex-direction:column; overflow:hidden; border-radius:0; box-shadow:none;
    padding-top:calc(54px + env(safe-area-inset-top, 0px)); background:#000;
  }
  .lb-media{flex:1 1 0;}
  .lb-frame{width:100%; height:100%; aspect-ratio:auto;}
  .lb-info{
    border-left:0; border-top:1px solid var(--line); overflow-y:auto; flex:0 0 auto;
    max-height:48%; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); gap:8px;
  }
  .lb-info h2{font-size:18px; overflow-wrap:anywhere;}
  .lb-details-toggle{
    display:inline-flex; flex-shrink:0; align-items:center; min-height:44px; padding:6px 10px;
    border:1px solid var(--line); border-radius:var(--radius); background:transparent; color:var(--ink); cursor:pointer;
    font-size:13px;
  }
  .lb-details{display:none;}
  .lb-details-open .lb-details{display:flex;}
  .lb-side{display:none;}
  .lb-postnav{display:flex; margin:0; padding:0;}
  .lb-postnav .btn{min-height:44px; padding:6px 10px;}
  .lb-close{
    position:fixed; top:calc(5px + env(safe-area-inset-top, 0px));
    right:max(10px, env(safe-area-inset-right, 0px)); background:rgba(255,255,255,0.16);
  }
}
@media (max-width:1000px){
  .work-grid{gap:8px;}
}
@media (max-width:560px){
  .work-page header.site{position:relative;}
  .work-page .nav{padding:10px 16px; gap:12px;}
  .work-page .nav .brand{gap:6px;}
  .work-page .nav .brand img{width:28px; height:auto;}
  .work-page .nav .brand .name{font-size:17px;}
  .work-page .nav-call .btn-solid{min-height:44px; padding:8px 12px;}
  .work-page .shop-hero{padding:18px 0 16px;}
  .work-page .shop-hero .wrap{padding:0 16px;}
  .work-page .crumb{display:none;}
  .work-page .shop-hero h1{font-size:28px;}
  .work-page .shop-hero .sub{font-size:14px; margin-top:8px;}
  .work-page .filter-bar{padding:10px 0;}
  .work-page .filter-row{padding:0 16px; flex-wrap:nowrap; overflow-x:auto; gap:6px;}
  .work-page .filter-row .chip{flex-shrink:0; min-height:44px; padding:8px 12px; font-size:13px;}
  .work-page .filter-row .count{display:none;}
  .work-feed{padding:12px 0 48px;}
  .work-feed .wrap{padding:0;}
  .work-grid{grid-template-columns:minmax(0,1fr); gap:20px;}
  .work-tile{aspect-ratio:auto; border-radius:0; color:var(--ink);}
  .work-tile > img, .work-tile-split{aspect-ratio:var(--tile-ar, 4 / 3); height:auto;}
  .work-tile:hover img{transform:none;}
  .work-tile-icon{color:#fff;}
  .work-tile-cap{position:static; padding:10px 16px 12px; background:none; opacity:1; gap:3px;}
  .work-tile-cap strong{font-size:15px;}
  .work-tile-cap span{font-size:13px; color:var(--ink-dim);}
  .work-tile-icon{top:8px; right:8px;}
}