/* ====================================================================== *
 * File: landing_content_refinement.css
 * Location: static/css/landing_content_refinement.css
 * Description: Final landing refinements for simplified headings, compact course cards, fixed-curtain learning window, non-collapsing light footer bridge, and support-notice action.
 * Version: 1.0.1
 * Last Modified: Wed Aug 26 2026 - 13:43
 * Dependencies: landing.css, landing_editorial_redesign.css, landing_followup_polish.css
 * ====================================================================== */

/* -------------------------------------------------------------------------- *
 * 1. Simplified section hierarchy and tighter vertical rhythm
 * -------------------------------------------------------------------------- */

.landing-benefit-section {
  padding-top: clamp(18px, 2.2vw, 30px) !important;
  padding-bottom: clamp(26px, 3vw, 40px) !important;
}

.landing-heading-title-only {
  margin-bottom: clamp(18px, 2vw, 26px) !important;
}

.landing-benefit-section .landing-heading-title-only {
  margin-top: 0 !important;
}

.landing-course-portfolio {
  padding-top: clamp(22px, 2.8vw, 38px) !important;
  padding-bottom: clamp(30px, 3.5vw, 48px) !important;
}

.landing-course-portfolio-heading {
  margin-bottom: clamp(18px, 2vw, 28px) !important;
}

.landing-course-portfolio-heading h2 {
  margin: 0 !important;
}

/* - - - 1.1. Keep course cards balanced after removing metadata chips - - - */

.landing-course-card-body {
  min-height: 202px !important;
}

.landing-course-card-main {
  min-height: 118px !important;
}

.landing-course-action {
  margin-top: auto !important;
}

/* -------------------------------------------------------------------------- *
 * 2. Fixed-curtain learning window
 * -------------------------------------------------------------------------- */

.landing-learning-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(34px, 4vw, 54px) !important;
  padding-bottom: clamp(36px, 4.2vw, 58px) !important;
  background: #06152f !important;
}

/* - - - 2.1. Rebuild the hero curtain palette as a viewport-fixed background - - - */

.landing-learning-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0.98;
  background-image:
    linear-gradient(
      104deg,
      rgba(18, 56, 130, 0.2) 0%,
      rgba(70, 113, 232, 0.48) 13%,
      rgba(255, 255, 255, 0.08) 21%,
      rgba(16, 52, 118, 0.16) 31%,
      rgba(54, 113, 224, 0.3) 43%,
      rgba(233, 196, 109, 0.1) 52%,
      rgba(20, 60, 132, 0.2) 62%,
      rgba(81, 64, 176, 0.34) 76%,
      rgba(255, 255, 255, 0.06) 85%,
      rgba(12, 39, 91, 0.22) 100%
    ),
    linear-gradient(
      76deg,
      transparent 0 12%,
      rgba(255, 255, 255, 0.055) 19%,
      transparent 29% 41%,
      rgba(73, 137, 243, 0.13) 49%,
      transparent 61% 72%,
      rgba(233, 196, 109, 0.07) 80%,
      transparent 91%
    ),
    linear-gradient(135deg, #020713 0%, #06152f 30%, #0a2854 64%, #10183d 100%);
  background-attachment: fixed, fixed, fixed;
  background-position: center center, center center, center center;
  background-size: 128vw 150vh, 118vw 140vh, cover;
  pointer-events: none;
  animation: landingLearningCurtainDrift 18s ease-in-out infinite alternate;
}

/* - - - 2.2. Dark glass layer keeps timeline text readable while preserving folds - - - */

.landing-learning-section::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 7, 19, 0.34), rgba(5, 20, 47, 0.18) 42%, rgba(2, 7, 19, 0.42)),
    linear-gradient(90deg, rgba(1, 5, 15, 0.18), transparent 18%, transparent 82%, rgba(1, 5, 15, 0.18));
  pointer-events: none;
}

.landing-learning-section > .landing-editorial-shell {
  position: relative;
  z-index: 2;
}

@keyframes landingLearningCurtainDrift {
  0% {
    background-position: 42% 48%, 48% 44%, center center;
  }
  100% {
    background-position: 58% 54%, 54% 58%, center center;
  }
}

/* -------------------------------------------------------------------------- *
 * 3. Light bridge between final CTA and dark footer
 * -------------------------------------------------------------------------- */

/* - - - 3.1. Keep the final vertical gap inside the light content surface - - - */
.landing-content-flow {
  display: flow-root;
  padding-bottom: clamp(28px, 3vw, 42px);
}

.landing-final-cta {
  margin-bottom: 0 !important;
}

.fereshte-landing-footer {
  border-top: clamp(34px, 3.8vw, 54px) solid #f3f6fa;
}

.fereshte-landing-footer-shell {
  padding-top: 28px !important;
}

/* -------------------------------------------------------------------------- *
 * 4. Support notice Telegram action
 * -------------------------------------------------------------------------- */

.landing-support-notice-link {
  display: inline-flex;
  align-items: center;
  margin-right: 7px;
  border-bottom: 1px solid rgba(233, 196, 109, 0.52);
  color: #f1ce7d;
  font-weight: 850;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}

.landing-support-notice-link:hover,
.landing-support-notice-link:focus-visible {
  border-bottom-color: #f5d991;
  color: #fff0bd;
}

/* -------------------------------------------------------------------------- *
 * 5. Responsive refinements
 * -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .landing-benefit-section {
    padding-top: 16px !important;
    padding-bottom: 28px !important;
  }

  .landing-course-portfolio {
    padding-top: 20px !important;
    padding-bottom: 34px !important;
  }

  .landing-course-card-body {
    min-height: 194px !important;
  }

  .landing-course-card-main {
    min-height: 108px !important;
  }

  .landing-learning-section {
    padding-top: 30px !important;
    padding-bottom: 34px !important;
  }

  .landing-learning-section::before {
    background-size: 210vw 150vh, 180vw 135vh, cover;
  }

  .landing-content-flow {
    padding-bottom: 26px;
  }

  .fereshte-landing-footer {
    border-top-width: 32px;
  }

  .fereshte-landing-footer-shell {
    padding-top: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-learning-section::before {
    animation: none;
  }
}

/* ============================= End of landing_content_refinement.css ============================= */