/* =========================================================
   Category archive page
   SEO-friendly infinite scroll + hidden fallback pagination
   ========================================================= */

.sp-category-page{
  display:grid;
  gap:clamp(22px,3vw,34px);
  min-width:0;
}

.sp-category-breadcrumbs{
  margin-bottom:2px;
}

.sp-category-head{
  position:relative;
  display:grid;
  gap:14px;
  max-width:920px;
  min-width:0;
  margin-bottom:clamp(4px,1vw,10px);
}

.sp-category-head h1{
  margin:0;
  font-family:var(--sp-font-display);
  font-size:var(--sp-fs-page-title);
  line-height:1.02;
  letter-spacing:-.045em;
}

.sp-category-head__description{
  max-width:780px;
  color:var(--sp-muted);
  font-size:var(--sp-fs-body);
  line-height:1.65;
}

.sp-category-head__description > *{
  margin-top:0;
  margin-bottom:10px;
}

.sp-category-head__description > *:last-child{
  margin-bottom:0;
}

.sp-category-head__page{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin:0;
  padding:8px 12px;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-pill);
  background:var(--sp-white-04);
  color:var(--sp-muted);
  font-size:var(--sp-fs-xs);
  font-weight:var(--sp-fw-heavy);
  line-height:1;
}

.sp-category-switch{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 0 4px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.sp-category-switch::-webkit-scrollbar{
  display:none;
}

.sp-category-switch__item{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:10px 14px;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-pill);
  background:var(--sp-white-04);
  color:var(--sp-text-soft);
  font-size:var(--sp-fs-sm);
  font-weight:var(--sp-fw-heavy);
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:
    color .2s var(--sp-ease),
    background .2s var(--sp-ease),
    border-color .2s var(--sp-ease),
    transform .2s var(--sp-ease);
}

.sp-category-switch__item:hover,
.sp-category-switch__item:focus-visible{
  color:var(--sp-accent-text);
  border-color:var(--sp-card-border-hover);
  background:var(--sp-accent-alpha-09);
}

.sp-category-switch__item:focus-visible{
  outline:2px solid var(--sp-accent);
  outline-offset:2px;
}

.sp-category-switch__item.is-active{
  color:var(--sp-accent-contrast);
  border-color:transparent;
  background:var(--sp-accent);
  box-shadow:var(--sp-shadow-soft);
}

.sp-category-switch__item.is-active:hover,
.sp-category-switch__item.is-active:focus-visible{
  color:var(--sp-accent-contrast);
  background:var(--sp-accent);
  transform:none;
}

.sp-category-grid{
  align-items:stretch;
}

.sp-category-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-lg);
  background:var(--sp-gradient-card);
  box-shadow:var(--sp-shadow-soft);
  transition:
    transform .22s var(--sp-ease),
    border-color .22s var(--sp-ease),
    background .22s var(--sp-ease),
    box-shadow .22s var(--sp-ease);
}

.sp-category-card:hover{
  transform:translateY(-3px);
  border-color:var(--sp-card-border-hover);
  background:var(--sp-gradient-card-hover);
  box-shadow:var(--sp-shadow);
}

.sp-category-card__link{
  display:grid;
  grid-template-rows:auto 1fr;
  height:100%;
  min-width:0;
  color:inherit;
  text-decoration:none;
}

.sp-category-card__link:focus-visible{
  outline:2px solid var(--sp-accent);
  outline-offset:-4px;
}

.sp-category-card__image{
  display:block;
  aspect-ratio:16/9;
  width:100%;
  min-width:0;
  margin:0;
  overflow:hidden;
  background:var(--sp-gradient-media-placeholder);
}

.sp-category-card__image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.001);
  transition:transform .35s var(--sp-ease), filter .35s var(--sp-ease);
}

.sp-category-card:hover .sp-category-card__image img{
  transform:scale(1.045);
  filter:saturate(1.08) contrast(1.04);
}

.sp-category-card__placeholder{
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  color:var(--sp-white-62);
  font-weight:var(--sp-fw-black);
  letter-spacing:.18em;
  text-transform:uppercase;
}

.sp-category-card__body{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:18px;
}

.sp-category-card__meta{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  color:var(--sp-muted);
  font-size:var(--sp-fs-xs);
  font-weight:var(--sp-fw-medium);
  line-height:1.3;
  white-space:nowrap;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.sp-category-card__meta::-webkit-scrollbar{
  display:none;
}

.sp-category-card .sp-news-badges{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:1px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.sp-category-card .sp-news-badges::-webkit-scrollbar{
  display:none;
}

.sp-category-card .sp-news-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:5px 9px;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-pill);
  background:var(--sp-white-04);
  color:var(--sp-text-soft);
  font-size:var(--sp-fs-xxs);
  font-weight:var(--sp-fw-heavy);
  line-height:1;
  white-space:nowrap;
}

