/* hero.css — Figma "Frame 1621508745" (1920 × 1050) */

.heroSection {
  position: relative;
  z-index: 2;
  background: #eee7e7;
}

.heroSection__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.heroSection__campus {
  position: absolute;
  left: calc(-36 * var(--s));
  top: calc(-116 * var(--s));
  width: calc(100% + 426 * var(--s));
  max-width: none;
  height: calc(1282 * var(--s));
  object-fit: cover;
  object-position: center bottom;
}

.heroSection__fade {
  position: absolute;
  inset: 0;
}

.heroSection__fade--one {
  background: linear-gradient(
    -89.39deg,
    rgba(251, 246, 242, 0) 0.276%,
    rgba(254, 247, 240, 0.5) 45.425%,
    rgba(254, 248, 242, 0.7) 56.755%,
    rgba(254, 249, 243, 0.9) 73.083%,
    rgb(254, 252, 247) 89.205%
  );
}

.heroSection__fade--two {
  background: linear-gradient(
    -89.39deg,
    rgba(251, 246, 242, 0) 0.276%,
    rgba(254, 247, 240, 0.3) 39.99%,
    rgba(254, 248, 242, 0.42) 50.812%,
    rgba(254, 249, 243, 0.54) 73.083%,
    rgba(254, 252, 247, 0.6) 89.205%
  );
}

.heroSection__stage {
  height: calc(1050 * var(--s));
}

.heroSection__wave {
  position: absolute;
  left: calc((1920 * var(--s) - 100cqw) / 2 - 10 * var(--s));
  top: calc(395 * var(--s));
  width: calc(100cqw + 11 * var(--s));
  height: calc(655 * var(--s));
  overflow: hidden;
  pointer-events: none;
}

.heroSection__wave img {
  position: absolute;
  left: -0.01%;
  top: 0;
  width: 100.03%;
  height: 104.89%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

.heroSection__lead {
  position: absolute;
  left: calc(118 * var(--s));
  top: calc(217.5 * var(--s));
  transform: translateY(-50%);
  width: calc(944 * var(--s));
  font-size: calc(46 * var(--s));
  font-weight: 400;
  line-height: normal;
}

.heroSection__titleBlock {
  position: absolute;
  left: calc(118 * var(--s));
  top: calc(255 * var(--s));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.heroSection__edition {
  position: relative;
  z-index: 1;
  margin-bottom: calc(-15 * var(--s));
  padding-inline: calc(10 * var(--s));
  font-size: calc(22 * var(--s));
  font-weight: 500;
  line-height: normal;
}

.heroSection__edition sup {
  font-size: calc(14.19 * var(--s));
  line-height: 0;
  vertical-align: calc(7 * var(--s));
}

.heroSection__title {
  display: flex;
  align-items: center;
  gap: calc(28 * var(--s));
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

.heroSection__brand {
  min-width: calc(672 * var(--s));
  font-size: calc(115 * var(--s));
  letter-spacing: calc(-2.3 * var(--s));
  background: linear-gradient(90deg, #f63c00 0%, #ce1e04 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.heroSection__year {
  font-size: calc(100 * var(--s));
  color: #2b0c0c;
}

.heroSection__inspired {
  position: absolute;
  left: calc(119 * var(--s));
  top: calc(468 * var(--s));
  transform: translateY(-50%);
  width: calc(594 * var(--s));
  font-size: calc(28 * var(--s));
  line-height: normal;
}

.heroSection__cause {
  position: absolute;
  left: calc(119 * var(--s));
  top: calc(523 * var(--s));
  transform: translateY(-50%);
  width: calc(830 * var(--s));
  font-size: calc(50 * var(--s));
  font-weight: 700;
  letter-spacing: calc(-1 * var(--s));
  line-height: normal;
}

.heroSection__sdg {
  position: absolute;
  left: calc(120 * var(--s));
  top: calc(592 * var(--s));
  width: calc(161 * var(--s));
  height: calc(161 * var(--s));
  object-fit: cover;
}

.heroSection__details {
  position: absolute;
  left: calc(120 * var(--s));
  top: calc(810 * var(--s));
  width: calc(730 * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--s));
}

.heroSection__meta {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--s));
  width: calc(313 * var(--s));
}

.heroSection__metaItem {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--s));
  font-size: calc(22 * var(--s));
  line-height: normal;
  white-space: nowrap;
}

