/*
 * Redesigned company picker page (SOUTHVILLE-1102 / FE2).
 *
 * Layout + card-structure styles only — colours, type, radii, shadows and the
 * button/card surfaces all come from the FE1 design system (SOUTHVILLE-1101):
 * this file adds no palette or component styling of its own, per the ticket.
 * Everything is scoped under `.new-design` and `nd-`-prefixed, so un-flipped
 * pages are unaffected.
 */

/* The body-margin reset and the .nd-accentbar are now in the shared design_system
   (base.css / header.css), promoted in SOUTHVILLE-1125 so the detail header renders
   the same accent bar. */

/* --- Page shell -------------------------------------------------------- */
.new-design .nd-picker {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-2) var(--space-6);
}

.new-design .nd-picker__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-3);
}

.new-design .nd-picker__lead {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
}

/* The whole redesign header — accent bar, the 3-column titled bar, the language
   switcher — now lives in the shared design_system/header.css (unified in
   SOUTHVILLE-1125 so the picker and detail render the exact same header partial). */

/* Reserved seams (SOUTHVILLE-1111 FAQ). Kept in the flow with a little breathing
   room so the layout below is where 1111 drops in. The filter menu (1099) collapses
   to nothing when a company has no topics (the aria-hidden empty div). */
.new-design .nd-picker__filters:empty { margin: 0; }
.new-design .nd-picker__faq:empty { min-height: var(--space-4); }
/* SOUTHVILLE-1111/1142: the borderless FAQ list (centred heading over full-width plain-divider
   rows) now lives in the base .nd-faq (design_system/faq.css) and is shared by the picker, the
   filter pages and the program detail page. The picker only adds its own section spacing here. */
.new-design .nd-picker__faq { padding: var(--space-4) 0; }

/* --- Topic filter menu (SOUTHVILLE-1099 / A3) ---------------------------
   A centred, wrapping row of raised brand-coloured tiles (matching the original
   category picker): icon (SOUTHVILLE-1123) stacked above an uppercase label. An
   unselected tile is filled with the company's --brand-primary and sits on a bottom
   shadow; on a hover-capable device it lifts. The active topic inverts to a white,
   outlined tile. "Show all programs" is a separate reset link, revealed only once a
   topic is picked. */
.new-design .nd-picker__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 auto var(--space-3);
  padding: 0 var(--space-2);
}
.new-design .nd-topic {
  display: inline-flex;
  flex: none;                /* uniform, compact tiles that wrap onto more rows */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 138px;              /* fixed like the mockup — long labels WRAP, don't stretch */
  min-height: 92px;
  padding: 14px 12px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--brand-primary);
  color: var(--brand-primary-ink);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;   /* the tiles are <a> navigation links (SOUTHVILLE-1099) */
  cursor: pointer;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Hover only on devices that truly hover, so the lift doesn't stick after a tap. */
@media (hover: hover) {
  .new-design .nd-topic:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.20);
  }
}
.new-design .nd-topic:active { transform: translateY(-1px); }
.new-design .nd-topic:focus-visible {
  outline: 2px solid var(--brand-primary-ink);
  outline-offset: 2px;
}
/* Active topic inverts to a white outlined tile. The border is an inset ring so the
   tile keeps the same size whether or not it's selected (no layout shift). */
.new-design .nd-topic.is-selected {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
  transform: translateY(0);
}
@media (hover: hover) {
  .new-design .nd-topic.is-selected:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px var(--border), 0 8px 16px rgba(0, 0, 0, 0.12);
  }
}
.new-design .nd-topic__glyph {
  display: inline-flex;
  flex: none;
  width: 30px;
  height: 30px;
}
.new-design .nd-topic__glyph svg { width: 100%; height: 100%; }

/* "Show all programs" — a subtle reset link centred under the tiles, shown by the
   filter script only when a topic is active. */
