/* ==========================================================================
   MP247 Tennis Liveblog — Frontend styles
   Uses the mp247-tennis design tokens (declared in mp247-tennis.css):
     --mp247-color-primary   #231F20  (near-black)
     --mp247-color-secondary #DDF912  (brand lime)
     --mp247-color-live      #EF4444
     --mp247-font-title      'Geologica'
     --mp247-font-main       'Notos Sans'
   ========================================================================== */

.mp247-tlb-section {
	padding: 24px 0 64px;
	font-family: var(--mp247-font-main, system-ui, sans-serif);
	color: var(--mp247-color-primary, #231F20);
}

/* ---------------- Post header ---------------- */
.mp247-tlb-post-header {
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--mp247-color-stroke, #D9D9D9);
}
.mp247-tlb-post-title {
	font-family: var(--font-title, var(--mp247-font-main));
	font-size: 20px;
	line-height: 1.15;
	color: rgba(255, 255, 255, 0.7);
	display: block;
	text-align: center;
	margin: 0 0 19px;
}
.mp247-tlb-post-excerpt {
	color: var(--mp247-color-gray-dark, #374151);
	font-size: 1.05rem;
	margin: 0;
	max-width: 70ch;
}

/* ---------------- Highlights strip ---------------- */
.mp247-tlb-highlights {
	margin: 22px 0 8px;
	padding: 18px;
	background: var(--mp247-color-primary, #231F20);
	border-radius: var(--mp247-radius-lg, 12px);
	color: #fff;
}
.mp247-tlb-highlights__title {
	font-family: var(--mp247-font-title, inherit);
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	display: inline-flex;
	gap: 8px;
	align-items: center;
}
.mp247-tlb-highlights__title::before {
	content: "";
	display: inline-block;
	width: 6px; height: 6px;
	background: var(--mp247-color-secondary, #DDF912);
	border-radius: 50%;
}
.mp247-tlb-highlights__strip {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 6px;
}
.mp247-tlb-highlights__strip::-webkit-scrollbar { height: 6px; }
.mp247-tlb-highlights__strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }

.mp247-tlb-highlight {
	flex: 0 0 300px;
	scroll-snap-align: start;
	display: flex;
	gap: 10px;
	padding: 14px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--mp247-radius-md, 8px);
	text-decoration: none;
	color: #fff;
	font-size: 0.9rem;
	line-height: 1.45;
	transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.mp247-tlb-highlight:hover {
	background: rgba(255,255,255,0.1);
	border-color: var(--mp247-color-secondary, #DDF912);
	transform: translateY(-2px);
}
.mp247-tlb-highlight .dashicons {
	color: var(--mp247-color-secondary, #DDF912);
	font-size: 18px;
	width: 18px; height: 18px;
	flex-shrink: 0;
	margin-top: 1px;
}

/* ---------------- Tabs ---------------- */
.mp247-tlb-tabs__nav {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	position: relative;
}

.mp247-tlb-tabs__nav:before {
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	height: 5px;
	background: #000;
	bottom: 0;
}

.mp247-tlb-tabs__nav::-webkit-scrollbar { display: none; }

.mp247-tlb-tabs__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 0;
	padding: 14px 18px;
	font-family: var(--mp247-font-title, inherit);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--mp247-color-gray-dark, #374151);
	cursor: pointer;
	border-bottom: 5px solid transparent;
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease;
	position: relative;
}
.mp247-tlb-tabs__btn:hover {
	color: var(--mp247-color-primary, #231F20);
}
.mp247-tlb-tabs__btn.is-active {
	color: var(--mp247-color-primary, #231F20);
	border-bottom-color: var(--mp247-color-secondary, #DDF912);
}
.mp247-tlb-tabs__btn .mp247-live-indicator { margin-right: 2px; }

.mp247-tlb-tabs__panel {
	display: none;
	padding: 22px 0;
}
.mp247-tlb-tabs__panel.is-active {
	display: block;
	animation: mp247-tlb-fade-in .25s ease;
}
@keyframes mp247-tlb-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* Pulse indicator (shared) */
.mp247-live-indicator {
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--mp247-color-live, #EF4444);
	box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
	animation: mp247-tlb-pulse 1.5s ease-in-out infinite;
}
@keyframes mp247-tlb-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
	70%  { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
	100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

.mp247-tlb-empty {
	text-align: center;
	color: var(--mp247-color-gray, #A8A8A8);
	padding: 60px 0;
	font-style: italic;
	font-size: 1rem;
}

/* ---------------- Timeline ---------------- */
.mp247-tlb-timeline {
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
}

.mp247-tlb-timeline__empty {
	text-align: center;
	color: var(--mp247-color-gray, #A8A8A8);
	font-style: italic;
	padding: 60px 0;
}

/* Outer block: positioning only — never carries the card chrome, so that
   action-only blocks stay edge-to-edge with no extra white box around them. */
.mp247-tlb-block {
	position: relative;
	transition: transform .15s ease;
}

/* Inner card: the white surface for textual content / attachments / byline. */
.mp247-tlb-block__card {
	background: #fff;
	border: 1px solid var(--mp247-color-stroke, #D9D9D9);
	border-radius: var(--mp247-radius-lg, 12px);
	padding: 16px 18px 14px;
	box-shadow: var(--mp247-shadow-sm, 0 1px 2px 0 rgba(0,0,0,0.05));
	transition: background-color .5s ease, box-shadow .2s ease, border-color .2s ease;
}
.mp247-tlb-block:hover .mp247-tlb-block__card {
	box-shadow: var(--mp247-shadow-md, 0 4px 6px -1px rgba(0,0,0,0.08));
}

/* Action visual sits flush with the card below when both are present. */
.mp247-tlb-block.has-action .mp247-tlb-block__action-wrap + .mp247-tlb-block__card {
	margin-top: 8px;
}
.mp247-tlb-block.has-action .mp247-tlb-block__card { padding-top: 12px; }

/* Action wrapper — relative-positioned so the time pill can sit on it. */
.mp247-tlb-block__action-wrap {
	position: relative;
}
.mp247-tlb-block__action-time {
	position: absolute;
	top: 8px;
	right: 10px;
	background: rgba(0,0,0,0.45);
	color: #fff;
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	padding: 2px 8px;
	border-radius: 999px;
	letter-spacing: 0.02em;
	pointer-events: none;
}


/* Pinned + highlight visuals — chrome on the card, dot on the rail. */
.mp247-tlb-block.is-pinned .mp247-tlb-block__card {
	border-color: var(--mp247-color-secondary, #DDF912);
	background: linear-gradient(180deg, #fdffe8 0%, #fff 35%);
}
.mp247-tlb-block.is-pinned::before {
	background: var(--mp247-color-secondary, #DDF912);
	border-color: var(--mp247-color-primary, #231F20);
}
.mp247-tlb-block.is-highlight::before {
	background: var(--mp247-color-success, #10B981);
	border-color: #fff;
	box-shadow: 0 0 0 2px var(--mp247-color-success, #10B981);
}

/* Polled freshness flash */
.mp247-tlb-block.is-new .mp247-tlb-block__card {
	background: #fdffe8;
	border-color: var(--mp247-color-secondary, #DDF912);
}
.mp247-tlb-block.is-new { animation: mp247-tlb-block-in .35s ease; }
@keyframes mp247-tlb-block-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.mp247-tlb-block__pinned-flag {
	position: absolute;
	top: -10px;
	left: 16px;
	z-index: 2;
	background: var(--mp247-color-secondary, #DDF912);
	color: var(--mp247-color-primary, #231F20);
	font-size: 0.7rem;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mp247-tlb-block__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--mp247-color-stroke, #D9D9D9);
}
/* When no author was selected we still show the timestamp, but keep it
   subtle and skip the dashed divider so the block doesn't look broken. */
.mp247-tlb-block.is-anonymous .mp247-tlb-block__head {
	margin-bottom: 6px;
	padding-bottom: 0;
	border-bottom: 0;
}
.mp247-tlb-block.is-anonymous .mp247-tlb-block__byline {
	color: var(--mp247-color-gray, #A8A8A8);
}
.mp247-tlb-block__avatar {
	width: 34px; height: 34px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--mp247-color-stroke, #D9D9D9);
}
.mp247-tlb-block__byline {
	display: flex; flex-direction: column; gap: 1px;
}
.mp247-tlb-block__author {
	font-weight: 700;
	color: var(--mp247-color-primary, #231F20);
	font-size: 0.9rem;
	font-family: var(--mp247-font-title, inherit);
}
.mp247-tlb-block__time {
	color: var(--mp247-color-gray, #A8A8A8);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}

.mp247-tlb-block__content {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--mp247-color-primary, #231F20);
}
.mp247-tlb-block__content > *:first-child { margin-top: 0; }
.mp247-tlb-block__content > *:last-child  { margin-bottom: 0; }
.mp247-tlb-block__content p { margin-bottom: 1rem; }
.mp247-tlb-block__content p:last-child { margin-bottom: 0; }
.mp247-tlb-block__content a {
	color: var(--mp247-color-primary, #231F20);
	text-decoration: underline;
	text-decoration-color: var(--mp247-color-secondary, #DDF912);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}
.mp247-tlb-block__content blockquote {
	border-left: 4px solid var(--mp247-color-secondary, #DDF912);
	margin: 12px 0;
	padding: 4px 14px;
	color: var(--mp247-color-gray-dark, #374151);
	font-style: italic;
}

/* ---------------- Tennis-action visuals ---------------- */
.mp247-tlb-event {
}

/* Phase / set banners */
.mp247-tlb-event--badge {
	background: var(--mp247-color-primary, #231F20);
	color: #fff;
	border-radius: var(--mp247-radius-md, 8px);
	padding: 12px 16px;
	text-align: center;
	text-transform: uppercase;
	font-family: var(--mp247-font-title, inherit);
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	position: relative;
	overflow: hidden;
}
.mp247-tlb-event--badge p { margin: 0; font-weight: 500; }

/* Service notice */
.mp247-tlb-event--service {
	background: var(--mp247-color-gray-light, #F1F2F2);
	padding: 10px 14px;
	border-radius: var(--mp247-radius-md, 8px);
	font-size: 0.95rem;
}
.mp247-tlb-event--service .mp247-tlb-event__body {
	display: flex; align-items: center; gap: 8px;
}
.mp247-tlb-event__racket {
	color: var(--mp247-color-primary, #231F20);
	flex-shrink: 0;
}

/* Single-point row */
.mp247-tlb-event--point {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--mp247-color-gray-light, #F1F2F2);
	padding: 10px 14px;
	border-radius: var(--mp247-radius-md, 8px);
}
.mp247-tlb-event__snap {
	background: var(--mp247-color-primary, #231F20);
	color: var(--mp247-color-secondary, #DDF912);
	font-weight: 500;
	border-radius: var(--mp247-radius-sm, 4px);
	padding: 4px 10px;
	min-width: 44px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-family: var(--mp247-font-title, inherit);
}
.mp247-tlb-event__body {
	display: flex;
	gap: 10px;
}

.mp247-tlb-event__body strong { font-family: var(--mp247-font-title, inherit); }

.mp247-tlb-event--note {
	background: #f1f2f2;
	padding: 10px 14px;
	border-radius: var(--mp247-radius-md, 8px);
	font-size: 0.95rem;
}

/* Score blocks (game / set / final) */
.mp247-tlb-score {
	background: var(--mp247-color-primary, #231F20);
	color: #fff;
	border-radius: var(--mp247-radius-md, 8px);
	padding: 14px 18px;
	overflow: hidden;
	position: relative;
}
.mp247-tlb-score::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	border: 1px solid rgba(255,255,255,0.06);
}
.mp247-tlb-score--game  { background: linear-gradient(135deg, #2a2628 0%, #1a1718 100%); }
.mp247-tlb-score--set   { background: linear-gradient(135deg, #231F20 0%, #0f0d0e 100%); }
.mp247-tlb-score--final { background: linear-gradient(135deg, var(--mp247-color-primary, #231F20) 0%, #0a0a0a 100%); }
.mp247-tlb-score--final::before {
	content: "";
	position: absolute;
	inset: -50% -10% auto auto;
	width: 200px; height: 200px;
	background: radial-gradient(circle, var(--mp247-color-secondary, #DDF912) 0%, transparent 60%);
	opacity: 0.18;
	pointer-events: none;
}

.mp247-tlb-score__head {
	font-family: var(--mp247-font-title, inherit);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	opacity: 0.65;
	text-align: center;
	margin-bottom: 8px;
}
.mp247-tlb-score__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px;
	position: relative;
	z-index: 1;
}
.mp247-tlb-score__name {
	font-weight: 600;
	font-size: 0.95rem;
}
.mp247-tlb-score__name--home  { text-align: right; }
.mp247-tlb-score__name--away  { text-align: left; }
.mp247-tlb-score__value {
	font-family: var(--mp247-font-title, inherit);
	font-size: 1.6rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	background: rgba(255,255,255,0.08);
	padding: 6px 16px;
	border-radius: var(--mp247-radius-sm, 4px);
	color: var(--mp247-color-secondary, #DDF912);
	min-width: 80px;
	text-align: center;
}
.mp247-tlb-score--final .mp247-tlb-score__value {
	background: var(--mp247-color-secondary, #DDF912);
	color: var(--mp247-color-primary, #231F20);
}

/* ---------------- Inline-attachment placeholders ----------------
 * These are inserted by the admin editor (admin.js) and live inside
 * the block body (not a separate attachments array). The frontend
 * just styles them here; embeds are decoded server-side by
 * MP247_TLB_Frontend::process_block_content().
 * ---------------------------------------------------------------- */

/* ---- Article card ---- */
.mp247-tlb-block__content a.mp247-tlb-inline-article,
.mp247-tlb-block__content .mp247-tlb-inline-article {
	display: grid;
	grid-template-columns: 96px 1fr;
	grid-column-gap: 14px;
	align-items: center;
	background: var(--mp247-color-gray-light, #F1F2F2);
	border-radius: var(--mp247-radius-md, 8px);
	padding: 10px;
	text-decoration: none;
	color: var(--mp247-color-primary, #231F20);
	margin: 12px 0;
	transition: background-color .15s ease, transform .15s ease;
}
.mp247-tlb-block__content a.mp247-tlb-inline-article:hover {
	background: #e8e9ea;
	transform: translateX(2px);
	text-decoration: none;
}
.mp247-tlb-block__content .mp247-tlb-inline-article:not(:has(.mp247-tlb-inline-article__thumb)) {
	grid-template-columns: 1fr;
}
.mp247-tlb-block__content .mp247-tlb-inline-article__thumb {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--mp247-radius-sm, 4px);
	grid-row: span 2;
}
.mp247-tlb-block__content .mp247-tlb-inline-article__cat {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mp247-color-live, #EF4444);
	align-self: end;
}
.mp247-tlb-block__content .mp247-tlb-inline-article__title {
	font-family: var(--mp247-font-title, inherit);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.35;
	align-self: start;
	color: var(--mp247-color-primary, #231F20);
}

/* ---- Image ---- */
.mp247-tlb-block__content .mp247-tlb-inline-image {
	margin: 12px 0;
}
.mp247-tlb-block__content .mp247-tlb-inline-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--mp247-radius-md, 8px);
}

/* ---- Embed (decoded server-side into raw markup) ---- */
.mp247-tlb-block__content .mp247-tlb-inline-embed {
	margin: 12px 0;
	max-width: 100%;
}
.mp247-tlb-block__content .mp247-tlb-inline-embed iframe,
.mp247-tlb-block__content .mp247-tlb-inline-embed video {
	max-width: 100%;
	display: block;
	border-radius: var(--mp247-radius-md, 8px);
}
/* Responsive YouTube wrapper */
.mp247-tlb-block__content .mp247-tlb-inline-embed.is-yt {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--mp247-radius-md, 8px);
}
.mp247-tlb-block__content .mp247-tlb-inline-embed.is-yt iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--mp247-radius-md, 8px);
}

/* Glomex and other script-driven players (module + custom element) */
.mp247-tlb-block__content .mp247-tlb-inline-embed.is-custom-embed {
	min-height: 280px;
	width: 100%;
	border-radius: var(--mp247-radius-md, 8px);
	overflow: hidden;
}
.mp247-tlb-block__content .mp247-tlb-inline-embed.is-custom-embed glomex-integration {
	display: block;
	width: 100%;
	min-height: 280px;
}

/* ---------------- Legacy attachments[] (backwards compat) ---------------- */
.mp247-tlb-block__attachments {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}
.mp247-tlb-attach--article {
	display: flex;
	gap: 14px;
	background: var(--mp247-color-gray-light, #F1F2F2);
	border-radius: var(--mp247-radius-md, 8px);
	padding: 10px;
	text-decoration: none;
	color: var(--mp247-color-primary, #231F20);
	transition: background-color .15s ease, transform .15s ease;
}
.mp247-tlb-attach--article:hover {
	background: #e8e9ea;
	transform: translateX(2px);
}
.mp247-tlb-attach--article img {
	width: 84px; height: 84px;
	object-fit: cover;
	border-radius: var(--mp247-radius-sm, 4px);
	flex: 0 0 84px;
}
.mp247-tlb-attach__meta {
	display: flex; flex-direction: column; gap: 4px; min-width: 0; align-self: center;
}
.mp247-tlb-attach__cat {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mp247-color-live, #EF4444);
}
.mp247-tlb-attach__title {
	font-family: var(--mp247-font-title, inherit);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.35;
}

.mp247-tlb-attach--image img,
.mp247-tlb-attach--video iframe {
	max-width: 100%;
	height: auto;
	border-radius: var(--mp247-radius-md, 8px);
	display: block;
}

/* Match header inside the liveblog */
.mp247-tlb-match-header {
	margin: 18px 0 0;
}

.mp247-match-header__wrapper {
	justify-content: center;
}

span.mp247-match-header__date:before {
	content: "•";
	margin-left: 0.5rem;
}