/* Aanpasbaar via je thema: .club-ci { --club-accent: #0b6b3a; } */
.club-ci {
	--club-accent: #0b6b3a;
	--club-tekst: inherit;
	--club-lijn: rgba(128, 128, 128, .25);
	--club-zacht: rgba(128, 128, 128, .08);
	color: var(--club-tekst);
	margin: 0 0 1.5em;
	font-size: .95em;
}
.club-ci__titel { margin: 0 0 .6em; border-bottom: 3px solid var(--club-accent); padding-bottom: .25em; }
.club-ci__melding { margin: .5em 0; opacity: .8; }
.club-ci__melding--fout { color: #a00; opacity: 1; }
.club-ci__filter { display: block; margin-bottom: .8em; }
.club-ci__filter select { max-width: 100%; }

.club-ci__dag h4, .club-ci__veld h4, .club-ci__sponsorlaag h4, .club-ci__stand h4 {
	margin: 1em 0 .3em; font-size: 1em; text-transform: capitalize;
}
.club-ci__stand h4 small { font-weight: 400; opacity: .7; margin-left: .4em; }
.club-ci__lijst { list-style: none; margin: 0; padding: 0; }
.club-ci__wedstrijd {
	display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; gap: .15em .8em; align-items: center;
	padding: .45em .5em; margin: 0; border-bottom: 1px solid var(--club-lijn);
}
.club-ci__wedstrijd:nth-child(even) { background: var(--club-zacht); }
.club-ci__wedstrijd[hidden] { display: none; }
.club-ci__tijd { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--club-accent); }
/* Thuis rechts uitgelijnd, uit links, streepje precies in het midden: alle rijen lopen gelijk. */
.club-ci__teams { display: grid; grid-template-columns: minmax(0, 1fr) 1.4em minmax(0, 1fr); align-items: center; }
.club-ci__team { display: flex; align-items: center; gap: .4em; min-width: 0; line-height: 1.2; }
.club-ci__team--thuis { flex-direction: row-reverse; text-align: right; }
.club-ci__team--uit { text-align: left; }
.club-ci__team.club-ci__eigen, tr.club-ci__eigen { font-weight: 700; }
.club-ci__streep { text-align: center; opacity: .6; margin: 0; }
.club-ci__logo { width: 24px; height: 24px; min-width: 24px; object-fit: contain; margin: 0; }
.club-ci__meta { grid-column: 2; font-size: .85em; opacity: .75; text-align: center; }
.club-ci__status { min-width: 5.5em; text-align: right; }
.club-ci__badge { font-size: .75em; padding: .1em .5em; border-radius: 1em; background: var(--club-zacht); border: 1px solid var(--club-lijn); white-space: nowrap; }
.club-ci__badge--rood { background: #fde8e8; border-color: #e5a0a0; color: #900; }

.club-ci__scroll { overflow-x: auto; }
.club-ci__tabel { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.club-ci__tabel th, .club-ci__tabel td { padding: .35em .5em; text-align: center; border-bottom: 1px solid var(--club-lijn); }
.club-ci__tabel .l { text-align: left; }
.club-ci__tabel thead th { border-bottom: 2px solid var(--club-accent); }
tr.club-ci__eigen { background: color-mix(in srgb, var(--club-accent) 12%, transparent); }
.club-ci__stand + .club-ci__stand { margin-top: 1.5em; }

.club-ci__velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1em; }

/* Sponsoren: drie lagen, vaste tegels, logo's netjes gecentreerd en op schaal. */
.club-ci__sponsorlaag { margin: 0 0 1.8em; }
.club-ci__sponsorlaag h4 { text-align: center; letter-spacing: .04em; text-transform: uppercase; font-size: .85em; opacity: .7; margin: 0 0 .8em; }
.club-ci__sponsorlaag--hoofd { --tegel-b: 280px; --tegel-h: 150px; }
.club-ci__sponsorlaag--sub { --tegel-b: 190px; --tegel-h: 100px; }
.club-ci__sponsorlaag--overig { --tegel-b: 150px; --tegel-h: 76px; }
ul.club-ci__sponsoren {
	list-style: none !important; margin: 0 !important; padding: 0 !important;
	display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(var(--tegel-b), 1fr));
}
.club-ci__sponsorlaag--hoofd ul.club-ci__sponsoren { grid-template-columns: repeat(auto-fit, minmax(var(--tegel-b), 360px)); justify-content: center; }
ul.club-ci__sponsoren li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
ul.club-ci__sponsoren li::marker { content: none; }
.club-ci__tegel {
	display: flex; align-items: center; justify-content: center; box-sizing: border-box;
	height: var(--tegel-h); padding: 12px 16px; background: #fff; color: #333;
	border: 1px solid var(--club-lijn); border-radius: 8px; text-align: center; text-decoration: none !important;
	font-weight: 600; line-height: 1.25; overflow: hidden; transition: box-shadow .15s, transform .15s;
}
a.club-ci__tegel:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, .15); transform: translateY(-1px); }
.club-ci__tegel--donker { background: #1b1b1b; color: #eee; }
.club-ci__tegel img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: 0; }