.sp-category-card .sp-news-badge--league{
  color:var(--sp-accent-text);
  border-color:var(--sp-card-border);
  background:var(--sp-accent-alpha-09);
}

.sp-category-card .sp-news-badge--tournament{
  background:var(--sp-accent-2-alpha-09);
}

.sp-category-card .sp-news-badge--team{
  background:var(--sp-white-055);
}

.sp-category-card__title{
  margin:0;
  font-family:var(--sp-font-post-title);
  color:var(--sp-text);
  font-size:var(--sp-fs-xl);
  font-weight:var(--sp-fw-medium);
  font-style:italic;
  line-height:1.12;
  letter-spacing:-.025em;
  transition:color .2s var(--sp-ease);
}

.sp-category-card:hover .sp-category-card__title{
  color:var(--sp-accent-text);
}

.sp-category-card__excerpt{
  margin:0;
  color:var(--sp-muted);
  font-size:var(--sp-fs-base);
  line-height:1.6;
}

/* Archive/search cards: visually close to main news cards, but without horizontal mobile scroll */
.sp-category-card{
  height:100%;
  background:var(--sp-white-04);
  box-shadow:var(--sp-shadow-soft);
  transition:
    transform var(--sp-transition-fast),
    border-color var(--sp-transition-fast),
    background var(--sp-transition-fast);
}

.sp-category-card:hover{
  transform:translateY(-2px);
  border-color:var(--sp-card-border-hover);
  background:var(--sp-gradient-card-hover);
  box-shadow:var(--sp-shadow-soft);
}

.sp-category-card__link{
  display:flex;
  min-height:100%;
  flex-direction:column;
}

.sp-category-card__image{
  aspect-ratio:16 / 9;
}

.sp-category-card__image img{
  transition:transform .7s var(--sp-ease);
}

.sp-category-card:hover .sp-category-card__image img{
  transform:scale(1.045);
  filter:none;
}

.sp-category-card--image-generated .sp-category-card__image img,
.sp-category-card--image-manual-center .sp-category-card__image img{
  object-position:center center;
}

.sp-category-card--image-manual-left .sp-category-card__image img{
  object-position:left center;
}

.sp-category-card--image-manual-right .sp-category-card__image img{
  object-position:right center;
}

.sp-category-card__body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:11px;
  padding:16px;
}

.sp-category-card__title{
  display:-webkit-box;
  overflow:hidden;
  min-height:calc(1.13em * 3);
  margin:0;
  color:var(--sp-text);
  font-size:var(--sp-fs-lg);
  font-weight:var(--sp-fw-medium);
  font-style:italic;
  line-height:1.13;
  letter-spacing:-.025em;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}

.sp-category-card__excerpt{
  display:-webkit-box;
  overflow:hidden;
  margin:0;
  color:var(--sp-muted);
  font-size:var(--sp-fs-sm);
  line-height:1.45;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}

.sp-category-card__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px 10px;
  max-width:100%;
  overflow:visible;
  color:var(--sp-muted);
  font-size:var(--sp-fs-xs);
  font-weight:var(--sp-fw-norm);
  line-height:1.25;
  white-space:normal;
}

.sp-category-card__meta-item{
  display:inline-flex;
  min-width:0;
  align-items:center;
  gap:5px;
}

.sp-category-card__meta-date{
  color:var(--sp-text-soft);
}

.sp-category-card__meta-icon{
  width:15px;
  height:15px;
  flex:0 0 15px;
  opacity:.9;
}

.sp-category-card__meta-icon--rating{
  color:#facc15;
}

.sp-category-card__meta-rating{
  color:var(--sp-text-soft);
}

.sp-category-card .sp-news-badges{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
  min-width:0;
  max-width:100%;
  margin-top:auto;
  overflow:hidden;
  padding-bottom:0;
  white-space:nowrap;
}

.sp-category-card .sp-news-badge{
  display:inline-flex;
  flex:0 0 auto;
  max-width:100%;
  min-height:26px;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:5px 8px;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-pill);
  background:var(--sp-white-04);
  color:var(--sp-muted);
  font-size:var(--sp-fs-xs);
  font-weight:var(--sp-fw-norm);
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sp-category-card .sp-news-badge--league{
  color:var(--sp-accent);
  background:var(--sp-white-04);
}

.sp-category-card .sp-news-badge--tournament{
  color:var(--sp-text-soft);
  background:var(--sp-white-04);
}

.sp-category-card .sp-news-badge--team{
  color:var(--sp-muted);
  background:var(--sp-white-04);
}

/* Search results page */
.sp-search-results-page{
  min-width:0;
}

.sp-search-results-head{
  max-width:980px;
}

