/* Native static-site adaptation of the supplied React Bits gallery behavior. */
.project-gallery { margin: 34px 0; scroll-margin-top: 105px; }
.gallery-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.gallery-heading h4 { font-size:19px; margin:0; }
.gallery-heading p { margin:0; font-size:11px; color:var(--muted); }
.gallery-help-mobile { display:none; }
.accordion-gallery {
  --ag-gap:10px;
  --ag-grow:4.3333;
  display:flex;
  gap:var(--ag-gap);
  width:100%;
  height:360px;
  perspective:1400px;
  list-style:none;
  padding:0;
  margin:0;
}
.ag-panel {
  position:relative;
  flex:1 1 0;
  min-width:0;
  min-height:0;
  border-radius:20px;
  background:#15131b;
  border:0;
  overflow:hidden;
  transform:rotateY(var(--ag-tilt,0deg));
  transition:flex-grow .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), border-color .3s;
}
.ag-panel::before { content:''; position:absolute; inset:0; z-index:3; border:1px solid #34323d; border-radius:inherit; pointer-events:none; }
.ag-panel.is-active { flex-grow:var(--ag-grow); transform:rotateY(0); }
.ag-panel.is-active::before { border-color:#ad8dcb; }
.ag-select {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  background:none;
  color:white;
  text-align:left;
  cursor:pointer;
  border-radius:inherit;
}
.ag-select:focus-visible { outline:3px solid #d5b5ef; outline-offset:-4px; }
.ag-media { position:absolute; inset:0; display:block; }
.ag-media img {
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  filter:grayscale(1) brightness(.62);
  transform:scale(1.04) translateX(var(--ag-shift,0px));
  transition:filter .6s,transform .6s;
  user-select:none;
  -webkit-user-drag:none;
}
.ag-panel.is-active .ag-media { inset:10px 10px 76px; }
.ag-panel.is-active .ag-media img { object-fit:contain; filter:none; transform:none; }
.ag-panel:not(.is-active) .ag-select::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#07060c22 30%,#07060cd9);
  pointer-events:none;
}
.ag-number { position:absolute; top:13px; left:14px; font-size:11px; letter-spacing:.1em; z-index:1; color:white; text-shadow:0 1px 5px black; }
.ag-panel.is-active .ag-number { padding:2px 7px; border-radius:8px; background:#111019c9; }
.ag-caption { position:absolute; bottom:17px; left:16px; right:16px; z-index:1; }
.ag-caption strong { display:block; font-size:14px; font-weight:600; line-height:1.45; }
.ag-caption small { display:none; font-size:10px; color:#b1aaba; line-height:1.5; margin-top:5px; }
.ag-panel:not(.is-active) .ag-caption { writing-mode:vertical-rl; right:auto; white-space:nowrap; }
.ag-panel:not(.is-active) .ag-caption strong { font-size:12px; letter-spacing:.1em; }
.ag-panel.is-active .ag-caption { right:112px; }
.ag-panel.is-active .ag-caption strong { border-left:3px solid #c7a4e3; padding-left:10px; }
.ag-panel.is-active .ag-caption small { display:block; padding-left:13px; }
.ag-view {
  display:none;
  position:absolute;
  right:15px;
  bottom:16px;
  z-index:2;
  padding:8px 11px;
  border:1px solid #65596e;
  border-radius:999px;
  color:#e3d9ed;
  font-size:11px;
  line-height:1.6;
  min-height:36px;
  align-items:center;
  gap:6px;
  cursor:zoom-in;
  background:#15131b;
}
.ag-panel.is-active .ag-view { display:inline-flex; }
.ag-view:hover { background:#34243f; }
.gallery-source { font-size:11px; color:var(--muted); margin:15px 0 0; }
.fitness-explanations { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin:32px 0 0; }
.fitness-explanations h4 { font-size:16px; margin-bottom:10px; }
.fitness-explanations p { font-size:13px; color:var(--muted); margin-bottom:0; }
.gallery-evaluation { display:grid; grid-template-columns:220px 1fr; gap:30px; border-top:1px solid var(--line); padding-top:25px; margin-top:30px; }
.gallery-evaluation h4 { font-size:18px; }
.gallery-evaluation p { font-size:13px; color:var(--muted); margin:0 0 12px; }
/* Without JavaScript every screenshot and original link remains usable. */
.accordion-gallery:not(.is-ready) { height:auto; flex-wrap:wrap; perspective:none; }
.accordion-gallery:not(.is-ready) .ag-panel { flex:1 1 260px; height:340px; transform:none; }
.accordion-gallery:not(.is-ready) .ag-media { inset:10px 10px 76px; }
.accordion-gallery:not(.is-ready) .ag-media img { object-fit:contain; filter:none; transform:none; }
.accordion-gallery:not(.is-ready) .ag-select::after { display:none; }
.accordion-gallery:not(.is-ready) .ag-caption { writing-mode:horizontal-tb; right:112px; white-space:normal; }
.accordion-gallery:not(.is-ready) .ag-view { display:inline-flex; }
@media(max-width:1000px) {
  .accordion-gallery { height:330px; }
  .fitness-explanations { grid-template-columns:1fr 1fr; gap:25px; }
  .gallery-heading { display:block; }
  .gallery-heading p { margin-top:8px; }
}
@media(max-width:600px) {
  .project-gallery { margin:28px 0; }
  .gallery-heading h4 { font-size:17px; }
  .gallery-help-desktop { display:none; }
  .gallery-help-mobile { display:inline; }
  .accordion-gallery { flex-direction:column; height:auto; perspective:none; gap:8px; }
  .accordion-gallery .ag-panel { flex:none; height:66px; border-radius:15px; transform:none; transition:height .45s cubic-bezier(.22,1,.36,1); }
  .accordion-gallery .ag-panel.is-active { height:300px; }
  .ag-panel:not(.is-active) .ag-number { left:15px; top:22px; }
  .ag-panel:not(.is-active) .ag-caption { writing-mode:horizontal-tb; left:48px; right:15px; top:21px; bottom:auto; }
  .ag-panel:not(.is-active) .ag-caption strong { font-size:13px; letter-spacing:0; }
  .ag-panel:not(.is-active) .ag-media { left:60%; }
  .ag-panel:not(.is-active) .ag-select::after { background:linear-gradient(90deg,#15131b 25%,#15131b66); }
  .ag-caption { left:13px; bottom:16px; }
  .ag-panel.is-active .ag-caption { right:118px; }
  .ag-caption strong { font-size:13px; }
  .ag-caption small { font-size:9px; }
  .ag-view { min-height:44px; padding:9px 12px; right:12px; bottom:12px; }
  .fitness-explanations { gap:22px 20px; }
  .fitness-explanations h4 { font-size:14px; }
  .fitness-explanations p { font-size:12px; }
  .gallery-evaluation { grid-template-columns:1fr; gap:5px; }
  .accordion-gallery:not(.is-ready) .ag-panel { flex:none; height:300px; }
}
@media(prefers-reduced-motion:reduce) {
  .accordion-gallery .ag-panel,.ag-media img { transition:none; transform:none; }
}
@media print {
  .accordion-gallery.is-ready { flex-wrap:wrap; flex-direction:row; height:auto; perspective:none; }
  .accordion-gallery.is-ready .ag-panel { flex:1 1 260px; height:300px; transform:none; break-inside:avoid; }
  .ag-media,.ag-panel.is-active .ag-media { inset:10px 10px 60px; }
  .ag-media img { object-fit:contain; filter:none; transform:none; }
  .ag-select::after,.ag-number,.ag-view { display:none!important; }
  .ag-panel:not(.is-active) .ag-caption { writing-mode:horizontal-tb; right:15px; white-space:normal; }
  .ag-caption { left:15px; right:15px; }
}