/* Footer — Figma 5904:675 (desktop 769+) / 418:2521 (mobile ≤768)
   Figma Frame 70 = 1720×519; students @ 55.23% / 34.07%; button y=410
   ========================================================= */

.footerSection {
  position: relative;
  padding-top: 0;
}

.footerCta {
  position: relative;
}

/* ---- Desktop / tablet (769px+) ---- */
@media (min-width: 769px) {
  .footerCta {
    --stage-h: clamp(420px, calc(420px + 99 * ((100vw - 768px) / 1152)), 519px);
    min-height: var(--stage-h);
  }

  /* Frame 70 — 1720×519 overflow-clip */
  .footerCtaStage {
    position: relative;
    height: var(--stage-h);
    overflow: hidden;
    isolation: isolate;
    container-type: inline-size;
  }

  /* Rectangle 14 — y80, h439 in 519 stage */
  .footerCtaBackground {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 15.414%; /* 80/519 */
    height: 84.586%; /* 439/519 */
    border-radius: clamp(28px, calc(28px + 25 * ((100vw - 768px) / 1152)), 53px)
      clamp(30px, calc(30px + 25 * ((100vw - 768px) / 1152)), 55px) 0 0;
    overflow: hidden;
  }

  .footerCtaBackground img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .footerCtaBackground::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
  }

  /* Frame 7 — x145 y219, w736 */
  .footerCtaCopy {
    position: absolute;
    z-index: 3;
    left: 8.430%; /* 145/1720 */
    top: 42.197%; /* 219/519 */
    width: 42.791%; /* 736/1720 */
    max-width: 736px;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, calc(12px + 12 * ((100vw - 768px) / 1152)), 24px);
    container-type: inline-size;
  }

  .footerCtaEyebrow {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(20px, calc(20px + 12 * ((100vw - 768px) / 1152)), 32px);
    line-height: normal;
    color: var(--color-black);
    margin: 0;
  }

  .footerCtaTitle {
    font-family: var(--font-display);
    font-weight: 400;
    /* Scale to copy width so “KJSIM JOURNEY?” stays on one line */
    font-size: clamp(32px, 12.5cqi, 96px);
    line-height: 1.1;
    color: var(--color-power-red);
    text-transform: uppercase;
    text-shadow: 0 0 25px var(--color-white);
    margin: 0;
    white-space: nowrap;
  }

  /* 5904:684 — aspect locked; top:auto bottom flush when short, top:0 when tall */
  .footerCtaVisual {
    --visual-h: calc(34.07cqw * 562 / 586);
    position: absolute;
    z-index: 2;
    top: max(0px, calc(var(--stage-h) - var(--visual-h)));
    left: 55.233%; /* 950/1720 */
    width: 34.070%; /* 586/1720 */
    aspect-ratio: 586 / 562;
    height: auto;
    overflow: hidden;
    pointer-events: none;
  }

  .footerCtaVisual img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    max-width: none;
  }

  /* Frame 2 — x145 y410 (updated Figma position) */
  .footerCtaActions {
    position: absolute;
    z-index: 4;
    left: 8.430%; /* 145/1720 */
    top: calc(410 / 519 * var(--stage-h));
    display: block;
  }

  .footerCtaBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(56px, calc(56px + 12 * ((100vw - 768px) / 1152)), 68px);
    padding: clamp(12px, calc(12px + 3 * ((100vw - 768px) / 1152)), 15px)
      clamp(28px, calc(28px + 12 * ((100vw - 768px) / 1152)), 40px);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(22px, calc(22px + 10 * ((100vw - 768px) / 1152)), 32px);
    line-height: normal;
    background: var(--color-light-black);
    color: var(--color-white);
    white-space: nowrap;
    transition: background-color var(--transition);
  }

  .footerCtaBtn:hover,
  .footerCtaBtn:focus-visible {
    background-color: #000;
  }

  .footerCopyright {
    min-height: clamp(60px, calc(60px + 12 * ((100vw - 768px) / 1152)), 72px);
    padding: clamp(16px, calc(16px + 6 * ((100vw - 768px) / 1152)), 22px)
      clamp(16px, 3vw, 33px);
  }

  .footerCopyright p {
    font-size: clamp(14px, calc(14px + 6 * ((100vw - 768px) / 1152)), 20px);
  }
}

/* Tablet — keep title readable beside visual (769–1024) */
@media (min-width: 769px) and (max-width: 1024px) {
  .footerCtaCopy {
    width: min(50%, 420px);
  }

  .footerCtaTitle {
    font-size: clamp(28px, 13cqi, 40px);
  }
}