.sp-search-page-form{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  width:min(720px, 100%);
  max-width:100%;
  margin-top:2px;
}

.sp-search-page-form input{
  width:100%;
  min-height:48px;
  padding:0 16px;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-pill);
  background:var(--sp-white-06);
  color:var(--sp-text);
  font-size:var(--sp-fs-base);
  line-height:1;
  outline:0;
}

.sp-search-page-form input::placeholder{
  color:var(--sp-muted);
}

.sp-search-page-form input:focus{
  border-color:var(--sp-card-border-hover);
  background:var(--sp-white-08);
}

.sp-search-page-form button{
  min-height:48px;
  white-space:nowrap;
}

@media (max-width:680px){
  .sp-search-page-form{
    grid-template-columns:1fr;
  }

  .sp-search-page-form button{
    width:100%;
  }

  .sp-category-card__excerpt{
    -webkit-line-clamp:3;
  }
}

.sp-category-load{
  display:none;
}

html.sp-has-js .sp-category-load{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin-top:2px;
  padding:12px 16px;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-pill);
  background:var(--sp-white-035);
  color:var(--sp-muted);
  font-size:var(--sp-fs-sm);
  font-weight:var(--sp-fw-medium);
  text-align:center;
}

html.sp-has-js .sp-category-load.is-loading::before{
  content:"";
  width:16px;
  height:16px;
  margin-right:10px;
  border:2px solid var(--sp-card-border);
  border-top-color:var(--sp-accent);
  border-radius:50%;
  animation:sp-category-spin .8s linear infinite;
}

@keyframes sp-category-spin{
  to{transform:rotate(360deg)}
}

.sp-category-sentinel{
  width:100%;
  height:1px;
}

.sp-category-pagination{
  margin-top:4px;
}

/*
  С JS пагинация визуально убрана, но ссылки остаются в HTML.
  При отключённом JS класс html.sp-has-js не появится, поэтому пагинация будет видимой.
*/
html.sp-has-js .sp-category-pagination{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

html.sp-has-js .sp-category-pagination:focus-within,
html.sp-has-js .sp-category-pagination.is-fallback-visible{
  position:static;
  width:auto;
  height:auto;
  margin-top:18px;
  overflow:visible;
  clip:auto;
  clip-path:none;
  white-space:normal;
}

.sp-category-pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.sp-category-pagination a,
.sp-category-pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:var(--sp-pagination-min-size);
  min-height:var(--sp-pagination-min-size);
  padding:8px 12px;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-sm);
  background:var(--sp-white-04);
  color:var(--sp-text);
  font-size:var(--sp-fs-sm);
  text-decoration:none;
}

.sp-category-pagination a:hover,
.sp-category-pagination a:focus-visible{
  border-color:var(--sp-card-border-hover);
  color:var(--sp-accent-text);
}

.sp-category-pagination .current{
  color:var(--sp-accent-contrast);
  background:var(--sp-accent);
  border-color:transparent;
  font-weight:var(--sp-fw-heavy);
}

.sp-category-empty{
  max-width:760px;
  padding:24px;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-lg);
  background:var(--sp-gradient-surface);
  box-shadow:var(--sp-shadow-soft);
}

.sp-category-empty h2{
  margin:0 0 8px;
  font-size:var(--sp-fs-2xl);
  line-height:1.12;
  letter-spacing:-.035em;
}

.sp-category-empty p{
  margin:0;
  color:var(--sp-muted);
  line-height:1.6;
}

.sp-category-seo-text{
  max-width:920px;
  padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-lg);
  background:var(--sp-white-035);
  color:var(--sp-muted);
  font-size:var(--sp-fs-body);
  line-height:1.7;
}

.sp-category-seo-text > *{
  margin-top:0;
  margin-bottom:12px;
}

.sp-category-seo-text > *:last-child{
  margin-bottom:0;
}

.sp-category-seo-text strong,
.sp-category-seo-text b{
  color:var(--sp-text);
}

@media (max-width:680px){
  .sp-category-page{
    gap:20px;
  }
  
    .sp-category-switch{
    margin-right:calc(var(--sp-container-pad) * -1);
    padding-right:var(--sp-container-pad);
  }

  .sp-category-switch__item{
    min-height:38px;
    padding:9px 12px;
    font-size:var(--sp-fs-xs);
  }

  .sp-category-card__body{
    padding:16px;
  }

  .sp-category-card__title{
    font-size:20px;
  }

  html.sp-has-js .sp-category-load{
    align-items:flex-start;
    border-radius:var(--sp-radius-md);
    line-height:1.4;
  }
}

@media (hover:none), (pointer:coarse){
  .sp-category-card:hover{
    transform:none;
  }

  .sp-category-card:hover .sp-category-card__image img{
    transform:scale(1.001);
  }
}