/* ================================
   TicketsFest Volunteers — Unified CSS
   ================================ */

/* ----- Layout wrappers ----- */
.tfv-wrap{max-width:1100px;margin:0 auto;padding:24px 16px}
#about,#apply{scroll-margin-top:80px}

/* ----- HERO (full-bleed background + EU light map) ----- */
.tfv-hero{position:relative;padding:88px 0 32px;overflow:visible}
.tfv-hero::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%); top:-140px;
  width:100vw; height:440px;
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(37,99,235,.10) 0, rgba(37,99,235,0) 70%),
    radial-gradient(50% 50% at 80% 10%, rgba(99,102,241,.10) 0, rgba(99,102,241,0) 70%);
  filter: blur(10px); z-index:-2;
}
.tfv-hero::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-1px;
  width:100vw; height:140px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 100%); z-index:-2;
}
.tfv-hero .tfv-eu-map{
  position:absolute; right:-140px; top:20px; width:640px; height:auto; opacity:.08;
  transform:rotate(-2deg); filter: drop-shadow(0 10px 24px rgba(15,23,42,.08));
  pointer-events:none; z-index:-1;
}
.tfv-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;font:600 12px/1.1 Inter,system-ui;color:#1f2937;background:#fff}
.tfv-sub{max-width:780px;color:#475569;font:500 17px/1.7 Inter,system-ui;margin-top:10px}
.tfv-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.tfv-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;color:#1f2937;font:600 12px/1.1 Inter,system-ui}
.tfv-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* Keep .tfv-btn for legacy, but primary is .vb-btn inside forms */
.tfv-btn{display:inline-block;background:#2563eb;color:#fff;border:0;border-radius:14px;padding:13px 18px;font:700 14px/1 Inter,system-ui;box-shadow:0 16px 34px rgba(37,99,235,.22);text-decoration:none}
.tfv-btn:focus-visible{outline:3px solid rgba(37,99,235,.4); outline-offset:2px}

/* ----- Feature cards ----- */
.tfv-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0 26px}
.tfv-feat{display:flex;flex-direction:column;min-height:120px;justify-content:flex-start;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px;box-shadow:0 14px 30px rgba(15,23,42,.08);transition:transform .1s ease, box-shadow .2s ease, border-color .2s ease}
.tfv-feat:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(15,23,42,.12); border-color:#e2e8f0}
.tfv-feat h3{margin:0 0 8px;font:800 16px/1.2 Inter,system-ui;color:#0b1220}
.tfv-feat p{margin:0;color:#52607a;font:500 14px/1.65 Inter,system-ui}

/* ----- Cards & separators ----- */
.tfv-section{margin:24px 0}
.tfv-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px;box-shadow:0 10px 24px rgba(15,23,42,.06)}
.tfv-form-title{margin:0 0 14px;font:800 22px/1.2 Inter,system-ui}
.tfv-hr{height:1px;background:#eef2f7;margin:16px 0}

/* ================================
   FORM: .vb-form (inputs, chips, alerts)
   ================================ */
.vb-form{--brand:#2563eb; --line:#e5e7eb; --ink:#0f172a; --muted:#6b7280; max-width:960px; margin:6px auto 0}
.vb-form .vb-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vb-form .vb-col{grid-column:1/-1}
.vb-form label{display:flex;flex-direction:column;gap:6px;font:600 13px/1.2 Inter,system-ui;color:#111827}
.vb-form input,.vb-form select,.vb-form textarea{
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;font:500 16px/1.35 Inter,system-ui;background:#fff;color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease; width:100%;
}
.vb-form input::placeholder,.vb-form textarea::placeholder{color:#9aa3af}
.vb-form input:focus,.vb-form select:focus,.vb-form textarea:focus{border-color:var(--brand); box-shadow:0 0 0 4px rgba(37,99,235,.12); outline:0}
.vb-form input:invalid,.vb-form select:invalid,.vb-form textarea:invalid{border-color:#fca5a5}

/* Submit button (primary) */
.vb-btn{
  display:inline-block;background:#2563eb;color:#fff;border:0;border-radius:14px;padding:14px 18px;font:700 16px/1 Inter,system-ui;
  box-shadow:0 12px 26px rgba(37,99,235,.25);cursor:pointer;transition:transform .06s ease, box-shadow .2s ease;margin-top:12px; width:100%;
}
.vb-btn:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(37,99,235,.28)}
.vb-btn[disabled]{opacity:.6;cursor:not-allowed}

/* GDPR consent row */
.vb-form .vb-consent{display:flex; align-items:flex-start; gap:10px; margin-top:10px}
.vb-form .vb-consent input[type="checkbox"]{position:static; width:auto; height:auto; margin-top:3px}

/* Alerts (status messages) */
.tfv-alert{border-radius:12px;padding:12px 14px;margin:10px 0 0;font:600 14px/1.35 Inter,system-ui}
.tfv-alert--ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.tfv-alert--err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

/* ----- Skills chips ----- */
.vb-form .vb-chips{display:flex;flex-wrap:wrap;gap:10px}
.tfv-skill-chip{
  --bg:#fff; --bd:#e5e7eb; --fg:#111827;
  position:relative; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--bd); border-radius:999px; padding:10px 12px;
  background:var(--bg); color:var(--fg); cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.tfv-skill-chip input[type="checkbox"]{
  position:absolute; opacity:0; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
}
.tfv-skill-chip::before{content:attr(data-icn); font-size:16px; line-height:1; opacity:.95; margin-right:2px}
.tfv-skill-chip.active{--bg:#eef2ff; --bd:#c7d2fe; --fg:#1d4ed8; box-shadow:0 6px 18px rgba(37,99,235,.15)}

/* Selected skills summary */
.tfv-skills-summary{margin:10px 0 12px}
.tfv-skills-summary h3{font:700 15px/1.2 Inter,system-ui;margin:0 0 8px;color:#111827}
#tfv-skills-picked{display:flex;flex-wrap:wrap;gap:8px}
#tfv-skills-picked .tag{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;font:600 12px/1 Inter,system-ui;background:#fff
}

/* ----- Availability chips (mirror select) ----- */
.tfv-availability{display:flex;flex-wrap:wrap;gap:10px}
.tfv-availability .chip{
  --bg:#fff; --bd:#e5e7eb; --fg:#111827;
  position:relative; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--bd); border-radius:999px; padding:10px 12px;
  background:var(--bg); color:var(--fg); cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.tfv-availability input{position:absolute; opacity:0; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%)}
.tfv-availability .chip.active{--bg:#eef2ff; --bd:#c7d2fe; --fg:#1d4ed8; box-shadow:0 6px 18px rgba(37,99,235,.15)}

/* ----- Legacy helper classes (from old minimal CSS) ----- */
.tfv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tfv-grid label{display:flex;flex-direction:column;font:500 13px/1.2 Inter,system-ui;color:#374151}
.tfv-grid input,.tfv-grid select,.tfv-grid textarea{margin-top:6px;border:1px solid #d1d5db;border-radius:12px;padding:10px 12px;font:500 14px/1.3 Inter,system-ui;outline:none;background:#fff}
.tfv-grid textarea{min-height:96px;resize:vertical}
.tfv-fieldset{margin:12px 0}
.tfv-fieldset legend{font:600 14px/1.2 Inter,system-ui;color:#111827;margin-bottom:8px}
.tfv-chips{display:flex;flex-wrap:wrap;gap:8px}
.tfv-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #d1d5db;border-radius:999px;padding:6px 10px;background:#fff;cursor:pointer}
.tfv-chip input{accent-color:#2563eb}

/* ----- Directory cards (if ever needed) ----- */
.tfv-grid-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
@media (max-width:900px){.tfv-grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tfv-grid-cards{grid-template-columns:1fr}}
.tfv-card-item{border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.tfv-card-item img{width:100%;height:180px;object-fit:cover;background:#f3f4f6}
.tfv-card-body{padding:12px}
.tfv-title{font:600 15px/1.25 Inter,system-ui;color:#0f172a;margin:0 0 6px}
.tfv-meta{font:500 13px/1.4 Inter,system-ui;color:#6b7280}
.tfv-link{margin-top:auto;padding:12px}
.tfv-link a{display:inline-block;text-decoration:none;background:#111827;color:#fff;border-radius:10px;padding:8px 12px;font:600 13px/1.2 Inter,system-ui}

/* ================================
   Responsive
   ================================ */
@media (max-width:1100px){
  .tfv-hero .tfv-eu-map{right:-160px; width:620px}
}
@media (max-width:960px){
  .tfv-feats{grid-template-columns:1fr 1fr}
  .tfv-hero .tfv-eu-map{right:-180px; width:560px; top:40px; opacity:.07}
}
@media (max-width:720px){
  .vb-form .vb-grid{grid-template-columns:1fr}
  .tfv-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tfv-feats{grid-template-columns:1fr}
  .tfv-hero .tfv-eu-map{right:-220px; width:520px; top:60px; opacity:.06}
}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important; transition:none!important}
}