/* /var/www/relyn/static_src/css/partnership.css */

/* SECTION */
.partnership-section {
  width: 100%;
  display: flex;
  justify-content: center;
  color: #FFFFFF;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* SHELL (W=1920, H=736) */
.partnership-shell {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: 736px;
  overflow: hidden;

  /* background blur tuning */
  --blur-top: 56%;
  --blur-h: 520px;
}

/* BLUR LAYER */
.partnership-blur-layer {
  position: absolute;
  left: 50%;
  top: var(--blur-top);
  transform: translate(-50%, -50%);
  width: 1920px;
  max-width: 100%;
  height: var(--blur-h);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(99, 62, 178, 0.34) 0%,
    rgba(99, 62, 178, 0.20) 35%,
    rgba(0, 0, 0, 0.00) 72%
  );
  filter: blur(34px);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* HEADER */
.partnership-header {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding-top: 77px; /* 77px from top of section */
}

.partnership-kicker {
  margin: 0;
  font-size: 20px;
  font-weight: 700; /* bold */
  color: #FFFFFF;
  text-align: center;
}

.partnership-title {
  margin: 22px 0 0; /* 22px after subtitle */
  font-size: 48px;
  font-weight: 600; /* semibold */
  line-height: 1.18;
  color: #FFFFFF;
  text-align: center;
  padding: 0 24px;
}

/* CARDS ROW */
.partnership-cards {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 64px; /* horizontal space between 3 boxes */
  margin-top: 107px; /* 107px after title */
}

/* GLASS CARD */
.partnership-card {
  width: 450px;
  height: 288.13px;
  border-radius: 20px;
  border: 3px solid #633EB2;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  transform: translateY(0);
  opacity: 1;
}

/* REVEAL ANIMATION ONLY IF JS LOADED */
.has-js .partnership-card {
  transform: translateY(18px);
  opacity: 0;
  transition: transform 0.85s ease, opacity 0.85s ease;
}

.has-js .partnership-card.is-inview {
  transform: translateY(0);
  opacity: 1;
}

/* INNER CONTENT SPACING */
.partnership-card-inner {
  width: 100%;
  height: 100%;
  padding-top: 64px;     /* 64px from top border */
  padding-left: 43.5px;  /* 43.5px from left border */
  padding-right: 24px;
  box-sizing: border-box;
}

/* TEXT STYLES */
.partnership-card-value {
  margin: 0;
  font-size: 40px;
  font-weight: 600; /* semibold */
  line-height: 32px;
  color: #FFFFFF;
  text-align: left;
}

.partnership-card-label {
  margin: 32px 0 0; /* 32px below title */
  font-size: 24px;
  font-weight: 600; /* semibold */
  line-height: 32px;
  color: #FFFFFF;
  text-align: left;
}

.partnership-card-desc {
  margin: 37px 0 0; /* 37px below subtitle */
  font-size: 16px;
  font-weight: 400; /* regular */
  line-height: 22px;
  color: #FFFFFF;
  text-align: left;
  max-width: 330px;
  opacity: 0.95;
}

/* RESPONSIVE SAFETY (keeps below-1520 wrapping behavior for smaller screens) */
@media (max-width: 1520px) {
  .partnership-shell {
    height: auto;
    min-height: 736px;
    padding-bottom: 80px;
  }

  .partnership-cards {
    flex-wrap: wrap;
    padding: 0 24px;
    row-gap: 40px;
  }
}

/* ✅ LAPTOP + TABLET (LANDSCAPE): reduce box size + font size, keep 3 in a row */
@media (max-width: 1400px) and (min-width: 901px) {
  /* Keep row in one line */
  .partnership-cards {
    flex-wrap: nowrap;     /* ✅ force 3 in a row */
    gap: 28px;             /* ✅ tighter gap */
    padding: 0 48px;       /* ✅ keep breathing room */
  }

  /* Reduce card size */
  .partnership-card {
    width: 360px;          /* ✅ reduced */
    height: 250px;         /* ✅ reduced */
    border-radius: 18px;
    border-width: 2px;
  }

  .partnership-card-inner {
    padding-top: 48px;     /* ✅ reduced */
    padding-left: 32px;    /* ✅ reduced */
    padding-right: 22px;
  }

  /* Reduce fonts inside cards */
  .partnership-card-value {
    font-size: 32px;       /* ✅ reduced */
    line-height: 28px;
  }

  .partnership-card-label {
    font-size: 20px;       /* ✅ reduced */
    line-height: 28px;
    margin-top: 24px;
  }

  .partnership-card-desc {
    font-size: 14px;       /* ✅ reduced */
    line-height: 20px;
    margin-top: 22px;
    max-width: 300px;
  }

  /* Reduce header fonts a bit in this range (still readable) */
  .partnership-kicker {
    font-size: 17px;
  }

  .partnership-title {
    font-size: 38px;
    line-height: 1.16;
  }
}

/* ✅ TABLET (LANDSCAPE NARROW): still keep 3 in a row, a bit smaller */
@media (max-width: 900px) and (min-width: 561px) {
  .partnership-cards {
    flex-wrap: nowrap;     /* ✅ keep 3 in a row */
    gap: 18px;
    padding: 0 24px;
  }

  .partnership-card {
    width: 290px;          /* ✅ smaller */
    height: 230px;
    border-radius: 16px;
    border-width: 2px;
  }

  .partnership-card-inner {
    padding-top: 42px;
    padding-left: 24px;
    padding-right: 18px;
  }

  .partnership-card-value {
    font-size: 28px;
    line-height: 26px;
  }

  .partnership-card-label {
    font-size: 18px;
    line-height: 24px;
    margin-top: 20px;
  }

  .partnership-card-desc {
    font-size: 13px;
    line-height: 18px;
    margin-top: 18px;
    max-width: 260px;
  }

  /* Header smaller for this width */
  .partnership-kicker {
    font-size: 16px;
  }

  .partnership-title {
    font-size: 34px;
    line-height: 1.14;
  }
}

/* ✅ MOBILE: keep your existing mobile behavior + sizing */
@media (max-width: 560px) {
  .partnership-card {
    width: calc(100% - 32px);
    max-width: 450px;
  }

  .partnership-card-inner {
    padding-left: 28px;
    padding-right: 28px;
  }

  .partnership-kicker {
    font-size: 15px;
  }

  .partnership-title {
    font-size: 30px;
    line-height: 1.14;
  }
}