/* Klubbify frontend responsiveness shared by every shortcode. */
.ccm-block,
.ccm-fixtures,
.ccm-training-calendar{
	max-width:100%;
	min-width:0;
}

.ccm-standings__scroll,
.ccm-fixtures__scroll{
	-webkit-overflow-scrolling:touch;
	max-width:100%;
}

/* Convert the compact standings table into labelled cards on phones. */
@media(max-width:640px){
	.ccm-standings{
		background:transparent;
		border:0;
		overflow:visible;
	}
	.ccm-standings__scroll{overflow:visible}
	.ccm-standings table,
	.ccm-standings tbody{
		background:transparent!important;
		display:block;
	}
	.ccm-standings thead{
		border:0;
		clip:rect(0 0 0 0);
		height:1px;
		margin:-1px;
		overflow:hidden;
		padding:0;
		position:absolute;
		width:1px;
	}
	.ccm-standings tr{
		background:var(--ccm-secondary)!important;
		border:1px solid color-mix(in srgb,var(--ccm-on-secondary) 15%,transparent);
		border-radius:10px;
		display:grid;
		margin-bottom:10px;
		overflow:hidden;
	}
	.ccm-standings td{
		align-items:center;
		border:0!important;
		border-bottom:1px solid color-mix(in srgb,var(--ccm-on-secondary) 12%,transparent)!important;
		display:grid;
		grid-template-columns:minmax(88px,38%) 1fr;
		padding:10px 13px!important;
		text-align:right!important;
		width:auto!important;
	}
	.ccm-standings td:last-child{border-bottom:0!important}
	.ccm-standings td:before{
		content:attr(data-label);
		font-size:.75em;
		font-weight:800;
		letter-spacing:.03em;
		opacity:.72;
		text-align:left;
		text-transform:uppercase;
	}
	.ccm-standings tbody tr.ccm-standings__current{
		background:var(--ccm-primary)!important;
		box-shadow:0 5px 16px color-mix(in srgb,var(--ccm-primary) 26%,transparent);
	}
	.ccm-standings tbody tr.ccm-standings__current td{
		border-color:color-mix(in srgb,var(--ccm-on-primary) 24%,transparent)!important;
	}
}

/* Convert the large fixture table into one card per game. */
@media(max-width:700px){
	.ccm-fixtures__scroll{
		border:0;
		overflow:visible;
	}
	.ccm-fixtures table,
	.ccm-fixtures tbody{
		background:transparent;
		display:block;
		min-width:0;
		width:100%;
	}
	.ccm-fixtures thead{
		border:0;
		clip:rect(0 0 0 0);
		height:1px;
		margin:-1px;
		overflow:hidden;
		padding:0;
		position:absolute;
		width:1px;
	}
	.ccm-fixtures tbody{
		display:grid;
		gap:12px;
	}
	.ccm-fixtures tbody tr{
		background:var(--ccm-secondary)!important;
		border:1px solid color-mix(in srgb,var(--ccm-on-secondary) 18%,transparent);
		border-left:4px solid var(--ccm-primary);
		border-radius:10px;
		display:block;
		overflow:hidden;
	}
	.ccm-fixtures tbody tr[hidden]{display:none!important}
	.ccm-fixtures td{
		align-items:center;
		background:transparent!important;
		border:0;
		border-bottom:1px solid color-mix(in srgb,var(--ccm-on-secondary) 12%,transparent);
		display:grid;
		gap:12px;
		grid-template-columns:minmax(94px,38%) 1fr;
		padding:10px 12px;
		text-align:right;
	}
	.ccm-fixtures td:last-child{
		border-bottom:0;
		font-size:1.08em;
		font-weight:800;
	}
	.ccm-fixtures td:before{
		content:attr(data-label);
		font-size:.73em;
		font-weight:800;
		letter-spacing:.03em;
		opacity:.7;
		text-align:left;
		text-transform:uppercase;
	}
}

/* One-column layouts prevent squeezed images and text on narrow phones. */
@media(max-width:420px){
	.ccm-block.ccm-grid{grid-template-columns:1fr!important}
	.ccm-block.ccm-sponsors--big,
	.ccm-block.ccm-sponsors--medium,
	.ccm-block.ccm-sponsors--small,
	.ccm-block.ccm-sponsors--all{grid-template-columns:1fr!important}
	.ccm-sponsors>.ccm-sponsor--big,
	.ccm-sponsors>.ccm-sponsor--medium,
	.ccm-sponsors>.ccm-sponsor--small{flex-basis:100%}
	.ccm-gallery__grid{grid-template-columns:1fr}
	.ccm-match{padding:15px 12px}
	.ccm-team-details__content{padding:18px}
	.ccm-training-calendar__toolbar{grid-template-columns:42px 1fr 42px}
	.ccm-training-calendar__toolbar h2{font-size:1.08rem;line-height:1.25;padding:0 6px}
	.ccm-training-calendar__day{grid-template-columns:52px 1fr;padding:8px 6px}
	.ccm-training-calendar__date{padding:7px 5px}
	.ccm-training-calendar__event{padding:9px}
}

@media(prefers-reduced-motion:reduce){
	.ccm-block *,
	.ccm-fixtures *,
	.ccm-training-calendar *{
		scroll-behavior:auto!important;
		transition:none!important;
	}
}