/* =====================================================================
   Shared project-gallery + lightbox styles  (andrewstollmeyer.com)
   Used by every project detail page. Self-contained, no dependencies.
   ===================================================================== */

/* ---- Uniform gallery layout (mirrors the newest project pages) ------ */
.attp-wrap{max-width:1120px;margin:0 auto;padding:56px 24px 8px;box-sizing:border-box;}
.attp-wrap h2{text-align:center;font-weight:700;margin:0 0 22px;line-height:1.12;
  font-size:clamp(28px,4.4vw,44px);}
.attp-lead{max-width:820px;margin:0 auto 40px;text-align:center;line-height:1.62;
  font-size:clamp(15px,1.55vw,18px);opacity:.9;}
.attp-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 auto;}
@media(max-width:999px){.attp-gallery{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.attp-gallery{grid-template-columns:1fr;}}
.attp-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;
  box-shadow:0 6px 22px rgba(0,0,0,.16);}
.attp-video{margin:34px auto 6px;text-align:center;}
.attp-video video{display:inline-block;width:100%;max-width:960px;max-height:82vh;
  border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.22);background:#000;}
.attp-video--embed{position:relative;width:100%;max-width:960px;margin:0 auto;aspect-ratio:16/9;}
.attp-video--embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.22);background:#000;}
.attp-actions{text-align:center;margin:50px 0 8px;}
.attp-actions a{display:inline-block;padding:14px 34px;border-radius:999px;
  background:#1b1b1b;color:#fff;text-decoration:none;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-size:14px;transition:transform .15s ease,opacity .15s ease;}
.attp-actions a:hover{transform:translateY(-1px);opacity:.88;}
@media (prefers-color-scheme: dark){
  .attp-actions a{background:#f2f2f2;color:#111;}
}

/* ---- Hover affordance on any clickable gallery media ---------------- */
.attp-gallery img,
.attp-video video,
.att-uniform-img{
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease;
}
.attp-gallery img:hover,
.attp-video video:hover,
.att-uniform-img:hover{
  transform:scale(1.03);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}

/* ---- Uniform image styling for the SolidWorks collage page ---------- */
.att-uniform-img{
  border-radius:12px !important;
  box-shadow:0 6px 22px rgba(0,0,0,.16);
}

/* ===================================================================== */
/* Lightbox modal overlay                                                */
/* ===================================================================== */
.attp-lb{
  position:fixed; inset:0; z-index:2147483000;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.88);
  box-sizing:border-box; padding:24px;
}
.attp-lb.is-open{display:flex;}
body.attp-lb-open{overflow:hidden;}

/* media + side caption panel row */
.attp-lb__content{
  display:flex; align-items:center; justify-content:center;
  gap:22px;
  max-width:calc(100vw - 160px); max-height:90vh;
  width:auto;
}
.attp-lb__stage{
  position:relative;
  flex:0 1 auto; min-width:0;
  max-height:88vh;
  display:flex; align-items:center; justify-content:center;
}

/* Side caption panel (display + edit modes) */
.attp-lb__panel{
  flex:0 0 auto;
  width:clamp(300px,26vw,360px);
  max-height:82vh;
  display:flex; flex-direction:column;
  color:#f2f2f2;
  box-sizing:border-box;
}
.attp-lb__caption{
  overflow:auto;
  max-height:82vh;
  padding:20px 22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  font-size:15px; line-height:1.6;
  white-space:pre-wrap; word-wrap:break-word;
}
.attp-lb--nopanel .attp-lb__content{max-width:92vw;}

/* Authoring-mode editor */
.attp-lb__panel-label{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  opacity:.7; margin:0 2px 8px;
}
.attp-lb__ta{
  flex:1 1 auto;
  min-height:220px; max-height:70vh;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08); color:#fff;
  font:15px/1.6 inherit;
  resize:vertical; box-sizing:border-box;
}
.attp-lb__ta:focus{outline:2px solid #6aa8ff; outline-offset:1px;}
.attp-lb__export{
  margin-top:12px; padding:11px 16px;
  border:none; border-radius:999px; cursor:pointer;
  background:#f2f2f2; color:#111; font-weight:600;
  font-size:13px; letter-spacing:.04em;
}
.attp-lb__export:hover{opacity:.9;}
.attp-lb__media{
  max-width:100%; max-height:88vh;
  width:auto; height:auto;
  border-radius:10px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  background:#000; display:block;
}
img.attp-lb__media{object-fit:contain;}

.attp-lb__btn{
  position:absolute;
  background:rgba(20,20,20,.60); color:#fff; border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  border-radius:999px; z-index:2;
  transition:background .15s ease, transform .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.attp-lb__btn:hover{background:rgba(0,0,0,.92);}
.attp-lb__btn:focus-visible{outline:2px solid #fff; outline-offset:3px;}

.attp-lb__close{top:16px; right:18px; width:46px; height:46px; font-size:28px; line-height:1;}
.attp-lb__nav{top:50%; transform:translateY(-50%); width:54px; height:54px; font-size:30px; line-height:1;}
.attp-lb__nav:hover{transform:translateY(-50%) scale(1.07);}
.attp-lb__prev{left:18px;}
.attp-lb__next{right:18px;}

@media (max-width:700px){
  .attp-lb{padding:10px;}
  .attp-lb__close{top:6px; right:6px; width:42px; height:42px; font-size:24px;}
  .attp-lb__nav{width:42px; height:42px; font-size:26px;}
  .attp-lb__prev{left:4px;}
  .attp-lb__next{right:4px;}

  /* stack the caption panel BELOW the media on narrow screens */
  .attp-lb__content{
    flex-direction:column; gap:12px;
    max-width:96vw; max-height:92vh;
  }
  .attp-lb__stage{max-height:62vh;}
  .attp-lb__media{max-width:96vw; max-height:62vh;}
  .attp-lb__panel{width:100%; max-height:26vh;}
  .attp-lb__caption{max-height:26vh; padding:14px 16px; font-size:14px;}
  .attp-lb__ta{min-height:120px; max-height:24vh;}
}

/* ===================================================================== */
/* AUTHORING MODE (local only, ?edit=1) — never shipped/visible normally  */
/* ===================================================================== */
.attp-edit-fab{
  position:fixed; right:16px; bottom:16px; z-index:2147483200;
  padding:12px 18px; border:none; border-radius:999px; cursor:pointer;
  background:#1b6ef3; color:#fff; font-weight:700; font-size:13px;
  letter-spacing:.04em; box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.attp-edit-fab:hover{background:#155fd4;}
.attp-edit-fab:focus-visible{outline:2px solid #fff; outline-offset:2px;}

.attp-ex{
  position:fixed; inset:0; z-index:2147483600; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.72); padding:24px; box-sizing:border-box;
}
.attp-ex.is-open{display:flex;}
.attp-ex__box{
  width:min(720px,94vw); max-height:88vh; display:flex; flex-direction:column;
  background:#1c1c1e; color:#f2f2f2; border-radius:14px; padding:22px 24px;
  box-shadow:0 24px 70px rgba(0,0,0,.6); box-sizing:border-box;
}
.attp-ex__title{font-size:18px; font-weight:700; margin-bottom:6px;}
.attp-ex__help{font-size:13px; line-height:1.5; opacity:.82; margin:0 0 14px;}
.attp-ex__ta{
  flex:1 1 auto; min-height:260px;
  width:100%; box-sizing:border-box; resize:vertical;
  padding:14px 16px; border-radius:10px;
  border:1px solid rgba(255,255,255,.2);
  background:#101013; color:#e6e6e6;
  font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre; overflow:auto;
}
.attp-ex__row{display:flex; align-items:center; gap:12px; margin-top:14px;}
.attp-ex__btn{
  padding:10px 18px; border:none; border-radius:999px; cursor:pointer;
  background:#f2f2f2; color:#111; font-weight:600; font-size:13px;
}
.attp-ex__btn--ghost{background:transparent; color:#f2f2f2; border:1px solid rgba(255,255,255,.35);}
.attp-ex__btn:hover{opacity:.9;}
.attp-ex__status{font-size:13px; opacity:.85;}

/* "Click any image for more information" hint — added by JS only on pages
   that have published descriptions. */
.attp-hint{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0 auto 22px; max-width:820px; padding:0 16px; box-sizing:border-box;
  font-size:14px; line-height:1.4; color:#5b5b5b; text-align:center;
}
.attp-hint__i{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; border:1.5px solid currentColor;
  font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700;
  font-size:12px; line-height:1;
}