/* =====================================================================
   project.css — shared styles for the project-detail pages
   (project-sports-direct.html, project-frasers.html, project-argos.html)
   Linked AFTER style.css. Keep selectors generic/reusable.
   ===================================================================== */

/* ---------- Project overview (intro + bullet summary) ---------- */
.project-overview {
  padding: 70px 0;
  background: var(--white);
}
.project-overview .eyebrow {
  margin-bottom: 18px;
}
.project-overview ul {
  margin: 0;
  padding-left: 1.2em;
  color: var(--body);
  font-size: 16px;
  line-height: 1.6;
}
.project-overview li {
  margin-bottom: 6px;
}
.project-overview p {
  color: var(--body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 14px;
}

/* ---------- Meta panel (key facts in blue tiles) ---------- */
.project-meta {
  background: var(--blue);
  padding: 0;
}
.project-meta-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* thin white dividers between tiles */
  gap: 1px;
  background: rgba(255, 255, 255, .25);
}
.project-meta-item {
  background: var(--blue);
  color: var(--white);
  padding: 48px 28px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.project-meta-item .meta-ico {
  width: 30px;
  height: 30px;
  margin-bottom: 22px;
  color: var(--white);
  opacity: .95;
}
.project-meta-item h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--white);
}
.project-meta-item p {
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
  color: rgba(255, 255, 255, .92);
}

/* ---------- Parallax content band ----------
   Matches the original project layout: a fixed (parallax) photo fills the section
   on the LEFT, a hard white gradient covers the RIGHT half, and the text sits on
   that right half (same pattern as the homepage .packaged band).
   Set the photo per section via the inline custom property --bg. */
.project-section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 620px;
  padding-block: 64px;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0) 50%, #fff 50% 100%),
    var(--bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;   /* parallax */
}
.project-section .project-text {
  margin-left: auto;
  width: 50%;
  max-width: 560px;
}
.project-section .eyebrow { margin-bottom: 18px; }
.project-section h4 { color: var(--blue); font-size: 18px; font-weight: 700; margin: 18px 0 8px; }
.project-section p { color: var(--body); font-size: 16px; line-height: 1.6; margin: 0 0 14px; }
.project-section ul { margin: 0 0 14px; padding-left: 1.2em; color: var(--body); font-size: 16px; line-height: 1.6; }
.project-section li { margin-bottom: 10px; }

/* ---------- Full-width image band (kept for any standalone image use) ---------- */
.project-band {
  width: 100%;
  height: 520px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Proposals body section ---------- */
.project-proposals {
  padding: 70px 0;
  background: var(--white);
}
.project-proposals .eyebrow {
  margin-bottom: 18px;
}
.project-proposals ul {
  margin: 0;
  padding-left: 1.2em;
  color: var(--body);
  font-size: 16px;
  line-height: 1.6;
}
.project-proposals li {
  margin-bottom: 12px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .project-meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .project-meta-item {
    min-height: 0;
    padding: 36px 24px;
  }
  .project-band {
    height: 360px;
  }
  /* parallax bands stack: photo behind a white veil, text full width, normal scroll */
  .project-section {
    min-height: 0;
    background-image: var(--bg);
    background-attachment: scroll;
  }
  .project-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .9);
  }
  .project-section .container { position: relative; z-index: 1; }
  .project-section .project-text { width: 100%; max-width: none; }
}
@media (max-width: 560px) {
  .project-meta-grid {
    grid-template-columns: 1fr;
  }
  .project-band {
    height: 260px;
  }
}