/* ============================================
   SUE TRAINING-BLOCKS — herbruikbare aanbod-secties
   Bron: /nl/voor/hr/ (HR-pagina pattern)
   Gebruik: include dit stylesheet + voeg de HTML
   van .uitgelicht-section en .vc-aanbod toe.
   Self-contained: definieert fallback CSS variables
   binnen scope zodat het op elke pagina werkt.
   ============================================ */

.uitgelicht-section,
.vc-aanbod {
    --tb-coral: #FF5A5F;
    --tb-coral-lighter: #FFE5E5;
    --tb-coral-light: #FFB7B9;
    --tb-green: #2E7D32;
    --tb-green-light: #E8F5E9;
    --tb-black: #1a1a1a;
    --tb-white: #FFFFFF;
    --tb-max-width: 1200px;
}

/* ============================================
   UITGELICHT — featured grid (3 cards)
   ============================================ */
.uitgelicht-section { padding: 80px 0; background: var(--tb-white); }
.uitgelicht-inner { max-width: var(--tb-max-width); margin: 0 auto; padding: 0 24px; }
.uitgelicht-header { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; }
.uitgelicht-header .overline { display: block; font-family: 'Open Sans', sans-serif; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--tb-coral); margin-bottom: 0.75rem; }
.uitgelicht-header h2 { font-family: Georgia, serif; font-size: clamp(1.7rem, 3.5vw, 2.5rem); color: var(--tb-black); font-weight: 400; line-height: 1.25; margin-bottom: 0.75rem; }
.uitgelicht-header h2 .highlight { background: linear-gradient(180deg, transparent 55%, var(--tb-coral-lighter) 55%); padding: 0 0.2rem; }
.uitgelicht-header p { font-family: Georgia, serif; font-size: 1.1rem; color: var(--tb-black); line-height: 1.7; }
.uitgelicht-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.uitgelicht-card { background: #fff; border-radius: 16px; border: 1.5px solid rgba(0,0,0,0.07); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.uitgelicht-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.uitgelicht-photo { height: 180px; overflow: hidden; background: #faf6f1; }
.uitgelicht-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uitgelicht-body { padding: 1.75rem 1.75rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.uitgelicht-badge { display: inline-block; align-self: flex-start; font-family: 'Open Sans', sans-serif; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 4px 10px; border-radius: 4px; margin-bottom: 0.9rem; }
.uitgelicht-badge--next { background: var(--tb-coral-lighter); color: var(--tb-coral); }
.uitgelicht-badge--new { background: var(--tb-green-light); color: var(--tb-green); }
.uitgelicht-badge--online { background: #e8f0fb; color: #2a5bd7; }
.uitgelicht-title { font-family: 'Open Sans', sans-serif; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--tb-black); line-height: 1.3; margin: 0 0 0.75rem; }
.uitgelicht-desc { font-family: 'Open Sans', sans-serif; font-size: 1.1rem; color: var(--tb-black); line-height: 1.6; margin: 0 0 1.25rem; }
.uitgelicht-meta { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.5rem; align-items: flex-start; }
.uitgelicht-pill { font-family: 'Open Sans', sans-serif; font-size: 0.85rem; font-weight: 600; background: #f3f3f3; color: var(--tb-black); padding: 5px 12px; border-radius: 20px; }
.uitgelicht-pill strong { color: var(--tb-coral); font-weight: 700; }
.uitgelicht-link { margin-top: auto; font-family: 'Open Sans', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--tb-coral); display: inline-flex; align-items: center; gap: 0.4rem; }
.uitgelicht-link::after { content: '\2192'; transition: transform 0.2s; }
.uitgelicht-card:hover .uitgelicht-link::after { transform: translateX(3px); }
@media (max-width: 900px) {
    .uitgelicht-section { padding: 60px 0; }
    .uitgelicht-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 1.5rem; }
}

/* ============================================
   VC AANBOD — Wat past bij jou? (3 tabs)
   ============================================ */
.vc-aanbod { padding: 80px 0 88px; background: #f8f8f8; }
.vc-aanbod-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.vc-aanbod-header { text-align: center; margin-bottom: 44px; }
.vc-aanbod-header .vc-over { display: inline-block; font-family: 'Open Sans', sans-serif; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--tb-coral); margin-bottom: 12px; }
.vc-aanbod-header h2 { font-family: Georgia, serif; font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 400; color: var(--tb-black); margin: 0 0 14px; line-height: 1.22; }
.vc-aanbod-header p { font-family: Georgia, serif; font-size: 1.05rem; color: var(--tb-black); max-width: 620px; margin: 0 auto; line-height: 1.6; }

.vc-tabset { background: #fff; border: 1.5px solid var(--tb-coral); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 44px rgba(255,90,95,.09); }

.vc-tab-panel { display: none; }
.vc-tab-panel.active { display: block; background: #fff; padding: 28px 24px 32px; }

.vc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #f2f2f0; border-bottom: 1px solid rgba(0,0,0,.06); position: relative; padding: 0; }
.vc-tile { background: transparent; border: none; border-radius: 0; padding: 0; cursor: pointer; text-align: left; transition: background .25s; position: relative; font-family: 'Open Sans', sans-serif; display: flex; flex-direction: column; }
.vc-tile:not(.active):hover { background: rgba(255,255,255,.5); }
.vc-tile:hover .vc-t-photo img { transform: scale(1.04); }
.vc-tile.active { background: #fff; }
.vc-tile.active::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tb-coral); z-index: 3; }
.vc-tile.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #fff; z-index: 4; }
.vc-tile .vc-t-photo { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #f0eee9; position: relative; }
.vc-tile .vc-t-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; display: block; }
.vc-tile .vc-t-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.18) 100%); pointer-events: none; }
.vc-tile .vc-t-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.vc-tile .vc-t-title { font-family: 'Open Sans', sans-serif; font-size: .92rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--tb-black); margin: 0 0 10px; line-height: 1.35; }
.vc-tile .vc-t-desc { font-family: 'Open Sans', sans-serif; font-size: 0.95rem; color: var(--tb-black); line-height: 1.55; margin: 0 0 14px; flex: 1; }
.vc-tile .vc-t-count { font-family: 'Open Sans', sans-serif; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--tb-black); }
.vc-tile.active .vc-t-count { color: var(--tb-coral); }
.vc-tile .vc-t-hint { display: none; font-family: 'Open Sans', sans-serif; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--tb-coral); margin-top: 12px; align-items: center; gap: 6px; }
.vc-tile.active .vc-t-hint { display: inline-flex; }
.vc-tile.active .vc-t-hint::after { content: '\2193'; font-size: .9rem; }
.vc-t-mobile { display: none; }

