/* =========================
   MODULE INTRO / LESSON 0
   Viewport-fit cinematic entry
========================= */

.module-intro-body {
  overflow: hidden;
}

.module-intro-page {
  position: relative;

  min-height: 100svh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px 24px;

  overflow: hidden;
}

@supports not (height: 100svh) {
  .module-intro-page {
    min-height: 100vh;
  }
}

/* subtelna poświata tła */
.module-intro-page::before {
  content: "";

  position: absolute;
  inset: auto auto 4% 50%;

  width: min(620px, 84vw);
  height: min(620px, 84vw);

  transform: translateX(-50%);

  background:
    radial-gradient(
      circle,
      rgba(255, 225, 68, 0.15),
      rgba(255, 225, 68, 0.04) 34%,
      transparent 68%
    );

  filter: blur(8px);

  pointer-events: none;
}

/* delikatna głębia na tle */
.module-intro-page::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.05),
      transparent 34%,
      rgba(0,0,0,0.12)
    );

  pointer-events: none;
}


/* =========================
   CARD
========================= */

.module-intro-card {
  position: relative;
  z-index: 2;

  width: min(100%, 840px);
  max-height: calc(100svh - 24px);

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  padding:
    16px
    46px
    22px;

  border-radius:
    36px 54px 44px 54px /
    44px 34px 54px 38px;

  background:
    linear-gradient(
      180deg,
      rgba(255,253,247,0.94),
      rgba(246,242,231,0.86)
    );

  border:
    1px solid rgba(255,255,255,0.32);

  box-shadow:
    0 30px 84px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.52),
    0 0 0 1px rgba(255,225,68,0.06);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  overflow: hidden;
}

.module-intro-card::before {
  content: "";

  position: absolute;
  top: 16px;
  left: 50%;

  width: 78px;
  height: 4px;

  transform: translateX(-50%);

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,225,68,0.95),
      transparent
    );

  opacity: 0.9;
}


/* =========================
   IMAGE
========================= */

.module-intro-image {
  position: relative;

  width: min(100%, 520px);

  margin:
    12px
    0
    18px;

  overflow: hidden;

  border-radius:
    26px 40px 32px 42px /
    34px 26px 42px 30px;

  background:
    rgba(255,255,255,0.42);

  box-shadow:
    0 20px 54px rgba(15,23,42,0.16),
    0 0 0 1px rgba(255,255,255,0.38);
}

.module-intro-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.06),
      transparent 42%,
      rgba(0,0,0,0.08)
    );

  pointer-events: none;
}

.module-intro-image img {
  width: 100%;
  height: clamp(145px, 19vh, 180px);

  object-fit: cover;
  object-position: center;

  display: block;
}


/* =========================
   BADGE
========================= */

.module-intro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 10px;

  padding: 8px 18px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #ffe45e,
      #ffd43b
    );

  color: rgba(15,23,42,0.92);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;

  text-transform: uppercase;

  box-shadow:
    0 12px 28px rgba(255,212,59,0.26);
}


/* =========================
   TEXT
========================= */

.module-intro-card h1 {
  margin:
    0
    0
    12px;

  max-width: 20ch;

  font-size: clamp(38px, 3.8vw, 54px);
  line-height: 0.9;

  letter-spacing: -0.055em;

  color: rgba(15,23,42,0.94);

  text-wrap: balance;
}

.module-intro-card p {
  max-width: 560px;

  margin:
    0
    0
    18px;

  font-size: 14.5px;
  line-height: 1.5;

  color: rgba(17,17,17,0.66);

  text-wrap: pretty;
}

.module-intro-card p strong {
  color: rgba(15,23,42,0.94);

  font-weight: 800;
  letter-spacing: 0.04em;
}


/* =========================
   BUTTON
========================= */

.module-intro-card .action-btn {
  min-width: 165px;
  height: 46px;

  padding: 0 24px;

  box-shadow:
    0 14px 34px rgba(255,212,59,0.30);
}

.module-intro-card .action-btn:hover {
  transform: translateY(-2px) scale(1.02);
}


/* =========================
   SHORT HEIGHT DEVICES
========================= */

