/* ============================================
   CURSOS SUBVENCIONATS — hero segmentat + vista ràpida + fitxes amb estat
   (rèplica del llenguatge visual real de campusversailles.com)
   ============================================ */

/* HERO amb targetes de segmentació Aturats / Treballadors */
.vs-hero-seg { margin-top:34px; display:flex; flex-direction:column; gap:14px; max-width:380px; }
.vs-hero-seg-card {
    display:block; background:#fff; padding:20px 22px; border-radius:var(--vs-radius,12px);
    box-shadow:0 15px 40px rgba(0,0,0,.18); text-decoration:none; transition:var(--vs-transition,all .25s ease);
}
.vs-hero-seg-card:hover { transform:translateY(-4px); }
.vs-hero-seg-top { display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.vs-hero-seg-ico { width:44px; height:44px; min-width:44px; background:var(--vs-gradient,#c4365a); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.vs-hero-seg-ico svg { width:22px; height:22px; fill:#fff; }
.vs-hero-seg-card h2 { font-size:1rem; font-weight:700; margin:0; color:#14141f; }
.vs-hero-seg-card p { font-size:.86rem; color:#666; margin:0 0 8px; }
.vs-hero-seg-count { display:inline-block; padding:4px 12px; background:var(--vs-rose,#fdf2f4); color:#9e2b48; border-radius:50px; font-size:.76rem; font-weight:700; }

/* VISTA RÀPIDA — franja fosca amb scroll horitzontal */
.vs-lp .vs-quick { padding:50px 0 58px; background:var(--vs-dark,#1a1a2e); position:relative; overflow:hidden; }
.vs-quick::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size:24px 24px; }
.vs-quick-hd { text-align:center; margin-bottom:30px; position:relative; z-index:2; }
.vs-quick-hd-tag { display:inline-block; background:rgba(196,54,90,.2); color:#e58ba0; padding:6px 16px; border-radius:50px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.vs-quick-hd h2 { color:#fff; font-size:clamp(1.25rem,2.5vw,1.6rem); margin:0 0 6px; }
.vs-quick-hd p { color:rgba(255,255,255,.6); font-size:.88rem; margin:0; }
.vs-quick-strip { position:relative; z-index:2; display:flex; gap:14px; overflow-x:auto; padding-bottom:14px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#c4365a rgba(255,255,255,.1); }
.vs-quick-strip::-webkit-scrollbar { height:5px; }
.vs-quick-strip::-webkit-scrollbar-track { background:rgba(255,255,255,.08); border-radius:10px; }
.vs-quick-strip::-webkit-scrollbar-thumb { background:#c4365a; border-radius:10px; }
.vs-quick-card { flex:0 0 210px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px 15px; scroll-snap-align:start; transition:var(--vs-transition,all .25s ease); text-decoration:none; display:block; position:relative; }
.vs-quick-card:hover { background:rgba(255,255,255,.12); border-color:#c4365a; transform:translateY(-3px); }
.vs-quick-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.vs-quick-date { display:flex; align-items:center; gap:4px; }
.vs-quick-date-day { font-size:1.45rem; font-weight:800; color:#fff; line-height:1; }
.vs-quick-date-meta { display:flex; flex-direction:column; }
.vs-quick-date-month { font-size:.66rem; font-weight:600; color:#e58ba0; text-transform:uppercase; line-height:1.1; }
.vs-quick-date-year { font-size:.62rem; color:rgba(255,255,255,.4); line-height:1.1; }
.vs-quick-badge-type { padding:4px 9px; border-radius:50px; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
.vs-quick-badge-atur { background:rgba(59,130,246,.15); color:#93bbfd; }
.vs-quick-badge-treb { background:rgba(16,185,129,.15); color:#6ee7b7; }
.vs-quick-badge-curs { background:rgba(245,158,11,.22); color:#fcd34d; }
.vs-quick-badge-fin { background:rgba(156,163,175,.25); color:#d1d5db; }
.vs-quick-card-name { font-size:.82rem; font-weight:600; color:#fff; line-height:1.35; margin-bottom:8px; min-height:44px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vs-quick-card-meta { display:flex; align-items:center; gap:10px; }
.vs-quick-card-meta-item { display:flex; align-items:center; gap:4px; font-size:.72rem; color:rgba(255,255,255,.5); }
.vs-quick-card-meta-item svg { width:13px; height:13px; min-width:13px; fill:rgba(255,255,255,.35); }

.vs-quick-card.is-encurs { opacity:.75; background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.28); }
.vs-quick-card.is-encurs:hover { opacity:1; }
.vs-quick-card.is-finalitzat { opacity:.4; background:rgba(255,255,255,.02); border-color:rgba(255,255,255,.05); cursor:default; filter:grayscale(.8); }
.vs-quick-card.is-finalitzat .vs-quick-card-name { text-decoration:line-through; color:rgba(255,255,255,.5); }

/* FITXES DE CURS per collectiu — amb cinta d'estat */
.vs-courses-grid-sub { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:34px; }
@media (max-width:760px){ .vs-courses-grid-sub{grid-template-columns:1fr;} }
.vs-course-card-sub { background:#fff; border-radius:var(--vs-radius,12px); padding:24px; box-shadow:0 3px 15px rgba(0,0,0,.05); border:1px solid #eceaf0; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.vs-course-card-sub::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--vs-gradient,#c4365a); }
.vs-course-card-sub:hover { transform:translateY(-5px); box-shadow:0 16px 36px rgba(196,54,90,.12); border-color:#c4365a; }
.vs-course-card-sub-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; padding-right:0; transition:padding-right .2s ease; }
.vs-course-card-sub.is-encurs .vs-course-card-sub-header,
.vs-course-card-sub.is-finalitzat .vs-course-card-sub-header { padding-right:58px; }
.vs-course-card-sub h3 { font-size:1rem; margin:0; line-height:1.4; flex:1; min-width:0; color:#14141f; }
.vs-course-card-sub h3 a { color:inherit; text-decoration:none; }
.vs-course-card-sub h3 a:hover { color:#c4365a; text-decoration:underline; }
.vs-course-card-sub.is-finalitzat h3 a { pointer-events:none; }
.vs-course-card-sub .vs-badge-gratuit { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; background:var(--vs-gradient,#c4365a); color:#fff; border-radius:50px; font-size:.66rem; font-weight:700; text-transform:uppercase; white-space:nowrap; }
.vs-course-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.vs-course-info-item { display:flex; align-items:center; gap:7px; padding:10px; background:#f8f6f7; border-radius:8px; }
.vs-course-info-item svg { width:16px; height:16px; min-width:16px; fill:#c4365a; }
.vs-course-info-item span { font-size:.78rem; color:#1a1a2e; font-weight:500; }
.vs-course-schedule-sub { display:flex; align-items:flex-start; gap:8px; padding:12px; background:var(--vs-rose,#fdf2f4); border-radius:8px; border-left:3px solid #c4365a; margin-bottom:16px; }
.vs-course-schedule-sub svg { width:16px; height:16px; min-width:16px; fill:#c4365a; margin-top:1px; }
.vs-course-schedule-sub-text { font-size:.82rem; color:#1a1a2e; line-height:1.5; }
.vs-course-card-sub-footer { margin-top:auto; }
.vs-course-btn { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:44px; padding:12px 20px; border-radius:50px; font-weight:700; font-size:.86rem; text-decoration:none; transition:var(--vs-transition,all .25s ease); }
.vs-course-btn-solid { background:var(--vs-gradient,#c4365a); color:#fff; box-shadow:0 6px 18px rgba(196,54,90,.28); }
.vs-course-btn-solid:hover { transform:translateY(-2px); }
.vs-course-btn-disabled { background:#e5e7eb; color:#4b5563; cursor:default; }

.vs-course-card-sub.is-encurs { background:#fffbeb; }
.vs-course-card-sub.is-encurs::before { background:linear-gradient(135deg,#b45309 0%,#92400e 100%); }
.vs-course-card-sub.is-encurs::after {
    content:'EN CURS'; position:absolute; top:16px; right:-36px; background:linear-gradient(135deg,#b45309 0%,#92400e 100%);
    color:#fff; padding:4px 42px; font-size:.64rem; font-weight:800; letter-spacing:1.5px; transform:rotate(35deg);
    box-shadow:0 3px 10px rgba(180,83,9,.35); z-index:2; pointer-events:none;
}
.vs-course-card-sub.is-encurs .vs-course-info-item { background:#fef3c7; }
.vs-course-card-sub.is-encurs .vs-course-info-item svg { fill:#d97706; }
.vs-course-card-sub.is-encurs .vs-course-schedule-sub { background:#fef3c7; border-left-color:#d97706; }
.vs-course-card-sub.is-encurs .vs-course-schedule-sub svg { fill:#d97706; }

.vs-course-card-sub.is-finalitzat { background:#f9fafb; filter:grayscale(.95); }
.vs-course-card-sub.is-finalitzat::before { background:linear-gradient(135deg,#9ca3af 0%,#6b7280 100%); }
.vs-course-card-sub.is-finalitzat::after {
    content:'FINALITZAT'; position:absolute; top:20px; right:-40px; background:linear-gradient(135deg,#6b7280 0%,#4b5563 100%);
    color:#fff; padding:5px 46px; font-size:.68rem; font-weight:800; letter-spacing:1.5px; transform:rotate(35deg);
    box-shadow:0 3px 12px rgba(0,0,0,.25); z-index:3; pointer-events:none;
}
.vs-course-card-sub.is-finalitzat:hover { transform:none; box-shadow:0 3px 15px rgba(0,0,0,.05); border-color:#eceaf0; }
.vs-course-card-sub.is-finalitzat h3 { text-decoration:line-through; text-decoration-color:#6b7280; color:#9ca3af; }
.vs-course-card-sub.is-finalitzat .vs-course-info-item { background:#e5e7eb; opacity:.7; }
.vs-course-card-sub.is-finalitzat .vs-course-info-item svg { fill:#9ca3af; }
.vs-course-card-sub.is-finalitzat .vs-course-info-item span { color:#6b7280; }
.vs-course-card-sub.is-finalitzat .vs-course-schedule-sub { background:#e5e7eb; border-left-color:#9ca3af; opacity:.8; }
.vs-course-card-sub.is-finalitzat .vs-course-schedule-sub svg { fill:#9ca3af; }

.vs-req-cta-wrap { text-align:center; margin-top:36px; }
.vs-req-cta { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:14px 30px; border-radius:50px; background:var(--vs-gradient,#c4365a); color:#fff; font-weight:700; text-decoration:none; box-shadow:0 8px 22px rgba(196,54,90,.28); transition:var(--vs-transition,all .25s ease); }
.vs-req-cta:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(196,54,90,.35); }

@media (max-width:760px) {
    .vs-hero-seg { max-width:none; }
}