/**
 * NX Sports Liveblog – Frontend Styles
 *
 * @package NX_Sports_Liveblog
 */

/* ============================================================
 *  Container (inherits theme layout when inside single template)
 * ============================================================*/

.nx-liveblog {
	font-family: inherit;
}

/* ============================================================
 *  Inline Article Cards (inserted from editor)
 * ============================================================*/

.nx-liveblog-inline-article {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	overflow: hidden;
	margin: 12px 0;
	background: #fff;
}

.nx-liveblog-inline-article a {
	text-decoration: none;
	color: inherit;
}

.nx-liveblog-inline-article-inner {
	display: flex;
	gap: 14px;
	padding: 12px;
}

.nx-liveblog-inline-article-thumb {
	flex-shrink: 0;
	width: 140px;
}

.nx-liveblog-inline-article-thumb img {
	width: 140px;
	height: 95px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.nx-liveblog-inline-article-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.nx-liveblog-inline-article-info strong {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #1a1a2e;
}

.nx-liveblog-inline-article-excerpt {
	font-size: 13px;
	color: #555;
	line-height: 1.4;
}

.nx-liveblog-inline-article-date {
	font-size: 12px;
	color: #999;
}

.nx-liveblog-inline-embed {
	margin: 12px 0;
	overflow: hidden;
}

.nx-liveblog-inline-embed iframe {
	max-width: 100%;
}

.nx-liveblog-inline-image {
	margin: 12px 0;
}

.nx-liveblog-inline-image img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}

.nx-liveblog-inline-widget-label {
	display: none;
}

.nx-liveblog-inline-widget-data {
	display: block !important;
}

/* ============================================================
 *  Highlights Carousel
 * ============================================================*/

.nx-liveblog__highlights {
	position: relative;
	margin-bottom: 32px;
	background: #fff;
	border-radius: 0 0 8px 8px;

	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	overflow: hidden;
	padding-bottom: 50px;
}

.nx-liveblog__highlights-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 0;
}

.nx-liveblog__highlights-track::-webkit-scrollbar {
	display: none;
}

.nx-liveblog__highlight-slide {
	flex: 0 0 25%;
	min-width: 220px;
	scroll-snap-align: start;
	padding: 16px;
	border-right: 1px solid #f0f0f0;
	box-sizing: border-box;
}

.nx-liveblog__highlight-slide:last-child {
	border-right: none;
}

