/* =============================================================
   DNB Twitch Widget — exact Figma "Up Next On Twitch" values
   ============================================================= */

.dnb-twitch-widget {
	font-family: 'Roboto Condensed', sans-serif;
}

/* ── Heading ─────────────────────────────────────────────────
   Figma: font-size 36px, color #ffff02, letter-spacing -1.8px,
   text-shadow 0 4px 0 rgba(0,0,0,0.15), font-weight 400
   ─────────────────────────────────────────────────────────── */
.dnb-twitch-widget__heading {
	font-family: 'Roboto Condensed', sans-serif !important;
	font-size: 36px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: #ffff02 !important;
	letter-spacing: -1.8px !important;
	text-shadow: 0 4px 0 rgba(0, 0, 0, 0.15) !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
}

/* ── Divider (sep-header.svg) ────────────────────────────────
   Full-width, ~2px tall, white at ~7% opacity (matches SVG)
   ─────────────────────────────────────────────────────────── */
.dnb-twitch-widget__divider {
	display: block;
	width: 100%;
	margin: 0 0 16px !important;
	line-height: 0;
	font-size: 0;
}

.dnb-twitch-widget__divider img {
	display: block;
	width: 100%;
	height: 2px;
}

/* ── Each show item ──────────────────────────────────────────
   Figma: first item starts ~104px below heading top.
   Heading is 36px + 20px margin = 56px, divider 2px + 16px margin = 18px.
   Item itself has no extra top padding needed.
   ─────────────────────────────────────────────────────────── */
.dnb-twitch-widget__item {
	margin-bottom: 0;
}

/* ── "Tonight" / "Tomorrow" / date label ─────────────────────
   Figma: font-size 30px, color #ffff02, letter-spacing -1.5px,
   text-shadow 0 4px 0 rgba(0,0,0,0.15), font-weight 400
   "Tomorrow" top: 1041px, first item image top: 860px
   Gap between items: ~35px above label
   ─────────────────────────────────────────────────────────── */
.dnb-twitch-widget__when {
	font-family: 'Roboto Condensed', sans-serif !important;
	font-size: 30px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: #ffff02 !important;
	letter-spacing: -1.5px !important;
	text-shadow: 0 4px 0 rgba(0, 0, 0, 0.15) !important;
	margin: 32px 0 12px !important;
	padding: 0 !important;
}

/* First item's "when" label has no top margin */
.dnb-twitch-widget__item:first-child .dnb-twitch-widget__when,
.dnb-twitch-widget__item:first-of-type .dnb-twitch-widget__when {
	margin-top: 0 !important;
}

/* ── Row: image left, info right ─────────────────────────────
   Figma: image 148×148, gap between image right edge and text
   left edge ≈ 1062 - (893+152) = 17px
   ─────────────────────────────────────────────────────────── */
.dnb-twitch-widget__row {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 17px !important;
	margin-bottom: 16px;
}

/* ── Thumbnail ───────────────────────────────────────────────
   Figma: Layer 29 = 148×148 hard crop
   ─────────────────────────────────────────────────────────── */
.dnb-twitch-widget__thumb {
	flex: 0 0 148px !important;
	width: 148px !important;
	height: 148px !important;
	overflow: hidden;
}

.dnb-twitch-widget__thumb img {
	display: block !important;
	width: 148px !important;
	height: 148px !important;
	object-fit: cover !important;
}

/* Placeholder when no CPT image assigned */
.dnb-twitch-widget__thumb-placeholder {
	width: 148px;
	height: 148px;
	background-color: #1a1a1a;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dnb-twitch-widget__thumb-placeholder::after {
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444'%3E%3Cpath d='M21 3H3v18h18V3zm-2 16H5V5h14v14zm-5-7l-4 3V9l4 3z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.4;
}

/* ── Info column ─────────────────────────────────────────────
   Figma: text starts at left: 1062px (image right = 893+152=1045, gap=17)
   ─────────────────────────────────────────────────────────── */
.dnb-twitch-widget__info {
	flex: 1 !important;
	min-width: 0;
	padding-top: 0;
}

/* ── Show title ──────────────────────────────────────────────
   Figma: font-size 18px, color #fff, letter-spacing -0.9px,
   font-weight 400, top offset from image top ≈ 26px
   ─────────────────────────────────────────────────────────── */
.dnb-twitch-widget__show-title {
	font-family: 'Roboto Condensed', sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 18px !important;
	color: #ffffff !important;
	letter-spacing: -0.9px !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
}

/* ── Blurb ───────────────────────────────────────────────────
   Figma: font-size 14px, color #9f9f9f, italic,
   letter-spacing -0.7px, line-height 16.8px
   ─────────────────────────────────────────────────────────── */
.dnb-twitch-widget__blurb {
	font-family: 'Roboto Condensed', sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	font-style: italic !important;
	line-height: 16.8px !important;
	color: #9f9f9f !important;
	letter-spacing: -0.7px !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
}

/* ── Time / channel line ─────────────────────────────────────
   Same as blurb styling
   ─────────────────────────────────────────────────────────── */
.dnb-twitch-widget__time {
	font-family: 'Roboto Condensed', sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	font-style: italic !important;
	line-height: 16.8px !important;
	color: #9f9f9f !important;
	letter-spacing: -0.7px !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ── Twitch channel link ─────────────────────────────────────
   Figma: color #ffff01 (slightly different from heading #ffff02)
   ─────────────────────────────────────────────────────────── */
.dnb-twitch-widget__link {
	color: #ffff01 !important;
	text-decoration: none !important;
	font-style: italic;
}

.dnb-twitch-widget__link:hover {
	text-decoration: underline !important;
}