/* ---- Mobile (≤768) — Figma 418:2521 @ 430px ---- */
@media (max-width: 768px) {
  .footerSection .container {
    padding-inline: 0;
  }

  .footerCta {
    --footer-stage-h: clamp(480px, calc(514 / 430 * 100vw), 514px);
    min-height: var(--footer-stage-h);
  }

  .footerCtaStage {
    position: relative;
    height: var(--footer-stage-h);
    overflow: hidden;
    isolation: isolate;
  }

  .footerCtaBackground {
    position: absolute;
    z-index: 1;
    left: clamp(16px, calc(20 / 430 * 100vw), 20px);
    right: clamp(16px, calc(20 / 430 * 100vw), 20px);
    top: clamp(20px, calc(23 / 430 * 100vw), 23px);
    bottom: 0;
    height: auto;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
  }

  .footerCtaBackground img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .footerCtaBackground::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
  }

  .footerCtaCopy {
    position: absolute;
    z-index: 3;
    left: clamp(28px, calc(37 / 430 * 100vw), 37px);
    top: clamp(40px, calc(44 / 430 * 100vw), 44px);
    right: clamp(28px, calc(37 / 430 * 100vw), 37px);
    width: auto;
    max-width: 356px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .footerCtaEyebrow {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: var(--color-black);
    margin: 0;
    width: 100%;
  }

  .footerCtaTitle {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, calc(34 / 430 * 100vw), 36px);
    line-height: 1.1;
    color: var(--color-power-red);
    text-transform: uppercase;
    text-shadow: 0 0 25px var(--color-white);
    margin: 0;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
  }

  /* Students — Figma: top 218px (−90 = 128), 403×386, image 143.86% wide */
  .footerCtaVisual {
    position: absolute;
    z-index: 2;
    top: clamp(112px, calc(128 / 430 * 100vw), 128px);
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(403px, calc(403 / 430 * 100vw));
    height: clamp(340px, calc(386 / 430 * 100vw), 386px);
    max-height: none;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-50%);
  }

  .footerCtaVisual img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 143.86%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: left top;
  }

  .footerCtaActions {
    display: none;
  }

  .footerCopyright {
    min-height: 56px;
    padding-block: 14px;
    padding-inline: 16px;
  }

  .footerCopyright p {
    font-size: 13px;
    line-height: 1.35;
  }
}

.footerCopyright {
  position: relative;
  z-index: 5;
  background: var(--color-power-red);
  color: var(--color-white);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footerCopyright p {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

/* Thank you page */
.thankyouSection {
  position: relative;
  flex: 1;
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 80px) var(--page-pad);
  background: transparent;
}

.thankyouCard {
  width: min(100%, 820px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(24px, 4vw, 48px);
  background: rgba(255, 255, 255, 0.9);
  border-radius: clamp(16px, 2vw, 24px);
  box-shadow: 0 8px 32px rgba(35, 31, 32, 0.06);
}

.thankyouMark {
  width: clamp(56px, 9vw, 80px);
  height: clamp(56px, 9vw, 80px);
  border-radius: 50%;
  background: var(--color-power-red);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1;
  flex-shrink: 0;
}

.thankyouTitle {
  font-family: var(--font-display);
  font-size: clamp(22px, 5.5vw, 28px);
  line-height: 1.2;
  color: var(--color-power-red);
  text-transform: none;
  max-width: 680px;
}

@media (min-width: 769px) {
  .thankyouTitle {
    font-size: 35px;
  }
}

.thankyouIntro {
  margin: 0;
  font-size: clamp(15px, calc(15px + 3 * ((100vw - 350px) / 1570)), 18px);
  line-height: 1.5;
  color: var(--color-light-black);
  max-width: 640px;
}

.thankyouSteps {
  list-style: none;
  margin: clamp(4px, 1vw, 8px) 0 0;
  padding: 0;
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 16px);
  text-align: left;
}

.thankyouStep {
  display: block;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.thankyouStepBody {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.thankyouStepText {
  margin: 0;
  font-size: clamp(14px, calc(14px + 2 * ((100vw - 350px) / 1570)), 16px);
  line-height: 1.5;
  color: var(--color-light-black);
}

.thankyouStepText strong {
  color: var(--color-power-red);
  font-weight: 700;
}

.thankyouStepNote {
  margin: 0;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: clamp(8px, 1.2vw, 10px) clamp(10px, 1.5vw, 14px);
  font-size: clamp(13px, calc(13px + 2 * ((100vw - 350px) / 1570)), 15px);
  line-height: 1.45;
  color: var(--color-cool-gray);
  background: linear-gradient(
    90deg,
    rgba(183, 32, 46, 0.1) 0%,
    rgba(183, 32, 46, 0.05) 100%
  );
  border-left: 3px solid var(--color-power-red);
  border-radius: 0 8px 8px 0;
}

.thankyouStepNote strong {
  font-weight: 600;
  color: var(--color-cool-gray);
}

.thankyouPage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.thankyouPage .pageBackground {
  background-image: url("../assets/images/background-thankyoupage.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
}

.thankyouPage .footerCopyright {
  margin-top: auto;
}

@media (max-width: 480px) {
  .thankyouCard {
    padding: 20px 16px;
  }
}