/* ============================================================
   WORK / PROJECTS SECTION
   ============================================================ */

/* Project grid */
.work__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

/* Card */
.work__card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  transition: transform var(--trans), box-shadow var(--trans);
}

.work__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* First card spans 2 rows */
.work__card:first-child { grid-row: span 2; }

/* Visual / mockup area */
.work__visual {
  height: 240px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.work__card:first-child .work__visual { height: 380px; }

.work__visual svg {
  transition: transform 0.5s ease;
}
.work__card:hover .work__visual svg {
  transform: scale(1.03);
}

/* Info */
.work__info {
  padding: 24px 28px 26px;
  border-top: 1px solid var(--border);
}

.work__type {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.work__name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.work__body {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-sec);
}

/* Responsive */
@media (max-width: 760px) {
  .work__grid { grid-template-columns: 1fr; }
  .work__card:first-child { grid-row: span 1; }
  .work__card:first-child .work__visual { height: 240px; }
}