/* =========================================================
   POLSTEAM – Proces rekrutacji (FINAL / LIGHT)
   ========================================================= */

/* =========================
   ZMIENNE
   ========================= */

.ps-ctc{
  --ps-ctc-radius: 12px;
  --ps-ctc-gap: 24px;
  --ps-ctc-pad: 32px;

  --ps-ctc-bg: #ffffff;
  --ps-ctc-card: #ffffff;
  --ps-ctc-border: rgba(10,18,30,.12);
  --ps-ctc-shadow: 0 18px 40px rgba(10,18,30,.14);

  --ps-ctc-text: #0e1726;
  --ps-ctc-muted: rgba(14,23,38,.70);

  --ps-ctc-active-flex: 1.6;
  --ps-ctc-inactive-flex: 1;

  background: var(--ps-ctc-bg);
}

/* =========================
   NAGŁÓWEK
   ========================= */

.ps-ctc__head{
  max-width: 1400px;
  margin: 0 auto 18px;
  padding: 0 32px;
}

.ps-ctc__title{
  margin: 0 0 6px;
  font-family: "Teko", sans-serif;
  font-weight: 600;
  letter-spacing: .02em;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1;
  color: var(--ps-ctc-text);
}

.ps-ctc__hint{
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--ps-ctc-muted);
}

/* =========================
   RAIL – pełna szerokość
   ========================= */

.ps-ctc__rail{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px 32px;

  display: flex;
  gap: var(--ps-ctc-gap);
  align-items: stretch;
}

/* =========================
   KARTA
   ========================= */

.ps-ctc__card{
  position: relative;
  flex: var(--ps-ctc-inactive-flex) 1 0;
  min-width: 220px;
  height: 440px;

  background: var(--ps-ctc-card);
  border: 1px solid var(--ps-ctc-border);
  border-radius: var(--ps-ctc-radius);

  box-shadow: none; /* brak cienia gdy nieaktywna */
  cursor: pointer;

  transition:
    box-shadow .2s ease,
    transform .2s ease,
    flex .25s ease,
    border-color .2s ease;
}


/* tła wewnątrz karty – muszą być absolutne, inaczej rozwalają layout (mobile) */
.ps-ctc__bg,
.ps-ctc__shade{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
}

.ps-ctc__bg{
  background: none !important;
  opacity: 0 !important;
}

.ps-ctc__shade{
  background: none !important;
  opacity: 0 !important;
}

/* treść zawsze nad tłem */
.ps-ctc__num,
.ps-ctc__top,
.ps-ctc__body{
  position:relative;
  z-index:1;
}

/* hover – bardzo delikatny */
.ps-ctc__card:hover{
  transform: translateY(-2px);
}

/* aktywna */
.ps-ctc__card.is-active{
  flex: var(--ps-ctc-active-flex) 1 0;
  box-shadow: var(--ps-ctc-shadow);
  border-color: rgba(0,53,125,.25);
}

/* =========================
   USUWAMY ELEMENTY
   ========================= */

.ps-ctc__icon,
.ps-ctc__accent{
  display: none !important;
}

/* =========================
   NUMER
   ========================= */

.ps-ctc__num{
  position: absolute;
  top: var(--ps-ctc-pad);
  left: var(--ps-ctc-pad);

  font-family: "Teko", sans-serif;
  font-weight: 600;
  font-size: 72px;
  line-height: .9;
  letter-spacing: .02em;

  color: rgba(14,23,38,.22);
}

/* aktywna – numer niebieski */
.ps-ctc__card.is-active .ps-ctc__num{
  color: var(--polsteam-primary, #00357d);
}

/* =========================
   TREŚĆ
   ========================= */

.ps-ctc__top{
  position: absolute;
  left: var(--ps-ctc-pad);
  right: var(--ps-ctc-pad);
  top: calc(var(--ps-ctc-pad) + 86px);
}

.ps-ctc__h{
  margin: 0;
  font-family: "Teko", sans-serif;
  font-weight: 600;
  letter-spacing: .02em;
  font-size: 28px;
  line-height: 1.05;
  color: var(--ps-ctc-text);
}

.ps-ctc__body{
  position: absolute;
  left: var(--ps-ctc-pad);
  right: var(--ps-ctc-pad);
  top: calc(var(--ps-ctc-pad) + 138px);
	padding-top: 0;
}

.ps-ctc__excerpt{
  margin-top: 15px;
	padding-top: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ps-ctc-muted);
}

/* =========================
   RESPONSYWNOŚĆ
   ========================= */

@media (max-width: 1200px){
  .ps-ctc__rail{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ps-ctc__card{
    min-width: 280px;
  }
}

@media (max-width: 768px){
  .ps-ctc__rail{
    padding: 0 18px 24px;
    overflow: visible;
    flex-direction: column;
  }

  .ps-ctc__card{
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 18px 18px 16px;
  }

  /* Na mobile nie trzymamy absolutów – to powoduje nachodzenie i „rozjazd” */
  .ps-ctc__num,
  .ps-ctc__top,
  .ps-ctc__body{
    position: static;
    left: auto;
    right: auto;
    top: auto;
  }

  .ps-ctc__num{
    display: block;
    margin: 0 0 8px;
  }

  .ps-ctc__top{ margin: 0 0 8px; }

  .ps-ctc__h{
    font-size: 20px;
    line-height: 1.15;
    word-break: break-word;
  }

  .ps-ctc__title{
    max-width: 100%;
  }

  .ps-ctc__num{
    font-size: 54px;
  }
}

@media (max-width: 520px){
  .ps-ctc__rail{
    flex-direction: column;
  }

  .ps-ctc__card{
    height: auto;
    padding-bottom: 28px;
  }

  .ps-ctc__body{
    position: static;
    padding: 12px var(--ps-ctc-pad) 0;
  }
}

/* =========================
   REDUCED MOTION
   ========================= */

@media (prefers-reduced-motion: reduce){
  .ps-ctc__card{
    transition: none;
  }

  .ps-ctc__card:hover{
    transform: none;
  }
}

/* (mobile fix – wbudowany powyżej) */
