/* ============================================================
   Al-Naeim Construction Co. Ltd — Shared styles for sub-pages
   (projects.html, news.html, stats.html)
   ============================================================ */

.nav__menu a.is-current{ color: var(--c-orange); }
.nav__menu a.is-current::after{ right:0; }

/* ---------- Page header ---------- */
.page-header{
  padding: calc(var(--nav-h) + 4rem) 0 4rem;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--glass-border);
  text-align: center;
}
.page-header .pill{ margin-bottom: 1.2rem; }
.page-header h1{ font-size: clamp(2.6rem, 6vw, 4.6rem); max-width: 900px; margin-inline: auto; }
.page-header p{ color: var(--c-muted); max-width: 640px; margin: 1.2rem auto 0; font-size: 1.05rem; line-height: 1.7; }
.page-header__stats{
  display:flex; justify-content:center; gap: 3rem; margin-top: 2.6rem; flex-wrap: wrap;
}
.page-header__stats .stat{
  font-family: var(--f-display); font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--c-white);
}
.page-header__stats .stat span{ color: var(--c-orange); font-size: 1.05rem; display:block; }
.page-header__stats .stat small{
  display:block; font-family: var(--f-body); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--c-muted); margin-top:.3rem; font-weight:500;
}

/* ---------- Featured project / before-after video blocks ---------- */
.featured-project__video, .before-after__video{
  border-radius: var(--radius-lg); overflow:hidden; margin-bottom: 1.6rem;
  aspect-ratio: 16/9; background: #101113;
}
.featured-project__video video, .before-after__video video{ width:100%; height:100%; object-fit:cover; display:block; }
.featured-project__gallery{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem;
}
.featured-project__gallery img{
  width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius: var(--radius-md);
}

/* ---------- Clients breakdown ---------- */
.clients-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.client-chip{
  padding: 1.4rem 1rem; text-align:center; font-weight:600; font-size:.9rem;
  border-radius: var(--radius-md);
}
.client-chip--logo{
  display:flex; align-items:center; justify-content:center; min-height:96px; padding:1.2rem 1.6rem;
  background: #fff;
}
.client-chip--logo img{ max-width:100%; max-height:56px; width:auto; object-fit:contain; }
html[data-theme="dark"] .client-chip--logo{ background:#f4f5f7; }

/* ---------- News page ---------- */
.news-hero-video{
  border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 16/9; background:#101113;
  margin-bottom: 2rem;
}
.news-hero-video video{ width:100%; height:100%; object-fit:cover; display:block; }
.news-article{
  display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:center;
  padding: 3rem 0; border-bottom: 1px solid var(--glass-border);
}
.news-article__media{ border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/3; }
.news-article__media img, .news-article__media video{ width:100%; height:100%; object-fit:cover; }
.news-article__date{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; color: var(--c-muted);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom: .8rem;
}
.news-article h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .9rem; }
.news-article p{ color: var(--c-muted); line-height: 1.75; }
.news-social-follow{
  display:flex; gap: 1rem; margin-top: 1.4rem;
}

/* ---------- Stats page ---------- */
.stats-hero{ text-align:center; }
.stat-block{
  padding: 3rem 0; border-bottom: 1px solid var(--glass-border);
}
.stat-block__grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 1.6rem; margin-top: 2rem;
}
.stat-block__grid.cols-3{ grid-template-columns: repeat(3,1fr); }
.stat-block__grid.cols-6{ grid-template-columns: repeat(6,1fr); }
.big-stat{
  padding: 2rem 1.4rem; text-align:center; border-radius: var(--radius-md);
  border:1px solid var(--glass-border); background: var(--c-surface);
}
.big-stat strong{
  display:block; font-family: var(--f-display); font-size: clamp(2rem,4vw,3rem); color: var(--c-orange);
}
.big-stat span{ display:block; font-size:.8rem; color: var(--c-muted); margin-top:.5rem; }
.fleet-table{ width:100%; border-collapse: collapse; margin-top: 1.5rem; font-size:.92rem; }
.fleet-table th, .fleet-table td{ padding: .8rem 1rem; text-align: start; border-bottom: 1px solid var(--glass-border); }
.fleet-table th{ color: var(--c-muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.fleet-table td strong{ color: var(--c-orange); }
.plant-card{ padding: 1.6rem; border-radius: var(--radius-md); border:1px solid var(--glass-border); background: var(--c-surface); }
.plant-card h4{ font-family: var(--f-body); font-size:1rem; font-weight:700; text-transform:none; letter-spacing:0; margin-bottom:.4rem; }
.plant-card p{ font-size:.85rem; color: var(--c-muted); }
.plant-card strong{ color: var(--c-orange); }
.fin-note{ margin-top: 1.6rem; font-size:.88rem; color: var(--c-muted); line-height:1.7; }

@media (max-width: 1024px){
  .featured-project__gallery{ grid-template-columns: repeat(2,1fr); }
  .clients-grid{ grid-template-columns: repeat(2,1fr); }
  .news-article{ grid-template-columns: 1fr; gap: 1.6rem; }
  .stat-block__grid, .stat-block__grid.cols-3, .stat-block__grid.cols-6{ grid-template-columns: repeat(2,1fr); }
  .page-header__stats{ gap: 2rem; }
}
@media (max-width: 640px){
  .featured-project__gallery{ grid-template-columns: 1fr; }
  .clients-grid{ grid-template-columns: 1fr; }
  .stat-block__grid, .stat-block__grid.cols-3, .stat-block__grid.cols-6{ grid-template-columns: 1fr; }
  .fleet-table{ font-size:.8rem; }
  .fleet-table th, .fleet-table td{ padding:.6rem .5rem; }
}