/*
Theme Name: GeneratePress Child - Google News M3
Theme URI: https://generatepress.com
Description: Site-wide Google News (news.google.com) style UI/UX refactor for GeneratePress using Material Design 3.
Author: Google Deepmind / Antigravity
Author URI: https://generatepress.com
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-child
*/

/* ==========================================================================
   1. CSS RESET & CONFLICT CLEANUP
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Constrain main container width to 1200px max centered */
#page,
.grid-container,
.site-content {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 8px;
	gap: 4px;
}

/* Global Color & Typography Tokens (Google News Specs) */
:root {
	--gn-bg: #F8F9FA;
	--gn-card-bg: #FFFFFF;
	--gn-border: #E0E3E7;
	--gn-text: #202124;
	--gn-text-muted: #5F6368;
	--gn-primary: #1A73E8;
	--gn-pill-bg: #F1F3F4;
	--gn-pill-active-bg: #E8F0FE;
	--gn-pill-active-text: #174EA6;
	--gn-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--gn-radius-card: 16px;
	--gn-radius-thumb: 12px;
	--gn-radius-pill: 9999px;
	--gn-radius-search: 28px;
	--gn-transition: 200ms cubic-bezier(0.2, 0.0, 0, 1.0);
}

@media (prefers-color-scheme: dark) {
	:root {
		--gn-bg: #141218;
		--gn-card-bg: #1F1F1F;
		--gn-border: #3C4043;
		--gn-text: #E8EAED;
		--gn-text-muted: #9AA0A6;
		--gn-primary: #8AB4F8;
		--gn-pill-bg: #303134;
		--gn-pill-active-bg: #383B3E;
		--gn-pill-active-text: #8AB4F8;
	}
}

body {
	font-family: var(--gn-font-family);
	background-color: var(--gn-bg);
	color: var(--gn-text);
	line-height: 1.5;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--gn-text);
	text-decoration: none;
	transition: color var(--gn-transition);
}

a:hover,
a:focus {
	color: var(--gn-primary);
}

/* ==========================================================================
   Google News Top Header & Centered Search Input
   ========================================================================== */

.site-header,
.gn-header-bar {
	background-color: var(--gn-card-bg);
	color: var(--gn-text);
	border-bottom: 1px solid var(--gn-border);
	position: sticky;
	top: 0;
	z-index: 1000;
	padding: 0px 24px;
}

.gn-header-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.gn-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: -0.2px;
	color: var(--gn-text);
	white-space: nowrap;
}

.gn-brand-logo {
	color: var(--gn-primary);
	font-size: 26px;
}

.gn-search-wrap {
	flex: 1 1 480px;
	max-width: 600px;
	position: relative;
	margin: 0 16px;
}

.gn-search-input {
	width: 100%;
	height: 48px;
	padding: 0 20px 0 52px;
	background-color: var(--gn-pill-bg);
	border: 1px solid transparent;
	border-radius: var(--gn-radius-search);
	font-family: var(--gn-font-family);
	font-size: 0.95rem;
	color: var(--gn-text);
	transition: background-color var(--gn-transition), border-color var(--gn-transition);
}

.gn-search-input:focus {
	outline: none;
	background-color: var(--gn-card-bg);
	border-color: var(--gn-border);
}

.gn-search-icon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--gn-text-muted);
	pointer-events: none;
	font-size: 22px;
}

/* ==========================================================================
   Google News Horizontal Pill Category Navigation
   ========================================================================== */

.gn-topic-nav {
	background-color: var(--gn-card-bg);
	border-bottom: 1px solid var(--gn-border);
	position: sticky;
	top: 77px;
	z-index: 999;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

@media (max-width: 769px) {

	.gn-topic-nav {
		top: 80px;
	}
}

.gn-topic-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 8px;
	white-space: nowrap;
}

.gn-topic-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 18px;
	border-radius: var(--gn-radius-pill);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--gn-text-muted);
	background-color: transparent;
	transition: background-color var(--gn-transition), color var(--gn-transition);
}

.gn-topic-chip:hover {
	background-color: var(--gn-pill-bg);
	color: var(--gn-text);
}

