.hidden {
  display: none !important;
}

.resource-filter-bar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-8x);
  margin-bottom: var(--spacing-8x);
}

.resource-filter-bar .form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4x);
  order: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.resource-filter-bar select {
  padding-right: var(--spacing-20x) !important;
}

.resource-filter-bar :is(input[type=search], input:placeholder),
.resource-filter-bar :is(input[type=search], select) {
  font-size: 0.7778rem;
  font-weight: 700;
  line-height: 1.2;
}

.resource-filter-bar .input:has(select):after {
  --select-icon: url('https://www.fshealth.com/hubfs/icons/form-chevron-teal.svg');
}

.resource-search fieldset {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-4x);
  padding: var(--spacing-4x);
  width: 100%;
  height: fit-content;
  margin-bottom: 12px;
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  background: var(--surface-white);
  transition: var(--transition);
}

.resource-search fieldset:has(input[type=search]:focus) {
  border-color: var(--input-focus-color-border);
  outline-color: transparent;
}

.resource-search .form input[type=search] {
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
}

.resource-search .form input[type=search]::-webkit-search-cancel-button {
  display: none;
}

.resource-search button {
  cursor: pointer;
}

@media (min-width: 640px) {
  .resource-filter-bar .form {
    flex-direction: row;
    align-items: center;
  }

  .resource-search fieldset {
    margin-bottom: 0;
  }
}

@media (min-width: 1050px) {
  .resource-filter-bar {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--spacing-12x);
  }

  .resource-search {
    flex: 0 1 326px;
  }
}

/* ========================================================================== */
/*  Reosource Cards                                                           */
.resource-cards {
  --gap: var(--spacing-8x);
}

.resource-cards[data-has-filter-match="false"] {
  height: auto !important;
}

.resource-cards-no-match {
  display: none;
}

.resource-cards[data-has-filter-match="false"] .resource-cards-no-match {
  display: block;
}

.resource-cards-no-match__title {
  font-weight: 700;
  margin-bottom: var(--spacing-1x);
}

.resource-card-wrapper {
  --gap-offset: calc(var(--gap) * 2 / 3);
  width: calc(33.33% - var(--gap-offset));
  margin-bottom: var(--gap);
}

.resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5x);
  height: fit-content;
  min-height: 100%;
  padding: var(--spacing-6x);
  background: var(--surface-white);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.resource-card:hover {
  box-shadow: var(--box-shadow-md);
}

.resource-card__icon svg {
  display: block;
}

.resource-card__img {
  position: relative;
  height: 261px;
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--gray-200);
  overflow: clip;
  z-index: 0;
}

.resource-card__img img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.resource-card__img-overlay {
  position: absolute;
  inset: 0 auto auto 0;
  height: 100%;
  width: 100%;
  background: var(--surface-contrast);
  opacity: .45;
  z-index: 1;
}

.resource-card__img-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  z-index: 2;
  background: var(--surface-teal-light);
  transform: translate(-50%, -50%);
}

.resource-card__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.resource-card__content {
  margin-bottom: var(--spacing-4x);
}

.resource-card__tag {
  display: inline-block;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-teal);
  padding: var(--spacing-2x) var(--spacing-3x);
  background: var(--surface-blue);
  border-radius: var(--radius-md);
}

.resource-card__title {
  margin-bottom: var(--spacing-1x);
}

.resource-card__description {
  color: var(--text-light);
  line-height: 1.45;
}

.resource-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}


.resource-card:hover .btn svg {
  transform: translateX(4px);
}

@media (max-width: 1050px) {
  .resource-card-wrapper {
    --gap-offset: calc(var(--gap) / 2);
    width: calc(50% - var(--gap-offset));
  }
}


@media (max-width: 640px) {
  .resource-card-wrapper {
    width: 100%;
  }

  .resource-card__img {
    height: 190px;
  }
}



{#
.hidden {
  display: none !important;
}

.resource-filter-bar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-8x);
  margin-bottom: var(--spacing-8x);
}

.resource-filter-bar .form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4x);
  order: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.resource-filter-bar select {
  padding-right: var(--spacing-20x) !important;
}

