.main { margin: 54px auto 0 auto; }
@media only screen and (max-width: 1200px) { .main { margin: 49px auto 0 auto; } }
@media only screen and (max-width: 600px) { .main { margin: 46px auto 0 auto; } .main__hero { min-height: 160px; } }


.searchWrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(128, 0, 0, 0.06) 0%, transparent 100%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(128, 0, 0, 0.05) 0%, transparent 100%),
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(128, 0, 0, 0.02) 0%, transparent 100%),
    linear-gradient(180deg, #f9f6f6 0%, #ffffff 40%, #f7f3f4 70%, #ffffff 100%);
}
.searchWrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../../images/search.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.18;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
.searchWrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 10%, #800000 50%, transparent 90%);
  opacity: 0.3;
  pointer-events: none;
}

.search {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 20px 80px 20px;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 1050px) {
  .search {
    padding: 30px 15px 50px 15px;
  }
}

.search__h1 {
  color: #800000;
  font-size: 42px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 10px 0;
  line-height: 1.2em;
}
@media only screen and (max-width: 1050px) {
  .search__h1 {
    font-size: 28px;
  }
}
@media only screen and (max-width: 600px) {
  .search__h1 {
    font-size: 24px;
  }
}

.search__subtitle {
  color: #656263;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  margin: 0 0 40px 0;
}
@media only screen and (max-width: 1050px) {
  .search__subtitle {
    font-size: 16px;
    margin: 0 0 25px 0;
  }
}

.search__resultsHeader {
  width: 100%;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 15px;
}
.search__resultsCount {
  font-size: 22px;
  font-weight: 500;
  color: #333;
}
.search__resultsCount strong {
  color: #800000;
  font-weight: 800;
  font-size: 26px;
}
@media only screen and (max-width: 600px) {
  .search__resultsHeader {
    flex-direction: column;
    gap: 4px;
  }
  .search__resultsCount {
    font-size: 18px;
  }
  .search__resultsCount strong {
    font-size: 22px;
  }
}

/* ====== RESULTS CONTAINER ====== */
.search__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Override grid for search results: add category logo + author columns */
.search__element {
  grid-template-columns: 60px 1fr 200px 130px 140px 80px 140px 70px !important;
}

.search__categoryInfo {
  grid-area: 1 / 1 / 2 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search__logo {
  max-height: 35px;
  max-width: 50px;
  object-fit: contain;
}

.search__categoryName {
  display: none;
}

/* Shift grid areas to accommodate the logo + author columns */
.search__element .category-catalog__trainingInfo {
  grid-area: 1 / 2 / 2 / 3;
}
.search__element .category-catalog__author {
  grid-area: 1 / 3 / 2 / 4;
}
.search__element .category-catalog__newTraining {
  grid-area: 1 / 4 / 2 / 5;
}
.search__element .category-catalog__guaranteed {
  grid-area: 1 / 5 / 2 / 6;
}
.search__element .category-catalog__days {
  grid-area: 1 / 6 / 2 / 7;
}
.search__element .category-catalog__trainingsPrice {
  grid-area: 1 / 7 / 2 / 8;
}
.search__element .category-catalog__rate {
  grid-area: 1 / 8 / 2 / 9;
}

/* ====== MATCH SOURCE LABEL ====== */
.search__matchSource {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  color: #888;
  font-style: italic;
  margin-top: 2px;
}

/* ====== RESPONSIVE ====== */
@media only screen and (max-width: 1050px) {
  .search__element {
    display: flex !important;
    flex-direction: column !important;
  }
  .search__categoryInfo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
  }
  .search__logo {
    max-height: 28px;
    max-width: 40px;
  }
  .search__categoryName {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #888;
  }
  .search__element .category-catalog__trainingInfo,
  .search__element .category-catalog__author,
  .search__element .category-catalog__newTraining,
  .search__element .category-catalog__guaranteed,
  .search__element .category-catalog__days,
  .search__element .category-catalog__trainingsPrice,
  .search__element .category-catalog__rate {
    grid-area: unset;
  }
  .search__element .category-catalog__authorTooltip,
  .search__authorTooltip {
    display: none;
  }
}

/* Tooltip below button on search results */
.search__authorTooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #2a2a2a;
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 10;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  pointer-events: none;
}
.search__authorTooltip strong {
  font-weight: 700;
  display: block;
  font-size: 13px;
}
.search__authorTooltip span {
  font-weight: 400;
  opacity: 0.8;
  font-size: 11px;
}
.category-catalog__author:hover .search__authorTooltip {
  opacity: 1;
  visibility: visible;
}
.search__element:has(.category-catalog__author:hover) {
  z-index: 10;
}
.search__element .category-catalog__authorName {
  max-width: 140px;
}

/* ====== NO RESULTS ====== */
.search__noResults {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 60px 20px;
  font-size: 17px;
  color: #656263;
  background: white;
  border-radius: 16px;
  border: 2px solid rgba(0, 0, 0, 0.06);
  width: 100%;
}
.search__noResults i {
  font-size: 48px;
  color: #800000;
  opacity: 0.3;
}
.search__noResults p {
  text-align: center;
  margin: 0;
  font-weight: 500;
}