/* ---------- GRID ROW ---------- */
#grid-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  padding: var(--spacing-medium);
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.grid-row {
  display: flex;
  gap: var(--spacing-small);
  align-items: stretch;
  /* max-height: 50vh; */
}

.grid-row.single {
  flex-direction: column;
}

/* ---------- GRID ITEMS CARDS ---------- */
.grid-item.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--bg-dark-secondary);
  border: 1px solid #ffffff22;
  border-radius: var(--border-radius);
}

.grid-item.text-card {
  padding: var(--spacing-medium);
}

/* Text inside cards */
.grid-item.card h2 {
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: var(--spacing-small);
}

.grid-item.card p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg-light);
}

@media (max-width: 768px) {
  .grid-row {
    flex-direction: column;
    gap: var(--spacing-small);
  }

  .grid-row .text-card {
    order: 2;
  }

  .grid-row .card:not(.text-card) {
    order: 1;
  }

  .grid-item.card {
    background-color: var(--bg-dark-secondary);
    border: 1px solid #ffffff11;
  }

  .grid-item.card h2 {
    font-size: 1.6rem;
    text-align: center;
  }

  .grid-item.card p {
    font-size: 0.95rem;
    text-align: center;
  }
}

/* ---------- GRAINY CARDS ---------- */
.card {
  background-color: rgba(73, 74, 75, 0.388) !important;
  /* backdrop-filter: hue-rotate(13deg); */
  backdrop-filter: hue-rotate(347deg);
}

.card::before {
  content: "";
  pointer-events: none; /* Important for hover effects */
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' /%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 182px;
  opacity: 0.12;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
}

/*make sure all images are of same size. (aspect ratio)*/
.image-card {
  position: relative;
  overflow: hidden;

  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--border-radius);
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  display: block;
}

/* ---------- STATUS BADGE ---------- */
.image-card::after {
  content: attr(data-status);
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;

  padding: 0.35rem 0.6rem;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0);
  backdrop-filter: contrast(0%) brightness(65%);

  border-radius: 999px;
  z-index: 2;
  pointer-events: none;
}

.image-card[data-status="Work in Progress"]::after {
  background: rgba(255, 200, 80, 0.5);
  color: rgb(255, 220, 150);
}

.image-card[data-status="DONE"]::after {
  background: rgba(120, 255, 180, 0.5);
  color: rgb(160, 255, 210);
}

.image-card[data-status="PROTOTYPE"]::after {
  background: rgba(120, 180, 255, 0.5);
  color: rgb(170, 210, 255);
}

.image-card[data-status="ON HOLD"]::after {
  background: rgba(255, 120, 120, 0.5);
  color: rgb(255, 170, 170);
}

.image-card[data-status="ABANDONED"]::after {
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255,255,255,0.85);
}

/* .image-card::after {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.8) inset;
} */

.text-card a {
  margin-top: auto;
}


/* ---------- VIEW MORE BUTTON ---------- */
.view-more {
  /* margin-top: auto; */
  margin-top: var(--spacing-medium); /* same as card padding */
  align-self: flex-start;
}




/* ---------- UNREAL BADGE ---------- */
/* .engine-icon {
  padding: 4px;
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;

  width: 1.7rem;
  height: 1.7rem;

  border-radius: 50%;
  background-color: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);

  background-image: url("/images/unreal-logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 65%;

  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;

  pointer-events: none;
  z-index: 4;

  color: var(--fg-light);
}

.image-card:hover .engine-icon {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 768px) {
  .engine-icon {
    opacity: 1;
    transform: none;
  }
} */

/* <span class="engine-icon"><svg fill="currentColor" viewBox="0 0 14 14" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="m 7.15165,12.390099 c -0.1799,-0.025 -0.5247,-0.1023 -0.7791,-0.174 -1.1482,-0.3234 -2.0896,-0.8892 -2.6842,-1.613 -0.09,-0.1095 -0.206,-0.2684 -0.2002,-0.2741 0,0 0.055,9e-4 0.1179,0.01 0.1339,0.013 0.3095,0.01 0.3869,-0.014 0.1693,-0.045 0.2743,-0.1535 0.3012,-0.3113 0.01,-0.041 0.01,-0.6813997 0.01,-2.2312997 l 0,-2.1734 -0.025,-0.071 c -0.06,-0.1688 -0.1566,-0.2408 -0.3535,-0.2626 -0.1052,-0.012 -0.2492,0.045 -0.4352,0.1705 -0.6759,0.457 -1.5515,1.5747 -2.4169,3.0854 -0.039,0.068 -0.072,0.1227 -0.073,0.1215 0,0 0,-0.093 0.01,-0.2037 0.055,-1.363 0.6424,-2.7903 1.676,-4.0715 0.2517,-0.3121 0.6313,-0.7155 0.9286,-0.9871 0.9611,-0.8781 2.0229,-1.4853 3.0913,-1.7677 l 0.086,-0.023 -0.028,0.024 c -0.015,0.014 -0.086,0.075 -0.1572,0.1369 -0.1455,0.1265 -0.3968,0.3738 -0.5144,0.5064 -0.3093,0.3488 -0.4924,0.6591 -0.53,0.8981 -0.021,0.1345 0,0.4327 0.05,0.6072 0.055,0.2071 0.1569,0.341 0.2989,0.3933 0.04,0.015 0.073,0.019 0.1382,0.019 0.098,-10e-5 0.1691,-0.017 0.2677,-0.062 l 0.065,-0.03 0,2.7467 0,2.7466 0.029,0.06 c 0.083,0.1693 0.2788,0.2441 0.6697,0.2564 0.1942,0.01 0.2573,0 0.4057,-0.048 0.2398,-0.076 0.5342,-0.2259 0.8654,-0.4407 l 0.095,-0.062 10e-5,-2.2424 c 10e-5,-2.4087 0,-2.2916 -0.045,-2.4328 -0.084,-0.2536 -0.35,-0.6106 -0.6703,-0.9 l -0.1046,-0.094 0.052,0 c 0.077,0 0.27,0.023 0.4031,0.056 0.2532,0.064 0.5135,0.1777 0.7124,0.3119 l 0.065,0.044 0.023,-0.039 c 0.037,-0.064 0.1368,-0.1842 0.2339,-0.2834 0.5226,-0.5337 1.3583,-0.9725 2.4437,-1.2832 0.096,-0.027 0.1781,-0.05 0.1824,-0.05 0,0 -0.046,0.072 -0.1121,0.1597 -0.3868,0.515 -0.7479,1.0738 -0.9321,1.4422 -0.094,0.1875 -0.1378,0.2993 -0.1581,0.4005 -0.017,0.086 -0.031,4.8006 -0.015,4.8624 0.03,0.1108 0.1558,0.1744 0.3695,0.187 0.1092,0.01 0.2144,-0.011 0.3712,-0.063 0.5493,-0.1805 1.0952,-0.533 1.5785,-1.0194 l 0.1544,-0.1553 -0.011,0.043 c -0.034,0.1295 -0.1689,0.3752 -0.378,0.6904 -0.6558,0.9887 -1.587,1.9992997 -2.4662,2.6766997 -0.1486,0.1145 -0.4347,0.3156 -0.449,0.3156 -0.01,0 -0.2886,-0.2784 -0.6291,-0.6187 -0.5288,-0.5284 -0.6208,-0.6167 -0.63,-0.6046 -0.01,0.01 -0.2856,0.3814 -0.6213,0.8302 -0.3358,0.4488 -0.6152,0.8155 -0.621,0.8147 -0.01,-7e-4 -0.023,0 -0.037,-0.01 z"></path></g></svg></span> */