/* ═══════════════════════════════════════════════════════════════
   BURNESS HOMES — Project Page Styles
   Shared across all project detail pages. Loaded after global.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO OVERRIDES ── */
.hero-container { min-height: 82vh }
.hero-bg img { object-position: center 40% }
.hero-overlay {
  background: linear-gradient(180deg,
    rgba(2,2,2,0.1) 0%, rgba(2,2,2,0.05) 30%,
    rgba(2,2,2,0.4) 70%, rgba(2,2,2,0.75) 100%);
}

/* ── PROJECT INFO BAR ── */
.project-info-bar { padding: 0 48px; margin-top: 48px; margin-bottom: 80px }
.project-info-inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0;
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}
.project-info-item { padding: 28px 24px; text-align: center; border-right: 1px solid var(--border) }
.project-info-item:last-child { border-right: none }
.project-info-label { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 8px }
.project-info-value { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.01em }

/* ── OVERVIEW ── */
.overview { padding: 0 48px 100px }
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center }
.overview-label {
  font-size: 0.72rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent); margin-bottom: 24px;
  display: flex; align-items: center; gap: 8px;
}
.overview-label::before { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--accent) }
.overview h2 { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1.15; margin-bottom: 24px; letter-spacing: -0.01em }
.overview p { font-size: 0.92rem; font-weight: 300; color: var(--text-muted); line-height: 1.85; margin-bottom: 20px; max-width: 520px }
.overview-image { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; position: relative }
.overview-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16,1,0.3,1) }
.overview-image:hover img { transform: scale(1.04) }

/* ── DESIGN HIGHLIGHTS (BENTO) ── */
.highlights { padding: 100px 48px 120px; background: var(--bg-card) }
.highlights-header { margin-bottom: 56px }
.highlights-label {
  font-size: 0.72rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.highlights-label::before { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--accent) }
.highlights-header h2 { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1.15 }

.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 320px 320px; gap: 16px }
.bento-item {
  border-radius: var(--r-lg); overflow: hidden; position: relative;
  isolation: isolate; -webkit-backface-visibility: hidden;
  backface-visibility: hidden; transform: translateZ(0);
}
.bento-item img { width: 100%; height: 120%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16,1,0.3,1) }
.bento-item:hover img { transform: scale(1.05) }
.bento-1 { grid-column: 1/6;  grid-row: 1/2 }
.bento-2 { grid-column: 6/9;  grid-row: 1/2 }
.bento-3 { grid-column: 9/13; grid-row: 1/2 }
.bento-4 { grid-column: 1/4;  grid-row: 2/3 }
.bento-5 { grid-column: 4/8;  grid-row: 2/3 }
.bento-6 { grid-column: 8/13; grid-row: 2/3 }

.bento-card {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px; background: var(--bg); border: 1px solid var(--border);
}
.bento-card-icon { width: 40px; height: 40px; margin-bottom: 16px; color: var(--accent) }
.bento-card h3 { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; margin-bottom: 8px }
.bento-card p { font-size: 0.82rem; font-weight: 300; color: var(--text-muted); line-height: 1.6 }

.bento-img-overlay { position: relative }
.bento-img-overlay::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(2,2,2,0.55) 0%, rgba(2,2,2,0) 50%);
  z-index: 1; pointer-events: none;
}
.bento-img-label {
  position: absolute; bottom: 20px; left: 20px; z-index: 2;
  font-family: var(--font-display); font-size: 0.92rem;
  color: var(--text-light); letter-spacing: 0.02em;
}
.bento-img-tag {
  display: inline-block; font-size: 0.65rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: rgba(247,243,243,0.15); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); color: var(--text-light);
  padding: 5px 12px; border-radius: 99px; margin-bottom: 6px;
}

/* ── GALLERY ── */
.gallery { padding: 100px 48px 120px }
.gallery-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px }
.gallery-label {
  font-size: 0.72rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.gallery-label::before { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--accent) }
.gallery-header h2 { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1.15 }
.gallery-count { font-size: 0.78rem; font-weight: 300; color: var(--text-muted) }

.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 200px; gap: 12px }
.gallery-item { border-radius: var(--r-md); overflow: hidden; position: relative; cursor: pointer; isolation: isolate }
.gallery-item img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1) }
.gallery-item:hover img { transform: scale(1.04) }
.gi-w3  { grid-column: span 3 }
.gi-w4  { grid-column: span 4 }
.gi-w5  { grid-column: span 5 }
.gi-w6  { grid-column: span 6 }
.gi-w7  { grid-column: span 7 }
.gi-w8  { grid-column: span 8 }
.gi-w12 { grid-column: span 12 }
.gi-h2  { grid-row: span 2 }
.gi-h3  { grid-row: span 3 }

/* ── SPECS ── */
.specs {
  padding: 80px 48px 100px; background: var(--accent);
  position: relative; overflow: hidden;
}
.specs::before {
  content: ''; position: absolute; top: -20%; right: -10%;
  width: 50%; height: 80%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(168,199,191,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; position: relative }
.specs-text h2 { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1.15; color: var(--text-light); margin-bottom: 24px }
.specs-text p { font-size: 0.92rem; font-weight: 300; color: rgba(247,243,243,0.7); line-height: 1.85; max-width: 480px }
.specs-label {
  font-size: 0.72rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent-gold); margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.specs-label::before { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--accent-gold) }
