/* =========================================================
   MrWin Radio — Grid Layout & Card Styles
   ========================================================= */

/* ----- Grid wrapper ----- */

.mrwin-radio-grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
	gap: 20px;
}

article {
    margin-bottom: 20px;
}

.mrwin-radio-grid.columns-2 { --grid-cols: 2; }
.mrwin-radio-grid.columns-3 { --grid-cols: 3; }
.mrwin-radio-grid.columns-4 { --grid-cols: 4; }

/* ----- Reset theme heading styles inside the grid ----- */
/* The theme adds border-left + padding-left to .entry-content h2/h3/h4.
   These overrides ensure no headings inside the grid inherit that treatment. */

.mrwin-radio-grid h1,
.mrwin-radio-grid h2,
.mrwin-radio-grid h3,
.mrwin-radio-grid h4,
.mrwin-radio-grid h5,
.mrwin-radio-grid h6,
.mrwin-radio-grid .mrwin-radio-card-title {
	padding-left: 0;
	border-left: none;
}

/* ----- Card ----- */

.mrwin-radio-card {
	background: #2d2d2d;
	border-radius: 0 0 6px 6px; /* sharp top — image is flush; rounded bottom */
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* ----- Thumbnail ----- */

.mrwin-radio-card-thumb {
	flex-shrink: 0;
	line-height: 0; /* removes phantom gap below img */
}

.mrwin-radio-card-thumb img {
	display: block;
	width: 100%;
}

/* Override any theme-level border-radius on images */
.mrwin-radio-grid .mrwin-radio-card img {
	border-radius: 0;
}

.mrwin-radio-card-thumb a {
	display: block;
	line-height: 0;
}

/* Subtle zoom on hover */
.mrwin-radio-card-thumb img {
	transition: transform 0.25s ease;
}
.mrwin-radio-card-thumb:hover img {
	transform: scale(1.03);
}

/* ----- Title ----- */

/* Override theme's .entry-content h2 margins (specificity 0,1,1) with (0,2,0). */
.mrwin-radio-grid .mrwin-radio-card-title {
	flex-shrink: 0;
	overflow: hidden; /* clips the sliding background at the edges */
	margin-top: 0;
	margin-bottom: 0;
}

.mrwin-radio-card-title a {
	display: block;
	padding: 14px 16px 12px;
	font-size: clamp(15px, 2vw, 20px);
	font-weight: 700;
	color: #fff;
	text-align: center;
	text-decoration: none;
	/* Wrap first, shrink via clamp, ellipsis only when truly out of space */
	white-space: normal;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	/* Red fill slides in from the left on hover */
	background-image: linear-gradient(to right, #e53935, #e53935);
	background-size: 0% 100%;
	background-repeat: no-repeat;
	background-position: left center;
	transition: background-size 0.3s ease;
}

.mrwin-radio-card-title a:hover {
	background-size: 100% 100%;
}

/* ----- Compact player flush at card bottom ----- */

.mrwin-radio-card .mrwin-radio-player--compact {
	margin-top: auto;
	border-radius: 0; /* flush with card edges */
}

/* ----- Load More button ----- */

.mrwin-radio-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.mrwin-radio-load-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 30px;
	background: #e53935;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
	line-height: 1;
}

.mrwin-radio-load-more-btn:hover {
	background: #c62828;
}

.mrwin-radio-load-more-btn:disabled {
	background: #555;
	cursor: default;
}

/* Loading spinner */
.mrwin-radio-load-more-btn .btn-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mrwin-spin 0.75s linear infinite;
	flex-shrink: 0;
}

.mrwin-radio-load-more-btn.is-loading .btn-spinner {
	display: block;
}

/* =========================================================
   Compact player overrides
   (no cover image — body fills the full width)
   ========================================================= */

.mrwin-radio-player--compact .mrwin-radio-body {
	padding: 12px 14px;
	gap: 8px;
}

.mrwin-radio-player--compact .mrwin-radio-btn-play {
	width: 44px;
	height: 44px;
}

.mrwin-radio-player--compact .mrwin-radio-btn-play svg {
	width: 21px;
	height: 21px;
}

/* Spinner ring inset slightly smaller to match button */
.mrwin-radio-player--compact.is-loading .mrwin-radio-btn-play::after {
	inset: -4px;
}

/* =========================================================
   Responsive
   ========================================================= */

/* 3- and 4-column grids collapse to 2 columns on mid-size screens.
   Specificity (0,2,0) matches the .columns-N modifier rules above. */
@media (max-width: 900px) {
	.mrwin-radio-grid.columns-3,
	.mrwin-radio-grid.columns-4 {
		--grid-cols: 2;
	}
}

/* Everything collapses to a single column on small screens. */
@media (max-width: 540px) {
	.mrwin-radio-grid,
	.mrwin-radio-grid.columns-2,
	.mrwin-radio-grid.columns-3,
	.mrwin-radio-grid.columns-4 {
		--grid-cols: 1;
		gap: 14px;
	}

}