/* ─────────────────────────────────────────────────────────────
   CMEX.ai — home.css
   Pixel-perfect translation of data/_disign/desktop.jsx sections:
     - DHero          (295-429)
     - DSectionHead   (432-471)
     - DVideoCard916  (474-517)
     - DVideoCard169  (520-563)
     - DMarketCard    (566-611)
     - DHowItWorks    (614-649)
     - DGenres        (652-674)
     - DAuthors       (677-707)
     - DCreatorCTA    (710-749)
   All classes prefixed .h-*. Theme tokens from base.css.
   Content centered to 1440px, side padding 60px.
   ───────────────────────────────────────────────────────────── */

/* ── Outline border tied to theme (DHero secondary button) ──── */
:root,
:root[data-theme="light"] {
  --h-outline: #E5E8EF;
}
:root[data-theme="dark"] {
  --h-outline: rgba(255, 255, 255, 0.18);
}

/* ── Container & section base ────────────────────────────────── */
.h-container {
  max-width: 1440px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
  box-sizing: border-box;
}

.h-section {
  width: 100%;
  padding-bottom: 80px;
}

/* ── Section head (DSectionHead 432-471) ─────────────────────── */
.h-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
}

.h-sec-head-l {
  display: flex;
  flex-direction: column;
}

.h-sec-head-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.h-sec-head h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
}

.h-sec-head-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.h-sec-head-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

.h-sec-head-r {
  display: flex;
  align-items: center;
  gap: 14px;
}

.h-sec-head-link {
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.h-sec-head-arrows {
  display: flex;
  gap: 6px;
}

.h-sec-head-arrows button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--divider);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms;
  color: var(--text);
}

.h-sec-head-arrows button:active {
  transform: scale(0.88);
}

/* Top-author avatar real image */
.h-author-avatar-inner.has-avatar {
  background-size: cover;
  background-position: center;
}

/* ── Wireframe placeholder (DPlaceholder) ────────────────────────
   Works in two modes:
   • Standalone (<div class="h-placeholder">) — fills parent (uses
     width/height 100% via parent sizing). Used in creator-banner-shot.
   • Modifier (e.g. .h-card-916-thumb.h-placeholder) — just paints the
     stripe background on an already-sized container.
   The card-thumb classes already set position:relative, aspect-ratio,
   border-radius, overflow:hidden — placeholder only adds bg + stripes. */
.h-placeholder {
  background: var(--card);
}

.h-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, var(--stripe) 10px 11px);
  pointer-events: none;
  border-radius: inherit;
}

/* Standalone uses need explicit sizing + clip on the placeholder itself */
.h-creator-banner-shot > .h-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.h-placeholder-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(11, 20, 55, 0.4);
  text-transform: uppercase;
  z-index: 1;
}

[data-theme="dark"] .h-placeholder-label {
  color: rgba(255, 255, 255, 0.5);
}

/* ── HERO (DHero 295-429) ────────────────────────────────────── */
.h-hero {
  padding: 32px 0 56px;
}

.h-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

/* Left column */
.h-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.h-hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.h-hero h1 {
  margin: 0;
  font-size: 56px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text);
}

.h-hero h1 .accent {
  color: var(--accent);
}

.h-hero-sub {
  margin: 20px 0 28px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 460px;
}

.h-hero-cta-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.h-hero-cta {
  padding: 14px 24px;
  border-radius: 12px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  border: none;
}

.h-hero-cta-secondary {
  padding: 14px 22px;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--h-outline);
  cursor: pointer;
  text-decoration: none;
}

.h-hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 36px;
}

.h-hero-stat-n {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

.h-hero-stat-l {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Right column: explainer banner */
.h-hero-banner {
  position: relative;
  height: 480px;
  border-radius: 22px;
  overflow: hidden;
  padding: 36px;
  background: linear-gradient(135deg, var(--navy) 0%, #1A2A5C 60%, var(--accent) 200%);
  color: #fff;
}

.h-hero-banner-glow {
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.4) 0%, transparent 70%);
  pointer-events: none;
}

.h-hero-banner-stripes {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(255, 255, 255, 0.025) 14px 15px);
  pointer-events: none;
}

