/* ==========================================================
   Design enhancements layered on top of the faithful recreation.
   Remove the <link> to this file in index.html to get the exact
   live-page look back.
   ========================================================== */

:root {
  /* One gap between every section: 64px on phones up to 120px on desktop */
  --section-gap: clamp(64px, 8.5vw, 120px);
}

/* ---------- 1. Even vertical rhythm between sections ---------- */

/* Remove the uneven spacing from the page wrappers (44px page-header
   padding, 32px and 100px layout margins) ... */
.page-header {
  padding-top: 0;
  padding-bottom: 0;
}

.experience-region > .experience-layout:not(:first-child) > div:first-child,
.experience-region > .experience-layout.experience-layout--spaced:not(:first-child) > div:first-child {
  margin-top: 0;
  margin-bottom: 0;
}

/* ... and let each section own exactly one gap above it. */
.dvp-workplace-section,
.abhta-offer,
.abhta-courses {
  padding-top: var(--section-gap);
  padding-bottom: 0;
}

.dvp-benefits {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

footer {
  margin-top: var(--section-gap);
}

/* ---------- 2. Full-width hero (no lighter-blue side strips) ---------- */

.experience-top .background--devry-blue {
  background-color: var(--abhta-hero-blue) !important;
}

.experience-top .container {
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

.experience-top .row {
  margin-right: 0;
  margin-left: 0;
}

.experience-top .region {
  padding-right: 0;
  padding-left: 0;
}

/* Hero text starts on the same left edge as the logo and the 1240px content column */
.abhta-hero {
  container-type: inline-size;
}

.abhta-hero__content {
  padding-left: var(--content-inset);
  padding-left: max(var(--content-inset), calc((100cqw - 1240px) / 2));
}

@media (max-width: 820px) {
  .abhta-hero__content {
    padding-right: var(--content-inset);
    padding-left: var(--content-inset);
  }
}

/* ---------- 3. Slow photo drift + yellow accent under the headline ---------- */

.abhta-hero__text h1::after {
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 22px;
  border-radius: 2px;
  background: #ffd600;
  content: "";
}

@media (prefers-reduced-motion: no-preference) {
  .abhta-hero__image img {
    animation:
      abhta-image-in 1100ms cubic-bezier(0.22, 1, 0.36, 1) 100ms forwards,
      abhta-hero-drift 18s ease-out 1200ms forwards;
    will-change: transform;
  }

  .abhta-hero__text h1::after {
    transform: scaleX(0);
    transform-origin: left center;
    animation: abhta-accent-draw 650ms cubic-bezier(0.22, 1, 0.36, 1) 750ms forwards;
  }
}

@keyframes abhta-hero-drift {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.04);
  }
}

@keyframes abhta-accent-draw {
  to {
    transform: scaleX(1);
  }
}

/* ---------- 4. Softer, more refined course-card shadows ---------- */

.course-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(0, 51, 160, 0.06),
    0 14px 34px -10px rgba(0, 51, 160, 0.2);
}

.course-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 4px rgba(0, 51, 160, 0.06),
    0 24px 48px -12px rgba(0, 51, 160, 0.26);
}

/* ---------- 5. One light sweep across the savings badge as each card appears ---------- */

.course-card__savings {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

@media (prefers-reduced-motion: no-preference) {
  .course-card__savings::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 25%,
      rgba(255, 255, 255, 0.75) 50%,
      transparent 75%
    );
    transform: translateX(-110%);
    pointer-events: none;
    content: "";
  }

  /* Starts once the card has finished sliding in; plays one time only */
  .reveal-card.is-visible .course-card__savings::after {
    animation: abhta-badge-shine 1100ms cubic-bezier(0.45, 0, 0.25, 1) 750ms forwards;
  }

  .reveal-card.is-visible:nth-child(2) .course-card__savings::after {
    animation-delay: 890ms;
  }
}

@keyframes abhta-badge-shine {
  to {
    transform: translateX(110%);
  }
}

/* ---------- 6. Soft glow behind the closing call to action ---------- */

.abhta-final-cta {
  background:
    radial-gradient(
      ellipse 55% 75% at 50% 42%,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0) 72%
    ),
    var(--abhta-cta-light-blue);
}