.gn-topic-chip.active,
.gn-topic-chip.current-menu-item {
	background-color: var(--gn-pill-active-bg);
	color: var(--gn-pill-active-text);
	font-weight: 600;
}

/* ==========================================================================
   Google News Category Header Topic Banner & Sub-Category Chips
   ========================================================================== */

.gn-category-topic-header {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	background-color: var(--gn-card-bg);
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius-card);
	padding: 24px;
	margin-bottom: 24px;
}

.gn-topic-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 12px;
}

.gn-topic-title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gn-topic-icon {
	color: var(--gn-primary);
	font-size: 28px;
}

.gn-topic-title {
	font-size: 1.85rem !important;
	font-weight: 500 !important;
	color: var(--gn-text) !important;
	margin: 0 !important;
}

.gn-topic-count-badge {
	display: inline-block;
	padding: 3px 12px;
	background-color: var(--gn-pill-bg);
	color: var(--gn-text-muted);
	border-radius: var(--gn-radius-pill);
	font-size: 0.8125rem;
	font-weight: 500;
}

.gn-follow-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	background-color: var(--gn-primary);
	color: #FFFFFF !important;
	border: none;
	border-radius: var(--gn-radius-pill);
	font-family: var(--gn-font-family);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: opacity var(--gn-transition);
}

.gn-follow-btn:hover {
	opacity: 0.9;
}

.gn-topic-description {
	font-size: 0.95rem;
	color: var(--gn-text-muted);
	line-height: 1.5;
	margin-bottom: 16px;
}

.gn-subcat-filter-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--gn-border);
}

.gn-subcat-label {
	font-size: 0.84rem;
	font-weight: 500;
	color: var(--gn-text-muted);
	margin-right: 4px;
}

/* ==========================================================================
   Shortcode [mediumget_categories_grid] All-Categories Directory
   ========================================================================== */

.gn-categories-directory-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
	margin: 24px 0;
}

.gn-category-directory-card {
	background-color: var(--gn-card-bg);
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: border-color var(--gn-transition);
}

.gn-category-directory-card:hover {
	border-color: var(--gn-text-muted);
}

.gn-cat-card-media {
	display: block;
	width: 100%;
	height: 160px;
	overflow: hidden;
}

.gn-cat-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
}

.gn-cat-card-content {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.gn-cat-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.gn-cat-card-title {
	font-size: 1.2rem;
	font-weight: 500;
	margin: 0;
}

.gn-cat-card-title a {
	color: var(--gn-text);
}

.gn-cat-card-desc {
	font-size: 0.875rem;
	color: var(--gn-text-muted);
	line-height: 1.45;
	margin: 0 0 12px 0;
	flex-grow: 1;
}

/* ==========================================================================
   2. GRID & CARD RESTRUCTURING (Google News Category Feed)
   ========================================================================== */



/* Hide Native GeneratePress Page Header & Grid Sizer on Category Archives */
.category header.page-header,
.category .page-header,
header[aria-label="Page"],
.category .grid-sizer,
.archive .grid-sizer,
.blog .grid-sizer,
.grid-sizer {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	visibility: hidden !important;
}

/* Limit Article Titles to Maximum 2 Lines on Category Cards */
.category .entry-title,
.category .entry-title a,
.gn-news-card .entry-title,
.generate-columns .entry-title,
.generate-columns .entry-title a {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1.35 !important;
	max-height: 2.7em !important;
}

/* Limit Article Excerpt / Summary to Maximum 5 Lines */
.entry-summary,
.entry-summary p,
.gn-news-card .entry-summary,
.generate-columns .entry-summary {
	display: -webkit-box !important;
	-webkit-line-clamp: 5 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1.45 !important;
	max-height: 7.25em !important;
}

/* Enforce CSS Grid directly on inner Articles Containers (.generate-columns-container & .masonry-container & .gn-category-articles-grid) */
.generate-columns-container,
.masonry-container,
.gn-category-articles-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
	gap: 20px !important;
	position: static !important;
	width: 100% !important;
	align-items: stretch;
	clear: both !important;
	margin: auto !important;
	height: auto !important;
}

