/* Head-to-head strip on upcoming fixture cards (includes/fixtures_h2h.inc.php).
   Desktop: fixtures.php (.ckc-rd-main). Mobile: mobile/fixtures.php (.ckc-mev-card). */
.ckc-h2h { font-size: var(--ckc-font-size-xs); color: #555; white-space: normal; }
.ckc-h2h > summary { display: inline-flex; align-items: center; gap: 8px; padding: 2px 10px; border-radius: 999px; background: #f1f4f8; cursor: pointer; list-style: none; }
.ckc-h2h > summary::-webkit-details-marker { display: none; }
.ckc-h2h > summary::after { content: '\25BE'; color: #9ca3af; transition: transform .15s; }
.ckc-h2h[open] > summary::after { transform: rotate(180deg); }
.ckc-h2h > summary:hover { background: #e8edf5; }
.ckc-h2h__label { font-weight: 700; letter-spacing: 0.03em; color: var(--ckc-color-primary, #314177); }
.ckc-h2h--none .ckc-h2h__label { margin-right: 4px; }
.ckc-h2h__form { display: inline-flex; gap: 3px; font-weight: 700; }
.ckc-h2h__body { margin-top: 6px; }
.ckc-h2h__pred { margin: 0 0 4px; }
.ckc-h2h__list { list-style: none; margin: 0; padding: 0; }
.ckc-h2h__list li { display: grid; gap: 8px; align-items: baseline; padding: 1px 0; }
.ckc-h2h__comp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ckc-h2h__res { font-weight: 700; white-space: nowrap; }
.ckc-h2h__res a { color: inherit; }
.ckc-h2h__more { margin: 4px 0 0; color: #9ca3af; }

/* Desktop: centred under the card meta line */
.ckc-rd-main .ckc-h2h { text-align: center; }
.ckc-rd-main .ckc-h2h__body { display: inline-block; text-align: left; }
.ckc-rd-main .ckc-h2h__list li { grid-template-columns: 4.5em 9em 5.5em auto; }

/* Mobile: full-width row under the card, lined up with the text after the date block */
.ckc-mev-card--row:has(> .ckc-h2h) { flex-wrap: wrap; }
.ckc-mev-card--row > .ckc-h2h { flex: 1 0 100%; padding: 0 12px 8px 72px; }
.ckc-mev-card .ckc-h2h > summary { padding: 4px 10px; }
.ckc-mev-card .ckc-h2h > summary::after { font-size: 1.5em; line-height: 1; color: var(--ckc-color-primary, #314177); }
.ckc-mev-card .ckc-h2h__list li { grid-template-columns: 4em minmax(0, 1fr) auto auto; padding: 2px 0; }