/* ═══════════════════════════════════════
   CATEGORIES — BENTO GRID
   ═══════════════════════════════════════ */
.categories-section { padding: 48px 0 0; }

.categories-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

/* Each bento row */
.cat-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* Base card */
.cat-card {
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  height: 220px;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: flex-start;
  padding: 22px;
  flex-shrink: 1;
}

.cat-card:hover  { transform: scale(1.02); filter: brightness(1.08); }
.cat-card:active { transform: scale(0.97); filter: brightness(0.9); }

.cat-card-name {
  font-family: 'Unbounded', 'Russo One', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  position: relative;
  z-index: 2;
  max-width: 140px;
}

.cat-card-name.dark { color: #1a1a2e; }

/* ── Row 1 widths (from Figma: flex-1, 210, 348, 173) ── */
.cat-row:first-child .cat-prodazha  { flex: 1 1 0;     min-width: 120px; }
.cat-row:first-child .cat-transport { flex: 0 1 210px; min-width: 100px; }
.cat-row:first-child .cat-hobby     { flex: 0 1 348px; min-width: 120px; }
.cat-row:first-child .cat-handmade  { flex: 0 1 173px; min-width: 100px; }

/* ── Row 2 widths (from Figma: 410, 211, flex-1, 173) ── */
.cat-row:last-child .cat-digital   { flex: 0 1 410px; min-width: 130px; }
.cat-row:last-child .cat-uslugi    { flex: 0 1 211px; min-width: 100px; }
.cat-row:last-child .cat-rabota    { flex: 1 1 0;     min-width: 120px; }
.cat-row:last-child .cat-obuchenie { flex: 0 1 173px; min-width: 100px; }

/* ── Colors ── */
.cat-prodazha  { background: linear-gradient(135deg, #8b5df6 0%, #a185e4 100%); }
.cat-transport { background: linear-gradient(135deg, #fee06d 0%, #ffeb9e 100%); }
.cat-hobby     { background: linear-gradient(90deg,  #4196e8 0%, #5a9fe1 100%); }
.cat-handmade  { background: linear-gradient(135deg, #1aaa76 0%, #2ce4a2 100%); }
.cat-digital   { background: linear-gradient(135deg, #fee06d 0%, #ffeb9e 100%); }
.cat-uslugi    { background: linear-gradient(135deg, #1aaa76 0%, #2ce4a2 100%); }
.cat-rabota    { background: linear-gradient(135deg, #8b5df6 0%, #a185e4 100%); }
.cat-obuchenie { background: linear-gradient(135deg, #5524bd 0%, #381b76 100%); }

/* ── Card images — exported at exact card size from Figma ── */
.cat-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.cat-card-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .cat-card { height: 180px; }
  .cat-card-name { font-size: 16px; }
}

@media (max-width: 768px) {
  .cat-row {
    flex-wrap: wrap;
  }
  .cat-row .cat-card,
  .cat-row:first-child .cat-prodazha,
  .cat-row:first-child .cat-transport,
  .cat-row:first-child .cat-hobby,
  .cat-row:first-child .cat-handmade,
  .cat-row:last-child .cat-digital,
  .cat-row:last-child .cat-uslugi,
  .cat-row:last-child .cat-rabota,
  .cat-row:last-child .cat-obuchenie {
    flex: 1 1 calc(50% - 8px);
    min-width: calc(50% - 8px);
    height: 160px;
  }
}

@media (max-width: 510px) {
  .categories-section { padding: 28px 0 0; }

  /* ── Bento: 10-column grid, dissolve row wrappers ── */
  .categories-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
    margin-top: 16px;
  }

  .cat-row { display: contents; }

  /* Reset all flex-based sizing */
  .cat-card {
    flex: unset !important; min-width: unset !important;
    height: 220px !important;
    border-radius: 22px;
    padding: 16px 14px;
  }

  /* ── Row 1: 50 / 50 ── */
  .cat-prodazha  { order: 1; grid-column: 1 / 6;  }
  .cat-transport { order: 2; grid-column: 6 / 11; }

  /* ── Row 2: Хобби и спорт full width ── */
  .cat-hobby { order: 3; grid-column: 1 / 11; height: 151px !important; }

  /* ── Row 3: Обучение 60% | Хэнд-мэйд 40% ── */
  .cat-obuchenie { order: 4; grid-column: 1 / 7;  height: 178px !important; }
  .cat-handmade  { order: 5; grid-column: 7 / 11; height: 178px !important; }

  /* ── Row 4: Услуги 40% | Цифровые 60% ── */
  .cat-uslugi  { order: 6; grid-column: 1 / 5;  height: 178px !important; }
  .cat-digital { order: 7; grid-column: 5 / 11; height: 178px !important; }

  /* ── Row 5: Работа full width ── */
  .cat-rabota { order: 8; grid-column: 1 / 11; height: 151px !important; }

  .cat-card-name { font-size: 20px; font-weight: 700; max-width: none; }
}


@media (max-width: 510px) {
  .categories-section { padding: 28px 0 0; }

  /* ── Bento: 10-column grid, dissolve row wrappers ── */
  .categories-grid2 {
    /*display: grid;*/
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
    margin-top: 16px;
  }

  .cat-row { display: contents; }

  /* Reset all flex-based sizing */
  .cat-card {
    flex: unset !important; min-width: unset !important;
    height: 220px !important;
    border-radius: 22px;
    padding: 16px 14px;
  }

  /* ── Row 1: 50 / 50 ── */
  .cat-prodazha  { order: 1; grid-column: 1 / 6;  }
  .cat-transport { order: 2; grid-column: 6 / 11; }

  /* ── Row 2: Хобби и спорт full width ── */
  .cat-hobby { order: 3; grid-column: 1 / 11; height: 151px !important; }

  /* ── Row 3: Обучение 60% | Хэнд-мэйд 40% ── */
  .cat-obuchenie { order: 4; grid-column: 1 / 7;  height: 178px !important; }
  .cat-handmade  { order: 5; grid-column: 7 / 11; height: 178px !important; }

  /* ── Row 4: Услуги 40% | Цифровые 60% ── */
  .cat-uslugi  { order: 6; grid-column: 1 / 5;  height: 178px !important; }
  .cat-digital { order: 7; grid-column: 5 / 11; height: 178px !important; }

  /* ── Row 5: Работа full width ── */
  .cat-rabota { order: 8; grid-column: 1 / 11; height: 151px !important; }

  .cat-card-name { font-size: 20px; font-weight: 700; max-width: none; }
}