/* ===================================================================
   CARMELICIOUS CREATIVE STUDIO — Projects Page
   Also loaded on the Home page, since the shared .cc-project partial
   (template-parts/project-card.php) appears in the Home teaser too.
   =================================================================== */

.cc-project {
  background: var(--cc-charcoal-soft);
  border: 1px solid var(--cc-line-soft);
  border-radius: var(--cc-radius-lg);
  overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  transition: transform var(--cc-transition), border-color var(--cc-transition),
              box-shadow var(--cc-transition);
}
.cc-project:hover {
  transform: translateY(-5px);
  border-color: rgba(184,122,78,0.3);
  box-shadow: var(--cc-shadow-md);
}

/* PLACEHOLDER ARTWORK — pure CSS, no image files needed.
   Three distinct gradient + pattern variants so the cards don't look cloned.
   Swap these for real <img> tags once photography is available. */
.cc-project-visual {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  border-bottom: 1px solid var(--cc-line-soft);
}
.cc-project-visual::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(59,53,44,0.04) 0px, rgba(59,53,44,0.04) 1px,
      transparent 1px, transparent 11px);
}
/* Airy, tonal placeholder washes — each fades from a soft colour into the
   lightest off-white so the cards read like pale swatches on a gallery wall,
   never heavy dark blocks. Swap for real <img> once photography is ready. */
.cc-project-visual[data-variant="1"] {
  background: linear-gradient(135deg, var(--cc-peach-light), var(--cc-charcoal-soft));
}
.cc-project-visual[data-variant="2"] {
  background: linear-gradient(135deg, #BFD8D3, var(--cc-charcoal-soft));  /* pale sage-teal */
}
.cc-project-visual[data-variant="3"] {
  background: linear-gradient(135deg, #E9DBC4, var(--cc-charcoal-soft));  /* warm sand */
}
.cc-project:hover .cc-project-visual { filter: brightness(1.12); }

.cc-project-body {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex; flex-direction: column; gap: 0.6rem; flex: 1;
}
.cc-project-tag {
  font-family: var(--cc-font-body); font-weight: 500;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--cc-peach-dark);
}
.cc-project-desc {
  font-family: var(--cc-font-body); font-weight: 400; font-size: 0.925rem;
  line-height: 1.7; color: var(--cc-cream-soft);
}

/* ═══ CURRENT MOMENTUM — stat row ═══ */
.cc-stat {
  text-align: center; padding: var(--cc-space-lg);
  background: var(--cc-charcoal-soft);
  border: 1px solid var(--cc-line-soft);
  border-radius: var(--cc-radius-lg);
}
.cc-stat-value {
  font-family: var(--cc-font-heading); font-style: italic; font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1;
  color: var(--cc-peach-dark); margin-bottom: 0.5rem;
}
.cc-stat-label {
  font-family: var(--cc-font-body); font-weight: 400; font-size: 0.8rem;
  letter-spacing: 0.08em; color: var(--cc-cream-soft); line-height: 1.5;
}

/* ═══ CURRENTLY IN DEVELOPMENT — understated list ═══ */
.cc-dev-list { display: grid; gap: 0; margin-top: var(--cc-space-lg); }
.cc-dev-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--cc-space-lg); padding: var(--cc-space-lg) 0;
  border-bottom: 1px solid var(--cc-line);
}
.cc-dev-item:first-child { border-top: 1px solid var(--cc-line); }
.cc-dev-text {
  font-family: var(--cc-font-body); font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6;
  color: var(--cc-cream); max-width: 68%;
}
.cc-dev-launch {
  flex-shrink: 0;
  font-family: var(--cc-font-body); font-weight: 500;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cc-teal);
  background: rgba(42,95,90,0.08);
  border: 1px solid rgba(42,95,90,0.20);
  padding: 0.5rem 0.9rem; border-radius: var(--cc-radius-xl);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .cc-dev-item { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .cc-dev-text { max-width: 100%; }
}

/* ───────────────────────────────────────────────
   TEMPLATE HELPERS (scoped to this page)
   ─────────────────────────────────────────────── */

/* Hero intro lead — constrained reading width, centred under the H1. */
.cc-page-projects .cc-projects-intro {
  max-width: 640px;
  margin: var(--cc-space-md) auto 0;
}

/* Section rhythm: the in-development section and the closing CTA are both the
   deeper sand. A hairline keeps the seam between them legible without pushing
   the colour contrast up (keeps the CTA consistent with the other pages). */
.cc-page-projects .cc-cta-band { border-top: 1px solid var(--cc-line); }