/* Online nascholing (/online-nascholing/, page-online-nascholing.php) — Fase 2 prototype, pages.jsx OnlinePage.
   Colours = src/tokens.css "Warme Herberg" palette. Enqueued by hipp_enqueue_online_assets(). */

body.hipp-online-page { background: #F6F0F2; }
body.hipp-online-page .site-content { padding: 0; }

.hipp-online {
  --paper: #F6F0F2; --ink-50: #EFE8EA; --ink-100: #E5DDDF; --ink-200: #D5CBCE; --ink-300: #B4AAAC; --ink-400: #898182;
  --ink-500: #575756; --ink-700: #3E3D3D; --ink-800: #2B2A2A; --ink-900: #1D1C1C;
  --red-50: #FDF4F4; --red-100: #FDECEC; --red-500: #FF3540; --red-600: #E30613; --red-700: #B70410;
  --dark-canvas: #575756; --dark-text: #F5F1F2; --dark-muted: #C9C1C3;
  background: var(--paper); color: var(--ink-900);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.hipp-online *, .hipp-online *::before, .hipp-online *::after { box-sizing: border-box; }
.hipp-online [hidden] { display: none !important; }
.hipp-online a { text-decoration: none; }
.hipp-on-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.hipp-on-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--red-600); }
.hipp-on-eyebrow-muted { color: var(--dark-muted); font-weight: 400; }

/* Hero */
.hipp-on-hero {
  padding: 64px 0 56px; background-color: var(--dark-canvas); color: var(--dark-text);
  background-image: radial-gradient(700px 300px at 100% -10%, rgba(227,6,19,.2) 0%, transparent 60%);
}
.hipp-on-new {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 5px 12px;
  background: rgba(227,6,19,.15); border: 1px solid rgba(227,6,19,.3); border-radius: 4px;
  font-size: 11px; letter-spacing: .12em; color: var(--red-500) !important; transition: background .15s;
}
.hipp-on-new:hover { background: rgba(227,6,19,.25); }
.hipp-on-new-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red-500); }
.hipp-on-h1 {
  margin: 14px 0 20px; font-size: clamp(32px, 5vw, 56px); font-weight: 500; line-height: 1.05; letter-spacing: -.01em;
  color: var(--dark-text);
}
.hipp-on-lead { margin: 0 0 28px; max-width: 600px; font-size: 17px; line-height: 1.65; color: var(--dark-muted); }
.hipp-on-usps { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
.hipp-on-usps li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dark-muted); }

/* Tabs (prototype .chip / .chip.active-red) */
.hipp-on-body { padding: 80px 0; }
.hipp-on-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.hipp-online .hipp-chip {
  display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px;
  font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1;
  background: var(--paper); color: var(--ink-800); border: 1px solid var(--ink-200); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.hipp-online .hipp-chip:hover { border-color: var(--ink-400); }
.hipp-online .hipp-chip[aria-selected="true"] { background: var(--red-600); color: #fff; border-color: var(--red-600); }

/* Toolbar: tabs left, blocks/rows toggle right (same control as the agenda, hipp-agenda.css) */
.hipp-on-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 36px; }
.hipp-on-toolbar .hipp-on-tabs { margin-bottom: 0; }
.hipp-on-view { display: inline-flex; height: 36px; padding: 3px; background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: 4px; }
.hipp-on-view button {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; padding: 0; border: 0; border-radius: 3px;
  background: transparent; color: var(--ink-500); cursor: pointer;
}
.hipp-on-view button.is-active { background: #fff; color: var(--ink-900); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.hipp-on-view button:not(.is-active):hover { color: var(--ink-900); background: rgba(255,255,255,.6); }

/* Panels: stacked with a heading without JS; js/hipp-online.js makes them tabs and hides the headings */
.hipp-on-panel + .hipp-on-panel { margin-top: 64px; }
.hipp-on-panel-title { margin: 0 0 24px; font-size: 26px; font-weight: 500; color: var(--ink-900); }
.hipp-online.is-tabbed .hipp-on-panel + .hipp-on-panel { margin-top: 0; }
.hipp-online.is-tabbed .hipp-on-panel-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* "Alles": every panel below each other, each with its heading again */
.hipp-online.is-tabbed.is-all .hipp-on-panel-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.hipp-online.is-tabbed.is-all .hipp-on-panel + .hipp-on-panel { margin-top: 64px; }

/* Buttons / pills */
.hipp-on-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 4px;
  background: var(--red-600); color: #fff !important; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background .15s;
}
.hipp-on-btn:hover { background: var(--red-700); }
.hipp-on-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--red-600) !important; }
.hipp-on-link:hover { color: var(--red-700) !important; }
.hipp-on-pill {
  display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 500; line-height: 1; background: var(--ink-100); color: var(--ink-800);
}
.hipp-on-pill-outline { background: transparent; border: 1px solid var(--ink-200); color: var(--ink-700); }
.hipp-on-price { font-size: 18px; font-weight: 600; color: var(--ink-900); white-space: nowrap; }