.new-design .nd-picker__reset-row {
  display: flex;
  justify-content: center;
}
.new-design .nd-topic-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-3);
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  text-decoration: none;   /* it's an <a> link back to the default page (SOUTHVILLE-1099) */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .new-design .nd-topic-reset:hover { color: var(--text); text-decoration: underline; }
}
.new-design .nd-topic-reset__glyph {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
}
.new-design .nd-topic-reset__glyph svg { width: 100%; height: 100%; }

/* SOUTHVILLE-1134: on phones the topic menu becomes compact pills — two per row,
   all topics visible at once, no horizontal scrolling (the desktop tiles are a
   ~632 px block that pushed the programmes down). The pill is a horizontal row —
   icon then label — at least 44 px tall so it's a comfortable tap target (AC 9),
   packed left so an odd last topic sits alone on its row (as in the mockup). The
   reset link is enlarged to the same 44 px minimum. Desktop (>=768 px) keeps the
   raised category tiles unchanged. */
@media (max-width: 767.98px) {
  .new-design .nd-picker__filters {
    justify-content: flex-start;
    gap: var(--space-1);
    padding: 0;
  }
  .new-design .nd-topic {
    flex-direction: row;
    justify-content: flex-start;
    width: calc(50% - (var(--space-1) / 2));   /* two per row */
    min-height: 44px;
    padding: 8px 10px;
    gap: 6px;
    /* Smaller, tighter type so the longest NL labels ("Stoppen met roken",
       "Gezonde leefstijl") fit on ONE line at two-per-row (QA script step 7). */
    font-size: 0.6875rem;
    letter-spacing: 0.01em;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }
  .new-design .nd-topic__glyph { width: 18px; height: 18px; }
  .new-design .nd-topic__label { text-align: left; }
  .new-design .nd-topic-reset {
    min-height: 44px;
    padding: 10px 12px;
  }
}

.new-design .nd-picker__empty {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-6) 0;
}

/* --- Responsive card grid (1 / 2 / 3 / 4 columns) ----------------------
   SOUTHVILLE-1102 revision: flexbox (not grid) so a partial last row is centred
   instead of packing to the left. Each card's per-breakpoint width matches the
   previous repeat(N, 1fr) grid exactly — basis = (100% − (N−1)·gap) / N — so full
   rows render identically; only a partial last row differs (it centres).
   flex-grow:0 keeps partial rows at the correct width (not stretched); flex-shrink:1
   absorbs sub-pixel rounding so a full row never wraps. */
.new-design .nd-picker__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.new-design .nd-picker__grid > .nd-card { flex: 0 1 100%; }

@media (min-width: 640px) {
  .new-design .nd-picker__grid > .nd-card { flex-basis: calc((100% - var(--space-3)) / 2); }
}
@media (min-width: 960px) {
  .new-design .nd-picker__grid > .nd-card { flex-basis: calc((100% - 2 * var(--space-3)) / 3); }
}
@media (min-width: 1200px) {
  .new-design .nd-picker__grid > .nd-card { flex-basis: calc((100% - 3 * var(--space-3)) / 4); }
}

/* --- Program card ------------------------------------------------------
   Reuses the FE1 `.nd-card` surface (background / border / radius / shadow);
   here we only reset its padding and lay the card out as image + body. */
.new-design .nd-picker__grid .nd-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;   /* SOUTHVILLE-1134: anchor for the mobile whole-card tap link */
}

/* SOUTHVILLE-1134: the whole-card sign-up tap target. Hidden on desktop so the card
   is exactly as before (photo/title -> detail, both buttons). On phones it becomes a
   visible-only-to-pointer overlay (::after covers the card) and the card buttons are
   hidden — so tapping anywhere on the card, photo and title included, starts sign-up
   and no tap reaches the detail page (AC 5, 6). It stays a real, labelled link for
   assistive tech. */
.new-design .nd-card__tap { display: none; }
@media (max-width: 767.98px) {
  .new-design .nd-card__tap { display: block; }
  .new-design .nd-card__tap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .new-design .nd-picker__grid .nd-card__actions { display: none; }
}