.vc-list { display: flex; flex-direction: column; gap: 10px; }
.vc-item { background: #fff; border: 1.5px solid rgba(0,0,0,.08); border-radius: 12px; padding: 18px 24px; display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center; transition: all .2s; text-decoration: none; color: inherit; }
.vc-item:hover { border-color: rgba(255,90,95,.32); box-shadow: 0 4px 18px rgba(0,0,0,.07); transform: translateX(3px); }
.vc-item.featured { background: #FFF5F5; border-color: rgba(255,90,95,.28); }
.vc-item .vc-i-ico { width: 44px; height: 44px; object-fit: contain; }
.vc-item .vc-i-eye { font-family: 'Open Sans', sans-serif; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--tb-coral); margin-bottom: 4px; }
.vc-item h3 { font-family: 'Open Sans', sans-serif; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--tb-black); margin: 0 0 6px; line-height: 1.25; }
.vc-item .vc-i-pitch { font-family: Georgia, serif; font-size: 1.1rem; color: var(--tb-black); line-height: 1.5; margin: 0 0 8px; }
.vc-item .vc-i-meta { display: flex; flex-wrap: wrap; gap: 0 12px; }
.vc-item .vc-i-meta span { font-family: 'Open Sans', sans-serif; font-size: 0.82rem; font-weight: 500; color: var(--tb-black); display: flex; align-items: center; gap: 3px; }
.vc-item .vc-i-meta span::before { content: '\00B7'; color: var(--tb-coral-light); }
.vc-item .vc-i-meta span:first-child::before { display: none; }
.vc-item .vc-i-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; text-align: right; }
.vc-item .vc-i-price { font-family: 'Open Sans', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--tb-black); white-space: nowrap; }
.vc-item .vc-i-price small { display: block; font-size: 0.65rem; font-weight: 500; color: var(--tb-black); margin-top: 2px; }
.vc-item .vc-i-arr { color: var(--tb-coral); font-size: 1.1rem; transition: transform .18s; display: block; font-weight: 700; }
.vc-item:hover .vc-i-arr { transform: translateX(4px); }

.vc-notice { margin-top: 14px; background: #f8f5f0; border-radius: 10px; padding: 16px 22px; display: flex; align-items: center; gap: 14px; }
.vc-notice-ico { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; }
.vc-notice p { font-family: 'Open Sans', sans-serif; font-size: 0.85rem; color: var(--tb-black); margin: 0; line-height: 1.55; }
.vc-notice p strong { color: var(--tb-black); }
.vc-notice a { color: var(--tb-coral); font-weight: 700; }

@media (max-width: 900px) {
    .vc-aanbod { padding: 60px 0 64px; }
    .vc-tabset { border-radius: 14px; }
    .vc-tiles { grid-template-columns: 1fr; background: #fff; border-bottom: none; }
    .vc-tile { border-right: none; border-bottom: 1px solid rgba(0,0,0,.08); }
    .vc-tile:last-child { border-bottom: 1.5px solid var(--tb-coral); }
    .vc-tile .vc-t-photo, .vc-tile .vc-t-body { display: none; }
    .vc-tile.active::before, .vc-tile.active::after { display: none; }
    .vc-t-mobile { display: flex; align-items: center; gap: 14px; padding: 18px 20px; width: 100%; transition: background .2s; }
    .vc-t-mobile .vc-t-num { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.25); display: inline-flex; align-items: center; justify-content: center; font-family: 'Open Sans', sans-serif; font-size: .85rem; font-weight: 700; flex-shrink: 0; color: var(--tb-black); transition: all .2s; }
    .vc-t-mobile .vc-t-label { font-family: Georgia, serif; font-size: 1.05rem; color: var(--tb-black); flex: 1; line-height: 1.3; text-align: left; }
    .vc-t-mobile .vc-t-arrow { color: var(--tb-coral); font-weight: 700; font-family: 'Open Sans', sans-serif; flex-shrink: 0; transition: transform .2s; }
    .vc-tile.active .vc-t-mobile { background: #fff5f5; }
    .vc-tile.active .vc-t-mobile .vc-t-num { background: var(--tb-coral); border-color: var(--tb-coral); color: #fff; }
    .vc-tile.active .vc-t-mobile .vc-t-arrow { transform: rotate(90deg); }
    .vc-tab-panel.active { padding: 22px 18px 26px; border-top: 1.5px solid var(--tb-coral); }
    .vc-item { grid-template-columns: 44px 1fr; padding: 16px 18px; }
    .vc-item .vc-i-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.06); margin-top: 4px; }
}