/* ==========================================================================
   YouTube Shorts: блок на главной, страница /shorts, модальный плеер
   (базовый размер шрифта на сайте 10px, поэтому 1rem = 10px)
   ========================================================================== */

.shorts {
  padding: 0 0 3rem;
}
.shorts--home {
  padding: 0 0 2rem;
}

/* --- Шапка блока --- */
.shorts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0 0 2rem;
}
.shorts__head-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: #272727;
}
.shorts__head-icon {
  width: 2.2rem;
  height: 2.2rem;
  color: #e62117;
  flex: 0 0 auto;
}
.shorts--page .shorts__head {
  justify-content: space-between;
  padding: 0 0 2.5rem;
}
.shorts__head .shorts__tabs {
  padding: 0;
  flex: 1 1 auto;
}
.shorts__head-subtitle {
  margin: 0;
  font-family: "Work Sans", sans-serif;
  font-size: 1.6rem;
  color: #484848;
}
.shorts__head-count {
  color: #999;
}

/* --- Кнопки --- */
.shorts__btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 2.4rem;
  border: 2px solid #f8c12c;
  border-radius: 3rem;
  background: #f8c12c;
  color: #272727;
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.shorts__btn:hover,
.shorts__btn:focus-visible {
  background: #272727;
  border-color: #272727;
  color: #f8c12c;
  text-decoration: none;
  outline: none;
}
.shorts__btn:hover .shorts__btn-icon {
  transform: translateX(.4rem);
}
.shorts__btn-icon {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
  transition: transform .25s;
}
.shorts__btn-icon--yt {
  width: 2rem;
  height: 2rem;
}
.shorts__btn--outline {
  background: transparent;
  color: #272727;
}
.shorts__btn--outline:hover {
  background: #f8c12c;
  border-color: #f8c12c;
  color: #272727;
}
.shorts__btn--more {
  min-width: 24rem;
  justify-content: center;
}
.shorts__btn[disabled] {
  opacity: .6;
  cursor: wait;
}

/* --- Вкладки категорий --- */
.shorts__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0 0 2.5rem;
}
.shorts__tab {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.8rem;
  border: 2px solid #e5e5e5;
  border-radius: 3rem;
  background: #fff;
  color: #272727;
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .2s, background .2s, color .2s;
}
.shorts__tab:hover {
  border-color: #f8c12c;
  color: #272727;
  text-decoration: none;
}
.shorts__tab.is-active {
  border-color: #f8c12c;
  background: #f8c12c;
}
.shorts__tab-count {
  padding: .2rem .8rem;
  border-radius: 2rem;
  background: rgba(0, 0, 0, .08);
  font-size: 1.1rem;
  font-weight: 600;
}
.shorts__tab.is-active .shorts__tab-count {
  background: #272727;
  color: #f8c12c;
}

/* --- Сетка карточек --- */
.shorts__grid {
  display: grid;
  gap: 2rem 1.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 480px)  { .shorts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .shorts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .shorts__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .shorts__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* На странице /shorts контент уже (есть сайдбар) — колонок чуть меньше */
@media (min-width: 992px)  { .shorts--page .shorts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .shorts--page .shorts__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .shorts--page .shorts__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* На главной показываем ровно один ряд: лишние карточки скрываем */
@media (max-width: 479.98px)                        { .shorts--home .shorts__item:nth-child(n+5) { display: none; } }
@media (min-width: 480px) and (max-width: 767.98px) { .shorts--home .shorts__item:nth-child(n+4) { display: none; } }
@media (min-width: 768px) and (max-width: 1199.98px){ .shorts--home .shorts__item:nth-child(n+5) { display: none; } }
@media (min-width: 1200px) and (max-width: 1599.98px){ .shorts--home .shorts__item:nth-child(n+7) { display: none; } }

/* --- Карточка --- */
.shorts__item {
  display: block;
  min-width: 0;
  color: #272727;
  text-decoration: none;
}
.shorts__item:hover {
  text-decoration: none;
  color: #272727;
}
.shorts__item-thumb {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 1.2rem;
  background: #111;
  box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .15);
}
/* Fallback для браузеров без aspect-ratio */
@supports not (aspect-ratio: 9 / 16) {
  .shorts__item-thumb { height: 0; padding-bottom: 177.78%; }
  .shorts__item-thumb img { position: absolute; inset: 0; }
}
.shorts__item-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s;
}
.shorts__item:hover .shorts__item-thumb img {
  transform: scale(1.08);
}
.shorts__item-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 45%);
  pointer-events: none;
}
.shorts__item-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50%;
  background: rgba(248, 193, 44, .95);
  color: #272727;
  transform: translate(-50%, -50%) scale(.85);
  opacity: 0;
  transition: opacity .25s, transform .25s;
}
.shorts__item-play svg {
  margin-left: .3rem;
}
.shorts__item:hover .shorts__item-play,
.shorts__item:focus-visible .shorts__item-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (hover: none) {
  .shorts__item-play { opacity: .9; transform: translate(-50%, -50%) scale(1); }
}
.shorts__item-title {
  display: block;
  padding: 1rem .2rem 0;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.7rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.shorts__more {
  display: flex;
  justify-content: center;
  padding: 3rem 0 0;
}
.shorts__empty {
  padding: 4rem 0;
  text-align: center;
  font-family: "Work Sans", sans-serif;
  font-size: 1.6rem;
  color: #484848;
}

/* --- Модальный плеер --- */
.shorts-modal[hidden] {
  display: none !important;
}
.shorts-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.shorts-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .88);
}
.shorts-modal__box {
  position: relative;
  z-index: 1;
  width: min(92vw, calc((100vh - 8rem) * 9 / 16));
  max-width: 48rem;
  animation: shortsModalIn .25s ease-out;
}
@keyframes shortsModalIn {
  from { opacity: 0; transform: translateY(1.5rem) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.shorts-modal__player {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 1.6rem;
  background: #000;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, .6);
}
@supports not (aspect-ratio: 9 / 16) {
  .shorts-modal__player { height: 0; padding-bottom: 177.78%; }
}
.shorts-modal__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.shorts-modal__close {
  position: absolute;
  top: -1.4rem;
  right: -1.4rem;
  z-index: 2;
  width: 4.4rem;
  height: 4.4rem;
  border: 0;
  border-radius: 50%;
  background: #f8c12c;
  color: #272727;
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .4);
  transition: transform .2s, background .2s;
}
.shorts-modal__close:hover {
  background: #fff;
  transform: rotate(90deg);
}
.shorts-modal__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem .4rem 0;
}
.shorts-modal__title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.7rem;
  color: #fff;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.shorts-modal__yt {
  flex: 0 0 auto;
  font-family: "Work Sans", sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #f8c12c;
  text-decoration: none;
  white-space: nowrap;
}
.shorts-modal__yt:hover {
  color: #fff;
  text-decoration: none;
}
body.shorts-modal-open {
  overflow: hidden;
}
@media (max-width: 575.98px) {
  .shorts-modal { padding: 1rem; }
  .shorts-modal__close { top: .8rem; right: .8rem; width: 3.8rem; height: 3.8rem; font-size: 2.6rem; }
  .shorts-modal__box { width: min(96vw, calc((100vh - 9rem) * 9 / 16)); }
}