.specs-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 }
.spec-item { padding: 20px 0; border-bottom: 1px solid rgba(247,243,243,0.1) }
.spec-item-label { font-size: 0.72rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(247,243,243,0.45); margin-bottom: 6px }
.spec-item-value { font-family: var(--font-display); font-size: 1rem; color: var(--text-light); letter-spacing: 0.01em }
.spec-item:nth-child(odd) { padding-right: 24px; border-right: 1px solid rgba(247,243,243,0.1) }
.spec-item:nth-child(even) { padding-left: 24px }

/* ── CTA BAND (project override — neutral bg) ── */
.cta-band { background: var(--bg-card) }
.cta-band::before { display: none }
.cta-band h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.08; letter-spacing: 0.01em; color: var(--text);
}
.cta-band p { color: var(--text-muted) }

/* ── LIGHTBOX ── */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(2,2,2,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.lightbox.active { opacity: 1; pointer-events: auto }
.lightbox-img {
  max-width: 90vw; max-height: 85vh; border-radius: var(--r-md);
  object-fit: contain; transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.lightbox.active .lightbox-img { transform: scale(1) }
.lightbox-close {
  position: absolute; top: 24px; right: 24px;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(247,243,243,0.2); background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light); cursor: pointer; transition: all 0.3s; font-size: 0;
}
.lightbox-close:hover { background: rgba(247,243,243,0.1); border-color: rgba(247,243,243,0.4) }
.lightbox-close svg { width: 20px; height: 20px }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(247,243,243,0.2); background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light); cursor: pointer; transition: all 0.3s; font-size: 0;
}
.lightbox-nav:hover { background: rgba(247,243,243,0.1); border-color: rgba(247,243,243,0.4) }
.lightbox-nav svg { width: 20px; height: 20px }
.lightbox-prev { left: 24px }
.lightbox-next { right: 24px }
.lightbox-counter {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-size: 0.78rem; font-weight: 300; color: rgba(247,243,243,0.5);
  letter-spacing: 0.06em;
}

/* ── PROJECT RESPONSIVE ── */
@media (max-width: 1024px) {
  .project-info-bar, .overview, .highlights, .gallery, .specs, .cta-band { padding-left: 32px; padding-right: 32px }
  .overview-grid { gap: 40px }
  .bento { grid-template-columns: repeat(6, 1fr); grid-template-rows: 260px 260px 260px }
  .bento-1 { grid-column: 1/4; grid-row: 1/2 }
  .bento-2 { grid-column: 4/7; grid-row: 1/2 }
  .bento-3 { grid-column: 1/3; grid-row: 2/3 }
  .bento-4 { grid-column: 3/7; grid-row: 2/3 }
  .bento-5 { grid-column: 1/4; grid-row: 3/4 }
  .bento-6 { grid-column: 4/7; grid-row: 3/4 }
  .specs-grid { gap: 48px }
  .gallery-grid { grid-auto-rows: 180px }
  .gi-w8, .gi-w7, .gi-w6, .gi-w5 { grid-column: span 6 }
  .gi-w4, .gi-w3 { grid-column: span 6 }
}

@media (max-width: 640px) {
  .project-info-bar, .overview, .highlights, .gallery, .specs, .cta-band { padding-left: 20px; padding-right: 20px }
  .highlights, .gallery, .specs { padding-top: 80px; padding-bottom: 80px }
  .project-info-inner { grid-template-columns: repeat(2, 1fr) }
  .project-info-item { padding: 20px 16px }
  .project-info-item:nth-child(2) { border-right: none }
  .project-info-item:nth-child(4) { border-right: none }
  .project-info-item:last-child { grid-column: 1 / -1; border-top: 1px solid var(--border) }
  .overview-grid { grid-template-columns: 1fr; gap: 40px }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 200px); gap: 10px }
  .bento-1 { grid-column: 1 / -1; grid-row: 1/2 }
  .bento-2 { grid-column: 1/2;    grid-row: 2/3 }
  .bento-3 { grid-column: 2/3;    grid-row: 2/3 }
  .bento-4 { grid-column: 1 / -1; grid-row: 3/4 }
  .bento-5 { grid-column: 1/2;    grid-row: 4/5 }
  .bento-6 { grid-column: 2/3;    grid-row: 4/5 }
  .bento-card { padding: 20px }
  .bento-card h3 { font-size: 1.05rem }
  .bento-card p { font-size: 0.78rem }
  .bento-img-label { bottom: 14px; left: 14px; font-size: 0.82rem }

  /* 2-column gallery so 25 images don't require 5,500px of scroll */
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; gap: 8px }
  [class*="gi-w"] { grid-column: span 1 }
  .gi-h2 { grid-row: span 2 }
  .gi-h3 { grid-row: span 2 }
  .gallery-header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 32px }

  .specs-grid { grid-template-columns: 1fr; gap: 40px }
  .specs-list { grid-template-columns: 1fr }
  .spec-item:nth-child(odd) { padding-right: 0; border-right: none }
  .spec-item:nth-child(even) { padding-left: 0 }

  .lightbox-close, .lightbox-nav { width: 40px; height: 40px }
  .lightbox-close { top: 16px; right: 16px }
  .lightbox-prev { left: 12px }
  .lightbox-next { right: 12px }
}

@media (max-width: 420px) {
  .gallery-grid { grid-auto-rows: 120px }
}