/* Locked On Sooners Fan Hub — assets/hub.css
   Theme-proofing notes:
   - Every selector below is scoped with the #los-hub ID (the shortcode's
     wrapper element already carries this ID) rather than just a class,
     specifically so these rules reliably out-specificity a theme's own
     image/layout resets (many themes wrap content in an ID like
     #content or #primary and style `img` from there, which can beat a
     plain class selector even when both sides use !important).
   - Many WP themes also globally override CSS Grid behavior and force
     `img{height:auto}`. To survive that, every row/grid below is built
     with flexbox + !important, and every thumbnail is locked into a
     fixed 16:9 frame via an absolutely-positioned <img> with
     object-fit:cover !important so native image sizes can't distort
     the layout or get squished by a conflicting theme rule.
   - Bump LOS_HUB_VERSION in the main plugin file whenever this file
     changes so browsers don't keep serving a stale cached copy.
*/

#los-hub, #los-hub * {
	box-sizing: border-box !important;
}

#los-hub {
	/* Actual color values are injected here via an inline <style> block
	   (see los_hub_css_variables() in the main plugin file), scoped
	   directly to this #los-hub element — not :root, and not a
	   self-referencing fallback. Every var(--los-primary, #841617) etc. usage
	   below also carries its own literal fallback color, so even if
	   that inline injection is ever stripped by a caching/optimization
	   plugin, nothing renders as a missing/transparent background —
	   worst case, it just uses the plugin's default palette instead of
	   your customized one. */
	--los-ink: #201414;
	font-family: 'Roboto', system-ui, sans-serif;
	font-weight: 700;
	color: var(--los-ink);
	line-height: 1.4;
	container-type: inline-size;
	container-name: los-hub;
	max-width: 1200px;
	margin: 0 auto;
}

#los-hub h1, #los-hub h2, #los-hub h3 {
	font-family: 'Roboto', system-ui, sans-serif;
	font-weight: 900;
	line-height: 1.1;
	margin: 0 0 .5em;
}

#los-hub a { text-decoration: none; color: inherit; }

/* ---------------- Scoreboard (ScoreStream widget — wrapper spacing only) ---------------- */
#los-hub .los-scoreboard { width: 100%; padding: 1rem 1.25rem; background-color: #fff; }
#los-hub .los-scoreboard-title { font-size: 1.1rem !important; border-left: 4px solid var(--los-primary, #841617); padding-left: .5rem; margin: 0 0 .75rem !important; }
/* ScoreStream's own integration docs specifically call out that this
   container needs an explicit min-height via CSS — without it, the
   widget can fail to display even though its script loaded correctly. */
#los-hub .scorestream-widget-container { min-height: 200px; width: 100%; }

/* ---------------- Nav ---------------- */
#los-hub .los-nav { position: sticky !important; top: 0; z-index: 40; background-color: var(--los-primary, #841617) !important; background-image: none !important; color: var(--los-accent, #FDF9D8) !important; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
#los-hub .los-nav-inner { display: flex !important; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: .6rem 1rem; }
#los-hub .los-nav-brand { display: flex !important; align-items: center; gap: .5rem; font-weight: 900; font-size: 1.1rem; color: var(--los-accent, #FDF9D8) !important; }
#los-hub .los-nav-logo { height: 32px !important; width: 32px !important; max-width: none !important; object-fit: contain !important; border-radius: 6px; }
#los-hub .los-nav-toggle { display: none; background: none; border: none; color: var(--los-accent, #FDF9D8) !important; font-size: 1.5rem; cursor: pointer; }
#los-hub .los-nav-links { display: flex !important; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
#los-hub .los-nav-links a { color: var(--los-accent, #FDF9D8) !important; font-weight: 700; font-size: .92rem; opacity: .9; padding: .25rem 0; border-bottom: 2px solid transparent; transition: border-color .15s ease, opacity .15s ease; }
#los-hub .los-nav-links a:hover { opacity: 1; border-color: var(--los-accent, #FDF9D8); }

@container los-hub (max-width: 680px) {
	#los-hub .los-nav-toggle { display: block !important; }
	#los-hub .los-nav-links { display: none !important; flex-direction: column !important; width: 100%; gap: .75rem; padding: .75rem 0 .5rem; }
	#los-hub .los-nav-links.is-open { display: flex !important; }
}

