/* ==========================================================================
   Project storytelling pages (EcoVerse, Eco-Regen)
   ========================================================================== */

.hero--project {
  min-height: 88vh;
}

.hero--inner {
  min-height: 66vh;
}

.hero--inner .hero-content {
  /* shorter hero than the full-bleed home/project heroes -- the inherited
     home.css padding-bottom (space-12) leaves too little room when a
     3-line headline wraps, pushing the breadcrumb up behind the fixed
     header. */
  padding-bottom: var(--space-9);
}

.hero--inner h1 {
  font-size: var(--fs-h1);
  color: var(--color-white);
  margin-block: var(--space-5) var(--space-4);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.65);
}

.breadcrumb a:hover {
  color: var(--color-gold-400);
}

.hero--project h1 {
  font-size: var(--fs-hero);
  line-height: 1.16;
  color: var(--color-white);
  margin-block: var(--space-5) var(--space-6);
}

/* ---- Challenge stats (light-on-dark, no top border needed) ---- */
.challenge-stat {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.stat-value--dark {
  color: var(--color-forest-600);
}

.section--alt .stat-value--dark,
.section .stat-value--dark {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.4rem);
  font-weight: 800;
}

.stat-label--dark {
  margin-top: var(--space-2);
  font-size: 0.92rem;
  color: var(--color-text-muted);
  max-width: 26ch;
}

/* ---- Masterplan systems ---- */
.system-grid {
  margin-bottom: var(--space-9);
}

.system-card {
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.system-card h3 {
  margin-block: var(--space-2) var(--space-2);
  font-size: var(--fs-h4);
}

.system-card--stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-forest-900);
  border: none;
}

.system-card--stat .stat-value {
  color: var(--color-gold-400);
}

.system-card--stat .stat-label {
  color: var(--color-text-on-dark-muted);
}

/* ---- Zone grid ---- */
.zone-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-9);
}

@media (max-width: 1024px) {
  .zone-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .zone-grid { grid-template-columns: 1fr; }
}

.zone-card {
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.zone-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.zone-number {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--color-gold-600);
  margin-bottom: var(--space-3);
}

.zone-card h4 {
  margin-bottom: var(--space-2);
  font-size: 1.05rem;
}

.zone-card p {
  font-size: 0.9rem;
}

.masterplan-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.masterplan-figure figcaption {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* ---- Feature list ---- */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.feature-list li {
  padding-left: var(--space-6);
  position: relative;
  color: var(--color-text-muted);
}

.section--dark .feature-list li,
.section--dark .feature-list li strong {
  color: var(--color-text-on-dark-muted);
}

.feature-list li strong {
  color: var(--color-text);
}

.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold-500);
}

.feature-list--plain li {
  font-weight: 600;
  color: var(--color-text);
}

/* ---- Tourism gallery cards ---- */
.tourism-card {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tourism-card img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  transition: transform var(--dur-slow) var(--ease-out);
}

.tourism-card:hover img {
  transform: scale(1.06);
}

.tourism-card figcaption {
  padding-top: var(--space-3);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

/* ---- Leadership cards ---- */
.leader-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  filter: grayscale(100%) contrast(1.05) brightness(1.02);
  transition: filter var(--dur-base) var(--ease-out);
}

.leader-card:hover img {
  filter: grayscale(0%) contrast(1.05) brightness(1.02);
}

#profiles .split-media img {
  filter: grayscale(100%) contrast(1.05) brightness(1.02);
  transition: filter var(--dur-base) var(--ease-out);
}

#profiles .split-media:hover img {
  filter: grayscale(0%) contrast(1.05) brightness(1.02);
}

.leader-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-1);
}

.leader-role {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-gold-600);
  margin-bottom: var(--space-3);
}

/* ---- Partners ---- */
.partner-list {
  margin-top: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.partner-item {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.partner-item h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: var(--space-2);
}

.partner-item h4 span {
  display: inline-block;
  margin-left: var(--space-3);
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-forest-600);
  background: var(--color-mist-100);
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

/* ---- ESG score bars ---- */
.esg-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-7);
}

.esg-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  align-items: center;
  gap: var(--space-5);
}

.esg-bar-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-border-on-dark);
  overflow: hidden;
}

.esg-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-out);
}

.esg-bars.is-visible .esg-bar-fill {
  transform: scaleX(1);
}

.esg-bar-label {
  font-weight: 600;
  font-size: 0.92rem;
}

.esg-bar-value {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-gold-400);
}

/* ---- SDG grid ---- */
.sdg-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .sdg-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px) {
  .sdg-grid { grid-template-columns: repeat(2, 1fr); }
}

.sdg-tile {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-3);
  background: var(--color-forest-800);
  color: var(--color-white);
  transition: transform var(--dur-base) var(--ease-out);
}

.sdg-tile:hover {
  transform: translateY(-4px);
}

.sdg-tile strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-gold-400);
}

.sdg-tile span {
  font-size: 0.68rem;
  line-height: 1.3;
}

/* ---- Policy grid ---- */
.policy-item {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-on-dark);
}

.policy-item h4 {
  color: var(--color-white);
  margin-bottom: var(--space-2);
  font-size: 1.05rem;
}