/* ================================= */
/* ========= Projects Page ========= */
/* ================================= */

#projects{
  padding: 70px 0 90px;
}

#projects .section-head{
  margin-bottom: 18px;
}

#projects .section-head h2{
  margin: 0;
  font-size: 42px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

/* Root container */
#projectsList{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* If your JS still wraps the rest in .p-grid, force it to be single column */
#projectsList .p-grid{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ================================= */
/* ============ Card Row =========== */
/* ================================= */

.p-card{
  /* Card look */
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(145deg, rgba(14,22,33,0.98), rgba(17,28,42,0.98));
  box-shadow: 0 16px 52px rgba(0,0,0,0.45);
  overflow: hidden;

  /* Row layout */
  display: grid;
  grid-template-columns: 440px 1fr; /* image | content */
  align-items: stretch;

  /* SAME SIZE */
  min-height: 300px;
}

/* Hover */
.p-card:hover{
  border-color: rgba(42,109,244,0.70);
  box-shadow: 0 20px 65px rgba(0,0,0,0.55);
  transform: translateY(-3px);
  transition: 0.2s ease;
}

/* Left image panel */
.p-media{
  position: relative;
  overflow: hidden;

  /* make image fill full card height */
  height: 100%;
  min-height: 300px;

  /* Image corners match card */
  border-radius: 22px 0 0 22px;
}

.p-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* fills panel nicely */
}

/* Remove featured glow/kicker if exists */
.p-kicker{ display: none !important; }
.p-mediaGlow{ display: none !important; }

/* Right content panel */
.p-content{
  padding: 22px 26px;
  min-width: 0;

  display: flex;
  flex-direction: column;
}

/* Title */
.p-title{
  margin: 0 0 10px 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Description (keep nice + controlled height) */
.p-desc{
  color: rgba(255,255,255,0.84);
  line-height: 1.7;

  /* keep cards equal height */
  display: -webkit-box;
  -webkit-line-clamp: 5;          /* change 5 -> 6 if you want more text */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tools line */
.p-tools{
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.62);

  display: -webkit-box;
  -webkit-line-clamp: 2;          /* keep tools from exploding height */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tags pinned to bottom */
.p-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;               /* pushes tags to bottom */
  padding-top: 14px;
}

/* Tag style */
.p-tag{
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;

  color: rgba(170,195,255,0.95);
  border: 1px solid rgba(42,109,244,0.55);
  background: rgba(42,109,244,0.10);

  transition: 0.18s ease;
}

.p-tag:hover{
  background: rgba(42,109,244,0.85);
  border-color: rgba(42,109,244,0.85);
  color: #fff;
}

/* Empty state */
.p-empty{
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.75);
}

/* ================================= */
/* =========== Responsive ========== */
/* ================================= */

@media (max-width: 1100px){
  .p-card{
    grid-template-columns: 380px 1fr;
  }
}

@media (max-width: 980px){
  #projects .section-head h2{
    font-size: 34px;
  }

  .p-card{
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .p-media{
    border-radius: 22px 22px 0 0;
    min-height: 260px;
  }

  .p-content{
    padding: 16px 16px 18px 16px;
  }

  .p-desc{
    -webkit-line-clamp: 8; /* more text on mobile */
  }
}

@media (max-width: 520px){
  #projects{
    padding: 56px 0 70px;
  }

  .p-media{
    min-height: 220px;
  }
}