@media (max-width: 560px) {
	.club-ci__wedstrijd { grid-template-columns: 3.4em minmax(0, 1fr); }
	.club-ci__status { grid-column: 2; text-align: center; min-width: 0; }
	.club-ci__logo { width: 20px; height: 20px; min-width: 20px; }
}

/* Teampagina */
.club-ci__teamkop { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 1.2rem; align-items: start; margin-bottom: 1.5em; }
.club-ci__teamkop:not(:has(.club-ci__teamfoto)) { grid-template-columns: 1fr; }
.club-ci__teamfoto { width: 100%; height: auto; border-radius: 8px; display: block; }
.club-ci__teaminfo { display: grid; grid-template-columns: max-content 1fr; gap: .4em 1em; margin: 0; }
.club-ci__teaminfo dt { font-weight: 700; margin: 0; }
.club-ci__teaminfo dd { margin: 0; }
.club-ci__loc { opacity: .7; }
.club-ci__teamdeel { margin: 0 0 1.8em; }
ul.club-ci__spelers { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .3em 1em; }
ul.club-ci__spelers li { margin: 0 !important; padding: .3em 0; border-bottom: 1px solid var(--club-lijn); list-style: none !important; }
@media (max-width: 640px) { .club-ci__teamkop { grid-template-columns: 1fr; } }

/* Organisatie: per groep een lijst functie → naam, telefoon en e-mail. */
.club-ci__orggroep { margin: 0 0 1.6em; }
.club-ci__orggroep h4 { margin: 0 0 .6em; }
dl.club-ci__org { display: grid; grid-template-columns: minmax(9em, max-content) 1fr; gap: .35em 1.2em; margin: 0; }
dl.club-ci__org dt { font-weight: 600; margin: 0; }
dl.club-ci__org dd { margin: 0; }
.club-ci__orgopm { opacity: .7; font-size: .9em; }
@media (max-width: 520px) { dl.club-ci__org { grid-template-columns: 1fr; gap: 0; } dl.club-ci__org dd { margin-bottom: .6em; } }

