/* VAID Content Ads Manager */

.vcad{
	display:block;
	margin:26px auto;
	max-width:100%;
	text-align:center;
	clear:both;
}
.vcad__label{
	display:block;
	margin:0 0 6px;
	font-size:11px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:#7a8ca6;
}
.vcad__link{
	display:block;
	width:100%;
	max-width:var(--vcad-w, 100%);
	margin:0 auto;
	line-height:0;
	text-decoration:none;
	border:0;
}
.vcad__link:focus-visible{
	outline:3px solid #0b2c5c;
	outline-offset:3px;
}
.vcad__pic{display:block;max-width:100%}
.vcad__img{
	display:block;
	width:100%;
	max-width:100%;
	height:auto;
	margin:0 auto;
	aspect-ratio:var(--vcad-ratio, auto);
}

@media (min-width:768px){
	.vcad__link{max-width:var(--vcad-w-d, var(--vcad-w, 100%))}
	.vcad__img{aspect-ratio:var(--vcad-ratio-d, var(--vcad-ratio, auto))}
}
.vcad--desktop-only{display:block}
.vcad--mobile-only{display:block}

@media (max-width:767px){
	.vcad--desktop-only{display:none !important}
	.vcad{margin:20px auto}
}
@media (min-width:768px){
	.vcad--mobile-only{display:none !important}
}
@media (min-width:768px) and (max-width:1023px){
	.vcad--no-tablet{display:none !important}
}

/* #content is a flex row in GeneratePress, so Slot A sits above it rather than
   inside it: a full-width block between the header and the page container,
   centred to the same 1200px measure. */
/* Shared centring system. The shell spans its parent, the rail is the centred
   content measure and the unit is exactly as wide as the creative, so the label
   always sits over the image.

   v1.1.1 fix: the previous rule set margin-left/right to auto and then the very
   next rule reset them with a margin shorthand, so a 1200px block sat flush
   against the left edge of the viewport while the page container was centred.
   Side margins are now written longhand and never touched by a shorthand.

   --vcad-rail-w and --vcad-shift are refined at runtime from the real rendered
   content rail, because one PYQ view renders a wrapper wider than the theme
   container and is therefore not centred on the viewport. Both default to the
   theme measure, so the no-JavaScript result is still correct everywhere else,
   and the shift is a transform, so it can never move anything vertically. */
.vcad-wrap{
	display:block;
	clear:both;
	float:none;
	width:100%;
	max-width:100%;
	box-sizing:border-box;
}
.vcad-wrap--a,
.vcad-wrap--f{
	box-sizing:border-box;
	width:min(var(--vcad-rail-w, 1200px), 100%);
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	padding-left:20px;
	padding-right:20px;
	transform:translateX(var(--vcad-shift, 0px));
}
.vcad-wrap--a{margin-top:0;margin-bottom:10px}
.vcad-wrap--f{margin-top:10px;margin-bottom:0}
.vcad-wrap--e,
.vcad-wrap--mid{margin:22px 0;grid-column:1 / -1}

/* Blog Top is inserted inside the article body, so it inherits the reading
   column and needs no rail of its own. */
.vcad--blog-top{margin:20px auto 26px}
@media (max-width:767px){
	.vcad--blog-top{margin:16px auto 20px}
}

/* Admin preview only. Never printed for public visitors. */
.vcad--preview{
	outline:2px dashed #c0392b;
	outline-offset:4px;
}
.vcad__previewtag{
	display:block;
	margin-top:6px;
	font-size:11px;
	color:#c0392b;
}
.vcad-marker{
	max-width:1200px;
	margin:10px auto;
	padding:8px 12px;
	border:1px dashed #0b2c5c;
	border-radius:8px;
	background:#f4f8ff;
	font-size:12px;
	color:#0b2c5c;
}
.vcad-bar{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:99999;
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	padding:8px 14px;
	background:#0b2c5c;
	color:#fff;
	font:12px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.vcad-bar__t{font-weight:800;letter-spacing:.04em}
.vcad-bar__i b{opacity:.65;font-weight:600;margin-right:4px}