/* Service comparison (/srovnani-sluzeb) and the "Ceny" block of service hubs. Uses tokens of app.css. */

.cmp-fresh { display: inline-flex; align-items: center; gap: 8px; margin: var(--s-4) 0 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--muted); font-size: var(--step--1); }
.cmp-fresh__dot { width: 8px; height: 8px; border-radius: 50%; background: #3ecf8e; box-shadow: 0 0 0 3px rgb(62 207 142 / .2); }

/* summary cards */
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--gap); margin-bottom: var(--section); }
.cmp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    padding: var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent, var(--gold)) 14%, var(--surface)), var(--surface) 70%);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cmp-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent, var(--gold)); }
a.cmp-card[href]:hover { border-color: color-mix(in srgb, var(--accent, var(--gold)) 60%, transparent); color: var(--text); transform: translateY(-2px); }
.cmp-card__label { color: var(--faint); font-size: var(--step--2); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cmp-card__service { margin-top: var(--s-2); font-weight: 800; }
.cmp-card__value { font: 500 var(--step-3)/1.05 var(--font-display); font-variant-numeric: tabular-nums; }
.cmp-card__value small { margin-left: 2px; color: var(--muted); font: 600 var(--step--1) var(--font-text); }
.cmp-card__value--muted { margin-top: var(--s-2); color: var(--muted); font-size: var(--step-1); }
.cmp-card__note { color: var(--muted); font-size: var(--step--1); line-height: 1.4; }

/* sections */
.cmp-section { margin-top: var(--section); }
.cmp-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); }
.cmp-section__head h2 { margin: 0; }
.cmp-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cmp-sort__label { margin-right: 4px; color: var(--faint); font-size: var(--step--1); font-weight: 700; }
.cmp-sort__chip { min-height: 34px; padding-inline: .85em; }
.cmp-notice { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--muted); font-size: var(--step--1); }