@media (min-width: 1025px) {

	.generate-columns-container,
	.masonry-container,
	.gn-category-articles-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* Universal 100% Width Reset: Override all GeneratePress Unsemantic Grid Classes & Inline JS Widths */
.gn-category-articles-grid>article,
.gn-category-articles-grid .gn-news-card,
article.gn-news-card,
.generate-columns-container article,
.masonry-container article,
.site-main article,
.site-main .inside-article,
.generate-columns-element,
.grid-33,
.grid-50,
.grid-25,
.grid-100,
.tablet-grid-50,
.mobile-grid-100,
.site-main [class*="grid-"] {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	float: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
	margin: 0 !important;
	grid-column: auto !important;
	box-sizing: border-box !important;
}


/* M3 Card Container Styling */
.inside-article,
.gn-news-card {
	background: var(--gn-card-bg) !important;
	border: 1px solid var(--gn-border) !important;
	border-radius: var(--gn-radius-card) !important;
	padding: 16px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	overflow: hidden !important;
	box-shadow: none !important;
	height: 100%;
	transition: border-color var(--gn-transition);
}

.inside-article:hover,
article.post:hover,
.gn-news-card:hover {
	border-color: var(--gn-text-muted) !important;
}

article.post {
	background: var(--gn-card-bg) !important;
	border: 0px solid var(--gn-border) !important;
	border-radius: var(--gn-radius-card) !important;
	padding: 0px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	overflow: hidden !important;
	box-shadow: none !important;
	height: 100%;
	transition: border-color var(--gn-transition);
}

article.post:hover {
	transform: translateY(0px) !important;
	box-shadow: none !important;
}

.inside-article:hover,
.blog-post-card:hover,
article.post:hover {
	transform: translateY(0px) !important;
	box-shadow: none !important;
}

/* ==========================================================================
   3. MEDIA & THUMBNAIL POSITIONING
   ========================================================================== */
img {
	border-radius: var(--gn-radius-card) !important;
}

.post-image,
.post-thumbnail,
.gn-card-media {
	margin: 0 0 12px 0;
	width: 100%;
}

.post-image img,
.post-thumbnail img,
.gn-card-media img {
	width: 100% !important;
	height: 180px !important;
	object-fit: cover !important;
	border-radius: var(--gn-radius-thumb) !important;
	display: block !important;
}

/* ==========================================================================
   4. METADATA & HEADER ALIGNMENT
   ========================================================================== */

.gn-source-meta-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	margin-bottom: 8px;
}

.gn-source-info {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.gn-favicon {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	object-fit: contain;
}

.gn-source-icon {
	font-size: 16px !important;
	color: var(--gn-primary);
	line-height: 1;
}

.gn-source-name {
	font-weight: 500;
	color: var(--gn-text-muted);
}

.gn-meta-dot {
	color: var(--gn-text-muted);
	font-size: 0.75rem;
}

.gn-time-ago {
	color: var(--gn-text-muted);
	font-size: 0.8125rem;
}

/* Post Titles (Roboto / Google Sans, 1.1rem, 500, 1.4 line-height) */
.entry-title {
	font-family: var(--gn-font-family) !important;
	font-size: 1.1rem !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	color: var(--gn-text) !important;
	margin: 0 0 8px 0 !important;
}

.entry-title a {
	color: inherit;
}

.entry-title a:hover {
	color: var(--gn-primary);
}

.entry-summary {
	font-size: 0.9375rem;
	color: var(--gn-text-muted);
	line-height: 1.5;
	margin-bottom: 12px;
}

.gn-card-actions {
	margin-top: auto;
	padding-top: 8px;
}

.gn-full-coverage-btn,
.button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	background-color: var(--gn-pill-bg) !important;
	color: var(--gn-text-muted) !important;
	font-family: var(--gn-font-family);
	font-size: 0.8125rem;
	font-weight: 500;
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius-pill);
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color var(--gn-transition), color var(--gn-transition);
}

.gn-full-coverage-btn:hover,
.button:hover {
	background-color: var(--gn-pill-active-bg);
	color: var(--gn-pill-active-text) !important;
	border-color: transparent;
}

