/* Studio DT Search — Projecten browse. Token-driven; tokens come from the theme :root.
   Smaller control sizes (.9375rem, .8125rem, .75rem) are search-UI chrome — intentional
   literals tuned by eye, not covered by the main type scale. */

/* More breathing room from the page title above; smaller gap down to the grid. */
.projecten-browse { margin-top: var(--space-md); margin-bottom: var(--space-xs); }

.projecten-browse__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
}

.projecten-browse__filter { display: flex; flex-direction: column; gap: var(--space-xs); }

/* --- Filter trigger (the <summary>) --- */
.projecten-filter__trigger {
  font: 400 var(--font-size-section-title)/1 var(--font-family-sans);
  color: var(--color-text-default);
  cursor: pointer;
  list-style: none;            /* hide native marker */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  transition: transform var(--motion-duration-hover) var(--motion-easing-default);
}
.projecten-filter__trigger::-webkit-details-marker { display: none; }
.projecten-filter__trigger:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }   /* highlight on hover */
.projecten-filter__trigger:active { transform: translateY(1px); }   /* sink on click */

/* --- No-JS baseline: panel flows inline under the trigger --- */
.projecten-filter__panel {
  margin-top: var(--space-xs);
  background: var(--color-surface-default);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: 10px;
  padding: var(--space-sm);
}
.projecten-filter__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
}
.projecten-filter__group { border: 0; margin: 0; padding: 0; }
/* Column heading — small, muted, title-case; padding:0 so it sits flush-left with the options. */
.projecten-filter__group legend {
  padding: 0;
  font: var(--font-weight-regular) 0.875rem/1 var(--font-family-sans);
  color: var(--color-text-default);
  margin-bottom: var(--space-sm);
}
/* Options read as plain links (medium weight); the checkbox is hidden (kept for state + a11y).
   Hovered → underline; selected → permanent underline; clicked → adds the filter + sinks. */
.projecten-filter__option {
  display: block;
  width: fit-content;
  padding-block: var(--space-3xs);
  font: var(--font-weight-medium) 1.25rem/1.25 var(--font-family-sans);
  color: var(--color-text-default);
  cursor: pointer;
  transition: transform var(--motion-duration-hover) var(--motion-easing-default);
}
.projecten-filter__option input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.projecten-filter__option:hover,
.projecten-filter__option:has(:checked) { text-decoration: underline; text-decoration-thickness: 2px; }
.projecten-filter__option:active { transform: translateY(1px); }
.projecten-filter__apply {
  margin-top: var(--space-sm);
  background: var(--color-text-default);
  color: var(--color-surface-default);
  border: 0;
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-lg);
  font: 700 .9375rem/1 var(--font-family-sans);
  cursor: pointer;
}

