/* ---------------------------------------
   CORE STRUCTURE (unchanged)
-----------------------------------------*/
.promo-box {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  padding: 12%;
  min-height: 520px;
  margin-bottom: 30px;
  transition: transform .65s cubic-bezier(.05,.2,.1,1), 
              box-shadow .65s cubic-bezier(.05,.2,.1,1),
              background-color 0.3s ease;
  border-radius: 10px;               /* Rounded corners */
  cursor: pointer;                   /* Click cursor */
}

/* Tablet spacing alignment */
@media (min-width: 768px) and (max-width: 1139px) {
  .promo-box { margin-bottom: 25px; }
}

/* Entire card becomes clickable */
.promo-box a {
  display: block;
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 10;
}

/* Hover lift + shadow */
.promo-box:hover {
  z-index: 100;
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 25px 55px rgba(0,0,0,.25);
  background-color: #0B2235;         /* Your dark blue hover */
}

/* Background gradient overlay */
.promo-box:before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: calc(100% + 10px);
  height: 100%;
  z-index: 10;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.2),
    rgba(11,34,53,1)
  ) !important;
  transition: opacity .65s cubic-bezier(.05,.2,.1,1);
}

/* Darker overlay on hover */
.promo-box:hover:before {
  opacity: 1;
}

/* Background image scaling */
.promo-box .promo-box-bg {
  opacity: 1;
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
  backface-visibility: hidden;
  transform: scale(1);
  transition: transform 1s ease, opacity 0.5s ease 0.25s;
}
.promo-box:hover .promo-box-bg {
  transform: scale(1.2);
  transition: transform 2s cubic-bezier(.1,.2,.7,1);
}

/* Inner layout */
.promo-box .inner {
  position: relative;
  text-align: left;
  color: #fff;
  z-index: 10;
  width: 100%;
  align-self: flex-end;
  /* Adds consistent bottom spacing under the text area */
padding-bottom: 0px;
}
}
/* ICON */
.promo-box .inner .promo-box-icon {
  margin-bottom: 10px;
}
.promo-box .inner .promo-box-icon svg {
  fill: #fff;
  height: 40px;
  margin-bottom: 12px;
}

/* ---------------------------------------
   EYEBROW (school name)
-----------------------------------------*/
.promo-eyebrow {
  font-family: Jost,sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: #FFFFFF;
  opacity: 0.9;
}

/* ---------------------------------------
   TITLE + BELOW-TITLE LINK
-----------------------------------------*/
.promo-box .heading-wrapper h3 {
  font-weight: 400;
  line-height: 1.2;
}

/* Add → View Partnership Case Study */
.promo-box .heading-wrapper h3::after {
  content: "→ View Partnership Case Study";
  display: block;
  margin-top: 12px;
  font-size: 1rem;
  color: #FFFFFF;
  font-weight: 400;
}

/* Hover transition for title shift */
.promo-box .heading-wrapper {
  transform: translateY(0px);
  transition: opacity .65s cubic-bezier(.05,.2,.1,1),
              transform .65s cubic-bezier(.05,.2,.1,1);
}

/* ---------------------------------------
   HOVER DESCRIPTION
-----------------------------------------*/
.promo-box .onhover-content {
  opacity: 0;
  position: absolute;
  bottom: 0; left: 0;
  font-size: 18px;
  transform: translateY(20px);
  transition: opacity .2s cubic-bezier(.05,.2,.1,1),
              transform .2s cubic-bezier(.05,.2,.1,1);
}

.promo-box:hover .onhover-content {
  opacity: 1;
  transform: translateY(0%) scale(0.95);
  transition: opacity .65s cubic-bezier(.05,.2,.1,1) 0.15s,
              transform .65s cubic-bezier(.05,.2,.1,1) 0.15s;
}

/* Ensure all text stays white */
.promo-box .inner * {
  color: #fff;
}


.promo-box .heading-wrapper h3 {
  margin-bottom: 4px;
}