/* ==========================================================================
   5. SINGLE POST & SIDEBAR ALIGNMENT
   ========================================================================== */

/* Single post reading containment (max-width: 760px) */
.single .site-main,
.page .site-main {
	display: block !important;
}

.single .inside-article,
.page .inside-article {
	margin: 0 !important;
	padding: 16px !important;
	background-color: var(--gn-card-bg) !important;
	border: 1px solid var(--gn-border) !important;
	border-radius: var(--gn-radius-card) !important;
	box-shadow: none !important;
}

.page .article-grid {
	padding: 8px !important;
	margin: 0px !important;
}

.mg-blog-grid {
	gap: 16px !important;
}

.single .entry-title {
	font-size: 2rem !important;
	line-height: 1.25 !important;
	font-weight: 400 !important;
	margin-bottom: 16px !important;
}

/* Sidebar & Grid layout on Desktop (> 1024px) */
@media (min-width: 1025px) {

	#page,
	.site-content {
		align-items: start !important;
		padding: 8px !important;
	}

	.widget-area {
		position: sticky !important;
		top: 150px !important;
	}
}

@media (max-width: 1024px) {

	#page,
	.site-content {
		display: block !important;
	}

	.widget-area {
		margin-top: 32px;
	}
}

.widget-area .widget {
	background-color: var(--gn-card-bg) !important;
	border: 1px solid var(--gn-border) !important;
	border-radius: var(--gn-radius-card) !important;
	padding: 8px;
	margin-bottom: 20px;
	box-shadow: none !important;
}

.widget-title {
	font-size: 1rem;
	font-weight: 500;
	color: var(--gn-text);
	margin-bottom: 12px;
	border-bottom: 1px solid var(--gn-border);
	padding-bottom: 8px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background-color: var(--gn-card-bg);
	color: var(--gn-text-muted);
	border-top: 1px solid var(--gn-border);
	padding: 32px 16px;
	margin-top: 48px;
	font-size: 0.875rem;
	text-align: center;
}

/* ==========================================================================
   6. SINGLE POST & NAVIGATION
   ========================================================================== */

.site-main .post-navigation {
	display: flex;
	justify-content: space-around;
	width: 100%;
}

.page .site-main {
	margin-right: 0 !important;
}

.cat-links {
	width: 20%;
}

.generate-columns .inside-article {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	box-sizing: border-box !important;
}

.generate-columns .inside-article .entry-header,
.generate-columns .inside-article .post-image,
.generate-columns .inside-article .entry-summary {
	padding: 8px !important;
	margin: 0 !important;
}

.generate-columns .inside-article .gn-card-actions {
	margin-top: auto !important;
	padding: 8px !important;
}


.button.button-secondary:hover {
	background-color: var(--gn-pill-bg);
	color: var(--gn-text-muted) !important;
}

/* Google News Home Page Layout */
.gn-home-section {
	margin-bottom: 40px;
}

.gn-home-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 24px 0 16px 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--gn-border);
}

.gn-home-section-title {
	font-family: var(--gn-font-family);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--gn-text-dark);
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.gn-section-icon {
	color: var(--gn-primary);
	font-size: 22px;
}

.gn-cat-title-link {
	color: var(--gn-text-dark);
	text-decoration: none;
}

.gn-cat-title-link:hover {
	color: var(--gn-primary);
}

.gn-section-view-all-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--gn-font-family);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--gn-primary);
	text-decoration: none;
	padding: 4px 12px;
	border-radius: var(--gn-radius-btn);
	transition: background-color 0.2s ease;
}

.gn-section-view-all-btn:hover {
	background-color: rgba(26, 115, 232, 0.08);
}

/* Google News Glassmorphic Hero Banner Slider */
.gn-hero-slider {
	position: relative;
	width: 100%;
	height: 440px;
	border-radius: var(--gn-radius-card);
	overflow: hidden;
	margin-bottom: 32px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.gn-slider-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.gn-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
	z-index: 1;
}

.gn-hero-slide.active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.gn-slide-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 6s ease;
}

.gn-hero-slide.active .gn-slide-bg {
	transform: scale(1.04);
}

.gn-slide-bg-fallback {
	background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
}

