/* Nejlepší grafická karta / procesor do X Kč - základ z graphic-category.css (--gc-*) a budget-build.css (bb-*) */

.bu-sum-top { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 28px; align-items: start; }
.bu-sum-params { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.bu-sum-params li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--gc-line); }
.bu-sum-params li:last-child { border-bottom: 0; }
.bu-sum-params span { color: var(--gc-muted); white-space: nowrap; }
.bu-sum-params b { color: var(--gc-ink); text-align: right; }
.bu-sum-img { height: 130px; display: grid; place-items: center; position: relative; overflow: hidden; background: #fff; border: 1px solid var(--gc-line); border-radius: 12px; color: #b7c4cc; }
.bu-sum-img img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; }
.bu-sum-img .gc-i { width: 48px; height: 48px; stroke-width: 1.2; }


/* Tabulka všech do rozpočtu */
.bu-table { background: #fff; border: 1px solid var(--gc-line); border-radius: 16px; overflow: hidden; }
.bu-tr { display: grid; grid-template-columns: 40px minmax(0, 2.2fr) minmax(0, 1.3fr) 110px 110px 150px; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--gc-line); font-size: 14.5px; }
.bu-th { border-top: 0; background: var(--gc-bg); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gc-muted); padding-top: 10px; padding-bottom: 10px; }
.bu-tr.is-win { background: var(--gc-orange-50); }
.bu-rk { font-weight: 800; color: var(--gc-muted); }
.bu-nm { min-width: 0; }
.bu-nm a { display: block; font-weight: 700; color: var(--gc-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bu-nm a:hover { color: var(--gc-orange); }
.bu-nm small { display: block; font-size: 12.5px; color: var(--gc-muted); }
.bu-idx { display: flex; align-items: center; gap: 10px; }
.bu-idx .gc-tr { flex: 1; }
.bu-idx b { min-width: 24px; text-align: right; }
.bu-r { text-align: right; }
.bu-price { font-weight: 800; white-space: nowrap; }
.bu-val { font-weight: 700; color: var(--gc-ink-2); }
.gc-s a.bu-cmp { font-size: 13px; font-weight: 600; color: var(--gc-orange); text-decoration: none; white-space: nowrap; }
.gc-s a.bu-cmp:hover { color: var(--gc-orange-600); }

@media (max-width: 420px) {
    .bu-sum-top { grid-template-columns: minmax(0, 1fr) 96px; gap: 18px; }
    .bu-sum-img { height: 96px; }
}
@media (max-width: 860px) {
    .bu-th { display: none; }
    .bu-tr { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "rk nm price" "rk idx val" "rk cmp cmp"; row-gap: 6px; }
    .bu-rk { grid-area: rk; align-self: start; }
    .bu-nm { grid-area: nm; }
    .bu-idx { grid-area: idx; }
    .bu-price { grid-area: price; }
    .bu-val { grid-area: val; }
    .bu-tr > .bu-r:last-child { grid-area: cmp; text-align: left; }
    .bu-nm a { white-space: normal; }
}

/* Parametry vítěze */
.bu-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bu-spec { padding: 20px 24px; }
.bu-spec + .bu-spec { border-left: 1px solid var(--gc-line); }
.bu-spec h3 { font-family: inherit; font-size: 16px; font-weight: 800; margin: 0 0 8px; color: var(--gc-ink); }
.bu-spec dl { margin: 0; }
.bu-spec dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--gc-line); font-size: 14px; }
.bu-spec dl div:first-child { border-top: 0; }
.bu-spec dt { color: var(--gc-muted); font-weight: 500; }
.bu-spec dd { margin: 0; font-weight: 700; color: var(--gc-ink); text-align: right; }
@media (max-width: 860px) {
    .bu-specs { grid-template-columns: minmax(0, 1fr); }
    .bu-spec + .bu-spec { border-left: 0; border-top: 1px solid var(--gc-line); }
}