/* project-carousel.css — shared photo carousel + lightbox modal.
   Class names deliberately match the GAF Timberline page's inline carousel
   CSS (docs/services/gaf-timberline/index.html) so that page can swap onto
   this shared file mechanically later. */
.carousel{position:relative;background:#fff;border-radius:14px;padding:24px;border:1px solid var(--light-gray,#e8e5e0)}
.carousel-stage{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.carousel-image{aspect-ratio:4/3;border-radius:12px;background:var(--off-white,#f5f3ef);box-shadow:0 8px 24px rgba(0,0,0,.18);position:relative;overflow:hidden}
.carousel-image img{width:100%;height:100%;object-fit:cover;display:block}
.carousel-info h4{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;color:var(--navy-dark,#142a52);letter-spacing:.04em;margin-bottom:6px}
.carousel-info .meta{font-size:.78rem;color:#646c7a;margin-bottom:14px;font-variant-numeric:tabular-nums}
.carousel-info p{font-size:.92rem;color:#2a2a2a;line-height:1.65;margin-bottom:14px}
.carousel-controls{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.carousel-counter{font-size:.78rem;font-weight:700;color:var(--gray,#5d6673)}
.carousel-btns{display:flex;gap:8px}
.carousel-btn{background:#fff;border:2px solid var(--light-gray,#e8e5e0);border-radius:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy-dark,#142a52);font-weight:800;transition:all .15s}
.carousel-btn:hover:not(:disabled){border-color:var(--orange,#e8720c);color:#A64B00}
.carousel-btn:disabled{opacity:.35;cursor:not-allowed}
.carousel-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--light-gray,#e8e5e0)}
.carousel-thumb{width:42px;height:42px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .15s;flex-shrink:0;overflow:hidden;background:var(--off-white,#f5f3ef);padding:0;-webkit-appearance:none;appearance:none}
.carousel-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.carousel-thumb:hover{transform:scale(1.1)}
.carousel-thumb.is-active{border-color:var(--orange,#e8720c);transform:scale(1.1)}
@media(max-width:680px){.carousel-stage{grid-template-columns:1fr}}

/* Lightbox modal (Timberline modal pattern) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:2000;padding:20px}
.modal.is-open{display:flex}
.modal-card{background:#fff;border-radius:16px;max-width:560px;width:100%;overflow:hidden;position:relative}
.modal-card-wide{max-width:900px;max-height:calc(100vh - 40px);overflow-y:auto;padding:20px}
.modal-close{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.5);color:#fff;border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.4rem;line-height:1;z-index:1}
.modal-close:hover{background:rgba(0,0,0,.75)}
.pm-title{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--navy-dark,#142a52);letter-spacing:.04em;margin:0 44px 14px 4px}
@media(max-width:680px){.modal{padding:10px}.modal-card-wide{padding:12px;max-height:calc(100vh - 20px)}.pm-title{font-size:1.25rem}}