/* CardReactor reference homepage: full-width discovery + live five-field cascade. */

.crf-home-page {
  grid-template-columns: minmax(0, 1fr);
}

.crf-home-page > .crf-col-main {
  min-width: 0;
  width: 100%;
}

.crf-home-intro p {
  margin: 0 0 12px;
}

.crf-home-live-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.crf-home-live-field {
  position: relative;
  min-width: 0;
}

.crf-home-live-field label {
  display: block;
  margin: 0 0 4px;
  color: #242729;
  font-size: 12px;
  font-weight: 700;
}

.crf-home-live-control {
  position: relative;
}

.crf-home-live-control::after {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 0;
  height: 0;
  border-top: 5px solid #555;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  pointer-events: none;
  transform: translateY(-35%);
}

.crf-home-live-input {
  display: block;
  width: 100%;
  height: 42px;
  min-width: 0;
  padding: 8px 34px 8px 11px;
  color: #242729;
  background: #fff;
  border: 1px solid #bfc3c7;
  border-radius: 4px;
  outline: 0;
  font-size: 15px;
  line-height: 1.3;
}

.crf-home-live-input:focus {
  border-color: #8b9197;
  box-shadow: 0 0 0 2px rgba(36,39,41,.10);
}

.crf-home-live-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 310px;
  overflow: auto;
  background: #fff;
  border: 1px solid #bfc3c7;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}

.crf-home-live-option {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  color: #242729;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #eceeef;
  cursor: pointer;
  text-align: left;
}

.crf-home-live-option:last-child {
  border-bottom: 0;
}

.crf-home-live-option:hover,
.crf-home-live-option.is-active,
.crf-home-live-option.is-selected {
  background: #f1f3f4;
}

.crf-home-live-option small {
  flex: 0 0 auto;
  color: #7b8186;
  font-size: 11px;
}

.crf-home-live-option--empty {
  cursor: default;
  color: #777;
}

.crf-home-live-results {
  overflow: visible;
}

.crf-home-live-results__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.crf-home-live-results__head .crf-site-heading {
  margin-bottom: 0;
}

.crf-home-live-count,
.crf-home-live-status,
.crf-home-live-empty {
  color: #6c757d;
  font-size: 13px;
}

.crf-home-live-status:empty {
  display: none;
}

.crf-home-live-empty {
  margin: 8px 0 0;
}

.crf-home-discovery-block {
  overflow: visible;
}

/* Desktop target: five equal cards across the full main frame. */
.crf-home-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.crf-home-card {
  position: relative;
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  overflow: hidden;
  color: #242729 !important;
  background: #fff;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  text-decoration: none !important;
}

.crf-home-card:hover,
.crf-home-card:focus-visible {
  color: #242729 !important;
  background: #fafafa;
  border-color: #b8b8b8;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}

.crf-home-card:focus-visible {
  outline: 2px solid rgba(36,39,41,.22);
  outline-offset: 2px;
}

.crf-home-card__visual {
  display: flex;
  height: clamp(245px, 20vw, 340px);
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  background: #f7f9f9;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 4px 4px 0 0;
}

.crf-home-card__visual img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100% - 2px);
  object-fit: contain;
}

.crf-home-card__label {
  display: flex;
  min-width: 0;
  min-height: 76px;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 7px;
  overflow: hidden;
  color: #242729 !important;
}

.crf-home-card__set,
.crf-home-card__detail,
.crf-home-card__subject {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #242729 !important;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

body.crf-document .crf-home-card__set,
body.crf-document .crf-home-card__detail,
body.crf-document .crf-home-card__subject {
  font-size: 14px !important;
  font-weight: 400 !important;
}

.crf-home-card__indicators {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: auto;
  padding: 3px 6px 4px;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}

.crf-home-award {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  flex: 0 0 22px;
}

.crf-home-award img {
  display: block;
  width: 19px;
  height: 19px;
  object-fit: contain;
}

@media (min-width: 900px) and (max-width: 1199px) {
  .crf-home-live-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .crf-home-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .crf-home-card__visual {
    height: 245px;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .crf-home-live-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .crf-home-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .crf-home-card__visual {
    height: 230px;
  }
}

@media (max-width: 767px) {
  .crf-home-live-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .crf-home-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .crf-home-card__visual {
    height: 180px;
    padding: 7px;
  }
  .crf-home-card__label {
    min-height: 70px;
  }
}


/* CR HOME BLACK DOT LOADER V1 */

.crf-home-live-results {
  position: relative;
}

.crf-home-live-results.is-loading {
  min-height: 420px;
}

.crf-home-live-status.is-loading {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid !important;
  min-height: 360px;
  place-items: center;
  margin: 0;
  padding: 24px;
  color: #000;
  background: rgba(255, 255, 255, .92);
  border-radius: 12px;
  pointer-events: none;
}

.crf-home-live-status.is-loading.is-more {
  position: static;
  min-height: 82px;
  padding: 16px 0 4px;
  background: transparent;
}

.crf-home-loading__content {
  display: flex;
  width: min(430px, 82vw);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  color: #000;
  text-align: center;
}

.crf-home-loading__word {
  display: block;
  margin-right: -.48em;
  color: #000;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .48em;
}

.crf-home-loading__dots {
  position: relative;
  display: block;
  width: min(390px, 76vw);
  height: 14px;
  overflow: hidden;
  background:
    radial-gradient(
      circle,
      rgba(0, 0, 0, .20) 0 5px,
      transparent 6px
    )
    0 50% / 20px 14px repeat-x;
}

.crf-home-loading__dots::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, .30) 20%,
      #000 54%,
      rgba(0, 0, 0, .48) 76%,
      transparent 100%
    );
  background-repeat: no-repeat;
  background-position: -55% 0;
  background-size: 34% 100%;

  -webkit-mask:
    radial-gradient(
      circle,
      #000 0 5px,
      transparent 6px
    )
    0 50% / 20px 14px repeat-x;

  mask:
    radial-gradient(
      circle,
      #000 0 5px,
      transparent 6px
    )
    0 50% / 20px 14px repeat-x;

  filter:
    drop-shadow(
      0 0 4px
      rgba(0, 0, 0, .42)
    );

  animation:
    crf-home-black-loader-sweep
    1.25s linear infinite;
}

.crf-home-live-status.is-more
.crf-home-loading__content {
  width: min(300px, 72vw);
  gap: 9px;
}

.crf-home-live-status.is-more
.crf-home-loading__word {
  font-size: 11px;
}

.crf-home-live-status.is-more
.crf-home-loading__dots {
  width: min(270px, 68vw);
  height: 10px;
  background-size: 15px 10px;
}

.crf-home-live-status.is-more
.crf-home-loading__dots::after {
  -webkit-mask-size: 15px 10px;
  mask-size: 15px 10px;
}

@keyframes crf-home-black-loader-sweep {
  from {
    background-position: -55% 0;
  }

  to {
    background-position: 155% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crf-home-loading__dots::after {
    animation-duration: 2.2s;
  }
}

@media (max-width: 767px) {
  .crf-home-live-results.is-loading {
    min-height: 340px;
  }

  .crf-home-live-status.is-loading {
    min-height: 300px;
    padding: 18px;
  }

  .crf-home-loading__content {
    gap: 15px;
  }

  .crf-home-loading__word {
    font-size: 15px;
  }
}