/* Activiteiten */
.club-ci__acts{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.club-ci__act{display:flex;gap:1rem;align-items:flex-start;padding:.75rem;border:1px solid #ddd;border-radius:.4rem;background:#fff}
.club-ci__actdatum{flex:none;width:3.6rem;text-align:center;background:#000;color:#ffe600;border-radius:.35rem;padding:.35rem 0;display:flex;flex-direction:column;line-height:1.1}
.club-ci__actdatum strong{font-size:1.5rem}
.club-ci__actdatum span{text-transform:uppercase;font-size:.8rem}
.club-ci__acttekst h4{margin:0 0 .15rem}
.club-ci__acttekst p{margin:.15rem 0}
.club-ci__actmeta{color:#555;font-size:.9rem}
.club-ci__actcat{display:inline-block;margin-left:.4rem;padding:0 .5rem;background:#ffe600;border-radius:1rem;font-size:.75rem;font-weight:400;color:#000}

/* Programma als tabel (zelfde opzet als het thuisprogramma in GomosInfo). Kleuren aanpasbaar:
   .club-ci { --club-kop-bg: #000; --club-kop-tekst: #ffe600; } */
.club-ci { --club-kop-bg: #000; --club-kop-tekst: #ffe600; --club-hover: #fff9c4; }
table.club-ci__programma {
	width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; background: #fff; color: #111;
	border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); font-size: 1em;
}
.club-ci__programma th {
	background: var(--club-kop-bg); color: var(--club-kop-tekst); text-align: left; font-weight: 600;
	padding: .6em .8em; white-space: nowrap; border: 0;
}
.club-ci__programma td { padding: .5em .8em; border: 0; border-bottom: 1px solid #e6e6e6; vertical-align: middle; background: transparent; }
.club-ci__programma tbody tr:nth-child(even) td { background: #fafafa; }
.club-ci__programma tbody tr:hover td { background: var(--club-hover); }
.club-ci__programma tbody tr:last-child td { border-bottom: 0; }
.club-ci__programma .club-ci__datum { white-space: nowrap; font-weight: 600; text-transform: capitalize; }
.club-ci__programma .club-ci__tijd { white-space: nowrap; font-weight: 400; color: inherit; }
.club-ci__club { display: inline-flex; align-items: center; gap: .5em; }
.club-ci__programma .club-ci__logo { width: 26px; height: 26px; min-width: 26px; }
.club-ci__opm { display: block; opacity: .65; }
tr.club-ci__wedstrijd[hidden] { display: none !important; }

@media (max-width: 700px) {
	.club-ci__programma thead { display: none; }
	table.club-ci__programma, .club-ci__programma tbody { display: block; background: transparent; box-shadow: none; }
	.club-ci__programma tr { display: block; background: #fff; margin: 0 0 .6em; border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); padding: .35em .7em; }
	.club-ci__programma tbody tr:nth-child(even) td, .club-ci__programma tbody tr:hover td { background: transparent; }
	.club-ci__programma td { display: flex; justify-content: space-between; gap: 1em; padding: .25em 0; border: 0; text-align: right; }
	.club-ci__programma td::before { content: attr(data-label); color: #777; text-align: left; }
	.club-ci__programma td:empty { display: none; }
}

/* Thema's overschrijven tabelstijlen nogal eens (cellen als blok, grijze kopteksten): op brede schermen vastzetten. */
@media (min-width: 701px) {
	table.club-ci__programma { display: table !important; width: 100% !important; table-layout: auto !important; }
	.club-ci__programma thead { display: table-header-group !important; }
	.club-ci__programma tbody { display: table-row-group !important; }
	.club-ci__programma tr { display: table-row !important; }
	.club-ci__programma th, .club-ci__programma td { display: table-cell !important; float: none !important; width: auto !important; text-align: left !important; }
	.club-ci__programma td::before { content: none !important; }
}
.club-ci__programma th { color: var(--club-kop-tekst) !important; background: var(--club-kop-bg) !important; opacity: 1 !important; text-transform: none; }
.club-ci__programma td { color: #111; }
.club-ci__programma td .club-ci__club { white-space: normal; }

/* Uitslagen en stand: zelfde tabelstijl als het programma. */
.club-ci__programma .club-ci__uitslag { white-space: nowrap; font-weight: 700; color: var(--club-accent); }
.club-ci__programma .club-ci__eigen { font-weight: 700; }
.club-ci__programma--stand th, .club-ci__programma--stand td { text-align: center; white-space: nowrap; }
.club-ci__programma--stand th.l, .club-ci__programma--stand td.l { text-align: left; }
.club-ci__programma--stand tr.club-ci__eigen td { background: var(--club-hover); font-weight: 700; }
/* De stand blijft ook op smalle schermen een tabel (kaartjes werken niet voor 10 kolommen). */
@media (max-width: 700px) {
	table.club-ci__programma--stand { display: table; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
	.club-ci__programma--stand thead { display: table-header-group; }
	.club-ci__programma--stand tbody { display: table-row-group; }
	.club-ci__programma--stand tr { display: table-row; margin: 0; padding: 0; border-radius: 0; box-shadow: none; }
	.club-ci__programma--stand th, .club-ci__programma--stand td { display: table-cell; padding: .45em .5em; border-bottom: 1px solid #e6e6e6; text-align: center; }
	.club-ci__programma--stand td::before { content: none; }
}
@media (min-width: 701px) {
	.club-ci__programma--stand th, .club-ci__programma--stand td { text-align: center !important; }
	.club-ci__programma--stand th.l, .club-ci__programma--stand td.l { text-align: left !important; }
}