/* Uiverse Project Cards */
.uiverse-card {
  width: 100%;
  border-radius: var(--radius-lg);
  background: var(--clr-white);
  padding: 5px;
  overflow: hidden;
  box-shadow: rgba(10, 28, 16, 0.2) 0px 7px 20px 0px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  height: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .uiverse-card:hover {
    transform: scale(1.02);
  }
}

.uiverse-card .top-section {
  height: 220px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  position: relative;
}

.uiverse-card .top-section::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  pointer-events: none;
}

.uiverse-card .top-section .border {
  border-bottom-right-radius: 10px;
  height: 30px;
  width: 110px;
  background: var(--clr-white);
  position: relative;
  transform: skew(-40deg);
  box-shadow: -10px -10px 0 0 var(--clr-white);
  z-index: 2;
}

.uiverse-card .top-section .border::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 0;
  right: -15px;
  background: rgba(255, 255, 255, 0);
  border-top-left-radius: 10px;
  box-shadow: -5px -5px 0 2px var(--clr-white);
}

.uiverse-card .top-section::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  background: rgba(255, 255, 255, 0);
  height: 15px;
  width: 15px;
  border-top-left-radius: 15px;
  box-shadow: -5px -5px 0 2px var(--clr-white);
  z-index: 2;
}

.uiverse-card .top-section .icons {
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  z-index: 3;
}

.uiverse-card .top-section .icons .logo {
  height: 100%;
  padding: 5px 0 5px 15px;
  display: flex;
  align-items: center;
}

.uiverse-card .card-year {
  color: var(--clr-primary-dark);
  font-family: var(--ff-heading);
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 10;
  display: inline-block;
}

.uiverse-card .top-section .icons .social-media {
  height: 100%;
  padding: 8px 15px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.uiverse-card .top-section .icons .social-media .svg {
  height: 14px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: transform 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  .uiverse-card .top-section .icons .social-media .svg:hover {
    transform: scale(1.2);
  }
}

.uiverse-card .bottom-section {
  margin-top: 15px;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.uiverse-card .bottom-section .title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--clr-gray-900);
  text-align: center;
  margin-bottom: 10px;
  font-family: var(--ff-heading);
}

.uiverse-card .card-desc {
  color: var(--clr-gray-600);
  font-size: 14px;
  text-align: center;
  margin-bottom: 15px;
  line-height: 1.5;
  flex-grow: 1;
}

.uiverse-card .bottom-section .row {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  border-top: 1px solid var(--clr-gray-200);
  padding-top: 15px;
}

.uiverse-card .bottom-section .row .item {
  flex: 33%;
  text-align: center;
  padding: 0 5px;
  /* Label above its value, the labels level along the top. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.uiverse-card .bottom-section .row .item .big-text {
  font-size: var(--fs-sm);
  display: block;
  font-weight: 700;
  color: var(--clr-gray-900);
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 12px, not 10px: this is the stat label under each project card ("STUDENTS",
   "SCHOOLS"), and at 10px uppercase it was the least readable text on the two
   busiest pages. Fixed here rather than overridden in styles.css because this
   file loads second and would win anyway — one rule, one place. */
/* The label comes first, above its value. */
.uiverse-card .bottom-section .row .item .regular-text {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--clr-accent);
}

.uiverse-card .bottom-section .row .item:nth-child(2) {
  border-left: 1px solid var(--clr-gray-200);
  border-right: 1px solid var(--clr-gray-200);
}

/* Hide original project card styles when using uiverse card */
.projects-grid .project-card {
  /* we will just override the class in HTML to uiverse-card */
}

/* ===================================================
   MOBILE-ONLY RESPONSIVE RULES (max-width: 640px)
   =================================================== */
@media (max-width: 640px) {
  .uiverse-card {
    border-radius: 16px;
    max-width: 100%;
  }

  .uiverse-card .top-section {
    height: 180px;
  }

  .uiverse-card .bottom-section {
    padding: 8px 12px 12px;
  }

  .uiverse-card .bottom-section .title {
    font-size: 16px;
    line-height: 1.3;
  }

  .uiverse-card .bottom-section .row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    padding-top: 10px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .uiverse-card .bottom-section .row .item {
    flex: none;
    padding: 0 2px;
    min-width: 0;
    overflow: hidden;
  }

  .uiverse-card .bottom-section .row .item .big-text {
    /* Was 11px - under the 12px floor the base rule above already uses
       (13px); this narrow-viewport override shrank it further instead. */
    font-size: 12px;
    white-space: normal;
    line-height: 1.2;
    word-break: break-word;
  }

  .uiverse-card .bottom-section .row .item .regular-text {
    /* Was 9px, same issue as .big-text just above. */
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.2;
  }
}