/* ── Student Life ────────────────────────────────── */

.studentLife {
  position: relative;
  overflow: hidden;
  background: #edf0f4;
  padding: 100px max(50px, calc((100% - 1440px) / 2));
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.studentLife .bgWord {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-unbounded, 'Arial Black', sans-serif);
  font-size: min(179px, 12vw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

.studentLife .header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.studentLife .sectionTag {
  font-family: var(--font-inter, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #2865BA;
  text-align: center;
}

.studentLife .heading {
  font-family: var(--font-unbounded, 'Arial Black', sans-serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  color: #201e1f;
  text-align: center;
}

.studentLife .headingOrange {
  color: #397de3;
}

.studentLife .grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 334px 440px 1fr;
  grid-template-rows: 400px 300px;
  gap: 10px;
  width: 100%;
}

.studentLife .card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.studentLife .cardSport,
.studentLife .cardStudy,
.studentLife .cardEvents {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  background-size: cover;
  background-position: center;
}

.studentLife .cardSport::before,
.studentLife .cardStudy::before,
.studentLife .cardEvents::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(102, 102, 102, 0) 45%);
  pointer-events: none;
}

.studentLife .cardSport { border-radius: 300px; }
.studentLife .cardStudy { border-radius: 80px; }
.studentLife .cardEvents { border-radius: 20px; }

.studentLife .tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(2px);
  font-family: var(--font-inter, 'Inter', sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #dd0020;
  white-space: nowrap;
}

.studentLife .cardBlue {
  position: relative;
  background: #002b68;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 20px;
  overflow: hidden;
}

.studentLife .cardBlue > * {
  position: relative;
  z-index: 1;
}

.studentLife .cardBlueCurve {
  position: absolute;
  left: -18%;
  top: 0;
  width: 142%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  max-width: none;
}

.studentLife .cardPill {
  background: #fff;
  border-radius: 144px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 74px;
}

.studentLife .cardCta {
  position: relative;
  background: #397de3;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 20px;
  overflow: hidden;
}

.studentLife .ctaTop {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.studentLife .ctaBlue { color: #002b68; }

.studentLife .cardCta .cardTitleDark { color: #fff; }

.studentLife .ctaDescription {
  font-family: var(--font-inter, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

.studentLife .ctaButton {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 18px;
  padding: 6px 6px 6px 28px;
  border-radius: 100px;
  background: #201e1f;
  font-family: var(--font-inter, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.studentLife .ctaButton:hover { opacity: 0.9; }

.studentLife .ctaArrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  background: #397de3;
  color: #fff;
  flex-shrink: 0;
}

.studentLife .ctaAnchor {
  position: absolute;
  right: 20px;
  bottom: -10px;
  width: 120px;
  height: auto;
  transform: rotate(21deg);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.studentLife .cardTitleLight,
.studentLife .cardTitleDark {
  font-family: var(--font-unbounded, 'Arial Black', sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: pre-line;
}

.studentLife .cardTitleLight { color: #fff; }
.studentLife .cardTitleDark { color: #201e1f; }

.studentLife .cardDescriptionLight,
.studentLife .cardDescriptionDark {
  font-family: var(--font-inter, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

.studentLife .cardDescriptionLight { color: rgba(255, 255, 255, 0.75); }
.studentLife .cardDescriptionDark  { color: #60666b; }

/* ── Adaptive ────────────────────────────────────── */

@media (max-width: 1205px) {
  .studentLife { padding: 80px 32px; }
  .studentLife .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 380px 300px;
  }
  .studentLife .cardSport { border-radius: 200px; }
  .studentLife .cardPill { border-radius: 100px; padding: 32px 40px; }
}

@media (max-width: 885px) {
  .studentLife { padding: 60px 20px; gap: 32px; }
  .studentLife .bgWord { top: 8px; }
  .studentLife .heading { font-size: 24px; line-height: 26px; letter-spacing: -1px; }
  .studentLife .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 280px;
  }
  .studentLife .cardSport { border-radius: 200px; }
  .studentLife .cardStudy { border-radius: 60px; }
  .studentLife .cardPill { border-radius: 100px; padding: 32px 40px; }
}

@media (max-width: 640px) {
  .studentLife .grid {
    grid-template-columns: 1.25fr 1fr;
    grid-template-rows: 282px 282px 238px 232px 244px;
    grid-template-areas:
      "blue   blue"
      "sport  study"
      "events events"
      "pill   pill"
      "cta    cta";
    gap: 10px;
  }
  .studentLife .cardBlue   { grid-area: blue; }
  .studentLife .cardSport  { grid-area: sport; border-radius: 200px; }
  .studentLife .cardStudy  { grid-area: study; border-radius: 20px; }
  .studentLife .cardEvents { grid-area: events; }
  .studentLife .cardPill   { grid-area: pill; border-radius: 89px; padding: 40px 31px; }
  .studentLife .cardCta    { grid-area: cta; }
  .studentLife .cardBlue .cardTitleLight { font-size: 16px; }
  .studentLife .cardPill .cardTitleDark,
  .studentLife .cardCta .cardTitleDark { font-size: 18px; }
  .studentLife .ctaButton { width: 100%; justify-content: space-between; }
}

@media (max-width: 475px) {
  .studentLife { padding: 48px 12px; }
  .studentLife .cardBlue,
  .studentLife .cardCta { padding: 28px 20px; }
  .studentLife .cardDescriptionLight,
  .studentLife .cardDescriptionDark { font-size: 13px; line-height: 17px; }
  .studentLife .ctaButton { font-size: 13px; padding: 4px 4px 4px 20px; gap: 12px; }
  .studentLife .ctaArrow { width: 28px; height: 28px; }
  .studentLife .ctaAnchor { width: 90px; right: 12px; bottom: -6px; }
}