.gn-slide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.1) 100%);
}

.gn-slide-content-wrap {
	position: absolute;
	bottom: 24px;
	left: 24px;
	right: 24px;
	max-width: 680px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 24px;
	border-radius: var(--gn-radius-card);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.gn-slide-content-wrap .gn-top-story-badge {
	position: static;
	display: inline-flex;
	margin-bottom: 10px;
}

.gn-slide-title {
	font-family: var(--gn-font-family);
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 8px 0;
}

.gn-slide-title a {
	color: var(--gn-text-dark);
	text-decoration: none;
}

.gn-slide-title a:hover {
	color: var(--gn-primary);
}

.gn-slide-summary p {
	font-family: var(--gn-font-family);
	font-size: 0.9375rem;
	color: var(--gn-text-muted);
	line-height: 1.45;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gn-slide-actions {
	margin-top: 14px;
}

/* Slider Arrow Navigation Controls */
.gn-slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	border: none;
	color: var(--gn-text-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: background 0.2s ease, transform 0.2s ease;
}

.gn-slider-btn:hover {
	background: #ffffff;
	transform: translateY(-50%) scale(1.08);
}

.gn-slider-prev {
	left: 16px;
}

.gn-slider-next {
	right: 16px;
}

/* Slider Pagination Dots */
.gn-slider-dots {
	position: absolute;
	bottom: 12px;
	right: 28px;
	z-index: 10;
	display: flex;
	gap: 8px;
}

.gn-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
}

.gn-dot.active {
	background: var(--gn-primary);
	transform: scale(1.3);
	width: 24px;
	border-radius: 6px;
}

@media (max-width: 768px) {
	.gn-hero-slider {
		height: 380px;
	}

	.gn-slide-content-wrap {
		bottom: 12px;
		left: 12px;
		right: 12px;
		padding: 16px;
	}

	.gn-slide-title {
		font-size: 1.15rem;
	}

	.gn-slider-btn {
		width: 36px;
		height: 36px;
	}
}

/* Unique Latest Stories Hero & Grid Styling */
.gn-latest-stories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
	width: 100%;
}

@media (min-width: 1025px) {
	.gn-latest-stories-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.gn-hero-lead-card {
		grid-column: span 2;
		grid-row: span 2;
	}
}

/* Main Lead Hero Card Styling */
.gn-hero-lead-card {
	display: flex;
	flex-direction: column;
	background: var(--gn-card-bg);
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius-card);
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gn-hero-lead-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.gn-hero-media {
	position: relative;
	width: 100%;
	height: 280px;
	overflow: hidden;
}

.gn-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.gn-hero-lead-card:hover .gn-hero-media img {
	transform: scale(1.03);
}

.gn-top-story-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(26, 115, 232, 0.92);
	color: #ffffff;
	font-family: var(--gn-font-family);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 4px 12px;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(4px);
}

.gn-hero-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px;
}

.gn-hero-title {
	font-family: var(--gn-font-family);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 10px 0;
}

.gn-hero-title a {
	color: var(--gn-text-dark);
	text-decoration: none;
}

.gn-hero-title a:hover {
	color: var(--gn-primary);
}

.gn-hero-summary p {
	font-family: var(--gn-font-family);
	font-size: 0.9375rem;
	color: var(--gn-text-muted);
	line-height: 1.5;
	margin: 0;
}

/* Secondary Highlight Cards */
.gn-latest-secondary-card {
	display: flex;
	flex-direction: column;
	background: var(--gn-card-bg);
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-radius-card);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gn-latest-secondary-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.gn-secondary-media {
	width: 100%;
	height: 160px;
	overflow: hidden;
}

.gn-secondary-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gn-secondary-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 12px;
}

