/* ═══════════════════════════════════════════════════════════
   PLAN HOMES — PROJECT STYLES
   Project cards (projects.php, project strips on service pages
   and the homepage), the individual project page layout, and
   the shared gallery lightbox.
   ═══════════════════════════════════════════════════════════ */

/* ── Project cards ─────────────────────────────────────────── */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.project-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6e6e6;
  text-decoration: none;
  color: #111;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: #111;
}
.project-card .pc-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e9ecea;
}
.project-card .pc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.project-card:hover .pc-img img { transform: scale(1.04); }
.project-card .pc-cat {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(5, 5, 5, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 10px;
}
.project-card .pc-body { padding: 22px 22px 20px; display: flex; flex-direction: column; flex: 1; }
.project-card h3 {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: 8px;
  color: #111;
}
.project-card .pc-meta { font-size: 13px; line-height: 1.6; color: #6b6b6b; margin-bottom: 16px; flex: 1; }
.project-card .pc-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #008DD2;
}

/* Filter chips on projects.php */
.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}
.project-filters button {
  min-height: 40px;
  padding: 8px 18px;
  background: #fff;
  border: 1px solid #d9d9d9;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
}
.project-filters button:hover { border-color: #008DD2; color: #008DD2; }
.project-filters button.is-active { background: #111; border-color: #111; color: #fff; }
.project-card.is-hidden { display: none; }

/* ── Single project page ───────────────────────────────────── */
.project-hero-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 18px;
}
.project-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  max-width: 900px;
  margin-top: 10px;
}
.project-facts div { padding: 16px 16px 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.project-facts dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 4px;
}
.project-facts dd { font-size: 15px; color: #fff; margin: 0; line-height: 1.5; }

.project-cover { margin: 0; background: #e9ecea; }
.project-cover img {
  width: 100%;
  max-height: 82vh;
  object-fit: cover;
  display: block;
}

.concept-lead {
  font-family: "Playfair Display", serif;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.4;
  color: #111;
  max-width: 900px;
  margin: 0 0 34px;
  padding-left: 22px;
  border-left: 3px solid #00AF4C;
}
.concept-body {
  column-count: 2;
  column-gap: 48px;
}
.concept-body p {
  break-inside: avoid;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin: 0 0 18px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.gallery-grid button {
  display: block;
  padding: 0;
  border: none;
  background: #e9ecea;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.gallery-grid button:hover img { transform: scale(1.04); opacity: 0.92; }

.project-pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.project-pn a {
  display: block;
  padding: 22px 24px;
  border: 1px solid #e6e6e6;
  background: #fff;
  text-decoration: none;
  color: #111;
  transition: border-color 0.2s;
}
.project-pn a:hover { border-color: #008DD2; text-decoration: none; color: #111; }
.project-pn .pn-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 6px;
}
.project-pn .pn-name { font-family: "Playfair Display", serif; font-size: 20px; }
.project-pn .pn-next { text-align: right; }

/* ── Lightbox ──────────────────────────────────────────────── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.lightbox.active { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  user-select: none;
}
.lightbox button {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 14px;
  z-index: 2;
}
.lightbox-close { top: 20px; right: 26px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  letter-spacing: 2px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .concept-body { column-count: 1; }
}
@media (max-width: 600px) {
  .project-grid { grid-template-columns: 1fr; gap: 20px; }
  .project-card h3 { font-size: 21px; }
  .project-pn { grid-template-columns: 1fr; }
  .project-pn .pn-next { text-align: left; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lightbox button { font-size: 1.7rem; padding: 10px; }
  .concept-lead { padding-left: 16px; }
}

/* Link row (also defined in ph-base.css; repeated here for pages that load only this file) */
.link-row { display: flex; flex-wrap: wrap; gap: 0 32px; }

/* ── Projects page: original layout, one full-width project per row ── */
.projects-list {
  background: linear-gradient(90deg, #5cc06a, #3aa6a8);
  padding-bottom: 100px;
  margin-top: 5%;
}
.projects-list .arch-header { padding: 0 0 50px; }
.projects-list .section-label {
  font-size: clamp(52px, 11vw, 180px);
  font-weight: 100;
  letter-spacing: 6px;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.projects-intro {
  max-width: 900px;
  padding: 0 60px;
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.95);
}
.project-row {
  display: block;
  position: relative;
  margin-top: 100px;
  text-decoration: none;
}
.projects-list .arch-header + .project-row { margin-top: 0; }
.project-row img {
  width: 100%;
  height: auto;
  display: block;
}
.project-row .discover {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(81, 71, 19, 0.85);
  color: #fff;
  text-align: center;
  padding: 18px;
  font-size: 28px;
  font-weight: 200;
  letter-spacing: 2px;
  z-index: 5;
  transition: background 0.3s;
}
.project-row:hover .discover { background: rgba(81, 71, 19, 0.95); }
.project-row:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

/* Visually hidden, still read by search engines and screen readers */
.ph-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .projects-list { padding-bottom: 0; }
  .projects-list .arch-header { padding: 24px 16px 30px; }
  .projects-list .section-label { font-size: clamp(42px, 11vw, 100px); letter-spacing: 2px; line-height: 1; }
  .projects-intro { padding: 0; font-size: 15px; }
  .project-row { margin-top: 60px; }
  .project-row .discover { font-size: 20px; padding: 14px; }
}
@media (max-width: 600px) {
  .projects-list { margin-top: 57px; }
  .projects-list .arch-header { padding: 20px 14px 24px; }
  .projects-list .section-label { font-size: clamp(36px, 11vw, 64px); letter-spacing: 1px; }
  .project-row { margin-top: 40px; }
  .project-row .discover { font-size: 16px; padding: 10px; letter-spacing: 1px; }
}

/* Project strip cards: show the full wide cover image instead of cropping it */
.project-card .pc-img { aspect-ratio: auto; }
.project-card .pc-img img { height: auto; }
.project-grid { align-items: start; }