:root { --max: 1100px; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#f6f7fb; color:#111; }
a { color: inherit; text-decoration:none; }

.header, .footer { background:#111; color:#fff; }
.container { max-width: var(--max); margin:0 auto; padding: 14px 14px; }
.header .container, .footer .container { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  color:inherit;
  line-height:0;           /* чтобы не было лишней высоты */
}

.brand .logo{
  height:44px;             /* фиксируем высоту логотипа */
  width:auto;              /* ширина по пропорциям */
  display:block;
  object-fit:contain;
}
.nav a { opacity:.9; }
.nav a:hover { opacity:1; text-decoration:underline; }

.main { padding: 14px 0 30px; }
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* мобилки */
  gap: 10px;
}

/* большие телефоны / маленькие планшеты */
@media (min-width: 560px){
  .grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

/* планшеты */
@media (min-width: 820px){
  .grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
}

/* десктоп */
@media (min-width: 1100px){
  .grid{
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* ✅ меньше карточки */
    gap: 16px;
  }
}

/* опционально: очень широкие мониторы */
@media (min-width: 1500px){
  .grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.06);
  position:relative;            /* ВАЖНО: для оверлея */
  display:block;                /* чтобы ссылка была блоком */
}

.thumb{
  width:100%;
  aspect-ratio:1/1;
  background:#e9ecf3;
  display:block;
  object-fit:cover;
}

/* Оверлей с названием поверх картинки */
.card .meta{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 10px 12px;
  background:rgba(0,0,0,.60);   /* ~40% прозрачности (60% заливки) */
  color:#fff;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;
}

/* Показываем по hover на десктопе */
.card:hover .meta{
  opacity:1;
  transform:translateY(0);
}

/* Класс для мобилки: показ по первому тапу */
.card.show-title .meta{
  opacity:1;
  transform:translateY(0);
}

.card .title{
  font-size:14px;
  font-weight:650;
  line-height:1.25;
}

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  background:#111; color:#fff;
  border:0; border-radius: 12px;
  padding: 12px 14px;
  cursor:pointer;
}
.btn:disabled { opacity:.6; cursor:not-allowed; }

.center { display:flex; justify-content:center; margin-top: 16px; }

.notice { background:#fff; border-radius: 14px; padding: 12px; box-shadow: 0 6px 22px rgba(0,0,0,.06); }

.admin-table { width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; box-shadow: 0 6px 22px rgba(0,0,0,.06); }
.admin-table th, .admin-table td { padding: 10px; border-bottom:1px solid #eef0f6; vertical-align:top; font-size:14px; }
.admin-table th { text-align:left; background:#fafbff; font-weight:700; }
.admin-table tr:last-child td { border-bottom:0; }

.input, .select {
  width:100%; padding:10px 12px; border:1px solid #dfe3f0; border-radius: 12px; background:#fff;
}
.row { display:grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) {
  .row { grid-template-columns: 1fr 1fr; }
}

.small { font-size: 12px; opacity:.8; }
.badge { display:inline-block; padding: 4px 8px; border-radius: 999px; background:#f0f2f8; font-size:12px; }
.danger { background:#d7263d; }
.danger:hover { filter: brightness(.95); }

/* Центральный слой с "Play" */
.card .playOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;       /* чтобы клики шли по карточке */
  opacity:0;
  transition: opacity .15s ease;
}

/* Кружок с иконкой */
.card .playOverlay .playBtn{
  width:64px;
  height:64px;
  border-radius:999px;
  background:rgba(0,0,0,.60);  /* сочетается с плашкой */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Треугольник play */
.card .playOverlay .playBtn:before{
  content:"";
  display:block;
  width:0; height:0;
  border-left:18px solid rgba(255,255,255,.95);
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  margin-left:4px;
}

/* показываем play по hover (на десктопе тоже можно) */
.card:hover .playOverlay{
  opacity:1;
}

/* показываем play при первом тапе (класс show-title) */
.card.show-title .playOverlay{
  opacity:1;
}