/* Mason Pros Inc. gallery styles. Include after your main stylesheet. */
:root { --mp-orange:var(--orange,#ff7f00); --mp-warm:var(--cream,#fff9ef); --mp-ink:var(--charcoal,#201b17); --mp-muted:#6f6963; --mp-line:rgba(32,27,23,.14); }
.projects-page,.project-detail-page { color:var(--mp-ink); }
.projects-page .container,.project-detail-page .container { width:min(100% - 40px,1200px); margin-inline:auto; }
.projects-page .section,.project-detail-page .section { padding-block:clamp(48px,7vw,88px); }
.projects-hero,.project-detail-hero { position:relative; isolation:isolate; overflow:hidden; padding:clamp(72px,10vw,130px) 0; color:#fff; background:#201b17; }
.projects-hero:before,.project-detail-hero:before { position:absolute; z-index:-1; inset:0; content:""; background:linear-gradient(90deg,rgba(20,16,13,.9),rgba(20,16,13,.58)),url("../assets/images/texture-brick.webp") center/cover; }
.page-hero__content { position:relative; z-index:1; }
.page-hero__content h1 { max-width:900px; margin:8px 0 16px; font-size:clamp(2.4rem,6vw,5rem); line-height:1.04; }
.page-hero__content>p:last-child { max-width:700px; margin-bottom:0; font-size:clamp(1rem,1.8vw,1.2rem); line-height:1.7; }
.eyebrow { margin:0 0 10px; color:var(--mp-orange); font-size:.78rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.projects-intro { max-width:760px; margin-bottom:42px; }
.projects-intro h2,.project-detail__intro h2,.project-detail__cta h2 { margin:0 0 14px; font-size:clamp(1.8rem,3.5vw,2.8rem); line-height:1.12; }
.projects-intro>p:last-child,.project-detail__intro>p,.project-detail__cta p { color:var(--mp-muted); line-height:1.75; }
.project-preview { padding:30px 0 38px; border-bottom:1px solid var(--mp-line); }
.project-preview:first-of-type { padding-top:0; }
.project-preview__heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:18px; }
.project-preview__heading h3 { margin:0; font-size:clamp(1.35rem,2.4vw,2rem); line-height:1.2; }
.project-preview__text-link,.project-preview__mobile-link,.back-link { color:var(--mp-orange); font-weight:750; text-decoration:none; }
.project-preview__text-link { flex:0 0 auto; padding-bottom:3px; }
.project-preview__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.project-thumb { display:block; overflow:hidden; aspect-ratio:4/3; border-radius:3px; background:#e9e2d8; }
.project-thumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.project-thumb:hover img { transform:scale(1.045); }
.project-thumb--placeholder { display:grid; place-items:center; border:1px dashed #bdb3a7; color:#766d64; text-decoration:none; }
.project-preview__mobile-link { display:none; margin-top:16px; }
.back-link { display:inline-block; margin-bottom:28px; color:#fff; }
.project-detail__intro { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:30px; }
.project-detail__intro>p { max-width:430px; margin:0; }
.project-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.project-gallery__item { position:relative; display:block; overflow:hidden; width:100%; padding:0; aspect-ratio:4/3; border:0; border-radius:3px; background:#e9e2d8; cursor:zoom-in; }
.project-gallery__item img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.project-gallery__item:hover img { transform:scale(1.04); }
.project-gallery__zoom { position:absolute; right:12px; bottom:12px; display:grid; width:36px; height:36px; place-items:center; border-radius:50%; color:#fff; background:var(--mp-orange); font-size:1.5rem; opacity:0; }
.project-gallery__item:hover .project-gallery__zoom { opacity:1; }
.project-detail__cta { margin-top:clamp(48px,8vw,90px); padding:clamp(28px,5vw,54px); text-align:center; background:var(--mp-warm); }
.project-detail__cta p { margin:0 auto 24px; }
.button-primary { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:13px 22px; border:2px solid var(--mp-orange); border-radius:2px; color:#fff; background:var(--mp-orange); font-weight:800; text-decoration:none; }
.button-primary:hover { color:var(--mp-orange); background:transparent; }
.lightbox { position:fixed; z-index:9999; inset:0; display:none; align-items:center; justify-content:center; padding:64px 76px; color:#fff; background:rgba(10,9,8,.96); }
.lightbox.is-open { display:flex; }
.lightbox__figure { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; margin:0; min-width:0; min-height:0; }
.lightbox__image { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100% - 34px); object-fit:contain; user-select:none; }
.lightbox__counter { min-height:24px; padding-top:12px; color:#e7e0d8; font-size:.9rem; text-align:center; }
.lightbox__close,.lightbox__nav { position:absolute; z-index:2; display:grid; place-items:center; border:0; color:#fff; background:rgba(255,255,255,.12); cursor:pointer; }
.lightbox__close:hover,.lightbox__nav:hover { background:var(--mp-orange); }
.lightbox__close { top:18px; right:22px; width:48px; height:48px; border-radius:50%; font-size:2.1rem; }
.lightbox__nav { top:50%; width:48px; height:64px; border-radius:3px; font-size:1.2rem; transform:translateY(-50%); }
.lightbox__nav--prev { left:18px; } .lightbox__nav--next { right:18px; }
body.lightbox-open { overflow:hidden; }
@media(max-width:900px) { .project-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .project-preview__grid { gap:10px; } .lightbox { padding:58px 60px; } }
@media(max-width:600px) {
 .projects-page .container,.project-detail-page .container { width:min(100% - 28px,1200px); }
 .project-preview { padding:25px 0 30px; } .project-preview__heading { display:block; margin-bottom:14px; }
 .project-preview__text-link { display:none; } .project-preview__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
 .project-preview__mobile-link { display:inline-block; } .project-detail__intro { display:block; }
 .project-detail__intro>p { margin-top:12px; } .project-gallery { gap:9px; }
 .lightbox { padding:56px 12px 54px; } .lightbox__nav { top:auto; bottom:10px; width:46px; height:42px; transform:none; }
 .lightbox__nav--prev { left:calc(50% - 52px); } .lightbox__nav--next { right:calc(50% - 52px); }
 .lightbox__image { max-height:calc(100% - 28px); }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }