/* Purpose: Single Project detail page (single-project.php, Figma 794:756). Depends on
   room-landing.css for shared .rl-eyebrow / .rl-contact / .rl-form / .container tokens. */

/* ===================================================================
   Overview head
   =================================================================== */
.proj-head { background: var(--color-bg); }
.proj-head__inner { display: flex; flex-direction: column; gap: 24px; padding-block: clamp(40px, 5vw, 72px); }
.proj-head__title { font-family: var(--font-display); font-weight: 400; text-transform: capitalize; font-size: clamp(26px, 3.2vw, 32px); line-height: 1.25; color: var(--color-primary); margin: 0; }
.proj-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.proj-head__loc { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 500; font-size: 16px; letter-spacing: 0; text-transform: uppercase; color: var(--color-gold-light); }
.proj-head__loc .rl-pin { color: var(--color-gold-light); }
.proj-head__date { font-family: var(--font-body); font-weight: 500; font-size: 16px; text-transform: uppercase; color: var(--color-gold-light); }
.proj-head__date::before { content: '•'; margin: 0 8px 0 12px; color: var(--color-gold-light); }
.proj-head__intro { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--color-text-muted); margin: 0; max-width: 984px; }

/* ===================================================================
   Before / After
   =================================================================== */
.proj-ba { background: var(--color-bg-alt); }
.proj-ba--after { background: var(--color-bg); }
.proj-ba__inner { display: flex; flex-direction: column; gap: 32px; padding-block: clamp(48px, 5vw, 80px); }
.proj-ba__head { display: flex; flex-direction: column; gap: 16px; }
.proj-ba__title { font-family: var(--font-display); font-weight: 400; text-transform: capitalize; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; color: var(--color-primary); margin: 0; }
.proj-ba__desc { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--color-text-muted); margin: 0; max-width: 979px; }

/* gallery */
.proj-gallery { position: relative; }
.proj-gallery__track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px;
}
.proj-gallery__track::-webkit-scrollbar { display: none; }
.proj-gallery__item { flex: 0 0 auto; width: 85%; margin: 0; scroll-snap-align: start; }
.proj-gallery__img { width: 100%; aspect-ratio: 380 / 280; object-fit: cover; display: block; background: var(--color-bg-alt); }
.proj-gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff;
  transition: background var(--duration-base) var(--ease-out);
}
.proj-gallery__nav:hover { background: var(--color-gold); color: var(--color-primary); }
.proj-gallery__nav svg { width: 20px; height: 20px; }
.proj-gallery__nav--prev { left: -12px; }
.proj-gallery__nav--next { right: -12px; }

/* ===================================================================
   Client Testimonial
   =================================================================== */
.proj-testi { background: var(--color-bg-alt); }
.proj-testi__inner { display: flex; flex-direction: column; gap: 24px; padding-block: clamp(48px, 5vw, 72px); }
.proj-testi__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; color: var(--color-primary); margin: 0; }
.proj-testi__card { background: var(--color-bg-alt); border: 1px solid #e2e4e3; padding: 16px; display: flex; flex-direction: column; gap: 48px; }
.proj-testi__stars { color: var(--color-gold); font-size: 14px; letter-spacing: 2px; line-height: 1; }
.proj-testi__quote { font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--color-text); margin: 0; }
.proj-testi__author { display: flex; align-items: center; gap: 8px; }
.proj-testi__avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; font-family: var(--font-body); font-weight: 500; font-size: 11px; }
.proj-testi__meta { display: flex; flex-direction: column; }
.proj-testi__name { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--color-text); }
.proj-testi__detail { font-family: var(--font-body); font-size: 12px; color: var(--color-text-muted); }

/* ===================================================================
   Responsive
   =================================================================== */
@media (min-width: 768px) {
  .proj-gallery__item { width: calc((100% - 20px) / 2); }
  .proj-gallery__nav { display: inline-flex; }
}
@media (min-width: 1024px) {
  .proj-gallery__item { width: calc((100% - 40px) / 3); }
}