/* ===== WRAP ===== */
.extra-container {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* ===== LEFT BLOCK (cards) ===== */
.extra-left {
  flex: 0 0 420px;
  display: flex;
  flex-direction: column;
}

/* список карточек строго колонкой */
.analog-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ===== CARD ===== */
.analog-card {
  width: 100%;
}

/* LINK */
.analog-link {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg,#0b1626,#13233a);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* IMAGE */
.analog-image {
  height: 130px;
  background: #0b1626;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.analog-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* BODY */
.analog-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* TITLE */
.analog-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ===== SPECS ===== */
.analog-specs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.spec-label {
  color: #7f93a8;
}

.spec-value {
  color: #fff;
  font-weight: 600;
}

/* ===== ACTIONS (ВАЖНО: В ОДНУ ЛИНИЮ) ===== */
.analog-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  gap: 10px;
}

/* BUTTON "СМОТРЕТЬ" */
.analog-btn {
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(135deg,#1f3b5c,#13233a);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  display: inline-block;
  white-space: nowrap;
}

/* BUTTON "ЧЕРТЁЖ" (ВНУТРИ КАРТОЧКИ, НЕ ABSOLUTE) */
.analog-drawing-btn {
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;

  cursor: pointer;
  white-space: nowrap;
}

/* hover */
.analog-drawing-btn:hover {
  background: rgba(0,115,198,0.25);
}

/* ===== RIGHT BLOCK (drawing) ===== */
.extra-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* чертёж фиксируется сверху и НЕ зависит от карточек */
.drawing-box {
  position: sticky;
  top: 20px;

  background: #0b1626;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;

  padding: 20px;
  min-height: 420px;

  display: flex;
  align-items: center;
  justify-content: center;
}

#analogDrawing {
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
}

/* инфо под чертежом */
.drawing-info {
  margin-top: 14px;
  color: #cfd8e3;
}

/* ===== CTA ===== */
.extra-cta {
  margin-top: 25px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 20px;
  border-radius: 14px;

  background: linear-gradient(135deg,#0b1626,#13233a);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}

/* ===== RESPONSIVE ===== */
@media(max-width: 900px) {
  .extra-container {
    flex-direction: column;
  }

  .extra-left {
    flex: 1;
  }

  .drawing-box {
    position: relative;
    top: auto;
    min-height: 300px;
  }

  .extra-cta {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .analog-actions {
    flex-direction: row;
  }
}