.h-hero-banner-card-a {
  position: absolute;
  right: -30px;
  top: 60px;
  width: 140px;
  height: 200px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--navy) 100%);
  transform: rotate(8deg);
  opacity: 0.8;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.h-hero-banner-card-b {
  position: absolute;
  right: 80px;
  top: 130px;
  width: 120px;
  height: 170px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FFD2A8 0%, var(--accent) 100%);
  transform: rotate(-6deg);
  opacity: 0.5;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* Hero подложка-карусель: картинки из админки (banners, show_position=home_hero).
   Лежит под .h-hero-banner-content (z-index:1). Переход — fade, как .h-thumb-fade. */
.h-hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.h-hero-slide {
  position: absolute;
  inset: 0;
  padding: 36px;              /* как у .h-hero-banner — слайд накрывает padding-box */
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;       /* неактивный слайд не перехватывает клики (внутри CTA) */
  transition: opacity 0.6s ease;
}

.h-hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Контент внутри слайда: убираем повторный padding (его даёт .h-hero-slide). */
.h-hero-slide .h-hero-banner-content {
  padding: 0;
}

.h-hero-dots {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 8px;
}

.h-hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.h-hero-dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

.h-hero-banner-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 70%;
}

.h-hero-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.h-hero-banner h2 {
  margin: 0;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.h-hero-banner h2 .accent {
  color: var(--accent);
}

.h-hero-banner-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.h-hero-banner-step {
  display: flex;
  align-items: center;
  gap: 12px;
}

.h-hero-banner-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--accent);
  border: 1.5px solid rgba(255, 107, 53, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.h-hero-banner-step-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.h-hero-banner-cta {
  padding: 12px 22px;
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  border: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  text-decoration: none;
}

/* ── Grids for video carousels & catalog ─────────────────────── */
.h-grid {
  display: grid;
}

.h-grid-5 { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.h-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.h-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ── Horizontal carousel track (used by trending/horizontal/catalog).
   Cards are flex items with fixed-width basis based on visible count
   (5/3/4 per viewport), scrolled by arrows in section head.
   Padding + negative margin: дают пространство hover-теням карточек
   (overflow-x клипит по padding-box, не content-box), при этом
   layout снаружи как раньше — соседние секции не сдвигаются. ───── */
.h-carousel-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 16px 0 8px;
  margin: -16px 0 0;
}

.h-carousel-track::-webkit-scrollbar {
  display: none;
}

/* Default: 5 visible per viewport (trending, catalog). */
.h-carousel-track > * {
  flex: 0 0 calc((100% - 4 * 18px) / 5);
  scroll-snap-align: start;
}

/* Modifier: 3 visible per viewport (used by horizontal section so 16:9
   cards stay full-sized like in the original 3-col grid). Modifier
   targets the slot (track > *), not .h-card-169 — so card-class rules
   stay identical regardless of section. */
.h-carousel-track.h-track-3 > * {
  flex: 0 0 calc((100% - 2 * 18px) / 3);
}

/* Author cards: 6 narrow slots per viewport (avatar 72×72 + handle +
   follow button — much more compact than video cards). Higher
   specificity than the default track > * rule, so it wins. */
.h-carousel-track > .h-author-card {
  flex: 0 0 calc((100% - 5 * 18px) / 6);
  scroll-snap-align: start;
}

/* Catalog: 5 columns × 2 rows grid that scrolls horizontally.
   grid-auto-flow:column fills top-to-bottom in each column, then moves
   right — natural for horizontal paging. carousel.js uses children[0]
   width for scrollBy, which matches grid-auto-columns size. */
.h-carousel-track.h-track-catalog {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: calc((100% - 4 * 18px) / 5);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* padding/margin shadow-clip prevention inherited from base .h-carousel-track */
}

.h-carousel-track.h-track-catalog > * {
  scroll-snap-align: start;
}

/* ── Video cards 9:16 (DVideoCard916 474-517) ────────────────── */
.h-card-916 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}

