/* Resources page: interactive pieces only (filter bar, podcast arrows,
   HubSpot newsletter field). Content styling lives on res-* global classes.
   ACSS tokens throughout; 1px hairlines are the one literal size. */

/* hidden cards stay hidden whatever display their class sets */
.res-page [hidden] {
  display: none !important;
}

/* switching filter tabs: matching cards fade in out of a soft blur */
.res-page .res-in {
  animation: res-blur-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes res-blur-in {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

/* ---- filter bar (sticky under the site header) ---- */
.res-filters {
  position: sticky;
  top: var(--fp-header-h, 0px);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--gutter);
  border-bottom: 1px solid var(--white-trans-10);
  background: rgb(26 26 26 / 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.res-filters__chips {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  gap: 0.8rem;
  overflow-x: auto;
  scrollbar-width: none;
  /* the row scrolls sideways when it runs out of room: fade the cut edge */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 4rem), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 4rem), transparent);
}

.res-filters__chips::-webkit-scrollbar {
  display: none;
}

/* pills match the CRAi Insights section nav (socp-jump) */
.res-chip {
  flex: none;
  padding: 0.35em 1em;
  border: 1px solid transparent;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--neutral-light);
  font-family: inherit;
  font-size: var(--text-s);
  font-weight: 600;
  line-height: 1.9;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}

.res-chip:hover {
  border-color: var(--primary-trans-50);
  color: var(--white);
}

.res-chip.is-on {
  border-color: var(--primary);
  background: var(--primary-trans-30);
  color: var(--white);
}

.res-chip:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
}

.res-search {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.8rem;
  width: 24rem;
  height: 4rem;
  padding: 0 1.2rem;
  border: 1px solid var(--white-trans-10);
  border-radius: var(--radius-s);
  background: var(--white-trans-10);
}

.res-search svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--neutral-semi-light);
}

.res-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font-size: var(--text-s);
  line-height: 1;
  outline: none;
}

.res-search input::placeholder {
  color: var(--neutral-medium);
}

.res-search:focus-within {
  border-color: var(--secondary);
}

.res-count {
  flex: none;
  color: var(--neutral-medium);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .res-search {
    width: 16rem;
  }

  .res-count {
    display: none;
  }
}

@media (max-width: 560px) {
  .res-filters {
    flex-wrap: wrap;
  }

  .res-filters__chips {
    flex-basis: 100%;
  }

  .res-search {
    width: 100%;
  }
}

/* ---- podcast scroller arrows ---- */
.res-snav {
  display: flex;
  gap: 0.6rem;
}

.res-snav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 1px solid var(--white-trans-20);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: var(--transition);
}

.res-snav button:hover {
  border-color: var(--neutral-semi-light);
}

.res-snav svg {
  width: 1.8rem;
  height: 1.8rem;
}

/* ---- newsletter: HubSpot form as one row, field + button ---- */
/* the iframe sizes to its container; without this the empty target div
   shrinks to the iframe's 300px default and the button wraps */
#res-subscribe-form,
#res-subscribe-form iframe {
  width: 100% !important;
}

.res-subscribe .hs-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.8rem;
  max-width: 48rem;
}

.res-subscribe .hs-form .hs-form-field {
  flex: 1 1 22rem;
  min-width: 0;
  margin: 0 !important;
}

.res-subscribe .hs-form .hs-form-field > label:not(.hs-error-msg) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.res-subscribe .hs-form .hs-form-field:has(input[type="hidden"]) {
  display: none !important;
}

.res-subscribe .hs-form .input {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.res-subscribe .hs-form .hs-input {
  width: 100% !important;
  height: 4.6rem;
  padding: 0 1.4rem !important;
  border: 1px solid var(--white-trans-20) !important;
  border-radius: var(--radius-s) !important;
  background: var(--neutral-trans-60, rgb(26 26 26 / 0.6)) !important;
  color: var(--white) !important;
  font-size: var(--text-m) !important;
  line-height: 1 !important;
  outline: none;
}

.res-subscribe .hs-form .hs-input::placeholder {
  color: var(--neutral-medium);
}

.res-subscribe .hs-form .hs-input:focus {
  border-color: var(--secondary) !important;
}

.res-subscribe .hs-form .hs_submit,
.res-subscribe .hs-form .actions {
  margin: 0 !important;
  padding: 0 !important;
}

.res-subscribe .hs-form .hs-button {
  height: 4.6rem;
  padding: 0 2rem !important;
  border: 0 !important;
  border-radius: var(--radius-s) !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 72%, var(--accent) 160%) !important;
  color: var(--white) !important;
  font-family: inherit !important;
  font-size: var(--text-s) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer;
}

.res-subscribe .hs-form .hs-button:hover {
  filter: brightness(1.08);
}

.res-subscribe .hs-form .hs-error-msgs {
  margin: 0.5em 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.res-subscribe .hs-form .hs-error-msg,
.res-subscribe .hs-form .hs-error-msgs label {
  color: var(--danger-light) !important;
  font-size: var(--text-s) !important;
}

.res-subscribe .hs-form .hs_error_rollup {
  display: none !important;
}

.res-subscribe .submitted-message {
  color: var(--white);
  font-size: var(--text-m);
}

/* ---- background experience (canvas from resources.js) ----
   Sticky inside the page section: it fills the viewport while the section is
   on screen and scrolls away with it, so it never covers the footer. The
   negative margin cancels its height so it takes no space in the flow. */
.res-section > .res-bg {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  margin-top: 0 !important;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  z-index: 0;
  pointer-events: none;
}