/* ==========================================================================
   TOPS SAFETY CONTROL — Projects / Portfolio Stylesheet
   Extiende mains.css (tokens, .service-hero, .svc-breadcrumb, .btn-tops,
   .container-tops, .section-pad, .eyebrow, .section-title, .cut-both,
   .svc-overview-list, .project-clients, .project-period, .partners-track,
   .count-up, .reveal siguen viviendo ahí).
   Este archivo SOLO define lo específico del portfolio: stats strip y las
   tarjetas alternadas de proyecto a gran escala.
   ========================================================================== */

/* ------------------------------ Stats strip -------------------------------- */
.proj-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--c-line-dark);
  background: var(--c-ink);
}
.proj-stat {
  padding: 30px 20px;
  text-align: center;
  position: relative;
}
.proj-stat:not(:last-child)::after {
  content: '';
  position: absolute; right: 0; top: 20%; bottom: 20%; width: 1px;
  background: var(--c-line-dark);
}
.proj-stat .num {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--c-white);
  line-height: 1;
}
.proj-stat .num .suffix { color: var(--c-red); }
.proj-stat .label {
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-steel);
}
@media (max-width: 767px) {
  .proj-stats { grid-template-columns: repeat(2, 1fr); }
  .proj-stat:nth-child(2)::after { display: none; }
}

/* ------------------------------ Full project cards -------------------------- */
.project-full { position: relative; }
.project-full:not(:last-child) { margin-bottom: 110px; }
.project-full-num {
  position: absolute;
  top: -46px; left: 0;
  font-family: var(--f-display);
  font-size: 5.5rem;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-line-light);
  z-index: 0;
  user-select: none;
}
.project-full-media { position: relative; overflow: hidden; min-height: 360px; }
.project-full-media img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.project-full-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10,10,11,0.55) 100%);
}
.project-full-period-badge {
  position: absolute; left: 22px; bottom: 22px; z-index: 2;
  background: var(--c-red); color: var(--c-white);
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.06em;
  padding: 8px 16px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
.project-full-body { position: relative; z-index: 1; padding: 10px 0; }
.project-full-body h3 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  color: var(--c-ink);
  line-height: 1.25;
  margin: 14px 0 16px;
  letter-spacing: 0;
  text-transform: none;
}
.project-full-body > p {
  color: var(--c-steel);
  font-size: 0.95rem;
  line-height: 1.75;
  margin: 0;
}
.project-full-deliverables-label {
  margin-top: 26px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-red);
}
@media (max-width: 991px) {
  .project-full-num { display: none; }
  .project-full:not(:last-child) { margin-bottom: 64px; }
}