/* table: horizontal scroll, sticky service column */
.cmp-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.cmp-table-wrap:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cmp-table { min-width: 1180px; }
.cmp-table th, .cmp-table td { padding: 12px 7px; }
.cmp-table thead th { letter-spacing: .04em; }
.cmp-table th:first-child, .cmp-table td:first-child { padding-left: 14px; }
.cmp-table thead th { vertical-align: bottom; white-space: normal; line-height: 1.25; min-width: 5.5em; text-wrap: balance; }
.cmp-table th, .cmp-table td { text-align: left; }
.cmp-table .cmp-num { text-align: right; }
.cmp-table thead th.cmp-num { min-width: 4.6em; }
.cmp-th__sub { display: block; font-size: .85em; font-weight: 600; letter-spacing: 0; text-transform: none; }
.cmp-th { flex-wrap: wrap; }
.cmp-table thead th.cmp-num .cmp-th { justify-content: flex-end; text-align: right; }
.cmp-upto { display: block; color: var(--faint); font-size: var(--step--2); font-weight: 600; white-space: nowrap; }
.cmp-card__label small { font-size: inherit; letter-spacing: .04em; text-transform: none; }
.cmp-card__foot { margin-top: auto; color: var(--faint); font-size: var(--step--2); line-height: 1.35; }
.cmp-table thead th:first-child, .cmp-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.cmp-table tbody tr:hover th { background: color-mix(in srgb, var(--gold) 8%, var(--surface)); }
.cmp-th { display: inline-flex; align-items: flex-end; gap: 3px; color: inherit; text-decoration: none; }
.cmp-th__arrow { opacity: 0; transition: opacity var(--t-fast); }
.cmp-th:hover { color: var(--text); }
.cmp-th:hover .cmp-th__arrow, .cmp-th.is-active .cmp-th__arrow { opacity: 1; }
.cmp-th.is-active { color: var(--gold); }
.cmp-service { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; }
.cmp-service__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.cmp-num { font-variant-numeric: tabular-nums; }
.cmp-strong { font-weight: 800; }
.cmp-na { color: var(--faint); }
.cmp-free { display: inline-block; padding: 2px 9px; border-radius: var(--pill); background: color-mix(in srgb, #3ecf8e 18%, transparent); color: color-mix(in srgb, #3ecf8e 45%, var(--text)); font-size: var(--step--2); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cmp-hint { display: none; margin: var(--s-2) 0 0; color: var(--faint); font-size: var(--step--2); }

/* plans + price charts */
.cmp-plans { display: grid; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--gap); }
.cmp-plan { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r-lg); background: var(--surface); }
.cmp-plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.cmp-plan__head h3 { margin: 0; font: 500 var(--step-1)/1.2 var(--font-display); }
.cmp-plan__head a { color: var(--text); text-decoration: none; }
.cmp-plan__head a:hover { color: var(--gold); }
.cmp-plan__empty { margin: 0; color: var(--muted); font-size: var(--step--1); }
.cmp-plan__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cmp-plan__list li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "meta price"; align-items: center; gap: 0 var(--s-3); padding: 8px 0; border-bottom: 1px solid var(--line); }
.cmp-plan__list li:last-child { border-bottom: 0; }
.cmp-plan__name { grid-area: name; font-weight: 700; }
.cmp-plan__meta { grid-area: meta; color: var(--faint); font-size: var(--step--2); }
.cmp-plan__meta:empty { display: none; }
.cmp-plan__price { grid-area: price; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-plan__price small { color: var(--muted); font-weight: 600; }
.cmp-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border: 1px solid var(--line-strong); border-radius: var(--pill); color: var(--muted); font-size: var(--step--2); font-weight: 700; vertical-align: 1px; }
.cmp-plan__change { margin: 0; color: var(--muted); font-size: var(--step--1); }
.cmp-chart { margin: var(--s-2) 0 0; color: var(--accent); }
.cmp-chart svg { display: block; width: 100%; height: 64px; overflow: visible; }
.cmp-chart__base { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cmp-chart__line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-opacity: .45; stroke-linejoin: round; stroke-linecap: round; }
.cmp-chart__line--primary { stroke-width: 2.5; stroke-opacity: 1; }
.cmp-chart__axis { display: flex; justify-content: space-between; margin-top: 4px; color: var(--faint); font-size: var(--step--2); }
.cmp-history summary { color: var(--muted); font-size: var(--step--1); font-weight: 700; cursor: pointer; }
.cmp-history summary:hover { color: var(--gold); }
.cmp-history .table-wrap { margin-top: var(--s-3); }

/* methodology */
.cmp-method dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s-3); margin: var(--s-5) 0; }
.cmp-method dl div { padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.cmp-method dt { margin-bottom: 4px; font-weight: 800; }
.cmp-method dd { margin: 0; color: var(--muted); font-size: var(--step--1); line-height: 1.6; }

/* hub block */
.cmp-prices { margin-top: var(--section); padding: var(--s-5); border: 1px solid var(--line); border-top: 3px solid var(--accent, var(--gold)); border-radius: var(--r-lg); background: var(--surface); }
.cmp-prices__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); }
.cmp-prices__head h2 { margin: 0; }
.cmp-prices__more { font-size: var(--step--1); font-weight: 700; text-decoration: none; }
.cmp-prices__free { margin: 0; }
.cmp-prices__note { margin: var(--s-3) 0 0; color: var(--faint); font-size: var(--step--2); }
.cmp-prices__note:empty { display: none; }

@media (max-width: 760px) {
    .cmp-fresh { border-radius: var(--r); }
    .cmp-cards { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
    .cmp-card { padding: var(--s-4); }
    .cmp-card__label { letter-spacing: .06em; }
    .cmp-card__value { font-size: var(--step-2); }
    .cmp-card__note { font-size: var(--step--2); }
    .cmp-hint { display: block; }
    .cmp-table th, .cmp-table td { padding: 10px 12px; }
    .cmp-table tbody th { max-width: 9.5rem; white-space: normal; }
    .cmp-sort { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; scrollbar-width: none; }
    .cmp-sort::-webkit-scrollbar { display: none; }
    .cmp-sort__chip { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cmp-card { transition: none; }
    a.cmp-card[href]:hover { transform: none; }
}