/* ==========================================================================
   Financial Aid — gradient band with NACCAS legal copy + photo collage
   ========================================================================== */

.finaid {
  position: relative;
  overflow: hidden;
  background: #151515 radial-gradient(ellipse 48.2% 64.5% at 30.89% 69.73%, #780541 0%, #151515 100%);
  padding-top: clamp(58px, calc(58px + 51 * (100vw - 390px) / 1290), 109px);
  padding-inline: clamp(16px, calc(16px + 224 * (100vw - 390px) / 1290), 240px);
}

/* Container stays position: static so the absolute collage (desktop) anchors
   to the section box; 50% then equals the section/container center line. */
.finaid__container {
  max-width: 1200px;
  margin-inline: auto;
}

.finaid__content {
  position: relative;
  z-index: 1;
  max-width: 870px;
}

.finaid__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(13px, calc(13px + 3 * (100vw - 390px) / 1290), 16px);
  line-height: 1.425;
  letter-spacing: clamp(2.6px, calc(2.6px + 0.6 * (100vw - 390px) / 1290), 3.2px);
  text-transform: uppercase;
  color: var(--c-pink);
}

.finaid__title {
  margin-top: 17px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, calc(38px + 19 * (100vw - 390px) / 1290), 57px);
  line-height: 1.13;
  text-transform: uppercase;
}
.finaid__title-glitter {
  background: url('/wp-content/themes/ogle/assets/img/glitter-texture.webp') center / cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.finaid__title-pink { color: var(--c-pink); }

.finaid__subtitle {
  margin-top: 20px; /* Figma ink gap 32, leading-trim compensated (measured) */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.425;
  color: var(--c-white);
}

.finaid__body,
.finaid__naccas,
.finaid__list-intro,
.finaid__list {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 22.8px;
  color: var(--c-white);
}

.finaid__body { margin-top: 20px; }
.finaid__body p + p { margin-top: 22.8px; }

.finaid__smallprint,
.finaid__footnote {
  margin-top: 22.5px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 17.1px;
  color: var(--c-white);
}

.finaid__naccas { margin-top: 23.5px; }
.finaid__naccas > p + p,
.finaid__naccas > address + p,
.finaid__naccas > .finaid__list + p { margin-top: 22.8px; }
.finaid__naccas .finaid__list-intro + .finaid__list { margin-top: 0; }

.finaid__address { font-style: normal; }

.finaid__list li {
  position: relative;
  padding-left: 24px;
}
.finaid__list li::before {
  content: '\2022';
  position: absolute;
  left: 9px;
}

.finaid__link {
  color: var(--c-white);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  transition: color 0.3s ease-out;
}
.finaid__link:hover { color: var(--c-pink); }

/* Collage — mobile: in-flow, clipped at section bottom */
.finaid__art {
  position: relative;
  height: 339px;
  margin-top: 73px; /* Figma ink gap 76, leading-trim compensated */
  overflow: hidden;
}
.finaid__diamonds {
  position: absolute;
  left: 0;
  top: 108px;
  width: 354.7px;
  height: 354.7px;
}
.finaid__model {
  position: absolute;
  left: 45.4px;
  top: 0;
  width: 312.6px;
  height: 358.1px;
  object-fit: cover;
  object-position: top center;
}

@media (min-width: 900px) {
  .finaid {
    --s: calc(min(100vw, 1680px) / 1680);
    background: #151515 radial-gradient(ellipse 46.4% 77% at 30.89% 69.73%, #780541 0%, #151515 100%);
    padding-bottom: 111px;
  }
  .finaid__title { margin-top: 15px; }
  /* 870px at 1680; shrinks proportionally at mid widths so the text never
     runs under the proportionally-anchored collage */
  .finaid__content { max-width: calc(870 * var(--s)); }
  /* Collage: absolute, anchored to container center, proportional <1680 */
  .finaid__art {
    position: static;
    height: auto;
    margin: 0;
    overflow: visible;
  }
  .finaid__diamonds {
    left: calc(50% + 297 * var(--s));
    top: calc(739 * var(--s));
    width: calc(633 * var(--s));
    height: calc(633 * var(--s));
  }
  .finaid__model {
    left: calc(50% + 412 * var(--s));
    top: calc(588 * var(--s));
    width: calc(558 * var(--s));
    height: calc(639 * var(--s));
  }
}