.resource-filter-bar :is(input[type=search], input:placeholder),
.resource-filter-bar :is(input[type=search], select) {
  font-size: 0.7778rem;
  font-weight: 700;
  line-height: 1.2;
}

.resource-filter-bar .input:has(select):after {
  --select-icon: url('https://www.fshealth.com/hubfs/icons/form-chevron-teal.svg');
}

.resource-search fieldset {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-4x);
  padding: var(--spacing-4x);
  width: 100%;
  height: fit-content;
  margin-bottom: 12px;
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  background: var(--surface-white);
  transition: var(--transition);
}

.resource-search fieldset:has(input[type=search]:focus) {
  border-color: var(--input-focus-color-border);
  outline-color: transparent;
}

.resource-search .form input[type=search] {
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
}

.resource-search .form input[type=search]::-webkit-search-cancel-button {
  display: none;
}

.resource-search button {
  cursor: pointer;
}

@media (min-width: 640px) {
  .resource-filter-bar .form {
    flex-direction: row;
    align-items: center;
  }

  .resource-search fieldset {
    margin-bottom: 0;
  }
}

@media (min-width: 1050px) {
  .resource-filter-bar {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--spacing-12x);
  }

  .resource-search {
    flex: 0 1 326px;
  }
}

/* ========================================================================== */
/*  Reosource Cards                                                           */
.resource-cards {
  --gap: var(--spacing-8x);
}

.resource-cards[data-has-filter-match="false"] {
  height: auto !important;
}

.resource-cards-no-match {
  display: none;
}

.resource-cards[data-has-filter-match="false"] .resource-cards-no-match {
  display: block;
}

.resource-cards-no-match__title {
  font-weight: 700;
  margin-bottom: var(--spacing-1x);
}

.resource-card-wrapper {
  --gap-offset: calc(var(--gap) * 2 / 3);
  width: calc(33.33% - var(--gap-offset));
  margin-bottom: var(--gap);
}

.resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5x);
  height: fit-content;
  min-height: 100%;
  padding: var(--spacing-6x);
  background: var(--surface-white);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-md);
  transition: var(--transition);

  &.resource-card--light-blue {
    --light-color: var(--surface-blue);
    --dark-color: var(--teal-base);
  }

  &.resource-card--yellow {
    --light-color: var(--surface-yellow);
    --dark-color: var(--yellow-800);
  }

  &.resource-card--red {
    --light-color: var(--red-100);
    --dark-color: var(--red-base);
  }

  & .btn.btn--link {
    --text-color: var(--dark-color);
  }
}

.resource-card:hover {
  box-shadow: var(--box-shadow-md);
}

.resource-card__icon {
  & .fsh-icon {
    --icon-color: var(--dark-color);
    --icon-bg-color: var(--light-color);
  }

  & svg {
    display: block;
  }
}


.resource-card__img {
  position: relative;
  height: 261px;
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--gray-200);
  overflow: clip;
  z-index: 0;
}

.resource-card__img img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.resource-card__img-overlay {
  position: absolute;
  inset: 0 auto auto 0;
  height: 100%;
  width: 100%;
  background: var(--surface-contrast);
  opacity: .45;
  z-index: 1;
}

.resource-card__img-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  z-index: 2;
  background: var(--surface-teal-light);
  transform: translate(-50%, -50%);
}

.resource-card__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.resource-card__content {
  margin-bottom: var(--spacing-4x);
}

.resource-card__tag {
  display: inline-block;
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark-color);
  padding: var(--spacing-2x) var(--spacing-3x);
  background: var(--light-color);
  border-radius: var(--radius-md);
}

.resource-card__title {
  margin-bottom: var(--spacing-1x);
}

.resource-card__description {
  color: var(--text-light);
  line-height: 1.45;
}

.resource-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.resource-card:hover .btn svg {
  transform: translateX(4px);
}

@media (max-width: 1050px) {
  .resource-card-wrapper {
    --gap-offset: calc(var(--gap) / 2);
    width: calc(50% - var(--gap-offset));
  }
}


@media (max-width: 640px) {
  .resource-card-wrapper {
    width: 100%;
  }

  .resource-card__img {
    height: 190px;
  }
} #}