/* Intro block per tab (text from Producten → Online aanbod) */
.hipp-on-intro {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin-bottom: 28px; padding: 20px 24px;
  background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: 6px;
}
.hipp-on-intro h3 { margin: 0 0 8px; font-size: 22px; font-weight: 500; color: var(--ink-900); }
.hipp-on-intro p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-700); }
.hipp-on-intro p + p { margin-top: 8px; }
.hipp-on-intro a { color: var(--ink-900) !important; border-bottom: 1px solid var(--ink-300); }
.hipp-on-intro a:hover { border-bottom-color: var(--ink-700); }
.hipp-on-intro .hipp-on-note { margin-top: 8px; font-size: 13px; color: var(--ink-500); }
.hipp-on-intro .hipp-on-note a { color: var(--ink-700); border-bottom: 1px solid var(--ink-300); }
.hipp-on-intro-price { text-align: center; }
.hipp-on-intro-amount { font-size: 28px; font-weight: 600; color: var(--red-600); white-space: nowrap; }
.hipp-on-intro-unit { font-size: 12px; color: var(--ink-500); }

/* Rows (webinars, books) */
.hipp-on-row {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  padding: 20px 0; border-top: 1px solid var(--ink-200);
}
.hipp-on-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12.5px; color: var(--ink-500); }
.hipp-on-row-title { margin: 0 0 4px; font-size: 18px; font-weight: 500; line-height: 1.25; }
.hipp-on-row-title a { color: var(--ink-900) !important; }
.hipp-on-row-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hipp-on-row-author { margin-bottom: 4px; font-size: 13.5px; color: var(--ink-500); }
.hipp-on-row-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-700); }
.hipp-on-aside { text-align: right; }
.hipp-on-aside .hipp-on-price { margin-bottom: 8px; }

/* Op maat */
.hipp-on-opmaat { margin-top: 32px; padding: 24px; background: var(--red-50); border: 1px solid var(--red-100); border-radius: 6px; }
.hipp-on-opmaat .hipp-on-eyebrow { margin-bottom: 8px; }
.hipp-on-opmaat h4 { margin: 0 0 10px; font-size: 20px; font-weight: 500; color: var(--ink-900); }
.hipp-on-opmaat p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--ink-700); }
.hipp-on-opmaat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
/* Block below a tab's list (text from the tab's fields): links in the last paragraph are buttons,
   the first one red, the others text links. */
.hipp-on-opmaat-text p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--ink-700); }
.hipp-on-opmaat-text p:last-child { margin-bottom: 0; }
.hipp-on-opmaat-text a { color: var(--red-600) !important; font-weight: 600; }
.hipp-on-opmaat-text p:last-child:has(a) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font-size: 13px; }
.hipp-on-opmaat-text p:last-child a:first-of-type {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 4px;
  background: var(--red-600); color: #fff !important; line-height: 1; transition: background .15s;
}
.hipp-on-opmaat-text p:last-child a:first-of-type:hover { background: var(--red-700); }

