/* ─────────────────────────────────────────────────────────────────────────
 * clever-prep-careers.css
 * Hero of /careers/ — centered label/headline/CTA + radial photo fan.
 * Adapted to the reference's structural model: fan is a direct absolute
 * child of the section (no host wrapper), all cards share a centered base
 * position so symmetric transforms fan outward correctly, gradient mask is
 * a section-level overlay.
 * ───────────────────────────────────────────────────────────────────────── */

.cp-careers-hero {
  position: relative;
  z-index: 2;
  background: var(--cp-cream-bg, #F7F4ED);
  /* Reference: pt 120, pb 500 desktop / 400 tablet / 250 mobile.
     Bottom padding reserves visual room for the absolutely-positioned fan. */
  padding: 120px clamp(20px, 5vw, 64px) 500px;
  overflow: hidden;
}

/* Section-level bottom gradient mask (ref: h-25%, transparent → bg). */
.cp-careers-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 25%;
  background: linear-gradient(180deg,
    rgba(247, 244, 235, 0) 0%,
    var(--cp-cream-bg, #F7F4ED) 100%);
  pointer-events: none;
  z-index: 4;
}

/* ── Centered content block ───────────────────────────────────────────── */
.cp-careers-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 442px;                 /* reference max-w-[442px] */
  margin: 0 auto 160px;             /* reference mb-[160px] below content */
  text-align: center;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 32px;                        /* reference gap-8 (= 32px) */
}

/* Label pill — Clever Prep mono-label inside a soft brand-cream chip. */
.cp-careers-hero__label-pill {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  padding: 8px 12px;
  background: rgba(40, 53, 74, 0.06);
  border-radius: 10px;
}
.cp-careers-hero__label {
  font-family: var(--cp-font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cp-text-headline, #28354A);
  line-height: 1;
}

/* Heading — brand serif. CSS-only blur/fade reveal on load. */
.cp-careers-hero__title {
  font-family: var(--cp-font-heading, Georgia, serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--cp-text-headline, #28354A);
  margin: 0;
  animation: cp-careers-reveal 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}
@keyframes cp-careers-reveal {
  from { opacity: 0; filter: blur(20px); }
  to   { opacity: 1; filter: blur(0); }
}

.cp-careers-hero__body {
  font-family: var(--cp-font-body, system-ui, sans-serif);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.55;
  color: var(--cp-text-secondary, #4a5568);
  margin: 0;
  max-width: 420px;
}

.cp-careers-hero__cta-wrap {
  display: inline-flex !important;
  width: auto !important;
}

/* ── Radial photo fan ─────────────────────────────────────────────────── */

/* Fan is a DIRECT absolute child of the section (no host wrapper).
   Reference: width 3400 / height 3450 / left 50% / top 504 / translateX(-50%).
   Responsive scaling via --fan-scale; the section's overflow:hidden clips
   the bottom of the fan, and the ::after gradient fades the visible edge.
   `top` is the only per-breakpoint offset that needs tuning. */
.cp-careers-hero__fan-host {
  --fan-scale: 1;
  position: absolute;
  left: 50%;
  top: 504px;
  width: 3400px;
  height: 3450px;
  transform: translateX(-50%) scale(var(--fan-scale));
  transform-origin: 50% 0;
  pointer-events: none;
  z-index: 1;
}
.cp-careers-fan {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;          /* reference justify-center */
}

.cp-careers-fan__row {
  position: relative;
  width: 100%;
  height: 1900px;
  z-index: 15;
}
.cp-careers-fan__row--mirrored {
  height: 1550px;
  margin-top: -25px;
  transform: rotateX(-180deg);
  transform-style: preserve-3d;
}

/* CRITICAL: every card shares the SAME starting position — horizontally
   centered on the row, top-aligned. The pair transforms (e.g. +390/-390
   on the x axis) then fan symmetrically from that shared origin. Without
   this, transforms shift each card from the row's top-left, breaking the
   fan symmetry entirely. */
.cp-careers-fan__card {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -170px;              /* center 340-wide card on x=50% */
  width: 340px;
  height: 360px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 44px rgba(20, 40, 80, 0.10),
              0 4px 12px  rgba(20, 40, 80, 0.06);
}
.cp-careers-fan__card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ── Responsive scaling (single knob: --fan-scale + top offset) ──────── */
@media (max-width: 1280px) {
  .cp-careers-hero__fan-host { --fan-scale: 0.82; top: 480px; }
}
@media (max-width: 991px) {
  .cp-careers-hero { padding-bottom: 400px; }
  .cp-careers-hero__fan-host { --fan-scale: 0.65; top: 431px; }
  .cp-careers-hero__inner { max-width: 420px; margin-bottom: 120px; }
}
@media (max-width: 767px) {
  .cp-careers-hero { padding-top: 96px; padding-bottom: 250px; }
  .cp-careers-hero__fan-host { --fan-scale: 0.45; top: 309px; }
  .cp-careers-hero__inner { max-width: 320px; gap: 22px; margin-bottom: 80px; }
}
@media (max-width: 480px) {
  .cp-careers-hero__fan-host { --fan-scale: 0.32; top: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-careers-hero__title { animation: none; opacity: 1; filter: none; }
}