.heroSection__metaItem--top {
  align-items: flex-start;
}

.heroSection__metaItem img {
  width: calc(32 * var(--s));
  height: calc(32 * var(--s));
  flex-shrink: 0;
}

.heroSection__actions {
  display: flex;
  align-items: center;
  gap: calc(17 * var(--s));
}

/* Right-side photo rotates through Figma variants 1394:1040 / 1042 / 1093 */
.heroSection__slides {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  /* photos are cropped at the hero's bottom edge, so their shadows must stop there too */
  clip-path: inset(-50% -50% 0 -50%);
}

.heroSection__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, translate 0.45s ease-in, visibility 0s 0.45s;
  translate: calc(40 * var(--s)) 0;
}

/* outgoing photo clears first so the cut-outs never ghost over each other */
.heroSection__slide.is-active {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity 0.8s ease 0.2s, translate 1s var(--ease-out, ease) 0.2s, visibility 0s 0.2s;
}

.heroSection__slide.is-leaving {
  translate: calc(-40 * var(--s)) 0;
}

.heroSection__slideImage,
.heroSection__slideShadow {
  position: absolute;
  left: calc(var(--x) * var(--s));
  top: calc(var(--y) * var(--s));
  width: calc(var(--w) * var(--s));
  height: calc(var(--h) * var(--s));
  max-width: none;
}

/* Figma's 6-layer drop shadows, pre-rendered (live CSS filters re-blur every frame) */
.heroSection__slide--one .heroSection__slideImage { --x: 1026; --y: 98; --w: 895; --h: 952; }
.heroSection__slide--one .heroSection__slideShadow { --x: 853; --y: -75; --w: 1241; --h: 1382; }
.heroSection__slide--two .heroSection__slideImage { --x: 933; --y: 116; --w: 1006; --h: 934; }
.heroSection__slide--two .heroSection__slideShadow { --x: 809; --y: -8; --w: 1254; --h: 1416; }
.heroSection__slide--three .heroSection__slideImage { --x: 974; --y: 103; --w: 945; --h: 950; }
.heroSection__slide--three .heroSection__slideShadow { --x: 801; --y: -70; --w: 1291; --h: 1367; }

/* ---------- Tablet & mobile ---------- */
@media (max-width: 1023px) {
  .heroSection {
    overflow: hidden;
  }

  .heroSection__campus {
    left: -10%;
    top: -5%;
    width: 120%;
    height: 110%;
  }

  .heroSection__fade--one {
    background: linear-gradient(180deg, rgb(254, 252, 247) 0%, rgba(254, 249, 243, 0.92) 55%, rgba(254, 247, 240, 0.5) 100%);
  }

  .heroSection__stage {
    height: auto;
    display: flex;
    flex-direction: column;
    padding-top: 72px;
    padding-bottom: 0;
  }

  .heroSection__lead,
  .heroSection__titleBlock,
  .heroSection__inspired,
  .heroSection__cause,
  .heroSection__sdg,
  .heroSection__details {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
  }

  .heroSection__lead {
    margin-top: 24px;
    font-size: clamp(20px, 3.6vw, 32px);
  }

  .heroSection__titleBlock {
    margin-top: 10px;
  }

  .heroSection__edition {
    margin-bottom: -6px;
    padding-inline: 4px;
    font-size: clamp(14px, 2vw, 18px);
  }

  .heroSection__edition sup {
    font-size: 0.65em;
    vertical-align: 0.5em;
  }

  .heroSection__title {
    flex-wrap: wrap;
    gap: 0 12px;
  }

  .heroSection__brand {
    font-size: clamp(46px, 10.5vw, 96px);
    letter-spacing: -0.02em;
    min-width: 0;
  }

  .heroSection__year {
    font-size: clamp(40px, 9.2vw, 84px);
  }

  .heroSection__inspired {
    margin-top: 18px;
    font-size: clamp(16px, 2.4vw, 24px);
  }

  .heroSection__cause {
    margin-top: 6px;
    font-size: clamp(24px, 4.4vw, 40px);
    letter-spacing: -0.02em;
  }

  .heroSection__sdg {
    margin-top: 18px;
    width: clamp(96px, 14vw, 130px);
    height: clamp(96px, 14vw, 130px);
  }

  .heroSection__details {
    margin-top: 22px;
    gap: 24px;
  }

  .heroSection__meta {
    width: auto;
  }

  .heroSection__metaItem {
    font-size: clamp(16px, 2.2vw, 20px);
    gap: 12px;
  }

  .heroSection__metaItem img {
    width: 26px;
    height: 26px;
  }

  .heroSection__actions {
    flex-wrap: wrap;
    gap: 12px;
  }

  .heroSection__wave {
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: clamp(260px, 52vw, 480px);
  }

  .heroSection__slides {
    position: relative;
    inset: auto;
    align-self: center;
    margin-top: 28px;
    width: min(92%, 560px);
    aspect-ratio: 1006 / 952;
  }

  .heroSection__slideImage {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }

  .heroSection__slideShadow {
    display: none;
  }
}