/* ---------------- Hero / masthead (compact bar, theme-proof) ---------------- */
#los-hub .los-hero {
	background-color: var(--los-primary, #841617) !important;
	background-image: none !important;
	color: var(--los-accent, #FDF9D8) !important;
	text-align: left;
	padding: .75rem 1.25rem !important;
	display: flex !important;
	align-items: center !important;
}
#los-hub .los-hero-inner { display: flex !important; align-items: center !important; gap: .75rem; width: 100%; }
#los-hub .los-hero-logo { height: 40px !important; width: 40px !important; max-width: none !important; object-fit: contain !important; margin-bottom: 0 !important; }
#los-hub .los-hero-word { font-size: 1.35rem !important; color: var(--los-accent, #FDF9D8) !important; letter-spacing: -.01em; margin: 0 !important; }

/* ---------------- Carousel ---------------- */
#los-hub .los-carousel { position: relative; width: 100% !important; max-width: none !important; margin: 1.25rem auto 2rem; padding: 0 1.25rem; }
#los-hub .los-carousel-track { display: flex !important; position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.25); background: #000; }
#los-hub .los-carousel-slide { display: none; position: relative; width: 100%; }
#los-hub .los-carousel-slide.is-active { display: block !important; }
#los-hub .los-carousel-frame { display: block; position: relative; width: 100%; padding-top: 42%; background: #111; overflow: hidden; }
#los-hub .los-carousel-frame img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; min-width: 0 !important; object-fit: cover !important; object-position: center !important; }
#los-hub .los-carousel-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex !important; flex-direction: column; gap: .15rem; padding: 1.5rem 1.25rem 1rem; background: linear-gradient(to top, rgba(0,0,0,.85), transparent); color: #fff; }
#los-hub .los-carousel-kicker { text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; color: var(--los-powder, #F7C9CA); }
#los-hub .los-carousel-title { font-size: 1.15rem; font-weight: 900; }
#los-hub .los-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.45); color: #fff; border: none; width: 40px; height: 40px; border-radius: 999px; font-size: 1.4rem; cursor: pointer; }
#los-hub .los-carousel-prev { left: 1.5rem; } #los-hub .los-carousel-next { right: 1.5rem; }
#los-hub .los-carousel-dots { display: flex !important; justify-content: center; gap: .4rem; margin-top: .75rem; }
#los-hub .los-carousel-dot { width: 8px; height: 8px; border-radius: 999px; border: none; background: #ccc; cursor: pointer; }
#los-hub .los-carousel-dot.is-active { background: var(--los-primary, #841617); width: 22px; border-radius: 999px; }

/* ---------------- Section shell ---------------- */
#los-hub .los-section { padding: 2.5rem 1rem; }
#los-hub .los-section-title { font-size: 1.6rem; border-left: 6px solid var(--los-primary, #841617); padding-left: .6rem; }
#los-hub .los-empty { opacity: .6; font-weight: 500; }
#los-hub .los-see-all { text-align: right; font-weight: 800; }
#los-hub .los-see-all a { color: var(--los-primary, #841617); }

/* ---------------- Thumbnail frame (theme-proof) ---------------- */
#los-hub .los-thumb-frame {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	padding-top: 56.25% !important; /* 16:9 */
	border-radius: 10px;
	overflow: hidden !important;
	background: var(--los-powder, #F7C9CA);
}
#los-hub .los-thumb-frame img {
	position: absolute !important;
	top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	max-height: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	object-fit: cover !important;
	object-position: center !important;
}
#los-hub .los-thumb-frame-sm { padding-top: 100% !important; border-radius: 8px; }
#los-hub .los-podcast-icon { position: absolute !important; inset: 0; display: flex !important; align-items: center; justify-content: center; font-size: 1.8rem; background: var(--los-primary, #841617); color: #fff; }
#los-hub .los-play-badge { position: absolute; right: .5rem; bottom: .5rem; background: rgba(0,0,0,.6); color: #fff; width: 28px; height: 28px; border-radius: 999px; display: flex !important; align-items: center; justify-content: center; font-size: .75rem; }

/* ---------------- Video row (main/hits, flexbox, theme-proof) ---------------- */
#los-hub .los-video-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1.5rem; }
#los-hub .los-video-card { display: flex !important; flex-direction: column !important; flex: 0 0 260px !important; width: 260px !important; gap: .4rem; }
#los-hub .los-video-title { font-weight: 800; font-size: .95rem; }
#los-hub .los-video-date { font-size: .8rem; opacity: .6; }