.gn-secondary-title {
	font-family: var(--gn-font-family);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 8px 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gn-secondary-title a {
	color: var(--gn-text-dark);
	text-decoration: none;
}

.gn-secondary-title a:hover {
	color: var(--gn-primary);
}

/* ==========================================================================
   GLOBAL BORDERLESS & SOFT ELEVATION DESIGN SYSTEM
   ========================================================================== */

/* 1. Remove All Card, Page, & Container Borders Site-Wide */
.gn-news-card,
.gn-hero-lead-card,
.gn-latest-secondary-card,
.gn-category-directory-card,
.inside-article,
.separate-containers .inside-article,
.one-container .site-content,
.blog .inside-article,
.category .inside-article,
.archive .inside-article,
.single .inside-article,
.page .inside-article,
.page-template-page-categories-directory .inside-article,
.widget,
#comments,
.comment-body,
.gn-slide-content-wrap,
.gn-home-section-header,
.gn-category-topic-header,
.gn-topic-bar,
.gn-topic-banner,
.site-main article {
	border: none !important;
	border-top: none !important;
	border-bottom: none !important;
	border-left: none !important;
	border-right: none !important;
	outline: none !important;
}

/* 2. Soft Ambient Box Shadows for Borderless Surface Cards & Single Post Views */
.gn-news-card,
.generate-columns .inside-article,
.gn-latest-secondary-card,
.gn-hero-lead-card,
.gn-category-directory-card,
.single .inside-article,
.page .inside-article,
.page-template-page-categories-directory .inside-article,
.widget,
#comments {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
	background-color: var(--gn-card-bg, #ffffff) !important;
	border-radius: var(--gn-radius-card, 16px) !important;
	transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1) !important;
}

.gn-news-card:hover,
.generate-columns .inside-article:hover,
.gn-latest-secondary-card:hover,
.gn-hero-lead-card:hover,
.gn-category-directory-card:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09) !important;
}

/* 3. Borderless Glassmorphic Hero Slider Overlay */
.gn-slide-content-wrap {
	border: none !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
}

/* 4. Clean Borderless Section Headers */
.gn-home-section-header,
.gn-category-topic-header {
	border-bottom: none !important;
	margin-bottom: 20px !important;
	padding-bottom: 0 !important;
}