@media (max-height: 760px) and (min-width: 769px) {

  .module-intro-page {
    padding: 8px 20px;
  }

  .module-intro-card {
    width: min(100%, 800px);

    padding:
      12px
      40px
      18px;
  }

  .module-intro-image {
    width: min(100%, 470px);

    margin:
      10px
      0
      12px;
  }

  .module-intro-image img {
    height: 140px;
  }

  .module-intro-badge {
    margin-bottom: 8px;

    padding:
      7px
      16px;

    font-size: 10px;
  }

  .module-intro-card h1 {
    margin-bottom: 10px;

    font-size: clamp(26px, 2.8vw, 34px);
    line-height: 0.92;
  }

  .module-intro-card p {
    margin-bottom: 14px;

    font-size: 14px;
    line-height: 1.45;
  }

  .module-intro-card .action-btn {
    height: 44px;
    min-width: 155px;
  }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .module-intro-page {
    align-items: center;

    padding:
      14px
      14px;
  }

  .module-intro-card {
    width: 100%;
    max-height: calc(100svh - 28px);

    padding:
      16px
      18px
      20px;

    border-radius:
      28px 36px 32px 38px /
      36px 28px 40px 30px;
  }

  .module-intro-card::before {
    top: 12px;
  }

  .module-intro-image {
    width: 100%;

    margin:
      16px
      0
      14px;

    border-radius: 22px;
  }

  .module-intro-image img {
    height: clamp(150px, 24vh, 210px);
  }

  .module-intro-badge {
    margin-bottom: 10px;

    padding:
      7px
      15px;

    font-size: 10px;
  }

  .module-intro-card h1 {
    max-width: 10ch;

    margin-bottom: 10px;

    font-size: clamp(34px, 12vw, 52px);
    line-height: 0.92;
  }

  .module-intro-card p {
    margin-bottom: 16px;

    font-size: 14px;
    line-height: 1.48;
  }

  .module-intro-card .action-btn {
    width: 100%;
    height: 46px;
  }
}


/* =========================
   MODULE INTRO POINTS
========================= */

.module-intro-points {
  width: 100%;
  max-width: 720px;

  display: flex;
  flex-direction: column;
  gap: 9px;

  margin:
    0
    0
    18px;
}

.module-intro-point {
  padding:
    10px
    18px
    11px;

  border-radius:
    18px;

  background:
    rgba(255,255,255,0.36);

  border:
    1px solid rgba(15,23,42,0.045);

  text-align:
    left;
}

.module-intro-point span {
  display:
    block;

  margin-bottom:
    3px;

  font-size:
    10.5px;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;

  color:
    rgba(15,23,42,0.42);
}

.module-intro-point p {
  max-width:
    none;

  margin:
    0;

  font-size:
    14px;

  line-height:
    1.42;

  color:
    rgba(17,17,17,0.66);
}

.module-intro-point strong {
  color:
    rgba(15,23,42,0.94);

  font-weight:
    800;
}

@media (max-width: 768px) {
  .module-intro-image {
    margin: 18px 0 16px;
  }

  .module-intro-image img {
    height: clamp(150px, 22vh, 190px);
    object-fit: cover;
    object-position: center 64%;
  }
}

@media (max-width: 420px) {
  .module-intro-image img {
    height: clamp(145px, 20vh, 175px);
    object-position: center 66%;
  }
}

@media (max-width: 768px) {
  .module-intro-image {
    background: rgba(255,255,255,0.34);
  }

  .module-intro-image img {
    height: auto;
    max-height: 210px;
    object-fit: contain;
    object-position: center center;
  }
}

@media (max-width: 420px) {
  .module-intro-image img {
    max-height: 190px;
  }
}

@media (max-width: 768px) {
  .module-intro-body {
    overflow-y: auto;
  }

  .module-intro-page {
    min-height: 100svh;
    align-items: flex-start;
    padding: 18px 14px 28px;
    overflow-y: auto;
  }

  .module-intro-card {
    max-height: none;
    margin: 0 auto;
  }

  .module-intro-image {
    margin: 18px 0 18px;
  }

  .module-intro-image img {
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center center;
  }
}

@media (max-width: 420px) {
  .module-intro-page {
    padding: 16px 12px 26px;
  }

  .module-intro-image {
    margin: 16px 0 16px;
  }
}