/* ==========================================================================
   Armstrong Build — Ongoing Projects (template-ongoing.php)
   Dark page: header, live-project list, CTA band. Frame width 1440.
   ========================================================================== */

/* The dark page wrapper. A soft blurred backdrop sits behind the list, fading
   the page from solid ink at the top into a softer tone, matching Figma. */
.ong-page{
  position:relative;
  background:var(--ink);
  color:#fff;
  overflow:hidden;
}
.ong-page::before{
  /* Ongoing gradient backdrop — soft blurred wash behind the list/CTA */
  content:"";
  position:absolute;
  left:0; right:0;
  top:920px;
  height:1315px;
  background:linear-gradient(180deg,
    rgb(20,19,15) 0%,
    rgb(20,19,15) 30.335%,
    rgba(20,19,15,.88) 55%,
    rgba(20,19,15,.74) 61.521%,
    rgba(20,19,15,.72) 100%);
  pointer-events:none;
  z-index:0;
}
.ong-page > *{ position:relative; z-index:1; }

/* ----------------------------------------------------------- Page header */
.ong-head{
  padding:100px 0 72px;
}
.ong-head__title{
  font-family:var(--font-serif);
  font-weight:300;
  color:var(--on-dark);
  font-size:79px;
  line-height:1.04;
}
.ong-head__lede{
  font-weight:300;
  font-size:18px;
  line-height:1.6;
  color:var(--on-dark-muted);
  max-width:680px;
}

/* ----------------------------------------------------------- Live projects list */
.ong-list{
  padding:0 0 120px;
}
.ong-list__rows{
  display:flex;
  flex-direction:column;
}
.ong-row{
  display:flex;
  align-items:center;
  gap:40px;
  padding:40px 0;
  border-bottom:1px solid #54504a;
  transition:background-color .25s ease;
}
.ong-row:first-child{ border-top:1px solid #54504a; }
.ong-row:hover .ong-row__view{ gap:.85em; opacity:.7; }

.ong-row__img{
  flex:0 0 280px;
  width:280px;
  height:200px;
  border-radius:var(--radius-img);
  overflow:hidden;
}
.ong-row__img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.ong-row:hover .ong-row__img img{ transform:scale(1.04); }
/* 2026-11-10: a project with no image yet — a plain panel, never a stock photo */
.ong-row__img--empty{ background:#1d1b16; border:1px solid #54504a; }
/* 2026-11-10: keyboard focus on a row, and the note shown when no ongoing projects are published */
.ong-row:focus-visible{ outline:2px solid var(--on-dark); outline-offset:-2px; }
.ong-list__empty{ font-weight:300; font-size:18px; line-height:1.6; color:var(--on-dark-muted); padding:40px 0; border-top:1px solid #54504a; border-bottom:1px solid #54504a; }

.ong-row__body{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ong-row__name{
  font-family:var(--font-serif);
  font-weight:500;
  color:var(--on-dark);
  font-size:34px;
  line-height:1.1;
}
.ong-row__meta{
  font-size:14px;
  letter-spacing:.5px;
  color:var(--on-dark-muted);
}
.ong-row__progress{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:8px;
  width:420px;
  max-width:100%;
}
.ong-row__progress-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  font-size:11px;
}
.ong-row__stage{
  color:var(--on-dark);
  letter-spacing:2px;
}
.ong-row__pct{
  color:var(--on-dark-muted);
  letter-spacing:1px;
}
.ong-row__bar{
  position:relative;
  height:3px;
  width:100%;
  background:#54504a;
  overflow:hidden;
}
.ong-row__bar-fill{
  position:absolute;
  left:0; top:0;
  height:3px;
  background:var(--on-dark);
  width:0;
}
.ong-row__view{
  flex:0 0 auto;
  font-size:13px;
  letter-spacing:1.5px;
  color:var(--on-dark);
}

/* ----------------------------------------------------------- CTA band (transparent over dark page) */
.ong-cta{
  padding:120px 0;
}
.ong-cta__inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
  text-align:center;
}
.ong-cta__title{
  font-family:var(--font-serif);
  font-weight:300;
  font-size:62px;
  line-height:1.15;
  color:var(--on-dark);
}
.ong-cta__lede{
  font-weight:300;
  font-size:17px;
  line-height:1.6;
  color:var(--on-dark-muted);
  max-width:560px;
}

/* ----------------------------------------------------------- Responsive */
@media (max-width:900px){
  .ong-page::before{ top:600px; }
  .ong-head{ padding:72px 0 48px; }
  .ong-head__title{ font-size:46px; }
  .ong-head__lede{ font-size:16px; }

  .ong-row{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    padding:32px 0;
  }
  .ong-row__img{
    flex-basis:auto;
    width:100%;
    height:220px;
  }
  .ong-row__name{ font-size:28px; }
  .ong-row__body{ width:100%; } /* content pass 2026-10-15: stacked rows shrank to fit short metas, making the stage label and % collide */
  .ong-row__progress{ width:100%; }

  .ong-cta{ padding:90px 0; }
  .ong-cta__title{ font-size:38px; }
}

@media (max-width:560px){
  .ong-head__title{ font-size:38px; }
  .ong-cta__title{ font-size:32px; }
}