﻿/* ================== FEATURED / RECENT WORK ================== */
.featured {
    overflow: hidden; width: 1300px; margin: 0 auto;
    display: flex; gap: 15px; align-items: flex-start; justify-content: center;
    transition: 0.3s ease;
}

.featured-left,
.featured-right { display: flex; flex-direction: column; gap: 16px; }

.feature {
    width: 560px; height: 120px;
}
.feature.right-top { height: 165px; }
.feature.right-bottom { height: 210px; }

.feature img {
    transition: 0.3s ease; width: 100%; height: 100%; object-fit: cover; border-radius: 20px;
}
.feature:hover img { transform: scale(1.04); }

/* RECENT WORK GRID */
.grid { display: grid; grid-template-columns: repeat(6, 180px); justify-content: center; gap: 10px; margin-top: 10px; }

.card { width: 180px; height: 160px; }
.card img { overflow: hidden; transition: 0.3s ease; border-radius: 15px; width: 100%; height: 100%; object-fit: cover; }
.card:hover img { transform: scale(1.05); }

.gallery-trigger { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; padding: 0; margin: 0; display: block; cursor: pointer; appearance: none; -webkit-appearance: none; overflow: hidden; border-radius: 15px; }

.recent-project[data-page="2"] { display: none; }

.recent-work-grid { transition: transform 0.35s ease, opacity 0.35s ease; }

.recent-work-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; }
.recent-work-arrow { background: none; border: none; color: #D4A94F; font-size: 34px; cursor: pointer; transition: 0.25s ease; }
.recent-work-arrow:hover { color: #f2c86b; transform: scale(1.12); }

.recent-work-center { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.recent-work-label { color: #D4A94F; font-size: 14px; letter-spacing: 0.5px; }
.recent-work-page { color: #8f7a45; font-size: 12px; }

/* ================== GALLERY MODAL ================== */
.gallery-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.96); z-index: 999999; display: none; align-items: center; justify-content: center; max-width: 100vw; overflow: hidden; }
.gallery-modal.active { display: flex; }

.gallery-content { max-width: 100vw; max-height: 100vh; overflow: hidden; text-align: center; position: relative; z-index: 1; }
#galleryImage { max-width: 100%; max-height: 60vh; object-fit: contain; display: block; cursor: zoom-in; transition: transform 0.15s ease; transform: scale(1); transform-origin: center center; }
#galleryImage.zoomed { cursor: zoom-out; transform: scale(1.8); }

.gallery-close { z-index: 2; position: absolute; top: 24px; right: 32px; background: none; border: none; color: #D4A94F; font-size: 42px; cursor: pointer; }
.gallery-arrow { z-index: 2; position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #D4A94F; font-size: 60px; cursor: pointer; }
.gallery-prev { left: 32px; }
.gallery-next { right: 32px; }
.gallery-thumbs { display: flex; gap: 15px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }
.gallery-thumbs img { width: 160px; height: 90px; object-fit: cover; opacity: 0.45; cursor: pointer; }
.gallery-thumbs img.active { opacity: 1; outline: 2px solid #D4A94F; }