/* Self-contained, like the other components here: every rule is namespaced
   `uc_*` and every value reads a live site token with a fallback copied from
   the same token's real value. Nothing redefines a site-global class name, so
   this component's CSS cannot collide with another component's bundle, and on
   a published make.com page it still follows the site's theme.

   Geometry (sizes, radii, padding, shadows) is taken from the Figma dropdown
   frame 4073-84636. Colors are the site's tokens rather than that frame's raw
   greys: the frame comes from a UI kit on a neutral grey ramp, while this site
   ramps its neutrals purple, and hardcoding the kit's greys would both clash
   with the surrounding page and freeze out the theme switch. */

.uc_root {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--32, 2rem);
  color: var(--_theme---text, #342237);
  font-family: var(--_typography---font--primary-family, Satoshi, Arial, Helvetica, sans-serif);
}

/* Toolbar: dropdown then search, both left-aligned as in the design, wrapping
   to a second row only when there is no longer room for both. */
.uc_toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_spacing---space--8, 0.5rem);
}

/* ---------------- Category dropdown ---------------- */

.uc_dropdown {
  position: relative;
  z-index: 30;
  flex: none;
}

.uc_trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--_theme---border, #d4cad6);
  border-radius: var(--_default---radius--small, 0.5rem);
  background-color: var(--_theme---background, #fff);
  color: var(--_theme---text, #342237);
  font-family: inherit;
  font-size: var(--_typography---font-size--text-small, 0.875rem);
  line-height: var(--_typography---line-height--small, 1.25rem);
  font-weight: var(--_typography---font--primary-medium, 500);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px rgba(10, 13, 18, 0.05);
  transition: border-color 0.3s, background-color 0.3s;
}

.uc_trigger:hover {
  background-color: var(--_theme---background-2, #fafafa);
}

.uc_trigger.is-open {
  border-color: var(--_default---swatch--brand-300, #d8c0f6);
}

.uc_trigger_badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  border: 1px solid var(--_theme---badge-border, #e9dcfb);
  border-radius: var(--_default---radius--round, 100vw);
  background-color: var(--_default---swatch--brand-100, #f3ecfd);
  color: var(--_default---swatch--brand-700, #803bbf);
  font-size: 0.75rem;
  line-height: 1.125rem;
  font-weight: var(--_typography---font--primary-medium, 500);
}

.uc_trigger_label {
  padding: 0 0.125rem;
  font-family: var(--_typography---font--primary-family, Satoshi, Arial, Helvetica, sans-serif);
  font-size: var(--_typography---font-size--text-small, 0.875rem);
  line-height: var(--_typography---line-height--small, 1.25rem);
  font-weight: var(--_typography---font--primary-regular, 400);
  letter-spacing: 0px;
}

.uc_chevron {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--_default---swatch--neutral-500, #867489);
  transition: transform 0.25s ease;
}

.uc_trigger[aria-expanded='true'] .uc_chevron,
.uc_row_toggle[aria-expanded='true'] .uc_chevron {
  transform: rotate(180deg);
}

/* 320px panel, its own scroll region, floating above the grid. */
.uc_menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 31;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
  width: 20rem;
  max-width: calc(100vw - 2rem);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--_default---radius--small, 0.5rem);
  background-color: var(--_theme---background, #fff);
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.03),
    0 12px 16px -4px rgba(0, 0, 0, 0.08);
}

.uc_menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.uc_menu_header {
  padding: 0.75rem;
  border-bottom: 1px solid var(--_theme---border, #d4cad6);
}

.uc_menu_search {
  position: relative;
  display: flex;
  align-items: center;
}

.uc_menu_search_icon {
  position: absolute;
  left: 0.75rem;
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--_theme---text-secondary, #6b5a6e);
  pointer-events: none;
}

.uc_menu_search_input {
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.5rem 0.5rem 2.25rem;
  border: 1px solid var(--_theme---border, #d4cad6);
  border-radius: var(--_default---radius--small, 0.5rem);
  background-color: var(--_theme---background, #fff);
  color: var(--_theme---text, #342237);
  font-family: inherit;
  font-size: var(--_typography---font-size--text-small, 0.875rem);
  line-height: var(--_typography---line-height--small, 1.25rem);
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
  transition: border-color 0.3s;
  -webkit-appearance: none;
  appearance: none;
}

.uc_menu_search_input::placeholder {
  color: var(--_theme---text-secondary, #6b5a6e);
}

.uc_menu_search_input:focus {
  border-color: var(--_default---swatch--brand-700, #803bbf);
  outline: none;
}

.uc_menu_search_input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* 426px is the list height in the design; past that the list scrolls and the
   panel stays put. */
.uc_menu_items {
  overflow-y: auto;
  max-height: 26.625rem;
  padding: 0.25rem 0;
  scrollbar-width: thin;
}

.uc_menu_items::-webkit-scrollbar {
  width: 0.375rem;
}

.uc_menu_items::-webkit-scrollbar-thumb {
  border-radius: var(--_default---radius--round, 100vw);
  background-color: var(--_default---swatch--neutral-300, #d4cad6);
}

.uc_menu_empty {
  margin: 0;
  padding: 0.5rem 1rem;
  color: var(--_theme---text-secondary, #6b5a6e);
  font-size: var(--_typography---font-size--text-small, 0.875rem);
  line-height: var(--_typography---line-height--small, 1.25rem);
}

.uc_row {
  display: flex;
  align-items: center;
  padding: 1px 0.375rem;
}

.uc_row.is-child {
  padding-left: 2.5rem;
  background-color: var(--_theme---background-2, #fafafa);
}

/* The row itself is the checkbox: one wide hit target, the drawn box inside it
   is decorative (see CheckboxIcon). */
.uc_row_main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0.5rem 0.375rem 0.5rem 0.625rem;
  border: 0;
  border-radius: 0.375rem;
  background-color: rgba(0, 0, 0, 0);
  color: var(--_theme---text, #342237);
  font-family: inherit;
  font-size: var(--_typography---font-size--text-small, 0.875rem);
  line-height: var(--_typography---line-height--small, 1.25rem);
  font-weight: var(--_typography---font--primary-medium, 500);
  text-align: left;
  cursor: pointer;
}

.uc_row_main:hover {
  background-color: var(--_theme---background-2, #fafafa);
}

.uc_row.is-child .uc_row_main:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.uc_row_label {
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc_row_count {
  flex: none;
  padding-right: 0.25rem;
  color: var(--_theme---text-secondary, #6b5a6e);
  font-size: 0.75rem;
  line-height: 1.125rem;
}

.uc_row_toggle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

.uc_row_toggle:hover {
  background-color: var(--_theme---background-2, #fafafa);
}

.uc_checkbox {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--_theme---border, #d4cad6);
  border-radius: 0.25rem;
  background-color: var(--_theme---background, #fff);
  color: #fff;
  transition: background-color 0.15s, border-color 0.15s;
}

.uc_checkbox.is-checked,
.uc_checkbox.is-indeterminate {
  border-color: var(--_default---swatch--brand-700, #803bbf);
  background-color: var(--_default---swatch--brand-700, #803bbf);
}

/* ---------------- Card search ---------------- */

.uc_search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 13rem;
  flex: 0 1 17rem;
}

.uc_search_icon {
  position: absolute;
  left: 0.75rem;
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--_theme---text-secondary, #6b5a6e);
  pointer-events: none;
}

.uc_search_input {
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--_theme---border, #d4cad6);
  border-radius: var(--_default---radius--small, 0.5rem);
  background-color: var(--_theme---background, #fff);
  color: var(--_theme---text, #342237);
  font-family: inherit;
  font-size: var(--_typography---font-size--text-small, 0.875rem);
  line-height: var(--_typography---line-height--small, 1.25rem);
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
  transition: border-color 0.3s;
  -webkit-appearance: none;
  appearance: none;
}

.uc_search_input::placeholder {
  color: var(--_theme---text-secondary, #6b5a6e);
}

.uc_search_input:focus {
  border-color: var(--_default---swatch--brand-700, #803bbf);
  outline: none;
}

.uc_search_input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* ---------------- Grid and cards ---------------- */

/* Same 3/2/1 breakpoints as the article grid, so a use-case section and an
   article section stay in step down the page. */
/* Own stacking context, below the toolbar, so an open dropdown always wins
   over the cards' full-cover anchors. */
.uc_grid {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--_spacing---space--24, 1.5rem);
  row-gap: var(--_spacing---space--32, 2rem);
}

@media (max-width: 991px) {
  .uc_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .uc_grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .uc_search {
    flex: 1 1 100%;
  }
}

.uc_card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_spacing---space--16, 1rem);
  padding: var(--_spacing---space--24, 1.5rem);
  border-radius: var(--_default---radius--main, 0.75rem);
  /* Same tokens as the site's Features card at rest and its clickable cards
     (.workflow_card, .gallery_card) on hover, so all follow the theme modes. */
  background-color: var(--_theme---background-2, #fafafa);
  /* The whole panel is the link, so it must read as one. */
  cursor: pointer;
  /* No transition here: .card-reveal below sits on the same element and owns
     the card's whole transition list, the hover fade included. */
}

.uc_card:hover {
  background-color: var(--_theme---hover, #f3f2f3);
}

/* Scroll-in-view stagger reveal, same effect/timing as the site's global
   list-stagger animation and the identical technique used by TemplateCard /
   ArticleCard: 24px rise, 0.6s, the site's easing curve inlined as a literal
   cubic-bezier, staggered 0.12s per card via each card's own index (see
   useScrollReveal in UseCaseGrid.tsx), firing once each card has scrolled
   ~100px into the viewport. Applied together with .uc_card on the same
   element (not a separate wrapper) -- same reasoning as ArticleCard: .uc_card
   has no hover transform of its own to conflict with.
   Because this transition replaces .uc_card's, it also carries the 0.3s
   hover background fade. The stagger delay comes in through
   --uc-reveal-delay and applies to opacity/transform only: an inline
   transition-delay would repeat across every listed property and hold back
   the hover fade by up to index * 0.12s. */
.card-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.21, 0.47, 0.32, 0.98) var(--uc-reveal-delay, 0s),
    transform 0.6s cubic-bezier(0.21, 0.47, 0.32, 0.98) var(--uc-reveal-delay, 0s),
    background-color 0.3s;
}

.card-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .card-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Transparent hit target over the whole card, above the text but below
   nothing -- same recipe as .clickable on the site's other cards. */
.uc_clickable {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--_default---radius--main, 0.75rem);
}

/* Same scale the Template Card's title uses, so a use-case panel and a
   template card read as the same level of heading down the page. */
.uc_card_title {
  margin: 0;
  font-size: var(--_typography---font-size--h5, 1.5rem);
  line-height: var(--_typography---line-height--display-xs, 2rem);
  font-weight: var(--_typography---font--primary-medium, 500);
  letter-spacing: 0px;
}

/* The visible CTA. Not an anchor -- .uc_clickable above it is the link. Pushed
   to the bottom edge so it lines up across a row of cards whose titles wrap to
   different heights. Gap and color match .link-btn on the site's cards. */
.uc_link_btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--16, 1rem);
  margin-top: auto;
  border-radius: var(--_default---radius--small, 0.5rem);
  color: var(--_theme---text-link--text, #803bbf);
}

.uc_btn_icon {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
}

/* Shaft is dashed out of view and drawn in on card hover; the head never
   moves. Hover-capable pointers only, so a tap on touch does not leave the
   arrow half-drawn. */
.uc_arrow_shaft {
  stroke-dasharray: 12;
}

@media (hover: hover) and (pointer: fine) {
  .uc_arrow_shaft {
    stroke-dashoffset: 12;
    transition: stroke-dashoffset 0.25s ease;
  }

  .uc_card:hover .uc_arrow_shaft {
    stroke-dashoffset: 0;
  }
}

.uc_actions {
  display: flex;
  justify-content: center;
  margin-top: var(--_spacing---space--32, 2rem);
}

/* The site's button architecture: the variant sets the local
   --_button-style---* vars and the shared rules only read them, so a theme
   swap flows through the same two hops the real .button component uses. */
.uc_btn {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: var(--_spacing---space--6, 0.375rem);
  margin: 0;
  padding: 0.625rem 1.25rem;
  border: 0.094rem solid var(--_button-style---border, transparent);
  border-radius: var(--_default---radius--small, 0.5rem);
  background-color: var(--_button-style---background, transparent);
  color: var(--_button-style---text, inherit);
  font-family: inherit;
  font-size: var(--_typography---font-size--text-main, 1rem);
  line-height: var(--_typography---line-height--md, 1.5rem);
  font-weight: var(--_typography---font--primary-medium, 500);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}

.uc_btn--secondary {
  --_button-style---border: var(--_theme---border, #d4cad6);
  --_button-style---background: var(--_theme---background, #fff);
  --_button-style---text: var(--_theme---text, #342237);
  --_button-style---background-hover: var(--_theme---background-2, #fafafa);
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px rgba(10, 13, 18, 0.05);
}

.uc_btn--secondary:hover {
  background-color: var(--_button-style---background-hover);
}

/* "Show All" button text only -- scoped via .uc_actions, the only wrapper
   around this button, so the visually identical Clear Filters button
   (inside .uc_empty) stays untouched. font-size/line-height/font-family
   already match .uc_btn's defaults; the real changes are font-weight
   (medium -> regular) and color (primary text -> secondary text). */
.uc_actions .uc_btn {
  font-family: var(--_typography---font--primary-family, Satoshi, Arial, Helvetica, sans-serif);
  font-size: var(--_typography---font-size--text-main, 1rem);
  line-height: var(--_typography---line-height--md, 1.5rem);
  font-weight: var(--_typography---font--primary-regular, 400);
  letter-spacing: 0px;
  color: var(--_theme---text-secondary, #6b5a6e);
}

.uc_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_spacing---space--16, 1rem);
  padding: var(--_spacing---space--48, 3rem) var(--_spacing---space--32, 2rem);
  border-radius: var(--_default---radius--main, 0.75rem);
  background-color: var(--_theme---background-2, #fafafa);
  text-align: center;
}

.uc_empty_title {
  margin: 0;
  color: var(--_theme---text, #342237);
  font-size: var(--_typography---font-size--text-large, 1.125rem);
  line-height: var(--_typography---line-height--large, 1.75rem);
  font-weight: var(--_typography---font--primary-medium, 500);
}

/* ---------------- Typography and utilities ---------------- */

/* margin:0 since these render as <p> */
.uc_text_main {
  margin: 0;
  font-size: var(--_typography---font-size--text-main, 1rem);
  line-height: var(--_typography---line-height--md, 1.5rem);
  font-weight: var(--_typography---font--primary-regular, 400);
  letter-spacing: 0px;
}

.uc_text_large {
  margin: 0;
  font-size: var(--_typography---font-size--text-large, 1.125rem);
  line-height: var(--_typography---line-height--large, 1.75rem);
  font-weight: var(--_typography---font--primary-regular, 400);
  letter-spacing: 0px;
}

/* must come after the typography classes to win the font-weight tie */
.uc_weight_medium {
  font-weight: var(--_typography---font--primary-medium, 500);
}

.uc_color_secondary {
  color: var(--_theme---text-secondary, #6b5a6e);
}

.uc_clamp_2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.uc_clamp_4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}

.uc_visually_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus must stay visible on every control, including the card's
   full-cover anchor, which has no visual box of its own. The design's focus
   ring is a 4px brand halo -- kept, as an outline so it never shifts layout. */
.uc_trigger:focus-visible,
.uc_btn:focus-visible,
.uc_row_main:focus-visible,
.uc_row_toggle:focus-visible,
.uc_search_input:focus-visible,
.uc_menu_search_input:focus-visible {
  outline: 0.125rem solid var(--_default---swatch--brand-700, #803bbf);
  outline-offset: 0.125rem;
}

.uc_clickable:focus-visible {
  outline: 0.125rem solid var(--_default---swatch--brand-700, #803bbf);
  outline-offset: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .uc_arrow_shaft,
  .uc_chevron,
  .uc_menu {
    transition: none;
  }

  .uc_arrow_shaft {
    stroke-dashoffset: 0;
  }
}

/* ============================================================
 * Reveal (keep this last). The site head hides every code-island
 * until its stylesheet has loaded: Safari and Firefox paint the
 * shadow DOM before this file arrives, which flashed the component
 * unstyled. Important declarations inside a shadow tree beat the
 * outer document's, so this undoes the head rule the moment this
 * file applies. See AGENTS.md, "Set up in Webflow, not in git".
 * ============================================================ */
:host {
  display: contents !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
}