/* --- Active-filter chips (gold, removable) --- */
.projecten-search-tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: 10px; }
.projecten-search-tags__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: var(--color-filter-selected);
  color: var(--color-text-default);
  border-radius: var(--radius-pill);
  padding: calc(var(--space-3xs) + 2px) var(--space-sm);   /* 4px taller; a little horizontal */
  font: var(--font-weight-medium) 0.9375rem/1 var(--font-family-sans);   /* medium, 15px */
  text-decoration: none;
  transition: transform var(--motion-duration-hover) var(--motion-easing-default);
}
/* Whole pill is clickable (it's the <a>); only the label underlines on hover; sinks like a link. */
.projecten-search-tags__chip:hover .projecten-search-tags__chip-label { text-decoration: underline; }
.projecten-search-tags__chip:active { transform: translateY(1px); }
/* The × — bigger and perfectly centred (masked SVG, the same thin × as the panel close). */
.projecten-search-tags__chip-x {
  width: 1rem; height: 1rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M3%203%2013%2013M13%203%203%2013'%20stroke='%23000'%20stroke-width='1.2'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M3%203%2013%2013M13%203%203%2013'%20stroke='%23000'%20stroke-width='1.2'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.projecten-search-tags__clear {
  align-self: center;
  font: 600 .8125rem/1 var(--font-family-sans);
  color: var(--color-text-muted);
}

/* --- Search --- */
.projecten-search { display: inline-flex; align-items: center; gap: 0; }
.projecten-search__text {
  font: var(--font-weight-regular) var(--font-size-section-title)/1 var(--font-family-sans);
  color: var(--color-text-default);
  cursor: pointer;
  white-space: nowrap;
}
.projecten-search__icon-btn {
  display: inline-flex; align-items: center;
  border: 0; background: transparent; padding: 0;
  margin: 0 var(--space-xs) 0 0;            /* collapsed: gap to the "Search" label on its right */
  font-size: var(--font-size-section-title); /* sizes the 1em icon */
  color: var(--color-text-default);
  cursor: pointer;
}
.projecten-search__icon { /* magnifier — masked SVG tinted with currentColor; aria-hidden in markup */
  /* Lens (upper-right) + handle (down to lower-left), thin round stroke. */
  --icon-search: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='5.2'/%3E%3Cline%20x1='8.3'%20y1='11.7'%20x2='3'%20y2='17'/%3E%3C/svg%3E");
  width: 1em; height: 1em; display: inline-block;
  background: currentColor;
  -webkit-mask: var(--icon-search) center / contain no-repeat;
          mask: var(--icon-search) center / contain no-repeat;
}
.projecten-search__input {
  box-sizing: border-box;
  height: var(--font-size-section-title);   /* match the label/text height so expanding doesn't grow the row */
  border: none;                              /* no outline… */
  border-radius: var(--radius-pill);         /* …but keep the pill shape */
  background: var(--palette-white);
  padding: 0 var(--space-sm);
  font: var(--font-weight-regular) var(--font-size-ui)/1 var(--font-family-sans);   /* a tad smaller than the footer input */
  width: 14rem;
  min-width: 0;   /* allow the enhanced collapse to shrink it to 0 */
  overflow: hidden;
}
/* Placeholder matches the green footer's signup input. */
.projecten-search__input::placeholder { color: var(--palette-ink-300); font-size: var(--font-size-footnote); font-weight: var(--font-weight-medium); }   /* 14px medium — smaller than the typed text */
.projecten-search__input:focus,
.projecten-search__input:focus-visible { outline: none; }
/* Clear button (kept — the native clear is the standard touch affordance): thin "×" matching the
   filter pills, tinted to the text colour, a bit bigger, and it sinks on click like the buttons. */
.projecten-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 1em; height: 1em;
  cursor: pointer;
  background-color: var(--color-text-default);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M4%204%2012%2012M12%204%204%2012'%20stroke='%23000'%20stroke-width='1.4'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M4%204%2012%2012M12%204%204%2012'%20stroke='%23000'%20stroke-width='1.4'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--motion-duration-hover) var(--motion-easing-default);
}
.projecten-search__input::-webkit-search-cancel-button:active { transform: translateY(1px); }

/* =======================================================================
   JS-ENHANCED presentation (.is-enhanced added by search.js on load)
   ======================================================================= */
.projecten-browse.is-enhanced .projecten-filter__apply { display: none; } /* live filtering — no Apply */

/* Search collapses to the "Search" label until expanded. As the input (left) reveals and the
   label (right) collapses, the icon between them rides from the left to the trailing edge. */

/* Label: fades out + collapses on expand; sinks on click (collapsed) like the buttons. */
.projecten-browse.is-enhanced .projecten-search__text {
  max-width: 8em;
  overflow: hidden;
  transition: opacity var(--motion-duration-hover) var(--motion-easing-default),
              max-width var(--motion-duration-transition) var(--motion-easing-default),
              transform var(--motion-duration-hover) var(--motion-easing-default);
}
.projecten-search__text:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }   /* highlight on hover */
.projecten-search__text:active { transform: translateY(1px); }
.projecten-browse.is-enhanced .projecten-search.is-expanded .projecten-search__text {
  opacity: 0;
  max-width: 0;
}