.h-card-916-thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.h-card-916-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.h-card-916-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.h-card-916-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.h-card-916-author {
  font-size: 12px;
  color: var(--text-muted);
}

.h-card-916-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

/* ── Video cards 16:9 (DVideoCard169 520-563) ────────────────── */
.h-card-169 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
}

.h-card-169-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Превью-фейд: фон проявляется по загрузке (thumb-fade.js) ──
   Разметка кладёт URL в data-thumb (без инлайн background-image).
   Сам блок показывает заглушку-цвет, а реальное превью живёт в ::before
   и плавно проявляется (opacity 0→1) по классу .is-loaded, который
   навешивает thumb-fade.js после onload. Бейджи/♥/просмотры/мета не
   затрагиваются — они позиционированные дети и рисуются поверх ::before.
   Плейсхолдер .h-placeholder (когда превью нет) сюда не попадает. */
.h-thumb-fade {
  background-color: var(--bg-elevated);
}
.h-thumb-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--thumb-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.h-thumb-fade.is-loaded::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .h-thumb-fade::before { transition: none; }
}

.h-card-169-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.h-card-169-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
}

.h-card-169-author {
  font-size: 12px;
  color: var(--text-muted);
}

.h-card-169-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

/* ── Overlay chips on thumbnails (shared by 916 & 169) ───────── */
.h-thumb-ratio {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  font-family: ui-monospace, Menlo, monospace;
  z-index: 1;
}

/* Heart toggle button — sits where the ratio chip used to be (top-right) */
.h-thumb-heart {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.h-thumb-heart:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.08);
}

.h-thumb-heart[data-favorited="1"] {
  color: var(--accent);
}

.h-thumb-heart[data-favorited="1"] svg {
  fill: var(--accent);
}

.h-thumb-views {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  z-index: 1;
}

/* Catalog cards: bottom-left chip shows heart + favorites_count
   instead of views. Same visual style as .h-thumb-views. */
.h-thumb-likes {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  z-index: 1;
}

.h-thumb-dur {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  font-family: ui-monospace, Menlo, monospace;
  z-index: 1;
}

.h-thumb-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  background: var(--accent);
  color: #fff;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  z-index: 1;
}

/* ── Market cards (DMarketCard 566-611) ──────────────────────── */
.h-market {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
}

.h-market-thumb {
  position: relative;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.h-market-ratio {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  font-family: ui-monospace, Menlo, monospace;
  z-index: 1;
}

.h-market-play {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-on-image);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  z-index: 1;
}

.h-market-heart {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-on-image);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  z-index: 1;
}

.h-market-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  background: var(--accent);
  color: #fff;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  z-index: 1;
}

.h-market-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.h-market-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.h-market-author {
  font-size: 12px;
  color: var(--text-muted);
}

.h-market-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.h-market-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.h-market-try {
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
}

/* ── How it works (DHowItWorks 614-649) ──────────────────────── */
.h-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.h-how-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--divider);
}

.h-how-card-num {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 64px;
  font-weight: 800;
  color: var(--text);
  opacity: 0.05;
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: -0.04em;
  pointer-events: none;
}

.h-how-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.h-how-card-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.h-how-card-sub {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Genres (DGenres 652-674) ────────────────────────────────── */
.h-genres-grid {
  display: grid;
  /* auto-fill: показываем ЛЮБОЕ число плиток без обрезки, лишние переносятся вниз.
     ~190px → на контенте ~1320px примерно 6 в ряд, 7+ заполняют новый ряд ровно. */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.h-genre {
  position: relative;
  height: 120px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  cursor: pointer;
}

.h-genre::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, var(--stripe) 10px 11px);
  pointer-events: none;
}

.h-genre-inner {
  position: absolute;
  left: 16px;
  top: 16px;
  color: var(--text);
}