/* ==========================================================================
   MATERIAL DESIGN 3 DARK MODE SYSTEM (OS PREFERENCE AUTOMATIC ACTIVATION)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	:root {
		--gn-bg: #121212;
		--gn-card-bg: #1e1e1e;
		--gn-surface: #1e1e1e;
		--gn-text-dark: #e8eaed;
		--gn-text-muted: #9aa0a6;
		--gn-border: #2e3134;
		--gn-pill-bg: #2d2f31;
		--gn-primary: #8ab4f8;
	}

	body,
	#page,
	.site,
	.grid-container,
	.container,
	.hfeed,
	.site-header,
	.main-navigation,
	.site-content,
	#content,
	.site-footer,
	.site-main {
		background-color: var(--gn-bg) !important;
		color: var(--gn-text-dark) !important;
	}

	/* Card Surfaces in Dark Mode */
	.gn-news-card,
	.inside-article,
	.generate-columns .inside-article,
	.gn-latest-secondary-card,
	.gn-hero-lead-card,
	.gn-category-directory-card,
	.widget,
	#comments,
	.comment-body {
		background-color: var(--gn-card-bg) !important;
		color: var(--gn-text-dark) !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
	}

	.gn-news-card:hover,
	.generate-columns .inside-article:hover,
	.gn-latest-secondary-card:hover,
	.gn-hero-lead-card:hover,
	.gn-category-directory-card:hover {
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
	}

	/* Typography & Links */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.entry-title a,
	.gn-hero-title a,
	.gn-secondary-title a,
	.gn-cat-card-title a,
	.gn-topic-title,
	.gn-home-section-title,
	.gn-cat-title-link {
		color: var(--gn-text-dark) !important;
	}

	.entry-title a:hover,
	.gn-hero-title a:hover,
	.gn-secondary-title a:hover,
	.gn-cat-card-title a:hover,
	.gn-cat-title-link:hover {
		color: var(--gn-primary) !important;
	}

	.entry-summary,
	.gn-hero-summary p,
	.gn-secondary-summary p,
	.gn-cat-card-desc,
	.gn-topic-description p,
	.entry-meta,
	.entry-meta a,
	.gn-source-time {
		color: var(--gn-text-muted) !important;
	}

	/* Hero Slider Overlay in Dark Mode */
	.gn-slide-content-wrap {
		background: rgba(30, 30, 30, 0.94) !important;
		color: var(--gn-text-dark) !important;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
	}

	.gn-slide-title a {
		color: var(--gn-text-dark) !important;
	}

	.gn-slide-summary p {
		color: var(--gn-text-muted) !important;
	}

	/* Action Buttons & Badges */
	.gn-full-coverage-btn,
	.gn-topic-chip,
	.gn-topic-count-badge {
		background-color: var(--gn-pill-bg) !important;
		color: var(--gn-primary) !important;
	}

	.gn-full-coverage-btn:hover,
	.gn-topic-chip:hover {
		background-color: #383a3d !important;
	}

	.gn-top-story-badge {
		background: rgba(138, 180, 248, 0.2) !important;
		color: var(--gn-primary) !important;
	}

	/* Form Inputs & Comments */
	input[type="text"],
	input[type="email"],
	input[type="search"],
	textarea,
	select {
		background-color: #282a2d !important;
		color: var(--gn-text-dark) !important;
		border: 1px solid var(--gn-border) !important;
	}

	input[type="text"]:focus,
	input[type="email"]:focus,
	input[type="search"]:focus,
	textarea:focus {
		border-color: var(--gn-primary) !important;
	}

	/* Footer Dark Mode Styles */
	.site-footer,
	.footer-widgets,
	.inside-footer-widgets,
	.site-info {
		background-color: var(--gn-bg) !important;
		color: var(--gn-text-muted) !important;
		border: none !important;
	}

	.footer-widgets .widget-title {
		color: var(--gn-text-dark) !important;
	}

	.site-footer a,
	.footer-widgets a,
	.site-info a {
		color: var(--gn-text-dark) !important;
	}

	.site-footer a:hover,
	.footer-widgets a:hover,
	.site-info a:hover {
		color: var(--gn-primary) !important;
	}

	/* Mobile Menu Navigation Dark Mode Overrides */
	.menu-toggle,
	.mobile-menu-control-wrapper .menu-toggle {
		background-color: var(--gn-pill-bg) !important;
		color: var(--gn-primary) !important;
		border-radius: var(--gn-radius-btn) !important;
	}

	.main-navigation.toggled .main-nav ul,
	.mobile-header-navigation,
	.slideout-navigation {
		background-color: var(--gn-card-bg) !important;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
		border: none !important;
	}

	.main-navigation.toggled .main-nav ul li a,
	.mobile-header-navigation .main-nav ul li a,
	.slideout-navigation a {
		color: var(--gn-text-dark) !important;
	}

	.main-navigation.toggled .main-nav ul li:hover>a,
	.main-navigation.toggled .main-nav ul li.current-menu-item>a,
	.mobile-header-navigation .main-nav ul li:hover>a,
	.slideout-navigation a:hover {
		background-color: #2d2f31 !important;
		color: var(--gn-primary) !important;
	}
}

/* ==========================================================================
   MOBILE NAVIGATION DESIGN ENHANCEMENTS
   ========================================================================== */
@media (max-width: 768px) {
	.menu-toggle {
		display: inline-flex !important;
		align-items: center !important;
		gap: 6px !important;
		padding: 6px 14px !important;
		font-family: var(--gn-font-family) !important;
		font-size: 0.875rem !important;
		font-weight: 600 !important;
		border-radius: var(--gn-radius-btn) !important;
		transition: background 0.2s ease, transform 0.2s ease !important;
	}

	.main-navigation.toggled .main-nav ul {
		margin-top: 8px !important;
		padding: 8px 0 !important;
		border-radius: var(--gn-radius-card) !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
		overflow: hidden !important;
		z-index: 99999 !important;
	}

	.main-navigation.toggled .main-nav ul li a {
		padding: 10px 20px !important;
		font-family: var(--gn-font-family) !important;
		font-size: 0.9375rem !important;
		font-weight: 500 !important;
		transition: background 0.2s ease, color 0.2s ease !important;
	}
}

#comments {
	padding: 16px !important;
}

.main-navigation .main-nav ul li a {
	line-height: 44px !important;
}