/* ---------------- Channel #3 list (Data API v3, flexbox, theme-proof) ---------------- */
#los-hub .los-ch3-list { display: flex !important; flex-direction: column !important; gap: .6rem; max-height: 560px; overflow-y: auto; padding-right: .25rem; }
#los-hub .los-ch3-item {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 1rem;
	width: 100% !important;
	padding: .5rem;
	border-radius: 10px;
	background-color: #fbe9ea !important;
	background-color: color-mix(in srgb, var(--los-powder, #F7C9CA) 30%, #fff) !important;
	cursor: pointer;
}
#los-hub .los-ch3-item .los-thumb-frame {
	display: block !important;
	position: relative !important;
	width: 140px !important;
	height: 79px !important;
	min-width: 140px !important;
	min-height: 79px !important;
	max-width: 140px !important;
	max-height: 79px !important;
	flex: 0 0 140px !important;
	flex-shrink: 0 !important;
	padding-top: 0 !important;
	overflow: hidden !important;
	border-radius: 8px;
	background: var(--los-powder, #F7C9CA);
}
#los-hub .los-ch3-item .los-thumb-frame img {
	position: absolute !important;
	top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	width: 140px !important;
	height: 79px !important;
	max-width: none !important;
	min-width: 0 !important;
	object-fit: cover !important;
	object-position: center !important;
}
#los-hub .los-ch3-meta { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; gap: .15rem; }
#los-hub .los-ch3-title { font-weight: 800; font-size: .95rem; }
#los-hub .los-ch3-date { font-size: .8rem; opacity: .6; }

@container los-hub (max-width: 560px) {
	#los-hub .los-ch3-item .los-thumb-frame { width: 90px !important; height: 51px !important; min-width: 90px !important; min-height: 51px !important; max-width: 90px !important; max-height: 51px !important; flex: 0 0 90px !important; }
	#los-hub .los-ch3-item .los-thumb-frame img { width: 90px !important; height: 51px !important; }
}

/* Video modal (Channel #3 inline playback) */
#los-hub .los-video-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
#los-hub .los-video-modal[hidden] { display: none; }
#los-hub .los-video-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.75); }
#los-hub .los-video-modal-box { position: relative; z-index: 1; width: 100%; max-width: 860px; background: #111; border-radius: 14px; overflow: hidden; padding: 0 0 1rem; }
#los-hub .los-video-modal-close { position: absolute; top: .6rem; right: .6rem; z-index: 2; background: rgba(0,0,0,.6); color: #fff; border: none; width: 34px; height: 34px; border-radius: 999px; font-size: 1.1rem; cursor: pointer; }
#los-hub .los-video-modal-frame { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
#los-hub .los-video-modal-frame iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; border: 0; }
#los-hub .los-video-modal-title { color: #fff; font-weight: 800; padding: .9rem 1.2rem 0; margin: 0; }

/* ---------------- Podcast row (artwork + inline player, theme-proof) ---------------- */
#los-hub .los-podcast-row { display: flex !important; flex-direction: column !important; gap: 1rem; }
#los-hub .los-podcast-item {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 1rem;
	width: 100% !important;
	padding: .9rem !important;
	border-radius: 12px;
	/* Plain fallback declared first: if color-mix() is ever unsupported
	   or stripped (older browser, aggressive minifier), this solid color
	   still applies instead of leaving no background at all. */
	background-color: #fbe9ea !important;
	background-color: color-mix(in srgb, var(--los-powder, #F7C9CA) 35%, #fff) !important;
	border: 1px solid rgba(0,0,0,.06);
}
#los-hub .los-podcast-item .los-podcast-art {
	display: block !important;
	position: relative !important;
	width: 84px !important;
	height: 84px !important;
	min-width: 84px !important;
	min-height: 84px !important;
	max-width: 84px !important;
	max-height: 84px !important;
	flex: 0 0 84px !important;
	flex-shrink: 0 !important;
	padding-top: 0 !important;
	overflow: hidden !important;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
#los-hub .los-podcast-item .los-podcast-art img {
	position: absolute !important;
	top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	width: 84px !important;
	height: 84px !important;
	max-width: none !important;
	min-width: 0 !important;
	object-fit: cover !important;
	object-position: center !important;
}
#los-hub .los-podcast-body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-width: 0; gap: .4rem; }
#los-hub .los-podcast-meta { display: flex !important; flex-direction: column !important; gap: .1rem; }
#los-hub .los-podcast-title { font-weight: 800 !important; color: var(--los-ink) !important; }
#los-hub .los-podcast-date { font-size: .8rem !important; color: var(--los-ink) !important; opacity: .6; }
#los-hub .los-listen-link { font-weight: 900 !important; color: var(--los-primary, #841617) !important; white-space: nowrap; }
#los-hub .los-podcast-audio { display: block !important; width: 100% !important; max-width: none !important; height: 40px; }

@container los-hub (max-width: 480px) {
	#los-hub .los-podcast-item { flex-direction: column !important; align-items: stretch; }
	#los-hub .los-podcast-item .los-podcast-art { width: 100% !important; height: 140px !important; max-width: none !important; min-width: 0 !important; flex: 0 0 auto !important; }
	#los-hub .los-podcast-item .los-podcast-art img { width: 100% !important; height: 140px !important; }
}

