/* SK Ad Manager — front end */

/* Banner slots */
.ska-slot {
	--ska-gutter: 20px;
	position: relative;
	max-width: 1220px;
	margin: 8px auto;
	padding: 0 var(--ska-gutter);
	text-align: center;
}
/* Dividers above the first and below the last ad of every stack (same line as the theme's section dividers). */
.ska-slot { padding-top: 12px; padding-bottom: 12px; }
.ska-slot::before,
.ska-slot::after {
	content: "";
	position: absolute;
	left: var(--ska-gutter);
	right: var(--ska-gutter);
	border-top: 1px solid var(--sk-line, #dfe3ea);
}
.ska-slot::before { top: 0; }
.ska-slot::after { bottom: 0; }
.ska-slot__label {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: .04em;
	color: #8e99ab;
}
/* Several ads in one spot: vertical stack, subtle line between ads. */
.ska-slot__stack { display: flex; flex-direction: column; align-items: stretch; }
.ska-slot__item { width: 100%; }
.ska-slot__item + .ska-slot__item {
	margin-top: 12px;
	padding-top: 12px;
	/* Same divider as the theme's homepage sections (follows light/dark mode). */
	border-top: 1px solid var(--sk-line, #dfe3ea);
}
.ska-slot__link { display: block; }
/* Banners: never wider than the content column (1180px); smaller images keep their exact size. */
.ska-slot__img {
	display: block;
	width: auto;
	max-width: min(100%, var(--ska-w, 100%));
	height: auto;
	margin: 0 auto;
	border-radius: 6px;
}
@media (max-width: 768px) {
	.ska-slot { --ska-gutter: 16px; margin: 6px auto; }
	.ska-slot { padding-top: 10px; padding-bottom: 10px; }
	.ska-slot__item + .ska-slot__item { margin-top: 10px; padding-top: 10px; }
	.ska-device--desktop { display: none !important; }
}
@media (min-width: 769px) {
	.ska-device--mobile { display: none !important; }
}

/* Road block / Content block — white full-screen takeover */
html.ska-lock,
html.ska-lock body { overflow: hidden !important; }

.ska-tk {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: none;
	flex-direction: column;
	background: #fff;
	color: #1d2433;
	color-scheme: light;
	padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.ska-tk.is-on { display: flex; }
.ska-tk:focus { outline: none; }
.ska-tk.is-closing { opacity: 0; transition: opacity .25s; }

.ska-tk__top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid #eef2f7;
}
.ska-tk__logo { display: block; height: 48px; width: auto; max-width: 60vw; object-fit: contain; }
.ska-tk__site { font-size: 22px; }
.ska-tk__actions { display: inline-flex; align-items: center; gap: 10px; }
.ska-tk__timer {
	color: #64748b; /* slate-500 */
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: .03em;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* Small ghost button: no outline, tinted fill on hover. */
.ska-tk__skip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #e31e26;
	font: inherit;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s;
}
.ska-tk__skip:hover { background: rgba(227, 30, 38, .1); }
.ska-tk__skip:active { background: rgba(227, 30, 38, .16); }
.ska-tk__skip:focus-visible { outline: 2px solid rgba(227, 30, 38, .4); outline-offset: 1px; }

.ska-tk__body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px 20px;
}
.ska-tk__label { font-size: 11px; letter-spacing: .04em; color: #8e99ab; }
/* Stage = toolbar + current ad; shrinks to the image width so the toolbar lines up with it. */
.ska-tk__stage { display: flex; flex-direction: column; gap: 8px; width: fit-content; max-width: min(100%, 960px); }
.ska-tk__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 260px; }
.ska-tk__panel { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.ska-tk__panel[hidden] { display: none; }
.ska-tk__link { display: block; max-width: 100%; }
/* Takeovers: at most 960px wide and 70% of the screen tall; smaller images keep their exact size. */
.ska-tk__img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, 960px, var(--ska-w, 960px));
	max-height: 70vh;
	max-height: min(70dvh, calc(100dvh - 200px));
	object-fit: contain;
	border-radius: 8px;
	margin: 0 auto;
}

.ska-tk__bottom { padding: 0 20px 18px; text-align: center; }
.ska-tk__bar { height: 4px; max-width: 420px; margin: 0 auto; background: #eef2f7; border-radius: 4px; overflow: hidden; }
.ska-tk__bar span {
	display: block;
	height: 100%;
	background: #e31e26;
	transform-origin: left;
	animation: ska-bar linear forwards;
}
@keyframes ska-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 640px) {
	.ska-tk__top { padding: 10px 14px; }
	.ska-tk__logo { height: 38px; }
	.ska-tk__toolbar { min-width: 0; }
	.ska-tk__timer { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.ska-tk__bar span { animation: none; }
}

/* Article sidebar: no outer dividers (the sidebar has its own rhythm), square ads up to the column width. */
.ska-slot--pos-side { padding: 0 !important; margin: 0 0 12px; max-width: none; }
.ska-slot--pos-side::before, .ska-slot--pos-side::after { display: none; }
.ska-slot--pos-side .ska-slot__label { text-align: left; }
/* Square ads (250 × 250) fill the sidebar column (300 px; 280 px on mid-size screens), keeping their proportions.
   Larger uploads are capped at the column width; on phones (sidebar below the article) at 300 px. */
.ska-slot--pos-side .ska-slot__img {
	width: 100%;
	max-width: min(100%, 300px);
	height: auto;
	margin: 0 auto;
}
/* Tall ads (250 × 600 and similar) are shown whole at their own size, never stretched or cropped:
   at most 600 px tall (a 2× upload such as 500 × 1200 shows as 250 × 600) and never wider than the column. */
.ska-slot--pos-side .ska-slot__img.ska-tall {
	width: auto;
	height: auto;
	max-width: min(100%, var(--ska-w, 100%));
	max-height: 600px;
	object-fit: contain;
}