/* ============================================================
   AMD-AVTO.CSS — styles for /avto/ listing page
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */
.amd-avto-page { width: 100%; box-sizing: border-box; font-family: Tahoma,Arial,sans-serif; }

.amd-avto-head-plashka {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; min-height: 40px;
  background: rgba(255,255,255,0.10); box-sizing: border-box;
}
.amd-avto-plashka-icon { font-size: 16px; flex-shrink: 0; }
.amd-avto-plashka-h1 {
  margin: 0; padding: 0; border: 0;
  font-size: 14px; font-weight: bold; color: #d8d8d8;
  flex: 1; line-height: 1.2;
}
.amd-avto-plashka-count {
  font-size: 12px; color: rgba(255,255,255,0.50);
  font-weight: normal; white-space: nowrap;
}
.amd-avto-main {
  width: 100%; padding: 10px;
  box-sizing: border-box; background: rgba(255,255,255,0.40);
}

/* ── Brand grid ───────────────────────────────────────────── */
.amd-brand-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
}

.amd-brand-card {
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: 4px;
  min-height: 118px; padding: 10px 8px 0;
  border-radius: 10px; text-decoration: none;
  background: rgba(255,255,255,0.40);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
  box-sizing: border-box; overflow: hidden;
}
.amd-brand-card:hover {
  background: rgba(255,255,255,0.88);
  box-shadow: 0 3px 14px rgba(0,0,0,0.10);
  transform: translateY(-3px);
  text-decoration: none; color: inherit;
}
.amd-brand-card img {
  display: block; max-width: 100%; width: auto; height: auto;
  max-height: 62px; object-fit: contain;
}
.amd-brand-nopic {
  display: flex; align-items: center; justify-content: center;
  height: 62px; width: 62px; font-size: 16px;
  color: rgba(0,0,0,0.28); flex-shrink: 0;
}
.amd-brand-name {
  display: block; font-family: Tahoma,Arial,sans-serif;
  font-size: 13px; color: #1a1a2e; text-align: center;
  line-height: 1.35; word-break: break-word;
  padding-bottom: 8px;
}
.amd-brand-card:hover .amd-brand-name { text-decoration: underline; }

/* ── Count badge — bottom strip ──────────────────────────── */
.amd-brand-count-badge {
  display: block;
  width: calc(100% + 16px); margin: 0 -8px;
  padding: 5px 0; text-align: center;
  font-family: Tahoma,Arial,sans-serif; font-size: 14px; font-weight: bold;
  color: rgba(0,0,0,0.52); background: rgba(0,0,0,0.08);
  border-top: 1px solid rgba(0,0,0,0.10);
}
.amd-brand-card:hover .amd-brand-count-badge {
  background: rgba(0,0,0,0.12); color: rgba(0,0,0,0.70);
}

/* ── Avto ads section ─────────────────────────────────────── */
#amd-avtoads-section { width: 100%; background-color: transparent; box-sizing: border-box; }
#amd-avtoads-inner {
  width: 1440px; max-width: 100%; margin: 0 auto;
  box-sizing: border-box; background-color: rgba(255,255,255,0.06);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .amd-brand-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
@media (max-width: 480px) {
  .amd-brand-grid { gap: 5px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .amd-brand-card { min-height: 90px; padding: 8px 4px 0; }
  .amd-brand-card img { max-height: 50px; max-width: 80px; }
  .amd-brand-nopic { height: 50px; }
  .amd-brand-name { font-size: 11px; }
  .amd-brand-count-badge { font-size: 12px; }
}