.h-genre-label {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.h-genre-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Плитка с картинкой категории: фон-фото + тёмный градиент для читаемости текста.
   Без картинки остаётся дефолтная полосатая плитка (.h-genre::before). */
.h-genre--img {
  background-size: cover;
  background-position: center;
}
.h-genre--img::before {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.65) 100%);
}
.h-genre--img .h-genre-inner {
  top: auto;
  bottom: 16px;
}
.h-genre--img .h-genre-label { color: #fff; }
.h-genre--img .h-genre-count { color: rgba(255,255,255,0.85); }

/* ── Authors (DAuthors 677-707) ──────────────────────────────── */
.h-authors-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.h-author {
  padding: 20px;
  border-radius: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.h-author-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  padding: 3px;
}

.h-author-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--card-solid);
}

.h-author-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.h-author-followers {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: -4px;
}

.h-author-follow {
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

/* ── Creator CTA (DCreatorCTA 710-749) ───────────────────────── */
.h-creator-banner {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--navy) 0%, #1A2A5C 100%);
  padding: 56px 60px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}

.h-creator-banner-glow {
  position: absolute;
  right: -80px;
  top: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.33) 0%, transparent 70%);
  pointer-events: none;
}

.h-creator-banner-text {
  position: relative;
  z-index: 1;
  color: #fff;
}

.h-creator-banner-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.6;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.h-creator-banner h2 {
  margin: 0;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}

.h-creator-banner-sub {
  margin: 18px 0 28px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  max-width: 500px;
}

.h-creator-banner-ctas {
  display: flex;
  gap: 12px;
  align-items: center;
}

.h-creator-banner-cta {
  padding: 14px 24px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  border: none;
}

.h-creator-banner-cta-secondary {
  padding: 14px 22px;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}

.h-creator-banner-shot {
  position: relative;
  z-index: 1;
  height: 280px;
}

.h-creator-banner-shot .h-placeholder {
  background: linear-gradient(135deg, var(--navy) 0%, #1A2A5C 100%);
  border-radius: 18px;
}

/* Картинка блока «Зарабатывай» из админки (banners, home_earn). Слот 280px, ширина из грида. */
.h-creator-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.h-creator-banner-shot .h-placeholder::before {
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(255, 255, 255, 0.04) 10px 11px);
}

.h-creator-banner-shot .h-placeholder-label {
  color: rgba(255, 255, 255, 0.5);
}

/* ─────────────────────────────────────────────────────────────
   Hover / transition layer (home page)
   Uniform 0.18s ease. Subtle, non-layout-shifting effects:
   color / background / border-color / transform / filter / shadow.
   ───────────────────────────────────────────────────────────── */

/* ── Video cards (trending, horizontal, catalog) ─────────────── */
.h-card-916,
.h-card-169 {
  transition: transform 0.18s ease;
}
.h-card-916:hover,
.h-card-169:hover {
  transform: translateY(-3px);
}

/* Thumb gets both brightness + shadow on card hover.
   Shadow on thumb (not whole card) — thumb has fixed aspect-ratio and
   sits above the meta block, so its shadow stays inside the card box
   and doesn't get clipped by the parent track's overflow-x. */
