/* =========================================================
   WorldofPC — site-wide layout tweaks
   ========================================================= */

/* Box the header menu bar to the 1180px site width so it aligns
   with the homepage slider and the main content area instead of
   stretching edge-to-edge. (.main-menu carries the bar's
   background colour from the theme options.)
   `header .main-menu` (0,1,1) beats the parent `.main-menu` (0,1,0). */
header .main-menu {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* When the bar becomes the fixed "sticky" header on scroll the parent
   theme forces `position:fixed; width:100%; left:0` via
   `header .stickytop`. Re-box it to 1180px and centre the fixed element.
   `header .stickytop.main-menu` (0,2,1) wins over `header .stickytop`. */
header .stickytop.main-menu {
	width: 100%;
	max-width: 1180px;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	box-sizing: border-box;
}

/* Header: hide the social icons but keep the search button (.search) */
.top-social li:not(.search) { display: none !important; }

/* =========================================================
   Card style — applied to every .modern-articles listing
   (homepage New Games + category showcases, and all archive /
   category / tag / search pages via index.php).
   Only the IMAGE is a rounded tile; the title + views sit
   transparently on the page background below it.
   The homepage-only 4-up grid (zoom/centring) lives in home-layout.css.
   ========================================================= */
ul.modern-articles li {
	position: relative;
	height: auto !important;             /* ignore the theme matchHeight inline px */
	background: #1c2438 !important;      /* slightly-lighter dark panel behind the title */
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
	transition: transform .25s ease, box-shadow .25s ease;
}
ul.modern-articles li.sticky { background: #1c2438 !important; }
ul.modern-articles li:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, .4);
}

/* image flush at the top — match the 616x353 Steam capsule ratio so the full
   featured image shows (no crop). Templates output the uncropped 'large' size. */
ul.modern-articles li > a:first-child { display: block; line-height: 0; }
ul.modern-articles li img {
	width: 100%;
	height: auto;
	aspect-ratio: 616 / 353;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* category -> clean pill overlaid on the image top-left */
ul.modern-articles li .artbtn-category {
	position: absolute;
	top: 10px;
	left: 10px;
	margin: 0;
	float: none;
	height: auto;
	line-height: 1;
	font-size: 10px;
	padding: 5px 10px;
	border-radius: 999px;
	z-index: 3;
}

/* play icon (video posts) re-centred on the image */
ul.modern-articles li .media-icon {
	margin: 0;
	top: 62px;
	left: 50%;
	transform: translateX(-50%);
}

/* title overlaid on the bottom of the image, on a dark gradient (no panel) */
ul.modern-articles li div.content-list {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	margin: 0;
	padding: 30px 13px 13px;
	z-index: 2;
	background: linear-gradient(to top,
		rgba(5, 8, 15, .96) 0%,
		rgba(5, 8, 15, .78) 42%,
		rgba(5, 8, 15, 0) 100%) !important;
}
ul.modern-articles li h2 {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 800;
	color: #fff !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .2s ease;
}
ul.modern-articles li a h2 { color: #fff !important; }
ul.modern-articles li:hover h2 { color: #c9b8ff !important; }

/* "only the title" — hide the views/date meta row on the cards */
ul.modern-articles li .author-il { display: none !important; }

/* =========================================================
   Archive / category / tag / search / blog / 404 layout fix
   ---------------------------------------------------------
   The parent floats #small-sidebar (110px) beside .wrap-content (1068px)
   inside a 1180px .wrap-middle — 110 + 1068 = 1178, only 2px of slack. At
   any non-100% browser zoom, sub-pixel rounding tips that over 1180 and the
   content column (cards + right sidebar) drops BELOW the left sidebar.
   Fix: let .wrap-content flow into the remaining width next to the floated
   left sidebar instead of using a fixed width, so it can never wrap.
   Scoped to these page types so the homepage / single posts are untouched. */
body.archive .wrap-content,
body.search .wrap-content,
body.blog .wrap-content,
body.error404 .wrap-content {
	width: auto !important;
	float: none !important;
	margin-left: 122px !important;   /* clear the 110px left sidebar + a small gap */
	overflow: hidden;                /* new block-formatting context fills the rest */
}