/* ============================================================
   expert.css — /product-expert-program (EN + CS) only.
   One full-viewport screen modelled on the app login page: photo card
   on the left, a short pitch on the right. Nothing below the fold but
   the footer, so everything here has to fit inside the viewport.
   ============================================================ */
.xp-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  justify-content: center;   /* content sits in the middle of the screen */
  padding-top: var(--header-h);
  padding-bottom: clamp(28px, 3.5vw, 56px);
}
.xp-screen > .container { flex: 0 0 auto; }
.xp-screen__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 72px); align-items: stretch; }
.xp-screen__visual { order: -1; display: flex; }   /* photo left, stretched to the copy column */

/* Page ground: the site hero gradient, tilted a little further off vertical
   with the pure white mid stop tinted and the periwinkle corner brought up. */
.xp-screen .hero__bg {
  background:
    radial-gradient(52% 72% at 88% 92%, rgba(190, 194, 255, .30) 0%, rgba(238, 242, 255, 0) 62%),
    radial-gradient(42% 60% at 6% 4%, rgba(238, 242, 255, .6) 0%, rgba(238, 242, 255, 0) 55%),
    linear-gradient(155deg, #f3f5ff 0%, #f8f9ff 45%, #f0f3ff 100%);
}

/* ---- Photo card ---- */
.xp-photo { position: relative; flex: 1 1 auto; border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow-lg); }
.xp-photo img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: center 38%; }
.xp-photo__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 2.4vw, 32px); color: #fff;
  background: linear-gradient(180deg, rgba(28, 26, 78, 0) 0%, rgba(28, 26, 78, .72) 48%, rgba(28, 26, 78, .92) 100%);
}
.xp-photo__pill {
  display: inline-block; margin-bottom: 12px; padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(28, 26, 78, .55); font-size: 13px; font-weight: 600; color: #fff;
}
.xp-photo__title { font-size: var(--fs-body); line-height: 1.5; color: #fff; }
.xp-photo__title strong { color: #fff; font-weight: 700; }

/* one slide fades down and out, the next fades back in */
.xp-slide { transition: opacity .45s ease, transform .45s ease; }
.xp-slide.is-out { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .xp-slide { transition: none; } }

/* ---- Right column: eyebrow, title, CTA, lead, pitch paragraphs, roles ---- */
.xp-copy { max-width: 46ch; }
/* type comes from the site: .eyebrow, .hero__title and the --fs-* tokens */
.xp-copy .eyebrow { margin-bottom: 16px; }
.xp-copy p { margin-top: 16px; font-size: var(--fs-body); color: var(--c-text); }
.xp-copy .xp-lead { margin-top: 22px; font-size: var(--fs-lead); }
.xp-copy p a { color: var(--c-primary); text-decoration: underline; }

.xp-copy .btn { margin-top: 28px; }
.xp-copy h1 + .btn { margin-top: 24px; }
.xp-copy .btn + p { margin-top: 22px; }

/* Short laptop screens: keep the whole screen inside the viewport. */
@media (max-height: 820px) {
  .xp-copy h1 { font-size: clamp(28px, 3vw, 38px); }
  .xp-copy p { margin-top: 14px; font-size: var(--fs-body); }
  .xp-photo img { min-height: 320px; }
}

/* Phones and tablets: stack and let the screen breathe instead of squeezing. */
@media (max-width: 900px) {
  .xp-screen { min-height: 0; padding-top: calc(var(--header-h) + 24px); padding-bottom: 48px; }
  .xp-screen > .container { padding-top: clamp(12px, 2.5vh, 36px); }
  .xp-screen__inner { grid-template-columns: 1fr; gap: 32px; }
  .xp-screen__visual { order: 0; }
  .xp-copy { max-width: none; }
  .xp-photo img { height: clamp(300px, 52vw, 400px); min-height: 0; }
}