/* Article match containers (AMC-4) — the context strip above a preview article
   and the prediction coupon below it. Loaded via $KL_PAGE_CSS on novosti.php.

   Page sheet: loads after global.css and wins equal-specificity ties by design
   (CLAUDE.md §3). Tokens only — no raw hex, no px ladder. All responsive rules
   live here, in this page's own sheet, never in a shared "responsive" file. */

/* ---------------------------------------------------------------------------
   Context strip — above the article body, single-match articles only
   --------------------------------------------------------------------------- */

.kl-amc-strip {
    display: block;
    margin: 0 0 var(--kl-sp-20);
    padding: var(--kl-sp-14) var(--kl-sp-16);
    background: var(--kl-surface-2);
    border: 1px solid var(--kl-border);
    border-radius: var(--kl-r-12);
}

.kl-amc-strip-match {
    display: block;
    margin-bottom: var(--kl-sp-10);
    font-family: var(--kl-font-display);
    font-size: var(--kl-fs-17);
    font-weight: 700;
    line-height: var(--kl-lh-ui);
    letter-spacing: var(--kl-ls-heading);
    color: var(--kl-text);
    text-decoration: none;
}

a.kl-amc-strip-match:hover {
    color: var(--kl-blue);
}

.kl-amc-strip-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kl-sp-8) var(--kl-sp-24);
    margin: 0;
}

.kl-amc-fact {
    display: flex;
    flex-direction: column;
    gap: var(--kl-sp-2);
    min-width: 0;
}

.kl-amc-fact dt {
    font-size: var(--kl-fs-10);
    font-weight: 600;
    letter-spacing: var(--kl-ls-kicker);
    text-transform: uppercase;
    color: var(--kl-text-4);
}

.kl-amc-fact dd {
    margin: 0;
    font-size: var(--kl-fs-13);
    font-weight: 500;
    color: var(--kl-text);
}

/* ---------------------------------------------------------------------------
   Coupon — below the article body, every in-scope article
   --------------------------------------------------------------------------- */

.kl-amc-tiket {
    /* The handoff's --surface-alt (#F8F9FA) is not in the shared token file;
       declared once here, same convention as the sibling page sheets. */
    --kl-amc-panel: #F8F9FA;
    margin: 0 0 var(--kl-sp-8);
    background: var(--kl-surface);
    border: 1px solid var(--kl-border);
    border-radius: var(--kl-r-16);
    overflow: hidden;
}

/* Navy header — ticket title left, pair count right (11g). */
.kl-amc-tiket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kl-sp-12);
    padding: var(--kl-sp-14) var(--kl-sp-16);
    background: var(--kl-navy);
}

.kl-amc-tiket-title {
    margin: 0;
    font-family: var(--kl-font-display);
    font-size: var(--kl-fs-14);
    font-weight: 800;
    line-height: var(--kl-lh-ui);
    letter-spacing: var(--kl-ls-heading);
    color: var(--kl-on-dark);
}

.kl-amc-tiket-count {
    font-family: var(--kl-font-ui);
    font-size: var(--kl-fs-10);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--kl-on-dark-70);
}

.kl-amc-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kl-amc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kl-sp-12);
    padding: var(--kl-sp-12) var(--kl-sp-16);
    border-top: 1px solid var(--kl-divider);
}

.kl-amc-row:first-child {
    border-top: 0;
}

.kl-amc-row-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kl-sp-2);
}

/* Kickoff sits above the match on multi-match articles; a single-match
   article carries its kickoff in the strip above instead. */
.kl-amc-row-time {
    font-size: var(--kl-fs-11);
    font-weight: 500;
    line-height: var(--kl-lh-ui);
    color: var(--kl-text-3);
    font-variant-numeric: tabular-nums;
}

.kl-amc-row-match {
    font-size: var(--kl-fs-14);
    font-weight: 700;
    line-height: var(--kl-lh-ui);
    color: var(--kl-ink);
    text-decoration: none;
}

a.kl-amc-row-match:hover {
    color: var(--kl-blue);
}

.kl-amc-row-pick {
    font-size: var(--kl-fs-13);
    font-weight: 500;
    line-height: var(--kl-lh-ui);
    color: var(--kl-text-2);
}

/* Row odds stay the plain design value (11g); only the total and the
   single box carry the logo chip. */
.kl-amc-row-odd {
    flex-shrink: 0;
    font-family: var(--kl-font-display);
    font-size: var(--kl-fs-13);
    font-weight: 800;
    line-height: var(--kl-lh-ui);
    color: var(--kl-text-3);
    font-variant-numeric: tabular-nums;
}

/* Odds chip — the same square-logo-plus-odds block the tip box uses
   (tdn-tip-odds in tip-details.css). */
.kl-amc-odds {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--kl-sp-8);
    padding: var(--kl-sp-6) var(--kl-sp-8);
    border-radius: var(--kl-r-6);
    background: var(--kl-surface-3);
}

.kl-amc-odds-book-link {
    display: inline-flex;
    border-radius: var(--kl-r-4);
}

.kl-amc-odds-book {
    width: 30px;
    height: 30px;
    border-radius: var(--kl-r-4);
    object-fit: contain;
}

.kl-amc-odds-val {
    font-family: var(--kl-font-display);
    font-size: 18px;
    font-weight: 800;
    line-height: var(--kl-lh-tight);
    color: var(--kl-ink);
    font-variant-numeric: tabular-nums;
}

/* Total — accumulator only, and only when one bookmaker prices every leg.
   Grey footer strip; the value rides in the same odds chip as the rows (11g). */
.kl-amc-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kl-sp-12);
    padding: var(--kl-sp-12) var(--kl-sp-16);
    background: var(--kl-amc-panel);
    border-top: 1px solid var(--kl-divider);
}

.kl-amc-total-label {
    font-size: var(--kl-fs-11);
    font-weight: 600;
    color: var(--kl-text-3);
}

/* Single pick — the 11f "preporučena oklada" box: kicker + bold pick left,
   odds chip right. */
.kl-amc-tiket--single {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kl-sp-12);
    padding: var(--kl-sp-12) var(--kl-sp-16);
    background: var(--kl-amc-panel);
    border-radius: var(--kl-r-14);
}

.kl-amc-single-main {
    min-width: 0;
}

.kl-amc-single-kicker {
    margin: 0 0 var(--kl-sp-2);
    font-family: var(--kl-font-ui);
    font-size: var(--kl-fs-10);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kl-text-3);
}

.kl-amc-single-pick {
    font-family: var(--kl-font-display);
    font-size: var(--kl-fs-15);
    font-weight: 800;
    line-height: var(--kl-lh-tight);
    color: var(--kl-ink);
}

.kl-amc-single-match {
    margin-top: var(--kl-sp-2);
    font-size: var(--kl-fs-11);
    font-weight: 500;
    line-height: var(--kl-lh-ui);
    color: var(--kl-text-3);
}

.kl-amc-single-match a {
    color: inherit;
    text-decoration: none;
}

.kl-amc-single-match a:hover {
    color: var(--kl-blue);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------------- */

@media (max-width: 560px) {
    .kl-amc-strip {
        padding: var(--kl-sp-12);
    }

    .kl-amc-strip-facts {
        gap: var(--kl-sp-8) var(--kl-sp-16);
    }
}