/* Kurzy komodit (/kurzy/{slug}) - karty s kurzem, grafem a tabulkami.
   Layout stránky přebírá .article-layout / .article-detail + sidebar z news.css,
   karty článků a "načíst další" taky (.articles-grid, .mn-load-more). */

/* Bílá karta - společný obal pro kurz, graf i tabulky */
.com-card {
    background: var(--card-background, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin: 0 0 1.2rem;
}
.com-card h2 {
    font-size: 1.12rem;
    color: var(--primary-color);
    margin: 0 0 .7rem;
}
.com-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .8rem;
    margin-bottom: .4rem;
}
.com-card-head h2 { margin: 0; }

/* Aktuální kurz */
.com-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem 1.1rem;
}
.com-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.com-price small {
    font-size: 1.02rem;
    font-weight: 600;
    color: #6b7280;
}
.com-change {
    font-size: 1rem;
    font-weight: 700;
    padding: .28rem .65rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.com-change.com-up   { color: #15803d; background: #f0fdf4; }
.com-change.com-down { color: #b91c1c; background: #fef2f2; }
.com-change.com-flat { color: #4b5563; background: #f3f4f6; }
.com-up   { color: #15803d; }
.com-down { color: #b91c1c; }
.com-flat { color: #4b5563; }
.com-updated {
    color: #6b7280;
    font-size: .85rem;
    margin: .55rem 0 0;
}

/* Přepočty pod hlavní cenou: gram / koruny / kurz dolaru */
.com-subprices {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 2rem;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid #f1f3f7;
}
.com-subprice span {
    display: block;
    color: #6b7280;
    font-size: .8rem;
    margin-bottom: .1rem;
}
.com-subprice strong {
    font-size: 1.05rem;
    color: var(--text-color, #111827);
    font-variant-numeric: tabular-nums;
}

/* Dvojice tabulek */
.com-tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
    align-items: start;
}
@media (max-width: 700px) {
    .com-tables { grid-template-columns: 1fr; }
}
.com-tables .com-card { margin: 0; }

/* Čistá dvousloupcová tabulka: popisek vlevo šedě, hodnota vpravo tučně */
.com-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}
.com-table th,
.com-table td {
    padding: .55rem .15rem;
    border-bottom: 1px solid #f1f3f7;
    background: none;
}
.com-table tr:last-child th,
.com-table tr:last-child td { border-bottom: 0; }
.com-table th {
    text-align: left;
    font-weight: 500;
    color: #6b7280;
}
.com-table td {
    text-align: right;
    font-weight: 700;
    color: var(--text-color, #111827);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.com-table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #9ca3af;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.com-table thead th:not(:first-child) { text-align: right; }
.com-czk { color: #6b7280; font-weight: 500; font-size: .85rem; }

/* Přehledová stránka /kurzy */
.com-table--hub th[scope="row"] { font-weight: 600; color: var(--text-color, #111827); }
.com-hub-link {
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, .4);
    text-underline-offset: 3px;
}
.com-hub-link:hover { color: var(--accent-blue, #2563EB); }
.com-hub-unit {
    display: block;
    font-weight: 400;
    color: #9ca3af;
    font-size: .78rem;
}
.com-card h2 i { color: var(--secondary-color); margin-right: .3rem; font-size: .95em; }

/* Vysvětlující text v kartě (pod tabulkou futures) */
.com-explain { margin-top: .9rem; }
.com-explain p {
    color: #4b5563;
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 .6rem;
}

/* Taby období grafu - malé pilulky v hlavičce karty */
.com-chart-tabs { display: flex; flex-wrap: wrap; gap: .3rem; }
.com-tab {
    border: 1px solid var(--border-color, #e5e7eb);
    background: #fff;
    color: #4b5563;
    font-size: .82rem;
    font-weight: 600;
    padding: .28rem .7rem;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.com-tab:hover { border-color: var(--accent-blue, #2563EB); color: var(--accent-blue, #2563EB); }
.com-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* Statický PNG náhled grafu (interaktivní graf se donačítá při najetí/klepnutí).
   Obrázek je 860x350: horních 30 px (nadpis+datum, jen pro Google Images)
   ořízne .com-chart-crop záporným marginem = 30/860 šířky. */
.com-chart-static { position: relative; cursor: pointer; }
.com-chart-crop { overflow: hidden; }
.com-chart-crop img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: -3.4884%; /* 30/860 */
}
.com-chart-hint {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .92);
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .75rem;
    color: #6b7280;
    white-space: nowrap;
    pointer-events: none;
}
.com-chart-static:hover .com-chart-hint { opacity: 0; transition: opacity .3s; }

/* Graf */
.com-chart { position: relative; }
.com-chart[hidden] { display: none; }
.com-chart svg { width: 100%; height: auto; display: block; }
.com-grid   { stroke: #eef1f5; stroke-width: 1; }
.com-axis   { fill: #9ca3af; font-size: 11.5px; }
.com-line   { fill: none; stroke: #2563EB; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.com-dot    { fill: #2563EB; }
.com-dot-ring { fill: #fff; }
.com-pill rect { fill: #2563EB; }
.com-pill text { fill: #fff; font-size: 12.5px; font-weight: 700; }
.com-cross  { stroke: #9ca3af; stroke-width: 1; stroke-dasharray: 3 3; }
.com-hover-dot { fill: #2563EB; stroke: #fff; stroke-width: 2; }
.com-tooltip {
    position: absolute;
    pointer-events: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    padding: .35rem .6rem;
    font-size: .85rem;
    color: #111827;
    white-space: nowrap;
    z-index: 5;
}
.com-tooltip strong { font-variant-numeric: tabular-nums; }
.com-tooltip span { color: #6b7280; display: block; font-size: .78rem; }
.com-chart-empty { color: #6b7280; padding: 1.5rem 0; }

/* Zdroj dat / disclaimer */
.com-src {
    color: #9ca3af;
    font-size: .8rem;
    margin-top: .5rem;
}

/* Sekce článků pod layoutem */
.com-articles { margin-top: 2rem; }
.com-articles .mn-actions { text-align: center; margin-top: 1rem; }