/* ══════════════════════════════
   PROJECTS — mobile first
══════════════════════════════ */
.projects-section { background: var(--white); }

.projects-top { margin-bottom: 2.5rem; }

.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--rlg);
  overflow: hidden;
}

.proj {
  background: var(--white);
  display: flex; flex-direction: column;
  transition: background .15s;
}
.proj:hover { background: var(--off); }

.proj.featured { background: var(--ink); }
.proj.featured:hover { background: #1a1a1a; }

/* Featured: imagen arriba, contenido abajo en mobile */
.proj.featured > .proj-featured-inner {
  display: flex; flex-direction: column;
}
.proj-featured-img {
  position: relative; min-height: 220px; overflow: hidden;
}
.proj-featured-content { padding: 2rem 1.5rem; }

/* Cards normales */
.proj-img-wrap {
  height: 180px; position: relative; overflow: hidden; flex-shrink: 0;
}
.proj-content { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }

.proj-type {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500; color: var(--cyan-dark); margin-bottom: 0.7rem;
}
.proj.featured .proj-type { color: var(--cyan); }

.proj-title {
  font-family: var(--font-d); font-size: 1.3rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: 0.7rem; line-height: 1.15;
}
.proj.featured .proj-title { color: var(--white); font-size: 1.6rem; }

.proj-desc {
  font-size: 0.875rem; color: var(--ink-mid);
  line-height: 1.7; flex: 1; font-weight: 300;
}
.proj.featured .proj-desc { color: rgba(255,255,255,0.55); }

.proj-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 1.2rem; }
.meta-tag {
  font-size: 11px; background: var(--off); color: var(--ink-mid);
  padding: 4px 10px; border-radius: 2px; font-weight: 400;
}
.proj.featured .meta-tag { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }

.proj-badge {
  display: inline-block; margin-bottom: 1rem;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500; background: var(--fuchsia); color: var(--white);
  padding: 5px 12px; border-radius: 2px; width: fit-content;
}

.proj-accent { background: #FAF2F5; }
.proj-accent:hover { background: #F5E8EE; }
.proj-accent .proj-type { color: var(--fuchsia); }