.nx-liveblog__highlight-content {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: #e74c3c;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Carousel Navigation */
.nx-liveblog__highlights-prev,
.nx-liveblog__highlights-next {
	position: absolute;
	top: unset;
	bottom: 0;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 50%;
	font-size: 20px;
	line-height: 34px;
	text-align: center;
	cursor: pointer;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: all 0.15s;
	color: #333;
	padding: 0;
}

.nx-liveblog__highlights-prev:hover,
.nx-liveblog__highlights-next:hover {
	background: #f0f0f0;
	border-color: #bbb;
}

.nx-liveblog__highlights-prev {
	left: 8px;
}

.nx-liveblog__highlights-next {
	right: 8px;
}

/* Progress dots at top */
.nx-liveblog__highlights::before {
	content: '';
	display: block;
	height: 4px;
	background: linear-gradient(to right, #e74c3c 0%, #f39c12 100%);
}

/* ============================================================
 *  Timeline
 * ============================================================*/

.nx-liveblog__timeline {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Pinned blocks always appear at top */
.nx-liveblog__block--pinned {
	order: -1;
}

/* ============================================================
 *  Block (Timeline Entry)
 * ============================================================*/

.nx-liveblog__block {
	display: flex;
	margin-bottom: 12px;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
	border: 1px solid #e8e8e8;
	transition: box-shadow 0.15s;
}

.nx-liveblog__block:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Accent bar */
.nx-liveblog__block-accent {
	width: 5px;
	flex-shrink: 0;
	background: transparent;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.nx-liveblog__block--highlight .nx-liveblog__block-accent {
	background: var(--sportal-primary-dark);
}

.nx-liveblog__block--pinned .nx-liveblog__block-accent {
	background: var(--sportal-primary-dark);
}

.nx-liveblog__block-inner {
	flex: 1;
	padding: 16px;
	min-width: 0;
	position: relative;
}

.nx-liveblog__block--highlight {
	background: #FFEDE6;
}

.nx-liveblog__block.nx-liveblog__block--pinned
{
	overflow: unset;
	position: relative;
}


/* Correspondent */
.nx-liveblog__block-correspondent {
	margin-bottom: 10px;
}

.nx-liveblog__block-correspondent-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none !important;
	color: inherit;
	transition: opacity 0.15s;
}

.nx-liveblog__block-correspondent-link:hover {
	opacity: 0.8;
}

.nx-liveblog__block-correspondent-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.nx-liveblog-inline-embed {
	position: relative;
	display: block;
	height: 0;
	overflow: hidden;
	padding-top: 56.5%;
}

.nx-liveblog-inline-embed iframe {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.nx-liveblog__block-correspondent-name {
	font-size: 16px;
	font-weight: 600;
	color: #f73d1b;
}

/* Sport tag & event type */
.nx-liveblog__block-sport-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #e74c3c;
	margin-bottom: 4px;
	margin-right: 8px;
}

.nx-liveblog__block-event-type {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 8px;
	border-radius: 3px;
	margin-bottom: 8px;
	background: #f0f0f0;
	color: #555;
}

/* Football event type colors */
.nx-liveblog__block-event-type--goal {
	background: #27ae60;
	color: #fff;
}

.nx-liveblog__block-event-type--penalty {
	background: #e74c3c;
	color: #fff;
}

.nx-liveblog__block-event-type--own_goal {
	background: #c0392b;
	color: #fff;
}

.nx-liveblog__block-event-type--yellow_card {
	background: #f1c40f;
	color: #333;
}

.nx-liveblog__block-event-type--red_card {
	background: #e74c3c;
	color: #fff;
}

.nx-liveblog__block-event-type--kickoff,
.nx-liveblog__block-event-type--half_time,
.nx-liveblog__block-event-type--second_half,
.nx-liveblog__block-event-type--end_of_match {
	background: #1a1a2e;
	color: #fff;
}

.nx-liveblog__block-event-type--substitution {
	background: #3498db;
	color: #fff;
}

.nx-liveblog__block-event-type--var_review {
	background: #9b59b6;
	color: #fff;
}

.nx-liveblog__block-event-type--injury {
	background: #e67e22;
	color: #fff;
}

/* Basketball event type colors */
.nx-liveblog__block-event-type--three_pointer,
.nx-liveblog__block-event-type--slam_dunk {
	background: #e74c3c;
	color: #fff;
}

.nx-liveblog__block-event-type--foul,
.nx-liveblog__block-event-type--technical_foul {
	background: #f39c12;
	color: #fff;
}

.nx-liveblog__block-event-type--tip_off,
.nx-liveblog__block-event-type--end_of_quarter,
.nx-liveblog__block-event-type--halftime,
.nx-liveblog__block-event-type--end_of_game {
	background: #1a1a2e;
	color: #fff;
}

.nx-liveblog__block-event-type--timeout {
	background: #3498db;
	color: #fff;
}

.nx-liveblog__block-event-type--overtime {
	background: #9b59b6;
	color: #fff;
}

/* Entities */
.nx-liveblog__block-entities {
	display: flex;
	gap: 12px;
	margin-top: 10px;
}

.nx-liveblog__block-team,
.nx-liveblog__block-player {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #555;
}

.nx-liveblog__block-player {
	border-radius: 30px;
	background: #f5f0f3;
	border: 1px solid #e4d7df;
	padding-right: 11px;
	padding-left: 11px;
}

.nx-liveblog__block-team img,
.nx-liveblog__block-player img {
	border-radius: 50%;
}

/* Content */
.nx-liveblog__block-content {
	font-size: 15px;
	line-height: 20px;
	color: #222;
	word-wrap: break-word;
}

.nx-liveblog__block-content p {
	line-height: 26px !important;
	font-size: 16px !important;
}

.nx-liveblog__block-content p {
	margin: 0 36px 8px 0;
}

.nx-liveblog__block-content p:last-child {
	margin-bottom: 0;
}

/* Attachments */
.nx-liveblog__block-attachments {
	margin-top: 12px;
}

.nx-liveblog__attachment {
	margin-bottom: 12px;
}

.nx-liveblog__attachment:last-child {
	margin-bottom: 0;
}

.nx-liveblog__attachment--article {
	border: 1px solid #eee;
	border-radius: 6px;
	overflow: hidden;
}

.nx-liveblog__attachment--article .card {
	margin: 0;
	box-shadow: none;
}

.nx-liveblog__attachment--embed {
	overflow: hidden;
	border-radius: 4px;
}

.nx-liveblog__attachment--embed iframe {
	max-width: 100%;
}

.nx-liveblog__attachment--image img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.nx-liveblog__attachment--widget {
	margin-top: 8px;
}

/* Meta */
.nx-liveblog__block-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid #f0f0f0;
	font-size: 12px;
	color: #888;
}

.nx-liveblog__block-author {
	font-weight: 600;
	color: #555;
}

.nx-liveblog__block-time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #999;
}

.nx-liveblog__block-time .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

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

@media (max-width: 768px) {
	.nx-liveblog__header {
		flex-direction: column;
		text-align: center;
	}

	.nx-liveblog__header-image img {
		width: 100%;
		height: auto;
		max-width: 200px;
	}

	.nx-liveblog__title {
		font-size: 20px;
	}

	.nx-liveblog__highlight-slide {
		flex: 0 0 65%;
		min-width: 200px;
	}

	.nx-liveblog__block-inner {
		padding: 12px 14px;
	}
}

@media (max-width: 480px) {
	.nx-liveblog__highlight-slide {
		flex: 0 0 65%;
	}

	.nx-liveblog__block-content {
		font-size: 14px;
	}
}

.nx-liveblog__block.nx-liveblog__block--pinned:before {
	content: "";
	position: absolute;
	top: -10px;
	right: -3px;
	width: 24px;
	height: 24px;
	background-image: url(/wp-content/themes/nx-theme-child/assets/images/pin-icon.png);
	background-repeat: no-repeat;
	background-size: 100%;
}

.nx-liveblog__block-teams {
	position: absolute;
	right: 13px;
	top: 12px;
}