/* Offer lists (template-parts/online-aanbod.php): one item markup, shown as blocks (.is-grid)
   or as rows below each other (.is-rows); js/hipp-online.js switches and remembers the view. */
.hipp-on-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: var(--ink-500); }
.hipp-on-item-title { margin: 0 0 4px; font-size: 18px; font-weight: 500; line-height: 1.25; }
.hipp-on-item-title a { color: var(--ink-900) !important; }
.hipp-on-item-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hipp-on-item-author { margin-bottom: 4px; font-size: 13.5px; color: var(--ink-500); }
.hipp-on-item-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-700); }

.hipp-on-list.is-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hipp-on-list.is-grid .hipp-on-item {
  display: flex; flex-direction: column; gap: 16px; padding: 24px;
  background: var(--paper); border: 1px solid var(--ink-200); border-radius: 6px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hipp-on-list.is-grid .hipp-on-item:hover { border-color: var(--ink-300); box-shadow: 0 1px 0 rgba(29,28,28,.04), 0 8px 24px -12px rgba(29,28,28,.14); }
.hipp-on-list.is-grid .hipp-on-item-meta { margin-bottom: 14px; }
.hipp-on-list.is-grid .hipp-on-aside {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ink-100); text-align: left;
}
.hipp-on-list.is-grid .hipp-on-aside .hipp-on-price { margin-bottom: 0; }

/* Product image (featured image) on the card: on top in blocks, a thumbnail in rows */
.hipp-on-item-media { display: block; overflow: hidden; background: var(--ink-100); }
.hipp-on-item-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.hipp-on-item:hover .hipp-on-item-media img { transform: scale(1.03); }
.hipp-on-list.is-grid .hipp-on-item.has-image { padding-top: 0; overflow: hidden; }
.hipp-on-list.is-grid .hipp-on-item-media { aspect-ratio: 16 / 10; margin: 0 -24px; border-bottom: 1px solid var(--ink-100); }
.hipp-on-list.is-rows .hipp-on-item.has-image { grid-template-columns: 120px 1fr auto; }
.hipp-on-list.is-rows .hipp-on-item-media { width: 120px; aspect-ratio: 4 / 3; border-radius: 4px; }

.hipp-on-list.is-rows .hipp-on-item {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  padding: 20px 0; border-top: 1px solid var(--ink-200);
}
.hipp-on-list.is-rows .hipp-on-item:last-child { border-bottom: 1px solid var(--ink-200); }
.hipp-on-list.is-rows .hipp-on-item-meta { margin-bottom: 6px; }

@media (max-width: 900px) {
  .hipp-on-list.is-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hipp-on-list.is-grid { grid-template-columns: 1fr; }
  .hipp-on-list.is-rows .hipp-on-item { grid-template-columns: 1fr; gap: 12px; }
  .hipp-on-list.is-rows .hipp-on-item.has-image { grid-template-columns: 88px 1fr; }
  .hipp-on-list.is-rows .hipp-on-item-media { width: 88px; }
  .hipp-on-list.is-rows .hipp-on-item.has-image .hipp-on-aside { grid-column: 1 / -1; }
  .hipp-on-list.is-rows .hipp-on-aside { display: flex; justify-content: space-between; align-items: center; text-align: left; }
  .hipp-on-list.is-rows .hipp-on-aside .hipp-on-price { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .hipp-on-hero { padding: 48px 0 44px; }
  .hipp-on-body { padding: 48px 0 64px; }
  .hipp-on-intro, .hipp-on-row { grid-template-columns: 1fr; }
  .hipp-on-intro-price { text-align: left; }
  .hipp-on-aside { display: flex; justify-content: space-between; align-items: center; text-align: left; }
  .hipp-on-aside .hipp-on-price { margin-bottom: 0; }
}

/* Embedded via [hipp_online_aanbod] in the Elementor page: the Elementor section provides padding/width */
.hipp-online-embed { background: transparent; }
.hipp-online-embed .hipp-on-body { padding: 0; }
.hipp-online-embed .hipp-on-container { max-width: none; padding: 0; }