@charset "UTF-8";
.cs-search {
  color: var(--color-blue-dark-special);
  padding-bottom: 72px;
  overflow-x: clip;
}
.cs-search > .container {
  max-width: 900px;
}
.cs-search form {
  margin-top: 24px;
  position: sticky;
  top: calc(var(--header-height-px) + 24px);
  z-index: 1;
  --button-color: var(--color-blue);
}
.cs-search form:not(:focus-within) {
  --button-color: var(--color-blue-gray-50);
}
.cs-search form:before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -24px -64px -12px;
  background-color: rgba(255, 255, 255, 0.6666666667);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
          backdrop-filter: blur(16px) saturate(1.8);
}
.cs-search form button {
  padding: 0.25em 0.67em;
  margin-inline-end: -0.25em;
  border-radius: 6px;
  color: var(--color-white);
  background-color: var(--button-color);
  border: solid 1px var(--button-color);
  gap: 0.5em;
}
.cs-search form button:after {
  content: "→";
}
.cs-search form button:hover {
  --button-color: var(--color-blue-dark);
}
.cs-search form button:disabled {
  --button-color: var(--color-blue-gray-15);
  cursor: progress;
}
.cs-search .field .input.input.input {
  align-items: center;
  gap: 0.67em;
}
.cs-search .field .input.input.input input {
  flex: 1;
  min-width: 0;
}
.cs-search .field .input.input.input input:disabled {
  opacity: 0.5;
}
.cs-search .field .icon {
  display: inline-block;
  width: 17px;
  height: 16px;
  background-color: var(--button-color);
  clip-path: path("M13.14 11.2a.96.96 0 0 0-.67-.27h-.27a.29.29 0 0 1-.2-.08.3.3 0 0 1-.03-.4A6.45 6.45 0 0 0 6.93 0 6.44 6.44 0 0 0 .5 6.46a6.44 6.44 0 0 0 10.4 5.07.3.3 0 0 1 .4.03c.05.05.08.12.08.2v.26c0 .26.1.5.28.69l2.63 2.56c.4.4 1.06.4 1.47 0 .4-.42.4-1.08 0-1.49l-2.62-2.57Zm-6.21-.27c-2.46 0-4.45-2-4.45-4.47a4.46 4.46 0 1 1 8.9 0 4.46 4.46 0 0 1-4.45 4.47Z");
  flex: none;
}
.cs-search .results-list {
  padding: 0;
  margin: 24px 0 0;
}
.cs-search .results-list li:not(:first-child) {
  margin-top: 24px;
}
.cs-search .results-list li::marker {
  content: "";
}
.cs-search .result a {
  padding-inline-start: 12px;
  position: relative;
  color: inherit;
  display: grid;
  grid-template-areas: ". . image" "details details image" "title title image" "text text image" ". . image";
  grid-template-columns: 1fr 1fr 300px;
  grid-template-rows: 1fr repeat(3, auto) 1fr;
  gap: 0 24px;
}
@media (max-width: 990px) {
  .cs-search .result a {
    grid-template-columns: auto;
    grid-template-areas: "details" "title" "image" "text";
    gap: 12px;
    padding-inline-start: 0;
  }
}
.cs-search .result a:not(:has(img)) {
  grid-template-areas: ". . ." "details details ." "title title ." "text text ." ". . .";
  padding-block: 24px;
}
.cs-search:not(:has(a img)) .result a {
  grid-template-areas: "." "details" "title" "text" ".";
  grid-template-columns: 1fr;
}

.cs-search .result a .image {
  grid-area: image;
}
.cs-search .result a .details {
  grid-area: details;
}
.cs-search .result a .title {
  grid-area: title;
}
.cs-search .result a .text {
  grid-area: text;
}
.cs-search .result a:before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 24px;
  box-shadow: 0 0 64px rgba(0, 0, 0, 0.0666666667), 0 0 12px rgba(0, 0, 0, 0.0666666667);
  opacity: 0;
  transition: inherit;
  pointer-events: none;
}
.cs-search .result a:hover:before {
  opacity: 1;
}
.cs-search .result a:hover h3 {
  color: var(--color-blue-dark);
}
.cs-search .result .details {
  display: grid;
  grid-auto-flow: column;
  gap: 12px;
  align-items: center;
  justify-content: start;
  margin-bottom: 18px;
}
@media (max-width: 990px) {
  .cs-search .result .details {
    margin-bottom: 0;
  }
}
.cs-search .result .length {
  font-size: 14px;
  opacity: 0.5;
}
.cs-search .result .length-value,
.cs-search .result .length-unit {
  font-weight: 600;
}
.cs-search .result img {
  border-radius: 12px;
}
.cs-search .result h3, .cs-search .result p {
  margin-block: 0;
}
.cs-search .result h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  max-width: 100%;
  word-wrap: break-word;
  word-break: break-word;
  transition: inherit;
  text-wrap: pretty;
}
@media (max-width: 990px) {
  .cs-search .result h3 {
    font-size: 21px;
  }
}
.cs-search .result p {
  font-family: var(--font-family-primary);
  font-size: 17px;
}
.cs-search .result .type {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: var(--color-mustard-light);
  padding: 0.5em 0.67em;
  border-radius: 6px;
  place-self: start;
}
.cs-search .result .type[data-type=video] {
  background-color: var(--color-purple-light);
}
.cs-search .spinner {
  width: 130px;
  height: 130px;
  margin-inline: auto;
  margin-block: 48px;
}
.cs-search .spinner[data-pending-indicator=hidden] {
  display: none;
}
.cs-search .spinner img {
  width: 100%;
  height: auto;
}
.cs-search:has([data-pending-indicator=shown]) ul {
  display: none;
}
/*# sourceMappingURL=cs-search.css.map */