/* ==========================================================================
   WORK & TRAVEL CLUB — SECTIUNI PENTRU PAGINA /pentru-precauti
   Fisier: wtcx-precauti.css
   DEPENDENTA: se incarca DUPA wtcx-sections.css (foloseste tokens --wtcx-*
   si utilitarele .wtcx-wrap / .wtcx-head / .wtcx-btn / .wtcx-reveal)
   NU are nevoie de JavaScript propriu.
   ========================================================================== */


/* ==========================================================================
   P1. CE E GREU — carduri impartite in doua: problema si raspunsul
   ========================================================================== */
.wtcx-hard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}

.wtcx-hard__card {
  background: #fff;
  border: 1px solid var(--wtcx-line);
  border-radius: var(--wtcx-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .26s var(--wtcx-ease), box-shadow .26s var(--wtcx-ease);
}
.wtcx-hard__card:hover { transform: translateY(-4px); box-shadow: var(--wtcx-shadow); }

/* Partea de sus: ce e greu */
.wtcx-hard__problem {
  padding: 26px 26px 22px;
  background: #FBF8F2;
  border-bottom: 1px solid #EFE6D6;
  position: relative;
}
.wtcx-hard__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #A9761A;
  margin-bottom: 12px;
}
.wtcx-hard__label svg { width: 15px; height: 15px; }

.wtcx-hard__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--wtcx-navy);
  line-height: 1.32;
  margin: 0 0 10px;
}
.wtcx-hard__problem .wtcx-hard__text { color: #776A55; font-size: 15.2px; margin: 0; }

/* Partea de jos: ce faci concret */
.wtcx-hard__answer { padding: 22px 26px 26px; flex: 1 1 auto; }
.wtcx-hard__answer .wtcx-hard__label { color: #17A673; }
.wtcx-hard__answer p { font-size: 15.2px; color: var(--wtcx-ink-soft); margin: 0; }
.wtcx-hard__answer b { color: var(--wtcx-navy); }

.wtcx-hard__foot {
  margin-top: 40px !important;
  text-align: center;
  font-size: 15px;
  color: var(--wtcx-ink-soft);
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ==========================================================================
   P2. PENTRU PARINTI
   ========================================================================== */
.wtcx-parents { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }

.wtcx-parents__intro p {
  font-size: 16.5px;
  color: #C2CEDE;
  line-height: 1.7;
}
.wtcx-parents__intro strong { color: #fff; font-weight: 700; }

.wtcx-parents__sig {
  margin-top: 26px !important;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  color: #8FA1BC;
}
.wtcx-parents__sig b { display: block; color: #fff; font-size: 15px; margin-bottom: 3px; }

.wtcx-parents__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.wtcx-parents__facts { display: grid; gap: 14px; }

.wtcx-fact {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: var(--wtcx-radius-sm);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
}
.wtcx-fact__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 183, 3, .14);
  color: var(--wtcx-gold);
}
.wtcx-fact__icon svg { width: 21px; height: 21px; }
.wtcx-fact h3 { font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 6px; line-height: 1.3; }
.wtcx-fact p { font-size: 14.8px; color: #A9B9D0; margin: 0; }


/* ==========================================================================
   P3. PRIMELE 72 DE ORE — cronologie verticala
   ========================================================================== */
.wtcx-first72 { max-width: 860px; margin: 0 auto; position: relative; }

.wtcx-first72__item {
  position: relative;
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 26px;
  padding-bottom: 34px;
}
.wtcx-first72__item:last-child { padding-bottom: 0; }

/* linia verticala */
.wtcx-first72__item::before {
  content: "";
  position: absolute;
  left: 129px;
  top: 26px;
  bottom: -8px;
  width: 2px;
  background: var(--wtcx-line);
}
.wtcx-first72__item:last-child::before { display: none; }

.wtcx-first72__when {
  text-align: right;
  padding-top: 2px;
}
.wtcx-first72__when b {
  display: block;
  font-family: var(--wtcx-font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--wtcx-navy);
  line-height: 1.25;
}
.wtcx-first72__when span {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wtcx-ink-soft);
  margin-top: 3px;
  font-weight: 700;
}

.wtcx-first72__dot {
  position: absolute;
  left: 122px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--wtcx-red);
  z-index: 2;
}

.wtcx-first72__body {
  background: #fff;
  border: 1px solid var(--wtcx-line);
  border-radius: var(--wtcx-radius-sm);
  padding: 22px 24px;
}
.wtcx-first72__body h3 {
  font-size: 17.5px;
  font-weight: 800;
  color: var(--wtcx-navy);
  margin: 0 0 9px;
  line-height: 1.3;
}
.wtcx-first72__body p { font-size: 15.2px; color: var(--wtcx-ink-soft); margin: 0; }
.wtcx-first72__body b { color: var(--wtcx-navy); }

.wtcx-first72__tip {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 15px;
  padding: 13px 15px;
  border-radius: 7px;
  background: var(--wtcx-mist);
  font-size: 14px;
  color: var(--wtcx-ink-soft);
  line-height: 1.55;
}
.wtcx-first72__tip svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--wtcx-blue); margin-top: 2px; }
.wtcx-first72__tip b { color: var(--wtcx-navy); }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .wtcx-parents { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  .wtcx-first72__item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-left: 26px;
    padding-bottom: 28px;
  }
  .wtcx-first72__item::before { left: 5px; top: 22px; }
  .wtcx-first72__dot { left: -2px; top: 3px; }
  .wtcx-first72__when { text-align: left; }
  .wtcx-first72__when b { display: inline; }
  .wtcx-first72__when span { display: inline; margin-left: 8px; }
  .wtcx-parents__actions .wtcx-btn { width: 100%; }
}