/* Input: hidden (zero-width) until expanded, then fades in + reveals. */
.projecten-browse.is-enhanced .projecten-search__input {
  max-width: 0;
  opacity: 0;
  padding-inline: 0;
  pointer-events: none;
  transition: max-width var(--motion-duration-transition) var(--motion-easing-default),
              opacity var(--motion-duration-hover) var(--motion-easing-default),
              padding var(--motion-duration-transition) var(--motion-easing-default);
}
.projecten-browse.is-enhanced .projecten-search.is-expanded .projecten-search__input {
  max-width: 14rem;
  opacity: 1;
  padding-inline: var(--space-sm);
  pointer-events: auto;
}

/* Icon: its margins swap — collapsed it's spaced from the label on its right; expanded it sits
   12px from the input and flush to the trailing edge. The margin transition + the input/label
   size transitions carry it smoothly across. */
.projecten-browse.is-enhanced .projecten-search__icon-btn {
  transition: margin var(--motion-duration-transition) var(--motion-easing-default),
              transform var(--motion-duration-hover) var(--motion-easing-default);
}
.projecten-browse.is-enhanced .projecten-search.is-expanded .projecten-search__icon-btn {
  margin: 0 0 0 var(--space-xs);   /* 12px from the input; flush to the trailing edge */
}
@media (prefers-reduced-motion: reduce) {
  .projecten-browse.is-enhanced .projecten-search__text,
  .projecten-browse.is-enhanced .projecten-search__input,
  .projecten-browse.is-enhanced .projecten-search__icon-btn { transition: none; }
}

/* Enhanced: the panel floats as a frosted card (same treatment as the cookie box) — top-aligned to
   the filter/search row and centred at ~62% of the content width. */
.projecten-browse.is-enhanced .projecten-browse__bar { position: relative; }   /* containing block */
.projecten-browse.is-enhanced .projecten-filter__panel {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(62% + 32px);
  z-index: var(--z-modal);
  margin: 0;
  padding: calc(var(--space-2xl) - 8px);
  border: 0;
  border-radius: var(--frost-radius);
  background: var(--frost-bg);
  -webkit-backdrop-filter: var(--frost-blur);
          backdrop-filter: var(--frost-blur);
  box-shadow: 0 14px 40px rgba(20, 20, 30, .06), 0 40px 100px rgba(20, 20, 30, .05);   /* frosted panel depth shadow */
  will-change: transform;   /* search.js applies the soft cursor parallax (matches the cookie card) */
  display: none;
}
.projecten-browse.is-enhanced .projecten-filter[open] .projecten-filter__panel { display: block; }

/* Close (×) — top-right of the panel, the thin glyph used by the search clear button. */
.projecten-filter__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 1.25rem; height: 1.25rem;
  border: 0; padding: 0; cursor: pointer;
  background-color: var(--color-text-default);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M3%203%2013%2013M13%203%203%2013'%20stroke='%23000'%20stroke-width='1.2'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M3%203%2013%2013M13%203%203%2013'%20stroke='%23000'%20stroke-width='1.2'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--motion-duration-hover) var(--motion-easing-default);
}
.projecten-filter__close:active { transform: translateY(1px); }
/* No-JS baseline has no close button (panel flows inline). */
.projecten-browse:not(.is-enhanced) .projecten-filter__close { display: none; }

/* Invisible click-catcher so clicking outside closes — no dim/blur (the panel itself is frosted). */
.projecten-filter__backdrop {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: transparent;
}

/* aria-live status (visually hidden) */
.projecten-browse__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Small screens: the panel becomes a full-screen frosted cover, columns stacked --- */
@media (max-width: 48rem) {
  .projecten-browse.is-enhanced .projecten-filter__panel {
    position: fixed; inset: 0; width: auto; transform: none;
    border-radius: 0;
    padding: var(--space-xl);
    overflow: auto;
  }
  .projecten-filter__columns { grid-template-columns: 1fr; gap: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .projecten-browse * { transition: none !important; animation: none !important; }
}