.new-design .nd-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  /* Clean placeholder (a faint image glyph on the cream surface) for no-photo or
     failed-image cards, so every card keeps an even, intentional-looking media
     area. A loaded photo covers it. */
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%23c9c3b4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.new-design .nd-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.new-design .nd-card:hover .nd-card__image { transform: scale(1.05); }

.new-design .nd-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-3);
}

.new-design .nd-card__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  text-decoration: none;
  margin-bottom: var(--space-2);
  /* clamp to two lines AND reserve two lines' height, so the content below lines
     up whether the title is one or two lines (matches the mockup). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.new-design .nd-card__title:hover { text-decoration: underline; }

.new-design .nd-card__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.new-design .nd-card__fact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.new-design .nd-card__fact .nd-icon {
  width: 18px;
  height: 18px;
  color: var(--brand-primary-ink);
  flex-shrink: 0;
  margin-top: 2px;
}

.new-design .nd-card__fact--goal span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Flexibility line — the warm "cream" secondary surface from the tokens. */
.new-design .nd-card__flex {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 10px var(--space-1);
  background-color: var(--cream);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.new-design .nd-card__flex .nd-icon {
  width: 16px;
  height: 16px;
  color: var(--brand-primary-ink);
  flex-shrink: 0;
  margin-top: 2px;
}

.new-design .nd-card__flex span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Two actions pinned to the bottom of the card, kept side by side on one row
   (SOUTHVILLE-1102 revision, Daniel Jul 23) so the card stays short. They share the
   width equally and shrink to fit; the labels are kept short for this (the Dutch
   "Learn more" is "Meer info"). */
.new-design .nd-card__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  margin-top: auto;
  /* Always keep a gap above the buttons (padding, so it survives margin-top:auto
     when the content already fills the card). */
  padding-top: var(--space-2);
}

.new-design .nd-card__btn {
  flex: 1 1 0;
  min-width: 0;   /* allow the two buttons to share the row and shrink to fit */
  text-align: center;
  padding-left: var(--space-1);
  padding-right: var(--space-1);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* The card's "Learn more" (secondary) is a lighter tint of the brand colour, not
   the cream surface — matching the mockup, where both card buttons are yellow and
   the secondary is just a lighter shade. Derived from --brand-primary so it holds
   for any company's colour; the fixed light-yellow is the no-color-mix fallback. */
.new-design .nd-card__btn.nd-button--secondary {
  background-color: hsl(48 100% 72%);
  background-color: color-mix(in srgb, var(--brand-primary) 60%, #fff);
  color: var(--brand-primary-ink);
  border-color: transparent;
}

/* --- Trust badges bar (SOUTHVILLE-1102, data from SOUTHVILLE-1098) --------
   A centred, wrapping row of the page's badges; accent-coloured icons per the
   FE1 design tokens. Wraps to multiple lines on narrow screens. */
.new-design .nd-trust {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
}

/* SOUTHVILLE-1102 revision (Daniel): larger badges + text, matching the mockup. The
   max-width caps each badge so a full 40-char label wraps to ~2 lines instead of
   forcing an over-wide row — 4 badges still fit a desktop row and reflow on mobile. */
.new-design .nd-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text-muted);
  max-width: 12.5rem;
}

.new-design .nd-trust__item .nd-icon {
  width: 22px;
  height: 22px;
  color: var(--brand-accent);
  flex-shrink: 0;
}

/* SOUTHVILLE-1102 revision: EN now wraps like the NL row (the base flex). With the
   larger badges and up to 40-char labels, a fixed 2/4-col grid could overflow the
   screen, so both locales reflow instead. */
.new-design .nd-trust--grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* The language switcher (.nd-langswitch / .nd-flag) now lives in the shared
   design_system/header.css (promoted in SOUTHVILLE-1125 so the detail header can
   reuse it) — both headers render the exact same switcher. */