/**
 * @file
 * Responsive styles for Views exposed filters (Better Exposed Filters).
 *
 * Makes checkbox filters wrap nicely on mobile and provides
 * alternative select dropdown on very small screens.
 *
 * Breakpoints align with tokens.css:
 * - --breakpoint-tablet: 900px
 * - --breakpoint-mobile: 600px
 * - --breakpoint-small:  480px
 */

/* Make BEF checkbox containers flex and wrap */
.bef-checkboxes,
.form-checkboxes.bef-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

/* ────────────────────────────────────────────────────────────────────
   DS thematic filter as pill chips (SSE Formation Design System).
   The checkbox input is visually hidden but keyboard-focusable; its label
   becomes a pill that fills with brand colour when checked.
   ──────────────────────────────────────────────────────────────────── */
.bef-checkboxes {
  gap: 8px;
}
.bef-checkboxes .form-item {
  margin: 0;
  padding: 0;
}
.bef-checkboxes .form-item input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.bef-checkboxes .form-item label,
.bef-checkboxes .form-item .form-item__label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: var(--font-size-xs, 13px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.bef-checkboxes .form-item label:hover {
  border-color: var(--color-link);
  color: var(--color-link);
}
.bef-checkboxes .form-item:has(input:checked) label {
  background: var(--color-link);
  border-color: var(--color-link);
  color: var(--color-bg);
}
.bef-checkboxes .form-item:has(input:focus-visible) label {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* "Filtrer par thématique" legend → DS eyebrow */
.views-exposed-form .fieldset__legend {
  font-size: var(--font-size-xs, 13px);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
  margin-bottom: 10px;
}

/* Each checkbox item */
.bef-checkboxes > .form-type-boolean {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Better spacing for checkbox and label */
.bef-checkboxes .form-checkbox {
  margin-right: 0.375rem;
}

/* Make labels more compact */
.bef-checkboxes .form-item__label {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  /* Reduce gap on mobile */
  .bef-checkboxes {
    gap: 0.5rem;
  }

  /* Keep the pills content-sized so they wrap inline as a chip row, instead
     of forcing a 50%/100% flex-basis (which stacked them one per line). */
  .bef-checkboxes > .form-type-boolean {
    flex: 0 0 auto;
  }
}

/* Exposed form inline layout improvements */
.views-exposed-form.form--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

/* Fieldset wrapper improvements */


.views-exposed-form .fieldset__wrapper {
  width: 100%;
  background-color: transparent !important;
  border: none !important;
}

  .views-exposed-form .fieldset,
  .views-exposed-form fieldset {
    background-color: transparent !important;
    border: none !important;
  }

/* ────────────────────────────────────────────────────────────────────
   Actions / "Actions en cours" listings: lay the exposed filter groups
   (Thématique + Lieu) side by side on one row instead of stacked. Each
   group keeps its eyebrow legend (+ Olivero filter icon on first/last
   group) and its pill row; the group wraps to the next line only when the
   viewport can't fit both.
   ──────────────────────────────────────────────────────────────────── */
.view-id-sse_actions_listing .views-exposed-form,
.view-id-sse_sessions_latest .views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: flex-start;
}
/* Two equal columns: Thématique | Lieu. Each group is ~half the row and its
   pills wrap within that column, so neither sprawls across the full width. */
.view-id-sse_actions_listing .views-exposed-form > .fieldset--group,
.view-id-sse_actions_listing .views-exposed-form > fieldset,
.view-id-sse_sessions_latest .views-exposed-form > .fieldset--group,
.view-id-sse_sessions_latest .views-exposed-form > fieldset {
  flex: 1 1 calc(50% - 32px);
  min-width: 260px;
  max-width: 100%;
}
/* The inner wrapper is 100% of its (now half-width) fieldset. */
.view-id-sse_actions_listing .views-exposed-form .fieldset__wrapper,
.view-id-sse_sessions_latest .views-exposed-form .fieldset__wrapper {
  width: auto;
}
/* Tighter pills so each column stays compact. */
.view-id-sse_actions_listing .views-exposed-form .bef-checkboxes,
.view-id-sse_sessions_latest .views-exposed-form .bef-checkboxes {
  gap: 6px;
}
.view-id-sse_actions_listing .views-exposed-form .bef-checkboxes .form-item label,
.view-id-sse_sessions_latest .views-exposed-form .bef-checkboxes .form-item label {
  padding: 4px 12px;
}

/* Mobile: Stack form elements vertically */
@media (max-width: 768px) {
  .views-exposed-form.form--inline {
    flex-direction: column;
  }

  .views-exposed-form .fieldset {
    width: 100%;
    background-color: initial !important;
    border: initial !important;
  }

  /* Ensure submit button is visible and accessible */
  .views-exposed-form .form-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

/* ────────────────────────────────────────────────────────────────────
   Tablet/mobile (≤900px, the breakpoint at which the BEF pills swap to a
   full-width native select via bef-checkboxes--sse-sessions-latest.twig):
   stack the two filter groups tightly and hide the "Voir plus/moins"
   soft-limit toggle — it targets the now-hidden desktop checkboxes and is
   meaningless once the whole list is a single select.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .view-id-sse_actions_listing .views-exposed-form,
  .view-id-sse_sessions_latest .views-exposed-form {
    flex-direction: column;
    gap: 4px;
  }
  .view-id-sse_actions_listing .views-exposed-form > .fieldset--group,
  .view-id-sse_actions_listing .views-exposed-form > fieldset,
  .view-id-sse_sessions_latest .views-exposed-form > .fieldset--group,
  .view-id-sse_sessions_latest .views-exposed-form > fieldset {
    flex-basis: auto;
    margin-block: 0;
  }
  .view-id-sse_actions_listing .bef-soft-limit-link,
  .view-id-sse_sessions_latest .bef-soft-limit-link {
    display: none;
  }
}