.h-card-916-thumb,
.h-card-169-thumb {
  transition: filter 0.18s ease, box-shadow 0.18s ease;
}
.h-card-916:hover .h-card-916-thumb,
.h-card-169:hover .h-card-169-thumb {
  filter: brightness(1.05);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* ── Genre tiles ─────────────────────────────────────────────── */
.h-genre {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.h-genre:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* ── Author cards ────────────────────────────────────────────── */
.h-author {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.h-author:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
/* Soft accent glow around the avatar ring on card hover */
.h-author-avatar {
  transition: box-shadow 0.18s ease;
}
.h-author:hover .h-author-avatar {
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Follow / Unfollow pill */
.h-author-follow {
  transition: filter 0.18s ease, background-color 0.18s ease;
  cursor: pointer;
}
.h-author:hover .h-author-follow {
  filter: brightness(1.08);
}

/* ── Section head: "Смотреть все" link ───────────────────────── */
.h-sec-head-link {
  transition: filter 0.18s ease;
}
.h-sec-head-link:hover {
  filter: brightness(1.15);
  text-decoration: underline;
}

/* ── Section head: carousel arrows (extend existing transition) ── */
.h-sec-head-arrows button {
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.h-sec-head-arrows button:hover {
  background: var(--bg-elevated);
  border-color: var(--accent);
}

/* ── Hero CTAs (left column "Открыть каталог" + secondary) ──── */
.h-hero-cta {
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.h-hero-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.h-hero-cta-secondary {
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.h-hero-cta-secondary:hover {
  background: var(--bg-elevated);
  border-color: var(--accent);
}

/* ── Hero banner CTA (white pill inside the dark banner) ─────── */
.h-hero-banner-cta {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.h-hero-banner-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

/* ── Creator banner CTAs ─────────────────────────────────────── */
.h-creator-banner-cta {
  transition: transform 0.18s ease, filter 0.18s ease;
}
.h-creator-banner-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.h-creator-banner-cta-secondary {
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.h-creator-banner-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
}

/* ─────────────────────────────────────────────────────────────
   Mobile-only blocks (m-hero, m-chips) — hidden on desktop, shown
   in the @media (max-width: 767px) section below.
   ───────────────────────────────────────────────────────────── */
.m-hero { display: none; }
.m-chips { display: none; }

/* ═════════ COMPACT ≤1023px (mobile + tablet) ══════════════════
   Translation of data/_disign/hybrid.jsx for all home sections.
   Mobile blocks (m-hero/m-chips) shown here, desktop h-hero hidden.
   Tablet-specific overrides live in the TABLET block at the end
   of this file (positioned after this block so it wins on tablet). */
/* Узкий десктоп 1024–1200: те же боковые поля, что у шапки и страниц
   каталога/видео (24px), чтобы ширина контента совпадала. */
@media (max-width: 1200px) and (min-width: 1024px) {
  .h-container { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 1023px) {

  /* ── Mobile HERO (HHero from hybrid.jsx 322-396) ───────────
     Replaces the desktop h-hero entirely on mobile. */
  .h-hero { display: none; }
  .m-hero {
    display: block;
    padding: 0 20px 28px;
  }
  .m-hero-banner {
    position: relative;
    padding: 32px 18px 28px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #0B1437 0%, #1A2A5C 100%);
  }
  .m-hero-banner-glow {
    position: absolute; right: -80px; bottom: -80px;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.4) 0%, transparent 70%);
    pointer-events: none;
  }
  .m-hero-banner-stripes {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(45deg, transparent 0 12px, rgba(255, 255, 255, 0.025) 12px 13px);
    pointer-events: none;
  }
  .m-hero-float-a {
    position: absolute; right: -10px; top: -10px; width: 80px; height: 110px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.55) 0%, #0B1437 100%);
    opacity: 0.7;
    transform: rotate(8deg);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
    pointer-events: none;
  }
  .m-hero-float-b {
    position: absolute; right: 30px; top: 28px; width: 70px; height: 96px;
    border-radius: 10px;
    background: linear-gradient(135deg, #FFD2A8 0%, #FF6B35 100%);
    opacity: 0.5;
    transform: rotate(-6deg);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    pointer-events: none;
  }
  .m-hero-content {
    position: relative;
    z-index: 1;
    color: #fff;
    max-width: 70%;
  }
  .m-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  .m-hero-badge-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
  }
  .m-hero-title {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
  }
  .m-hero-title-accent {
    color: var(--accent);
  }
  .m-hero-sub {
    margin: 0 0 20px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.45;
    max-width: 280px;
  }
  .m-hero-cta-row {
    display: flex;
    gap: 8px;
  }
  .m-hero-cta-primary {
    padding: 11px 16px;
    border-radius: 11px;
    background: #fff;
    color: #0B1437;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
  }
  .m-hero-cta-secondary {
    padding: 11px 14px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-decoration: none;
  }

  /* ── Hero-карусель на мобильном (banners home_hero): тот же {картинка + 9 текстов} ──
     Слайды — grid-стопкой в одной ячейке (высота = по самому высокому), fade по opacity.
     Картинка-фон на самом слайде (cover, центр); padding даёт слайд, не .m-hero-banner. */
  .m-hero-banner--carousel { padding: 0; }
  .m-hero-slides { display: grid; aspect-ratio: 4 / 3; }
  .m-hero-slide {
    grid-area: 1 / 1;
    padding: 32px 18px 28px;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
  }
  .m-hero-slide.is-active { opacity: 1; pointer-events: auto; }
  .m-hero-slide .m-hero-content { max-width: 85%; }

  /* 3 шага в стиле .m-hero-content (заменяют прежние 2 кнопки) */
  .m-hero-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 18px;
  }
  .m-hero-step { display: flex; align-items: center; gap: 10px; }
  .m-hero-step-num {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #fff;
  }
  .m-hero-step-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
  }

  .m-hero-dots {
    position: absolute;
    z-index: 2;
    right: 16px; bottom: 14px;
    display: flex; gap: 7px;
  }
  .m-hero-dot {
    width: 7px; height: 7px;
    padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .m-hero-dot.is-active { background: #fff; transform: scale(1.25); }

  /* ── Mobile chips (HChips from hybrid.jsx 301-319) ─────────
     Horizontal scroll, finger-swipe, scroll-snap not used. */
  .m-chips {
    display: flex;
    gap: 8px;
    padding: 0 20px 18px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .m-chips::-webkit-scrollbar { display: none; }
  .m-chip {
    flex-shrink: 0;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--chip-border);
    text-decoration: none;
  }
  [data-theme="dark"] .m-chip {
    color: rgba(255, 255, 255, 0.7);
  }
  .m-chip.m-chip-active {
    background: var(--chip-active-bg);
    color: var(--chip-active-fg);
    border: none;
  }
  .m-chip-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
  }

  /* Container side-padding 20 instead of 60 */
  .h-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Section bottom-spacing tighter */
  .h-section {
    padding-bottom: 32px;
  }

  /* ── HERO ────────────────────────────────────────────────── */
  .h-hero {
    padding: 16px 0 24px;
  }
  .h-hero-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .h-hero-banner { display: none; }

  .h-hero-badge {
    font-size: 9px;
    padding: 4px 10px;
    margin-bottom: 12px;
  }
  .h-hero h1 {
    font-size: 24px;
    line-height: 1.1;
  }
  .h-hero-sub {
    font-size: 12px;
    line-height: 1.45;
    margin: 12px 0 16px;
    max-width: 280px;
  }
  .h-hero-cta-row { gap: 8px; }
  .h-hero-cta {
    padding: 11px 16px;
    font-size: 13px;
    border-radius: 11px;
  }
  .h-hero-cta-secondary {
    padding: 11px 14px;
    font-size: 13px;
    border-radius: 11px;
  }
  .h-hero-stats {
    margin-top: 24px;
    gap: 24px;
  }
  .h-hero-stat-n { font-size: 18px; }
  .h-hero-stat-l { font-size: 9px; }

  /* ── SECTION HEAD ────────────────────────────────────────── */
  .h-sec-head {
    margin-bottom: 12px;
  }
  .h-sec-head h2 { font-size: 17px; }
  .h-sec-head-badge { font-size: 10px; }
  .h-sec-head-sub { font-size: 12px; }
  .h-sec-head-link { font-size: 12px; }
  /* Carousel arrows: no use on mobile — swipe with finger */
  .h-sec-head-arrows { display: none; }

  /* ── CAROUSEL TRACKS — finger-swipe, 20px gutters, gap 12.
     No negative margin on mobile: hover shadow disabled for touch,
     so we don't need bleed past container — and bleed was clipping
     cards visually past the left edge. */
  .h-carousel-track {
    gap: 12px;
    padding: 0;
    margin: 0;
  }

  /* Video card 9:16 — fixed 158px wide (HVideoCard916, hybrid.jsx) */
  .h-carousel-track > .h-card-916 {
    flex: 0 0 158px;
  }
  /* Video card 16:9 — fixed 280px wide (HVideoCard169, hybrid.jsx) */
  .h-carousel-track > .h-card-169 {
    flex: 0 0 280px;
  }
  /* Authors — 80px slot (+25% vs hybrid.jsx baseline 64px) */
  .h-carousel-track > .h-author-card {
    flex: 0 0 80px;
  }

  /* Catalog (.h-track-catalog): disable grid 5×2, fall back to a
     horizontal flex strip like trending/horizontal. Card widths
     differ per orientation — set above for h-card-916 / h-card-169. */
  .h-carousel-track.h-track-catalog {
    display: flex;
    grid-auto-flow: unset;
    grid-template-rows: unset;
    grid-auto-columns: unset;
    gap: 12px;
  }

  /* Card text sizes — uniform author/price 14px weight 600 */
  .h-card-916-title { font-size: 15px; }
  .h-card-916-author { font-size: 14px; font-weight: 600; }
  .h-card-916-price { font-size: 14px; font-weight: 600; }
  .h-card-169-title { font-size: 15px; }
  .h-card-169-author { font-size: 14px; font-weight: 600; }
  .h-card-169-price { font-size: 14px; font-weight: 600; }

  /* Thumb overlay chips — bigger for readability on small screens */
  .h-thumb-views { font-size: 12px; }
  .h-thumb-dur { font-size: 12px; }
  .h-thumb-badge { font-size: 11px; }

  /* ── HOW IT WORKS — 3 rows instead of 3 cols; equal heights via
     grid-auto-rows so the 3 cards line up even if one has shorter text. */
  .h-how-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 10px;
  }
  .h-how-card {
    padding: 14px 16px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 80px;
  }
  .h-how-card-num {
    position: static;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    opacity: 1;
    font-family: ui-monospace, Menlo, monospace;
    order: 3; /* push to right */
  }
  .h-how-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    margin-bottom: 0;
    flex-shrink: 0;
    order: 1;
  }
  .h-how-card-icon svg { width: 22px; height: 22px; }
  .h-how-card-title {
    font-size: 14px;
    margin-bottom: 2px;
  }
  .h-how-card-sub {
    font-size: 12px;
    line-height: 1.4;
  }
  /* Wrap title+sub so they sit between icon (order:1) and num (order:3) */
  .h-how-card-title,
  .h-how-card-sub { order: 2; flex: 1; }

  /* ── GENRES — 2 columns × N rows, 84px tall ─────────────── */
  .h-genres-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .h-genre {
    height: 84px;
  }
  .h-genre-label { font-size: 17px; }
  .h-genre-count { font-size: 13px; }

  /* ── AUTHORS — compact tile in carousel, +25% from baseline ─ */
  .h-author {
    padding: 0;
    background: transparent;
    border: none;
    gap: 6px;
  }
  .h-author-avatar {
    width: 70px;
    height: 70px;
    padding: 2px;
  }
  .h-author-name {
    font-size: 14px;
    text-align: center;
    line-height: 1.1;
  }
  .h-author-followers {
    font-size: 12px;
    margin-top: -4px;
  }
  /* Follow pill on mobile — round 32×32 icon-only.
     HTML keeps text "+ Подписаться" / "✓ Подписан" for desktop —
     mobile hides it via font-size:0 and renders + or ✓ via ::before.
     Differentiation is via data-followed attribute on the element. */
  .h-author-follow {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    margin-top: 0;
  }
  .h-author-follow::before {
    content: '+';
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: inherit;
  }
  .h-author-follow[data-followed="1"] {
    background: var(--accent);
    color: #fff;
  }
  .h-author-follow[data-followed="1"]::before {
    content: '✓';
    font-size: 14px;
  }

  /* ── CREATOR CTA — single column, taller ─────────────────── */
  .h-creator-banner {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    border-radius: 18px;
    gap: 16px;
  }
  .h-creator-banner h2 {
    font-size: 20px;
    line-height: 1.15;
    margin-bottom: 10px;
  }
  .h-creator-banner-sub {
    font-size: 12px;
    margin: 0 0 18px;
    max-width: 85%;
  }
  .h-creator-banner-tag {
    font-size: 10px;
    margin-bottom: 10px;
  }
  .h-creator-banner-cta {
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 999px;
  }
  /* Hide secondary CTA on mobile — only primary kept */
  .h-creator-banner-cta-secondary { display: none; }
  /* Hide right-column "screenshot" placeholder on mobile */
  .h-creator-banner-shot { display: none; }
  .h-creator-banner-glow {
    width: 160px;
    height: 160px;
    right: -40px;
    top: -40px;
  }

  /* Carousel: hover effects disabled on touch — keep transitions
     but remove translateY (sticky-finger artifact). */
  .h-card-916:hover,
  .h-card-169:hover,
  .h-genre:hover,
  .h-author:hover {
    transform: none;
  }
}

/* ═════════ TABLET 768-1023px ══════════════════════════════════
   Overrides on top of the ≤1023 base. Mobile chrome (m-hero,
   m-tabbar, m-search, m-chips, m-menu) still active here — only
   content sizes and a few m-* paddings need bigger tablet values.
   This block sits AFTER the ≤1023 block so it wins at 768-1023.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Container side-padding 24 (vs mobile 20) */
  .h-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ── m-hero: more breathing room on bigger banner ────────── */
  .m-hero-banner {
    padding: 40px 32px;
  }
  .m-hero-content {
    max-width: 60%;
  }
  .m-hero-title {
    font-size: 32px;
  }
  .m-hero-sub {
    font-size: 14px;
    max-width: 400px;
  }
  .m-hero-float-a {
    width: 110px;
    height: 150px;
  }
  .m-hero-float-b {
    width: 95px;
    height: 130px;
  }

  /* ── m-search / m-chips: wider side gutters ──────────────── */
  .m-search {
    margin: 8px 32px 16px;
  }
  .m-chips {
    padding: 0 32px 18px;
  }

  /* ── Carousels — fewer cards visible per viewport.
     Selectors match mobile-base specificity (class+class > class+*)
     to override mobile's fixed-pixel widths. */
  .h-carousel-track > .h-card-916,
  .h-carousel-track > .h-card-169 {
    flex: 0 0 calc((100% - 3 * 18px) / 4);
  }
  /* Horizontal section: 2 visible */
  .h-carousel-track.h-track-3 > .h-card-169 {
    flex: 0 0 calc((100% - 1 * 18px) / 2);
  }
  /* Authors: 5 narrow slots */
  .h-carousel-track > .h-author-card {
    flex: 0 0 calc((100% - 4 * 18px) / 5);
  }
  /* Catalog: restore grid 4 columns × 2 rows (mobile turned it into flex). */
  .h-carousel-track.h-track-catalog {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: 1fr 1fr;
    grid-auto-columns: calc((100% - 3 * 18px) / 4);
    gap: 18px;
  }

  /* ── Content font sizes — slightly smaller than mobile ──── */
  .h-card-916-title,
  .h-card-169-title {
    font-size: 14px;
  }
  .h-card-916-author,
  .h-card-169-author,
  .h-card-916-price,
  .h-card-169-price {
    font-size: 13px;
  }
  .h-thumb-views,
  .h-thumb-dur {
    font-size: 11px;
  }
  .h-genre-label {
    font-size: 16px;
  }
  .h-genre-count {
    font-size: 12px;
  }
  .h-author-name {
    font-size: 13px;
  }
  .h-author-followers {
    font-size: 11px;
  }

  /* ── Genres: auto-fill (≈3 в ряд на планшете), любое число без обрезки ── */
  .h-genres-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* ── Утилиты для адаптивного текста (десктоп/мобайл) ─────────────
   Используются, напр., в сабтайтле «Топ-авторы»: на мобиле длинная
   фраза переносилась на 2 строки и ломала вёрстку — показываем
   короткую версию. */
.desktop-only { display: inline; }
.mobile-only  { display: none; }
@media (max-width: 1023px) {
  .desktop-only { display: none; }
  .mobile-only  { display: inline; }
}