/*
 * Stránka /porovnani-grafickych-karet (komponenta graphicCategory + hero v šabloně stránky).
 * Barvy navazují na proměnné z themes/slagcz/assets/css/layout.css (--sn-*).
 */
.gc-hero, .gc-s {
    --gc-ink: var(--sn-ink, #1c2429);
    --gc-ink-2: #3d4a52;
    --gc-muted: var(--sn-muted, #6b7a84);
    --gc-line: var(--sn-line, #e3e8ec);
    --gc-tint: var(--sn-tint, #e8eff3);
    --gc-navy: var(--sn-bar, #1f3f50);
    --gc-navy-deep: var(--sn-bar-deep, #15303e);
    --gc-orange: var(--sn-orange, #e46305);
    --gc-orange-600: var(--sn-orange-600, #c95604);
    --gc-orange-50: var(--sn-orange-50, #fff3ea);
    --gc-bg: #f4f6f8;
    --gc-good: #1f8a4c;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--gc-ink);
}
:where(.gc-hero, .gc-s, .gc-cbar) * { box-sizing: border-box; }
:where(.gc-hero, .gc-s) :where(h1, h2, h3, p, ul, ol) { margin: 0; }
:where(.gc-hero, .gc-s) :where(ul, ol) { list-style: none; padding: 0; }
:where(.gc-hero, .gc-s, .gc-cbar) a, :where(.gc-hero, .gc-s, .gc-cbar) a:hover, :where(.gc-hero, .gc-s, .gc-cbar) a:focus { text-decoration: none; color: inherit; }
.gc-hero [hidden], .gc-s [hidden] { display: none !important; }
.gc-i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.gc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 20px; border: 0; border-radius: 99px; cursor: pointer;
    background: var(--gc-orange); color: #fff; font: inherit; font-weight: 600; white-space: nowrap;
    box-shadow: 0 6px 16px rgba(228, 99, 5, .28); transition: background .15s;
}
a.gc-btn, a.gc-btn:hover, a.gc-btn:focus { color: #fff; }
.gc-btn:hover { background: var(--gc-orange-600); }
.gc-btn-line, a.gc-btn-line, a.gc-btn-line:hover, a.gc-btn-line:focus { background: #fff; color: var(--gc-ink); border: 1px solid var(--gc-line); box-shadow: none; }
.gc-btn-line:hover { border-color: #c5ced5; background: #fafbfc; }

/* výrobce barevně před názvem karty - odstíny ztmavené proti firemním, ať je text čitelný na bílé */
.gc-bw { font-weight: 800; }
.gc-b-NVIDIA { color: #5f9900; }
.gc-b-AMD { color: #c8102e; }
.gc-b-Intel { color: #0068b5; }
.gc-f.is-on .gc-bw { color: #fff; }
.gc-vram { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--gc-navy); background: var(--gc-tint); border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }

.gc-tabs { display: inline-flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--gc-bg); border-radius: 12px; padding: 4px; }
.gc-tabs button { flex: none; border: 0; background: none; border-radius: 9px; padding: 9px 14px; font: inherit; font-weight: 700; font-size: 14px; color: var(--gc-ink-2); white-space: nowrap; cursor: pointer; }
.gc-tabs button.is-on { background: #fff; color: var(--gc-navy); box-shadow: 0 2px 8px rgba(21, 48, 62, .12); }

/* =========================================================
   HERO (šablona stránky)
   ========================================================= */
.gc-hero { background: var(--gc-bg); border-bottom: 1px solid var(--gc-line); padding: 26px 0 46px; }
.gc-crumb { font-size: 13px; color: var(--gc-muted); margin-bottom: 22px; }
.gc-crumb a:hover { color: var(--gc-orange); }
.gc-hero-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.gc-hero h1 { font-family: inherit; font-size: 44px; font-weight: 800; letter-spacing: -.5px; line-height: 1.08; margin-bottom: 12px; text-align: left; color: var(--gc-ink); }
.gc-hero h1 em { display: block; font-style: normal; color: var(--gc-orange); }
.gc-lead { font-size: 17px; line-height: 1.55; color: var(--gc-ink-2); max-width: 560px; margin-bottom: 22px !important; }
.gc-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px !important; font-size: 13.5px; color: var(--gc-ink-2); }
.gc-stats li { display: inline-flex; align-items: center; gap: 6px; }
.gc-stats .gc-i { width: 16px; height: 16px; color: var(--gc-good); }

.gc-picks { display: flex; flex-direction: column; gap: 10px; }
.gc-picks h3 { font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-muted); }
.gc-pick { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--gc-line); border-radius: 14px; padding: 12px 14px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.gc-pick:hover { border-color: var(--gc-navy); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(21, 48, 62, .08); }
.gc-pick-ic { width: 44px; height: 44px; border-radius: 11px; background: var(--gc-tint); color: var(--gc-navy); display: grid; place-items: center; flex: none; }
.gc-pick-ic .gc-i { width: 22px; height: 22px; }
.gc-pick-t { min-width: 0; }
.gc-pick-t small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gc-muted); }
.gc-pick-t b { display: block; font-size: 15.5px; }
.gc-pick-p { margin-left: auto; text-align: right; font-weight: 800; white-space: nowrap; }
.gc-pick-p small { display: block; font-size: 12px; font-weight: 500; color: var(--gc-muted); }

@media (max-width: 991px) {
    .gc-hero-in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 600px) {
    .gc-hero { padding: 18px 0 34px; }
    .gc-crumb { margin-bottom: 16px; }
    .gc-hero h1 { font-size: clamp(26px, 7.8vw, 34px); line-height: 1.12; }
    .gc-lead { font-size: 15.5px; margin-bottom: 18px !important; }
    .gc-stats { flex-direction: column; }
    .gc-pick { padding: 10px 12px; }
    .gc-pick-ic { width: 38px; height: 38px; }
    .gc-pick-t small { font-size: 11px; }
}

/* =========================================================
   Sekce - společné
   ========================================================= */
.gc-s { padding: 60px 0; background: #fff; }
.gc-s.gc-grey { background: var(--gc-bg); border-top: 1px solid var(--gc-line); border-bottom: 1px solid var(--gc-line); }
.gc-s.gc-s-tight { padding-top: 0; }
.gc-grey .gc-tabs { background: #fff; border: 1px solid var(--gc-line); }
.gc-sh { margin-bottom: 22px; max-width: 720px; }
.gc-k { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gc-orange); }
.gc-sh h2 { font-family: inherit; font-size: 30px; font-weight: 800; letter-spacing: -.3px; line-height: 1.15; margin: 6px 0; text-align: left; color: var(--gc-ink); }
.gc-sh p { color: var(--gc-muted); font-size: 15.5px; }
@media (max-width: 600px) {
    .gc-s { padding: 44px 0; }
    .gc-sh h2 { font-size: 25px; }
}

/* =========================================================
   Nejlepší grafická karta do …
   ========================================================= */
.gc-best-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.gc-best-head .gc-sh { margin: 0; }
.gc-best { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.gc-win { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; background: #fff; border: 2px solid var(--gc-orange); border-radius: 16px; padding: 22px; box-shadow: 0 16px 36px rgba(228, 99, 5, .1); }
.gc-win-badge { position: absolute; top: -12px; left: 20px; background: var(--gc-orange); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.gc-img { border-radius: 12px; background: linear-gradient(145deg, #f1f4f6, #e3e9ed); display: grid; place-items: center; aspect-ratio: 1; color: #a9b8c2; }
.gc-img .gc-i { width: 72px; height: 72px; stroke-width: 1.2; }
.gc-win h3 { font-family: inherit; font-size: 23px; font-weight: 800; letter-spacing: -.2px; }
.gc-win-sub { color: var(--gc-muted); font-size: 14px; margin-top: 2px !important; }
.gc-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.gc-kpi { background: var(--gc-bg); border-radius: 10px; padding: 10px 12px; }
.gc-kpi small { display: block; color: var(--gc-muted); font-size: 12px; }
.gc-kpi b { font-size: 19px; letter-spacing: -.2px; }
.gc-why { margin-bottom: 16px !important; font-size: 14.5px; }
.gc-why li { display: flex; gap: 8px; padding: 3px 0; }
.gc-why .gc-i { color: var(--gc-good); width: 17px; height: 17px; margin-top: 3px; }
.gc-buy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gc-buy-p { font-size: 28px; font-weight: 800; letter-spacing: -.4px; margin-right: auto; line-height: 1.15; }
.gc-buy-p small { display: block; font-size: 12.5px; font-weight: 500; color: var(--gc-muted); letter-spacing: 0; }
.gc-alts { display: flex; flex-direction: column; gap: 12px; }
.gc-alt { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--gc-line); border-radius: 14px; padding: 14px; transition: border-color .15s; }
.gc-alt:hover { border-color: var(--gc-navy); }
.gc-alt .gc-img .gc-i { width: 28px; height: 28px; }
.gc-alt-tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--gc-navy); background: var(--gc-tint); border-radius: 5px; padding: 2px 7px; margin-bottom: 3px; }
.gc-alt b { display: block; font-size: 15px; }
.gc-alt small { color: var(--gc-muted); font-size: 12.5px; }
.gc-alt-p { font-weight: 800; white-space: nowrap; text-align: right; }
.gc-alt-p small { display: block; font-weight: 500; color: var(--gc-muted); }
.gc-alt-p > span { display: block; font-size: 14px; }
.gc-alt-plus { color: var(--gc-good); }
.gc-alt-minus { color: var(--gc-muted); }
.gc-alt-none { color: var(--gc-muted); font-size: 14.5px; padding: 14px 4px; }
@media (max-width: 991px) { .gc-best { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
    .gc-best-head .gc-tabs { width: 100%; }
    .gc-win { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 14px; }
    .gc-win .gc-img { aspect-ratio: auto; height: 130px; }
    .gc-win h3 { font-size: 21px; }
    .gc-kpis { gap: 6px; }
    .gc-kpi { padding: 8px; }
    .gc-kpi b { font-size: 16px; }
    .gc-buy-p { width: 100%; }
    .gc-buy .gc-btn { flex: 1 1 auto; }
    .gc-alt { grid-template-columns: minmax(0, 1fr) auto; }
    .gc-alt .gc-img { display: none; }
}

/* =========================================================
   Žebříček (jeden seznam: na desktopu tabulka, na telefonu řádky-karty)
   ========================================================= */
.gc-card { background: #fff; border: 1px solid var(--gc-line); border-radius: 16px; overflow: hidden; }
.gc-tools { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--gc-line); flex-wrap: wrap; }
.gc-f { display: inline-flex; align-items: center; border: 1px solid var(--gc-line); background: #fff; border-radius: 99px; padding: 6px 13px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--gc-ink-2); cursor: pointer; white-space: nowrap; }
.gc-f.is-on { background: var(--gc-navy); border-color: var(--gc-navy); color: #fff; }
.gc-sep { width: 1px; height: 24px; background: var(--gc-line); margin: 0 4px; }
.gc-sort { margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 400; color: var(--gc-muted); }
.gc-sort select { border: 1px solid var(--gc-line); border-radius: 9px; padding: 6px 10px; background: #fff; color: var(--gc-ink); font: inherit; font-size: 14px; }

.gc-list { margin: 0; }
.gc-row { display: grid; grid-template-columns: 38px minmax(0, 2.3fr) minmax(0, 1.4fr) minmax(0, 1.35fr) 110px 110px 100px; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--gc-line); font-size: 14px; }
.gc-list .gc-row:last-child { border-bottom: 0; }
.gc-row:not(.gc-row-head):hover { background: #f8fafb; }
.gc-row.is-sel { background: var(--gc-orange-50); }
.gc-row-head { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gc-muted); background: #fbfcfd; padding-top: 10px; padding-bottom: 10px; }
.gc-r { text-align: right; }
.gc-rk { text-align: center; font-weight: 700; color: var(--gc-muted); }
.gc-nm { min-width: 0; }
.gc-nm a { font-weight: 700; }
.gc-nm a:hover { color: var(--gc-orange); }
.gc-nm small { display: block; color: var(--gc-muted); font-size: 12.5px; }
.gc-idx { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 10px; align-items: center; }
.gc-tr { height: 8px; background: #eef2f5; border-radius: 4px; overflow: hidden; }
.gc-tr i { display: block; height: 100%; background: var(--gc-navy); border-radius: 0 4px 4px 0; }
.gc-idx b { text-align: right; font-variant-numeric: tabular-nums; }
.gc-use { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--gc-navy); background: var(--gc-tint); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.gc-price, .gc-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gc-val.is-top { color: var(--gc-good); }
.gc-cmp { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; font-size: 13px; font-weight: 400; color: var(--gc-ink-2); white-space: nowrap; cursor: pointer; }
.gc-cmp input { accent-color: var(--gc-orange); width: 17px; height: 17px; margin: 0; }
.gc-row-out .gc-nm small { color: var(--gc-bad, #b3261e); font-weight: 600; }
.gc-price small { display: block; font-size: 11px; font-weight: 500; color: var(--gc-muted); }
.gc-more { display: flex; justify-content: center; padding: 14px 16px; border-top: 1px solid var(--gc-line); }
.gc-more[hidden] { display: none; }
.gc-foot { padding: 12px 16px; font-size: 13px; color: var(--gc-muted); border-top: 1px solid var(--gc-line); }

@media (max-width: 860px) {
    .gc-tools { padding: 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .gc-sort { margin-left: 8px; flex: none; }
    .gc-row-head { display: none; }
    .gc-row {
        grid-template-columns: 22px minmax(0, 1fr) auto;
        grid-template-areas: "rk nm price" "rk idx cmp";
        gap: 6px 10px; padding: 12px 14px;
    }
    .gc-row .gc-rk { grid-area: rk; align-self: start; padding-top: 2px; }
    .gc-row .gc-nm { grid-area: nm; }
    .gc-row .gc-idx { grid-area: idx; grid-template-columns: minmax(0, 1fr) 26px; }
    .gc-row .gc-price { grid-area: price; }
    .gc-row .gc-cmp { grid-area: cmp; }
    .gc-row .gc-use-c, .gc-row .gc-val { display: none; }
}

/* lišta porovnání dvou zaškrtnutých */
.gc-cbar {
    position: fixed; left: 50%; bottom: 16px; z-index: 60;
    display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 24px);
    padding: 10px 10px 10px 18px; border-radius: 16px; background: #15303e; color: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    transform: translate(-50%, 160%); visibility: hidden; transition: transform .25s, visibility .25s;
}
.gc-cbar.is-on { transform: translate(-50%, 0); visibility: visible; }
.gc-cbar-pair { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-cbar-pair em { font-style: normal; color: #ffb27a; margin: 0 8px; font-size: 12px; font-weight: 800; }
.gc-cbar-pair i { font-style: normal; color: #9fb9c7; font-weight: 500; }
.gc-cbar-x { background: none; border: 0; color: #9fb9c7; font: inherit; font-size: 13px; cursor: pointer; }
.gc-cbar .gc-btn { height: 40px; border-radius: 12px; }
.gc-cbar .gc-btn.is-off { opacity: .5; pointer-events: none; }
@media (max-width: 600px) {
    .gc-cbar { left: 12px; right: 12px; width: auto; transform: translateY(160%); }
    .gc-cbar.is-on { transform: none; }
    .gc-cbar-x { display: none; }
}

/* =========================================================
   Rozlišení
   ========================================================= */
.gc-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gc-rc { background: #fff; border: 1px solid var(--gc-line); border-radius: 16px; padding: 20px; }
.gc-rc-h { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.gc-rc-h b { font-size: 20px; font-weight: 800; }
.gc-rc-h small { display: block; color: var(--gc-muted); font-size: 13px; }
.gc-scr { position: relative; flex: none; width: 46px; height: 34px; border: 2px solid var(--gc-navy); border-radius: 6px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: var(--gc-navy); }
.gc-scr::after { content: ""; position: absolute; bottom: -7px; left: 50%; width: 14px; height: 3px; margin-left: -7px; background: var(--gc-navy); border-radius: 2px; }
.gc-rc p { color: var(--gc-ink-2); font-size: 14px; margin: 8px 0 14px; }
.gc-rl { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--gc-line); }
.gc-rl small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gc-muted); }
.gc-rl b { font-size: 15px; }
.gc-rl:hover b { color: var(--gc-orange); }
.gc-rl.is-rec b { color: var(--gc-orange-600); }
.gc-rl-p { font-weight: 800; white-space: nowrap; }
.gc-res-tabs { display: none; margin-bottom: 14px; }
@media (max-width: 860px) {
    .gc-res-tabs { display: inline-flex; }
    .gc-res { display: block; }
    .gc-rc { display: none; }
    .gc-rc.is-on { display: block; }
}

/* =========================================================
   Banner + časté otázky
   ========================================================= */
.gc-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; background: linear-gradient(120deg, var(--gc-navy), var(--gc-navy-deep)); color: #fff; border-radius: 18px; padding: 28px 30px; }
.gc-banner::after { content: ""; position: absolute; right: -70px; top: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(228, 99, 5, .35), transparent 65%); }
.gc-banner > div { flex: 1; min-width: 240px; position: relative; z-index: 1; }
.gc-banner h3 { font-family: inherit; font-size: 22px; font-weight: 700; margin-bottom: 4px; color: #fff; }
.gc-banner p { color: #c9d7df; }
.gc-banner .gc-btn { position: relative; z-index: 1; }
.gc-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.gc-faq details { background: #fff; border: 1px solid var(--gc-line); border-radius: 12px; padding: 14px 16px; }
.gc-faq summary { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.gc-faq summary::-webkit-details-marker { display: none; }
.gc-faq summary::after { content: "+"; color: var(--gc-muted); font-weight: 800; }
.gc-faq details[open] summary::after { content: "–"; }
.gc-faq details p { margin-top: 10px; color: var(--gc-ink-2); font-size: 14.5px; }
@media (max-width: 760px) {
    .gc-faq { grid-template-columns: 1fr; }
    .gc-banner { padding: 22px; }
    .gc-banner .gc-btn { width: 100%; }
}