/* ===========================================================
   MBSN Supplemental Styles
   Additive rules for dynamic content: real logos, WP search,
   News Hub filtering, poll/quiz result states, video lightbox,
   single-post layout, and the Fixture Center visual treatment.
   =========================================================== */

/* Native <select> used for league switching */
.mbsn-native-select select {
	background: var(--bg-white);
	color: var(--text-body);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 6px 10px;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
}
.mbsn-native-select select:focus { outline: 2px solid var(--plum); }

/* Real uploaded logos, used wherever the mockup used letter-badges */
.team-badge-img, .club-logo-sm, .club-logo-lg {
	border-radius: 50%;
	object-fit: cover;
	vertical-align: middle;
	background: var(--bg-subtle);
	aspect-ratio: 1 / 1;
}
.team-badge-img { width: 20px; height: 20px; margin-right: 4px; }
.club-logo-sm { width: 22px; height: 22px; margin-right: 6px; }
.club-logo-lg { width: 56px; height: 56px; display: block; margin: 0 auto 10px; }

/* Header search bar */
.mbsn-search-bar input[type="search"] {
	width: 100%;
	max-width: 480px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: var(--radius-sm);
	padding: 10px 14px;
	color: #fff;
	font-family: var(--font-body);
}

/* Hero fallback state (no Hero post set yet) */
.hero-card p { padding: 40px; opacity: 0.6; text-align: center; }

/* News Hub — filter bar + responsive card grid */
.news-hub-filters { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 28px; }
.hub-filter-group { display: inline-block; }
.news-hub-grid { display: flex; flex-wrap: wrap; gap: 16px; padding-bottom: 40px; }
.news-hub-grid .horizontal-article-card { flex: 0 0 calc((100% - 32px) / 3); }
@media (max-width: 900px)  { .news-hub-grid .horizontal-article-card { flex: 0 0 calc((100% - 16px) / 2); } }
@media (max-width: 600px)  { .news-hub-grid .horizontal-article-card { flex: 0 0 100%; } }

/* Win Probability bar transitions smoothly */
.win-prob-bar-bg { transition: width 0.4s ease; }

/* ===========================================================
   SINGLE POST — two-column layout with Up Next + Follow Us
   =========================================================== */
.single-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 32px;
	align-items: start;
	padding: 32px 0 60px;
}
.single-layout .single-article { padding: 0; max-width: none; margin: 0; }
.single-sidebar { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 20px; }

.up-next-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.up-next-header { background: var(--plum); color: #fff; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.05em; text-align: center; padding: 8px 0; text-transform: uppercase; }
.up-next-body { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 14px; }
.up-next-team { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; text-align: center; color: var(--text-heading); }
.up-next-team .team-badge-img { width: 32px; height: 32px; margin: 0; }
.up-next-vs { font-size: 0.7rem; opacity: 0.5; }
.up-next-footer { display: flex; justify-content: space-between; font-size: 0.7rem; opacity: 0.75; padding: 8px 14px 12px; border-top: 1px solid var(--border-color); }

.follow-us-panel { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-card); }
.follow-us-header { font-weight: 700; font-size: 0.85rem; margin-bottom: 12px; color: var(--text-heading); }
.follow-us-links { display: flex; flex-direction: column; gap: 8px; }
.follow-chip { display: block; text-align: center; padding: 10px; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 700; text-decoration: none; color: #fff; }
.follow-chip.follow-yt { background: #FF0000; }
.follow-chip.follow-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.follow-chip.follow-tt { background: #14121A; }
.related-articles-section { margin: 40px 0 60px; }

@media (max-width: 900px) {
	.single-layout { grid-template-columns: 1fr; }
	.single-sidebar { position: static; flex-direction: column; }
}

/* Single post / page content readability */
.single-article { padding: 32px 0 60px; max-width: 820px; margin: 0 auto; }
.single-article h1 { font-size: 2rem; margin: 14px 0 10px; color: var(--text-heading); }
.single-featured-image { margin: 20px 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 9; }
.single-featured-image img,
.single-featured-image picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.single-content { line-height: 1.8; color: var(--text-body); }
.single-content p { margin-bottom: 1.1em; }
.single-content img { max-width: 100%; border-radius: var(--radius-sm); height: auto; }
.stat-chip { display: inline-block; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 2px 8px; font-size: 0.75rem; margin-left: 8px; }

@media (max-width: 768px) {
	.single-article h1 { font-size: 1.5rem; }
}

/* ===========================================================
   Fixture Center — status-accented cards
   =========================================================== */
.sidebar-match-card { position: relative; padding-left: 16px; overflow: hidden; }
.sidebar-match-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 4px;
	background: var(--plum);
}
.sidebar-match-card[data-status="finished"]::before { background: var(--accent-green); }
.sidebar-match-card[data-status="live"]::before { background: var(--accent-red); }

.match-info-top span:first-child {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.65rem;
	color: var(--plum);
}

.match-team-item img.team-badge-img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--border-color);
	background: var(--bg-subtle);
}

.match-team-item .score-val {
	min-width: 26px;
	text-align: center;
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	background: var(--bg-subtle);
	font-size: 0.9rem;
}
.sidebar-match-card:hover .score-val { background: rgba(108,0,133,0.1); color: var(--plum); }

/* Tablet / mid-width responsive pass */
@media (max-width: 1024px) and (min-width: 641px) {
	.main-content-area { grid-template-columns: 1fr; }
	.left-sidebar-panel, .news-panel, .horizontal-carousel-section { grid-column: 1; }
	.left-sidebar-panel { grid-row: 1; }
	.news-panel { grid-row: 2; }
	.horizontal-carousel-section { grid-row: 3; }
	.grid-layout { grid-template-columns: 1fr; }
	.sidebar-panel { grid-column: 1; grid-row: 4; }
	.read-more-container { grid-template-columns: 1fr; }
	.horizontal-article-card { flex: 0 0 calc((100% - 16px) / 2); }
}

/* =========================================================
   Full Standings Table — fixed column alignment
   The bug: .league-table used browser-default "auto" layout,
   so column widths were computed independently per row based
   on content (long club names, etc.), letting header cells
   and body cells drift out of sync at different widths.
   table-layout: fixed + an explicit <colgroup> forces every
   row (including the header) onto the exact same column grid.
   This only applies to .league-table-full (this page) — the
   homepage/article short widgets keep their existing layout
   untouched, as requested.
   ========================================================= */
.league-table-full {
	table-layout: fixed;
	min-width: 640px;
}
.league-table-full .col-pos   { width: 50px; }
.league-table-full .col-club  { width: auto; }
.league-table-full .col-stat  { width: 70px; }
.league-table-full .col-form  { width: 130px; }

.league-table-full th,
.league-table-full td { padding: 10px 8px; }

.league-table-full .team-cell {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.league-table-full .club-name-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}