/* =========================
   Projects — 2-up desktop, 1-up mobile
   (no HTML changes)
   ========================= */

section.projects .projects-heading h3,
section.projects .projects-heading p {
  color: var(--text-black-900);
}
body.dark section.projects .projects-heading h3,
body.dark section.projects .projects-heading p {
  color: var(--text-black-900);
}

/* Use the section's container as the grid parent */
section.projects .container {
  max-width: 1280px; /* give the grid more breathing room */
  margin: 0 auto;
  padding: 0 16px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns desktop */
  gap: 32px;
  align-items: start; /* keep rows straight */
}

/* Keep your existing .row wrappers but flatten them for layout */
section.projects .container > .row {
  display: contents; /* keeps markup, removes extra layout layer */
  margin: 0;
  padding: 0;
}

/* Headings span full width of the grid */
section.projects .section-title,
section.projects .projects-heading {
  grid-column: 1 / -1;
}

/* Card wrapper */
section.projects .projects-item {
  height: 100%;
  margin: 0;
}

/* Card */
section.projects .projects-item .projects-item-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;

  background: var(--bg-black-100);
  color: var(--text-black-900);
  border: 1px solid var(--bg-black-50);
  border-radius: 14px;
  padding: 18px;

  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
section.projects .projects-item .projects-item-inner:hover {
  transform: translateY(-3px);
  border-color: var(--skin-color);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
}

/* Thumbnail — larger and responsive */
section.projects .projects-item .projects-item-inner > img {
  width: 100%;
  display: block;
  border-radius: 10px;

  /* make the image taller on wide screens, but responsive */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Content column */
section.projects .projects-item .projects-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

/* Titles + body copy — no clamps, let it grow */
section.projects .projects-item .projects-info h4 {
  margin: 4px 0 2px;
  color: var(--text-black-900);
  font-weight: 700;
}
section.projects .projects-item .projects-info p {
  color: var(--text-black-700);
  font-size: 15px;
  line-height: 22px;
  margin: 0;

  /* blast away any previous clamping/ellipsis */
  display: block !important;
  overflow: visible !important;
  text-overflow: initial !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  max-height: none !important;
}

/* Buttons pinned to bottom if space remains */
section.projects .project-buttons {
  margin-top: auto;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
section.projects .project-buttons .btn {
  display: inline-block; /* respect your inline paddings */
}

/* --- Responsive: 1 column on tablets/phones --- */
@media (max-width: 1024px) {
  section.projects .container {
    grid-template-columns: 1fr; /* single column */
    gap: 24px;
  }
  section.projects .projects-item .projects-item-inner {
    padding: 16px;
  }
}

/* Optional: slightly tighter on very small screens */
@media (max-width: 640px) {
  section.projects .container {
    padding: 0 12px;
    gap: 20px;
  }
}