/* Transformations layout (type, badges, captions, slider and lightbox come from site.css) */

.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:48px 0 30px;}
.pill{white-space:nowrap;font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;padding:11px 22px;border:1px solid var(--fog);background:var(--white);color:var(--charcoal);cursor:pointer;transition:.2s;}
.pill[aria-pressed="true"]{background:var(--charcoal);border-color:var(--charcoal);color:var(--white);}
.pill:hover:not([aria-pressed="true"]){border-color:var(--bronze);color:var(--bronze);}

.grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:360px;gap:14px;grid-auto-flow:dense;}
.tcard{position:relative;overflow:hidden;display:block;cursor:pointer;border:0;padding:0;background:#3E4349;text-align:left;font:inherit;}
.layer{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity .55s ease;}
.layer.before{opacity:0;}
.tcard:focus-visible .layer.after{opacity:0;}
.tcard:focus-visible .layer.before{opacity:1;}
.tcard.gallery:focus-visible .layer.after{opacity:1;}
.tcard .badge{transition:opacity .4s ease;}
.tcard .before-tag{opacity:0;}
.tcard:focus-visible .after-tag{opacity:0;}
.tcard:focus-visible .before-tag{opacity:1;}
/* Hover previews only where a mouse can hover, so phones never download the hover photos */
@media (hover:hover){
  .tcard:hover .layer.after{opacity:0;}
  .tcard:hover .layer.before{opacity:1;}
  .tcard.gallery:hover .layer.after{opacity:1;}
  .tcard:hover .after-tag{opacity:0;}
  .tcard:hover .before-tag{opacity:1;}
  .tcard.gallery:hover .after-tag{opacity:1;}
}

.more{text-align:center;padding:var(--sec-sm) 0 var(--sec);margin-top:var(--sec-sm);border-top:1px solid var(--fog);}
.more h2{margin-bottom:22px;}

/* Project pop-up */
.modal{position:fixed;inset:0;z-index:100;background:rgba(28,26,23,.6);display:none;align-items:center;justify-content:center;padding:24px;}
.modal.open{display:flex;}
.mcard{background:var(--white);width:min(620px,100%);max-height:94vh;overflow:auto;position:relative;box-shadow:0 30px 80px -20px rgba(0,0,0,.55);}
.mclose{position:absolute;top:14px;right:14px;z-index:7;width:34px;height:34px;background:rgba(252,251,247,.92);border:none;font-size:18px;color:var(--charcoal);cursor:pointer;}
.mslider{width:100%;aspect-ratio:16/11;--pos:52%;background:#2E2C33;}
.mafter,.mbefore{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;}
.mslider .lbl-a{right:60px;}
.mzoom{position:absolute;bottom:14px;right:14px;z-index:6;display:flex;align-items:center;gap:6px;padding:8px 14px;background:rgba(28,26,23,.62);border:1px solid rgba(252,251,247,.35);color:var(--white);cursor:pointer;backdrop-filter:blur(4px);}
.mzoom:hover{background:rgba(28,26,23,.85);}
.gnav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:44px;height:44px;border:1px solid rgba(252,251,247,.55);background:rgba(28,26,23,.45);color:var(--white);font-size:20px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;}
.gnav:hover{background:rgba(28,26,23,.8);}
.gnav.prev{left:16px;} .gnav.next{right:16px;}
.gdots{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:6;display:none;gap:8px;}
.gdots button{width:7px;height:7px;border-radius:50%;background:rgba(252,251,247,.45);cursor:pointer;border:0;padding:0;}
.gdots button[aria-current="true"]{background:var(--white);}
.mbody{padding:26px 26px 8px;}
.mbody .caps{color:var(--bronze);margin-top:6px;}
.mbody .t-small{margin:12px 0 22px;}
.mnav{display:flex;justify-content:space-between;align-items:center;padding:16px 26px 22px;border-top:1px solid var(--fog);}
.mnav button{background:none;border:none;cursor:pointer;color:var(--bronze);display:flex;align-items:center;gap:6px;}
.mnav button:hover{color:var(--charcoal);}

@media(max-width:1080px){.grid{grid-auto-rows:340px;}}
@media(max-width:900px){
  .grid{grid-template-columns:1fr;grid-auto-rows:300px;}
  .grid>*{grid-column:1 / -1 !important;}
  .filters{gap:8px;}
  .pill{padding:10px 16px;}
  .modal{padding:10px;}
  .mnav{padding:14px 18px 18px;}
}