/* ════════════════════════════════════════════════════════════════════════
   Upskilling wishlist — templates/wishlist/upskilling.html and thanks.html
   Loaded after home.css, whose `hp-` colours and pieces these pages share.
   Every class here is `wl-`.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hero: pitch and next steps on the left, the form on the right ────── */
/* Sized so the whole page fits a laptop screen without scrolling: both
   columns start right under the menu, and the form column is wide enough
   for its intro line and privacy note to sit on one line each. Below
   1025px home.css stacks the grid, in source order: pitch, form, steps. */
@media (min-width: 1025px) {
  .hp-hero__grid.wl-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas:
      "pitch card"
      "next  card";
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 20px 48px;
    padding-top: 20px;
    padding-bottom: 40px;
  }
  .wl-pitch { grid-area: pitch; }
  .wl-card { grid-area: card; }
  .wl-next { grid-area: next; }
}

.wl-points {
  display: grid;
  gap: 14px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.wl-points li { display: flex; align-items: center; gap: 16px; }
.wl-points .hp-icon { flex: none; margin-bottom: 0; }
.wl-points li > span:last-child {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--hp-ink);
}

/* ── Form card ─────────────────────────────────────────────────────────── */
.wl-card {
  padding: 32px;
  border: 1px solid var(--hp-line);
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 18px 44px rgba(13, 42, 61, 0.08);
}
.wl-card__title { font-size: 1.4rem; font-weight: 800; line-height: 1.25; margin: 0 0 6px; }
.wl-card__sub { margin: 0 0 22px; font-size: 0.95rem; line-height: 1.55; color: var(--hp-muted); }

.wl-field { margin-bottom: 16px; }
.wl-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hp-ink);
}
.wl-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #D5DEE5;
  border-radius: 8px;
  background: #FFFFFF;
  font: inherit;
  font-size: 0.95rem;
  color: var(--hp-ink);
}
.wl-field input::placeholder { color: var(--hp-faint); }
.wl-field input:focus {
  outline: 0;
  border-color: var(--hp-blue);
  box-shadow: 0 0 0 3px rgba(21, 104, 168, 0.18);
}
.wl-field input[aria-invalid="true"] { border-color: #C53030; }

.wl-error { margin: 6px 0 0; font-size: 0.82rem; color: #B42318; }
.wl-error--consent { margin: -6px 0 14px; }
.wl-alert {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #FEF3F2;
  color: #B42318;
  font-size: 0.875rem;
  line-height: 1.5;
}

.wl-card .consent-check { margin: 4px 0 18px; }
.wl-submit { width: 100%; }
.wl-note {
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--hp-muted);
}
.wl-note i { margin-top: 3px; color: var(--hp-faint); }

/* Honeypot: off screen for people, still in the form for bots. */
.wl-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── What happens next ─────────────────────────────────────────────────── */
.wl-next { padding-top: 18px; border-top: 1px solid var(--hp-line); }
.wl-next .wl-next__title {
  margin: 0 0 12px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hp-blue);
}
.wl-next__steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wl-next__steps li { display: flex; align-items: flex-start; gap: 14px; }
.wl-next__steps .hp-steps__num { flex: none; width: 30px; height: 30px; margin: 0; font-size: 0.85rem; }
.wl-next__steps h3 { margin: 0; font-size: 0.95rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.wl-next__steps p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--hp-muted); }

/* ── Thank-you page ────────────────────────────────────────────────────── */
.wl-done {
  max-width: 720px;
  padding-top: 88px;
  padding-bottom: 88px;
  text-align: center;
}
.wl-done__icon { width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 50%; font-size: 1.6rem; }
.wl-done .hp-hero__lede { margin-left: auto; margin-right: auto; }

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .wl-card,
  .wl-next { max-width: 560px; }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .wl-card { padding: 24px 20px; }
  .wl-points li > span:last-child { font-size: 1rem; }
  .wl-done { padding-top: 56px; padding-bottom: 56px; }
}