/* =========================================================
   WorldofPC — full-width homepage layout
   Both sidebars removed; the latest-articles grid now shows
   3 cards per row instead of 2 (cards stay 321px so the
   overlapping title/category design is untouched).
   This file is enqueued ONLY on the front page.
   ========================================================= */

/* Fluid containers now that both sidebars are gone: fill the viewport up to the
   1180px site width, then centre. `max-width` (not a hard `width`) lets the
   homepage shrink with the screen instead of overflowing on smaller devices.

   IMPORTANT: the parent theme's css/responsive.css was written for old ~320px
   phones and HARD-LOCKS .wrap-middle (and the inner wraps) to fixed pixel widths
   on small screens — 305px at <=479px, 460px at 480-580px, 570px at 580-760px,
   etc. On a modern 400px+ phone that leaves big dead side margins where the site
   background image bleeds through and the cards look cramped. We override those
   fixed widths (with !important, to beat the media-query rules at every
   breakpoint) so the homepage column always fills the screen. The small side
   gutter comes from .articles-content padding, not from a narrow container. */
.wrap-middle,
.wrap-content,
.wrap-left-content {
	width: 100% !important;
	max-width: 1180px !important;
	float: none !important;
	box-sizing: border-box;
}
.wrap-middle, .wrap-content { margin-left: auto !important; margin-right: auto !important; }

/* Article grid container */
.articles-content     { width: auto; margin: 0; padding: 25px 15px 0; }

/* Responsive card grid. The card design in site.css is fully fluid (image is
   width:100% with an aspect-ratio, title/category overlays are positioned
   relative to the card), so a real CSS Grid lets each card stretch/shrink with
   the column track — no more fixed 321px width or zoom hacks. Columns drop from
   4 -> 3 -> 2 -> 1 at the breakpoints below. */
ul.modern-articles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
	width: auto !important;   /* fill .articles-content; beat parent responsive.css fixed widths */
	margin: 0;
	list-style: none;
	padding: 0;
}
ul.modern-articles li {
	zoom: 1;                 /* drop the old shrink trick — grid sizes the card */
	width: auto !important;  /* beat the parent theme's fixed li width */
	float: none !important;
	display: block;
	margin: 0;
	min-width: 0;            /* allow the grid track to shrink the card */
	font-size: 14px;
	text-align: left;
}

/* The top page content (if any) lines up the same way */
.home-content         { width: auto; margin: 0; padding: 0 15px; }

/* ---- Section header (accent bar + title on the left, "View all" on the right) ----
   Used by "New Games" and the category showcases (Action / Racing / Horror).
   A flex row with a thin hairline underneath, matching the reference design. */
.articles-content .wopc-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 30px 0 18px;          /* top gap separates one section's grid from the next header */
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
}
/* The first header on the page ("New Games") sits right under the slider — tighten it. */
.articles-content > .wopc-section-head:first-child { margin-top: 6px; }

.articles-content .wopc-section-title {
	position: relative;
	height: auto;
	float: none;
	margin: 0;
	padding: 0 0 0 16px;          /* room for the accent bar */
	font-size: 23px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: none;         /* title case, not uppercase */
	letter-spacing: .2px;
	color: #fff !important;       /* beat the theme's generic h2 colour */
	background: none !important;  /* drop the old pill background */
	box-shadow: none;
}
.articles-content .wopc-section-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: .95em;
	border-radius: 3px;
	background: #8b5cf6;          /* accent bar */
}

.articles-content .wopc-section-viewall {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #b9c0d4;
	text-decoration: none;
	transition: color .2s ease;
}
.articles-content .wopc-section-viewall svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s ease;
}
.articles-content .wopc-section-viewall:hover { color: #fff; }
.articles-content .wopc-section-viewall:hover svg { transform: translateX(3px); }

/* NOTE: the card appearance (dark panel, image, title, views meta) lives in
   site.css so it applies to ALL listing pages, not just the homepage. This file
   only holds the homepage-specific grid (full width, 4-up, centring) + badges. */

/* ---- "More Games" button under each category showcase ----
   Solid filled button in the section-heading purple, bold uppercase — matches
   the homepage section titles. Extra top margin pushes it clear of the cards. */
.wopc-more-wrap { text-align: center; margin: 28px 0 10px; }
.wopc-more-btn,
.wopc-more-btn:link,
.wopc-more-btn:visited {
	display: inline-block;
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #fff !important;          /* pure white, beat the theme's a:link colour */
	background: #8b5cf6;
	border: 0;
	padding: 10px 30px;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease;
}
.wopc-more-btn:hover {
	background: #7c4ddb;
	color: #fff !important;          /* don't let the theme's a:hover recolour it */
}
.wopc-more-btn.is-loading { opacity: .65; cursor: default; }

/* =========================================================
   Responsive breakpoints — drop the grid from 4 columns down
   to 3 / 2 / 1 as the viewport narrows.
   ========================================================= */

/* Large tablet / small laptop: 3 across */
@media (max-width: 1024px) {
	ul.modern-articles { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* Tablet / large phone: 2 across */
@media (max-width: 768px) {
	ul.modern-articles { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.articles-content { padding: 18px 12px 0; }
	.articles-content .wopc-section-head { margin: 22px 0 14px; gap: 10px; }
	.articles-content .wopc-section-title { font-size: 20px; padding-left: 13px; }
}

/* Phone: single column */
@media (max-width: 480px) {
	ul.modern-articles { grid-template-columns: 1fr; gap: 16px; }
	.articles-content .wopc-section-title { font-size: 18px; padding-left: 12px; }
	.articles-content .wopc-section-viewall { font-size: 11px; letter-spacing: .3px; }
}