/* ---------------- Articles grid (flexbox 2x2, theme-proof) ---------------- */
#los-hub .los-articles-grid { display: flex !important; flex-wrap: wrap !important; gap: 1.25rem; }
#los-hub .los-article-card { display: flex !important; flex-direction: column !important; flex: 1 1 calc(50% - .625rem) !important; max-width: calc(50% - .625rem) !important; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
#los-hub .los-article-body { display: flex !important; flex-direction: column !important; gap: .35rem; padding: 1rem; flex: 1 1 auto !important; }
#los-hub .los-article-title { font-weight: 900; font-size: 1.05rem; }
#los-hub .los-article-excerpt { font-size: .88rem; opacity: .75; }

@container los-hub (max-width: 620px) {
	#los-hub .los-article-card { flex: 1 1 100% !important; max-width: 100% !important; }
}

/* ---------------- Club / premium ---------------- */
/* ---------------- Club + Discord side by side ---------------- */
#los-hub .los-side-by-side { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 1.5rem; }
#los-hub .los-side-col { flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; }
#los-hub .los-side-col .los-discord { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; justify-content: center; background: #f7f3e8; border-radius: 18px; padding: 2rem 1.5rem !important; }

@container los-hub (max-width: 820px) {
	#los-hub .los-side-by-side { flex-direction: column !important; }
}

#los-hub .los-club-section { background: linear-gradient(135deg, #2b1b06, #4a2f0c); color: #fff; border-radius: 18px; margin: 0 !important; }
#los-hub .los-club { padding: 2rem 1.5rem; }
#los-hub .los-club-header { display: flex !important; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
#los-hub .los-club-logo { height: 56px !important; width: 56px !important; max-width: none !important; object-fit: contain !important; border-radius: 10px; }
#los-hub .los-club-title { color: #F6D67A; border-color: #F6D67A; }
#los-hub .los-club-pitch { opacity: .85; margin: 0; }
#los-hub .los-club-join { margin-left: auto; }
#los-hub .los-btn { display: inline-flex !important; align-items: center; gap: .4rem; background: #F6D67A; color: #2b1b06; font-weight: 900; padding: .7rem 1.3rem; border-radius: 999px; white-space: nowrap; }
#los-hub .los-btn-lg { padding: .9rem 1.8rem; font-size: 1.05rem; }
#los-hub .los-club-strip { display: flex !important; flex-direction: row !important; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
#los-hub .los-club-card { display: flex !important; flex-direction: column !important; flex: 0 0 150px !important; width: 150px !important; gap: .4rem; position: relative; }
#los-hub .los-club-badge { position: absolute; top: .4rem; left: .4rem; background: #F6D67A; color: #2b1b06; font-size: .68rem; font-weight: 900; padding: .15rem .5rem; border-radius: 999px; }
#los-hub .los-club-card-title { font-size: .85rem; font-weight: 700; }
#los-hub .los-club-empty { text-align: center; padding: 1.5rem 0; }
#los-hub .los-club-benefits { list-style: none; display: flex !important; flex-wrap: wrap; justify-content: center; gap: .6rem 1.4rem; margin: 0 0 1.5rem; padding: 0; }
#los-hub .los-club-benefits li { font-weight: 700; opacity: .9; }
#los-hub .los-club-benefits li::before { content: '★ '; color: #F6D67A; }

/* ---------------- Discord ---------------- */
#los-hub .los-discord { text-align: center; padding: 1rem 0 2rem; }
#los-hub .los-discord-widget-frame { max-width: 500px; margin: 0 auto 1rem; border-radius: 12px; overflow: hidden; }
#los-hub .los-discord-widget-frame iframe { width: 100% !important; max-width: none !important; }
#los-hub .los-discord-tip { font-size: .85rem; opacity: .65; margin-bottom: 1rem; }

/* ---------------- Newsletter block ---------------- */
#los-hub .los-newsletter-card { display: flex !important; flex-direction: column !important; gap: .4rem; background: var(--los-accent, #FDF9D8); border: 2px solid var(--los-primary, #841617); border-radius: 14px; padding: 1.5rem; }
#los-hub .los-newsletter-title { font-weight: 900; font-size: 1.2rem; color: var(--los-primary, #841617); }
#los-hub .los-newsletter-excerpt { opacity: .8; }

@container los-hub (max-width: 560px) {
	#los-hub .los-club-join { margin-left: 0; width: 100%; justify-content: center; }
}