@media (max-width: 580px) {
  .heroSection__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .heroSection__actions .pillBtn {
    white-space: normal;
    text-align: center;
  }
}

/* Figma mobile banner is 420 wide. --m scales every size with the screen. */
@media (max-width: 768px) {
  .page {
    --m: calc(100cqw / 420);
  }

  .heroSection {
    background: #d6eaff;
  }

  .heroSection__campus {
    top: auto;
    bottom: 0;
    left: -3%;
    width: 106%;
    height: 46%;
    object-fit: cover;
    object-position: center bottom;
    filter: blur(calc(4 * var(--m)));
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 100%);
  }

  .heroSection__fade--one {
    background: linear-gradient(
      180deg,
      #fefcf7 0%,
      rgba(254, 252, 247, 0.9) 16%,
      rgba(254, 247, 240, 0.45) 34%,
      rgba(254, 248, 242, 0.16) 48%,
      rgba(251, 246, 242, 0) 62%
    );
  }

  .heroSection__fade--two {
    background: linear-gradient(180deg, rgba(254, 252, 247, 0.5) 0%, rgba(254, 252, 247, 0) 26%);
  }

  .heroSection__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: calc(12 * var(--m));
    padding-top: calc(68 * var(--m));
    padding-bottom: 0;
  }

  .heroSection__lead,
  .heroSection__titleBlock,
  .heroSection__inspired,
  .heroSection__details,
  .heroSection__slides {
    grid-column: 1 / -1;
  }

  .heroSection__lead {
    margin-top: calc(6 * var(--m));
    font-size: calc(18 * var(--m));
  }

  .heroSection__titleBlock {
    margin-top: calc(8 * var(--m));
  }

  .heroSection__edition {
    margin-bottom: calc(-2 * var(--m));
    padding-inline: calc(2 * var(--m));
    font-size: calc(13 * var(--m));
  }

  .heroSection__title {
    flex-wrap: nowrap;
    gap: calc(8 * var(--m));
  }

  .heroSection__brand {
    font-size: calc(34 * var(--m));
    letter-spacing: calc(-0.7 * var(--m));
  }

  .heroSection__year {
    font-size: calc(32 * var(--m));
  }

  .heroSection__inspired {
    margin-top: calc(12 * var(--m));
    font-size: calc(15 * var(--m));
  }

  .heroSection__cause {
    grid-column: 1;
    margin-top: calc(6 * var(--m));
    font-size: calc(31 * var(--m));
    line-height: 1.05;
  }

  .heroSection__sdg {
    grid-column: 2;
    grid-row: auto;
    align-self: center;
    margin-top: calc(6 * var(--m));
    width: calc(72 * var(--m));
    height: calc(72 * var(--m));
  }

  .heroSection__details {
    margin-top: calc(16 * var(--m));
    gap: calc(16 * var(--m));
  }

  .heroSection__metaItem {
    gap: calc(10 * var(--m));
    font-size: calc(15 * var(--m));
  }

  .heroSection__metaItem img {
    width: calc(22 * var(--m));
    height: calc(22 * var(--m));
  }

  .heroSection__actions {
    display: none;
  }

  .heroSection__wave {
    height: 46%;
    left: -18%;
    width: 136%;
  }

  .heroSection__slides {
    width: calc(100% + 2 * clamp(16px, 4vw, 40px));
    margin-top: calc(8 * var(--m));
    margin-inline: calc(-1 * clamp(16px, 4vw, 40px));
    aspect-ratio: 420 / 390;
    background: transparent;
  }

  .heroSection__slideImage {
    object-fit: contain;
    object-position: center bottom;
  }
}