/* ==========================================================================
   Components - All 17 front page components using BEM naming
   ========================================================================== */


/* ==========================================================================
   1. Hero Full (.gpchild-hero-full)
   Full-width hero with background image, overlay, title, excerpt, CTA
   ========================================================================== */

.gpchild-hero-full {
	position: relative;
	width: 100%;
	min-height: var(--gpchild-hero-height);
	display: flex;
	align-items: stretch;
	overflow: hidden;
}

.gpchild-hero-full__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.gpchild-hero-full__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gpchild-hero-full__overlay {
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, var(--gpchild-overlay-opacity, 0.5));
}

.gpchild-hero-full__content {
	position: relative;
	z-index: 3;
	max-width: var(--gpchild-container-narrow);
	padding: var(--gpchild-space-2xl) var(--gpchild-space-lg);
	text-align: center;
	color: var(--gpchild-color-text-inverse);
}

.gpchild-hero-full__badge {
	display: inline-block;
	margin-bottom: var(--gpchild-space-md);
}

.gpchild-hero-full__title {
	font-size: var(--gpchild-text-4xl);
	font-weight: 800;
	margin-bottom: var(--gpchild-space-md);
	color: var(--gpchild-color-text-inverse);
}

.gpchild-hero-full__title a {
	color: inherit;
}

.gpchild-hero-full__title a:hover,
.gpchild-hero-full__title a:focus {
	opacity: 0.9;
	color: inherit;
}

.gpchild-hero-full__excerpt {
	font-size: var(--gpchild-text-lg);
	line-height: var(--gpchild-leading-relaxed);
	margin-bottom: var(--gpchild-space-xl);
	opacity: 0.9;
}

.gpchild-hero-full__meta {
	justify-content: center;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: var(--gpchild-space-lg);
}

.gpchild-hero-full__meta a {
	color: rgba(255, 255, 255, 0.9);
}

.gpchild-hero-full__meta a:hover {
	color: var(--gpchild-color-text-inverse);
}

.gpchild-hero-full__cta {
	display: inline-block;
	padding: var(--gpchild-space-sm) var(--gpchild-space-xl);
	background: var(--gpchild-color-primary);
	color: var(--gpchild-color-text-inverse);
	font-size: var(--gpchild-text-base);
	font-weight: 600;
	border-radius: var(--gpchild-radius-md);
	transition: background var(--gpchild-transition-fast),
				transform var(--gpchild-transition-fast);
}

.gpchild-hero-full__cta:hover,
.gpchild-hero-full__cta:focus {
	background: var(--gpchild-color-primary-dark);
	color: var(--gpchild-color-text-inverse);
	transform: translateY(-1px);
}

@media (max-width: 768px) {
	.gpchild-hero-full__title {
		font-size: var(--gpchild-text-3xl);
	}

	.gpchild-hero-full__excerpt {
		font-size: var(--gpchild-text-base);
	}
}


/* ==========================================================================
   2. Hero Split (.gpchild-hero-split)
   Two columns: image + content side by side
   ========================================================================== */

.gpchild-hero-split {
	display: flex;
	align-items: stretch;
	min-height: var(--gpchild-hero-height);
	overflow: hidden;
}

.gpchild-hero-split--reverse {
	flex-direction: row-reverse;
}

.gpchild-hero-split__media {
	flex: 1 1 50%;
	position: relative;
	overflow: hidden;
}

.gpchild-hero-split__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gpchild-hero-split__content {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--gpchild-space-3xl);
}

.gpchild-hero-split__badge {
	margin-bottom: var(--gpchild-space-md);
}

.gpchild-hero-split__title {
	font-size: var(--gpchild-text-3xl);
	font-weight: 800;
	margin-bottom: var(--gpchild-space-md);
	color: var(--gpchild-color-text);
}

.gpchild-hero-split__title a {
	color: inherit;
}

.gpchild-hero-split__title a:hover,
.gpchild-hero-split__title a:focus {
	color: var(--gpchild-color-primary);
}

.gpchild-hero-split__excerpt {
	font-size: var(--gpchild-text-lg);
	line-height: var(--gpchild-leading-relaxed);
	color: var(--gpchild-color-text-light);
	margin-bottom: var(--gpchild-space-lg);
}

.gpchild-hero-split__meta {
	margin-bottom: var(--gpchild-space-lg);
}

.gpchild-hero-split__cta {
	display: inline-block;
	padding: var(--gpchild-space-sm) var(--gpchild-space-xl);
	background: var(--gpchild-color-primary);
	color: var(--gpchild-color-text-inverse);
	font-weight: 600;
	border-radius: var(--gpchild-radius-md);
	transition: background var(--gpchild-transition-fast),
				transform var(--gpchild-transition-fast);
	align-self: flex-start;
}

.gpchild-hero-split__cta:hover,
.gpchild-hero-split__cta:focus {
	background: var(--gpchild-color-primary-dark);
	color: var(--gpchild-color-text-inverse);
	transform: translateY(-1px);
}

@media (max-width: 768px) {
	.gpchild-hero-split,
	.gpchild-hero-split--reverse {
		flex-direction: column;
	}

	.gpchild-hero-split__media {
		min-height: 250px;
	}

	.gpchild-hero-split__content {
		padding: var(--gpchild-space-xl) var(--gpchild-space-lg);
	}

	.gpchild-hero-split__title {
		font-size: var(--gpchild-text-2xl);
	}
}


/* ==========================================================================
   3. Hero Slider (.gpchild-hero-slider)
   CSS-only scroll-snap horizontal slider
   ========================================================================== */

.gpchild-hero-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.gpchild-hero-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.gpchild-hero-slider__track::-webkit-scrollbar {
	display: none;
}

.gpchild-hero-slider__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	position: relative;
	min-height: var(--gpchild-hero-height);
	display: flex;
	align-items: stretch;
	overflow: hidden;
}

.gpchild-hero-slider__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.gpchild-hero-slider__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gpchild-hero-slider__overlay {
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gpchild-hero-overlay);
}

.gpchild-hero-slider__content {
	position: relative;
	z-index: 3;
	max-width: var(--gpchild-container-narrow);
	padding: var(--gpchild-space-2xl) var(--gpchild-space-lg);
	text-align: center;
	color: var(--gpchild-color-text-inverse);
}

.gpchild-hero-slider__badge {
	margin-bottom: var(--gpchild-space-md);
}

.gpchild-hero-slider__title {
	font-size: var(--gpchild-text-4xl);
	font-weight: 800;
	margin-bottom: var(--gpchild-space-md);
	color: var(--gpchild-color-text-inverse);
}

.gpchild-hero-slider__title a {
	color: inherit;
}

.gpchild-hero-slider__title a:hover,
.gpchild-hero-slider__title a:focus {
	opacity: 0.9;
	color: inherit;
}

.gpchild-hero-slider__excerpt {
	font-size: var(--gpchild-text-lg);
	line-height: var(--gpchild-leading-relaxed);
	margin-bottom: var(--gpchild-space-lg);
	opacity: 0.9;
}

.gpchild-hero-slider__meta {
	justify-content: center;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: var(--gpchild-space-md);
}

.gpchild-hero-slider__meta a {
	color: rgba(255, 255, 255, 0.9);
}

.gpchild-hero-slider__nav {
	position: absolute;
	bottom: var(--gpchild-space-lg);
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	display: flex;
	gap: var(--gpchild-space-sm);
}

.gpchild-hero-slider__dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: var(--gpchild-radius-full);
	background: rgba(255, 255, 255, 0.5);
	transition: background var(--gpchild-transition-fast);
}

.gpchild-hero-slider__dot:hover,
.gpchild-hero-slider__dot:focus {
	background: rgba(255, 255, 255, 0.9);
}

.gpchild-hero-slider__dot--active {
	background: var(--gpchild-color-text-inverse);
}

@media (max-width: 768px) {
	.gpchild-hero-slider__title {
		font-size: var(--gpchild-text-2xl);
	}

	.gpchild-hero-slider__excerpt {
		font-size: var(--gpchild-text-base);
	}
}


/* ==========================================================================
   4. Hero Video (.gpchild-hero-video)
   Video poster hero with play button overlay
   ========================================================================== */

.gpchild-hero-video {
	position: relative;
	width: 100%;
	min-height: var(--gpchild-hero-height);
	display: flex;
	align-items: stretch;
	overflow: hidden;
}

.gpchild-hero-video__poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.gpchild-hero-video__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gpchild-hero-video__overlay {
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gpchild-hero-overlay);
}

.gpchild-hero-video__content {
	position: relative;
	z-index: 3;
	max-width: var(--gpchild-container-narrow);
	padding: var(--gpchild-space-2xl) var(--gpchild-space-lg);
	text-align: center;
	color: var(--gpchild-color-text-inverse);
}

.gpchild-hero-video__badge {
	margin-bottom: var(--gpchild-space-md);
}

.gpchild-hero-video__title {
	font-size: var(--gpchild-text-4xl);
	font-weight: 800;
	margin-bottom: var(--gpchild-space-md);
	color: var(--gpchild-color-text-inverse);
}

.gpchild-hero-video__title a {
	color: inherit;
}

.gpchild-hero-video__title a:hover,
.gpchild-hero-video__title a:focus {
	opacity: 0.9;
	color: inherit;
}

.gpchild-hero-video__excerpt {
	font-size: var(--gpchild-text-lg);
	line-height: var(--gpchild-leading-relaxed);
	margin-bottom: var(--gpchild-space-xl);
	opacity: 0.9;
}

.gpchild-hero-video__meta {
	justify-content: center;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: var(--gpchild-space-lg);
}

.gpchild-hero-video__meta a {
	color: rgba(255, 255, 255, 0.9);
}

.gpchild-hero-video__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	background: rgba(255, 255, 255, 0.2);
	border: 3px solid var(--gpchild-color-text-inverse);
	border-radius: var(--gpchild-radius-full);
	color: var(--gpchild-color-text-inverse);
	font-size: var(--gpchild-text-2xl);
	cursor: pointer;
	transition: background var(--gpchild-transition-fast),
				transform var(--gpchild-transition-fast);
	margin-bottom: var(--gpchild-space-xl);
}

.gpchild-hero-video__play:hover,
.gpchild-hero-video__play:focus {
	background: rgba(255, 255, 255, 0.35);
	transform: scale(1.1);
	color: var(--gpchild-color-text-inverse);
}

.gpchild-hero-video__play-icon {
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 0 12px 22px;
	border-color: transparent transparent transparent var(--gpchild-color-text-inverse);
	margin-left: 4px;
}

@media (max-width: 768px) {
	.gpchild-hero-video__title {
		font-size: var(--gpchild-text-2xl);
	}

	.gpchild-hero-video__play {
		width: 56px;
		height: 56px;
	}

	.gpchild-hero-video__play-icon {
		border-width: 9px 0 9px 16px;
		margin-left: 3px;
	}
}


/* ==========================================================================
   5. Post Grid (.gpchild-post-grid)
   Responsive grid of cards, columns configurable via CSS var
   ========================================================================== */

.gpchild-post-grid {
	display: grid;
	grid-template-columns: repeat(var(--gpchild-grid-columns), 1fr);
	gap: var(--gpchild-grid-gap);
}

/* data-columns: set grid columns from PHP config, overridable by media queries */
[data-columns="1"] { --gpchild-grid-columns: 1; }
[data-columns="2"] { --gpchild-grid-columns: 2; }
[data-columns="3"] { --gpchild-grid-columns: 3; }
[data-columns="4"] { --gpchild-grid-columns: 4; }
[data-columns="5"] { --gpchild-grid-columns: 5; }
[data-columns="6"] { --gpchild-grid-columns: 6; }

@media (max-width: 1024px) {
	[data-columns="4"],
	[data-columns="5"],
	[data-columns="6"] {
		--gpchild-grid-columns: 2;
	}
}

@media (max-width: 768px) {
	[data-columns] {
		--gpchild-grid-columns: 1;
	}
}

.gpchild-post-grid__item {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--gpchild-card-bg);
	border: 1px solid var(--gpchild-card-border);
	border-radius: var(--gpchild-card-radius);
	box-shadow: var(--gpchild-card-shadow);
	overflow: hidden;
	transition: box-shadow var(--gpchild-transition-base),
				transform var(--gpchild-transition-base);
}

.gpchild-post-grid__item:hover {
	box-shadow: var(--gpchild-shadow-md);
	transform: translateY(-2px);
}

.gpchild-post-grid__thumbnail {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.gpchild-post-grid__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--gpchild-transition-slow);
}

.gpchild-post-grid__item:hover .gpchild-post-grid__image {
	transform: scale(1.05);
}

.gpchild-post-grid__badge {
	position: absolute;
	top: var(--gpchild-space-sm);
	left: var(--gpchild-space-sm);
	z-index: 2;
}

.gpchild-post-grid__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: var(--gpchild-card-padding);
}

.gpchild-post-grid__title {
	font-size: var(--gpchild-text-lg);
	font-weight: 700;
	margin-bottom: var(--gpchild-space-sm);
}

.gpchild-post-grid__title a {
	color: var(--gpchild-color-text);
}

.gpchild-post-grid__title a:hover,
.gpchild-post-grid__title a:focus {
	color: var(--gpchild-color-primary);
}

.gpchild-post-grid__excerpt {
	font-size: var(--gpchild-text-sm);
	color: var(--gpchild-color-text-light);
	line-height: var(--gpchild-leading-relaxed);
	margin-bottom: var(--gpchild-space-md);
	flex-grow: 1;
}

.gpchild-post-grid__meta {
	margin-top: auto;
}

.gpchild-post-grid__read-more {
	display: inline-block;
	margin-top: var(--gpchild-space-sm);
	font-size: var(--gpchild-text-sm);
	font-weight: 600;
	color: var(--gpchild-color-primary);
}

.gpchild-post-grid__read-more:hover,
.gpchild-post-grid__read-more:focus {
	color: var(--gpchild-color-primary-dark);
}

.gpchild-post-grid__read-more::after {
	content: " \2192";
	transition: margin-left var(--gpchild-transition-fast);
}

.gpchild-post-grid__read-more:hover::after {
	margin-left: var(--gpchild-space-xs);
}


/* ==========================================================================
   6. Post Grid Featured (.gpchild-post-grid-featured)
   First post large spanning full width, rest in grid
   ========================================================================== */

.gpchild-post-grid-featured {
	display: grid;
	grid-template-columns: repeat(var(--gpchild-grid-columns), 1fr);
	gap: var(--gpchild-grid-gap);
}

.gpchild-post-grid-featured__item {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--gpchild-card-bg);
	border: 1px solid var(--gpchild-card-border);
	border-radius: var(--gpchild-card-radius);
	box-shadow: var(--gpchild-card-shadow);
	overflow: hidden;
	transition: box-shadow var(--gpchild-transition-base),
				transform var(--gpchild-transition-base);
}

.gpchild-post-grid-featured__item:hover {
	box-shadow: var(--gpchild-shadow-md);
	transform: translateY(-2px);
}

.gpchild-post-grid-featured__item--featured {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	flex-direction: row;
}

.gpchild-post-grid-featured__thumbnail {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.gpchild-post-grid-featured__item--featured .gpchild-post-grid-featured__thumbnail {
	aspect-ratio: auto;
	min-height: 350px;
}

.gpchild-post-grid-featured__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--gpchild-transition-slow);
}

.gpchild-post-grid-featured__item:hover .gpchild-post-grid-featured__image {
	transform: scale(1.05);
}

.gpchild-post-grid-featured__badge {
	position: absolute;
	top: var(--gpchild-space-sm);
	left: var(--gpchild-space-sm);
	z-index: 2;
}

.gpchild-post-grid-featured__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: var(--gpchild-card-padding);
}

.gpchild-post-grid-featured__item--featured .gpchild-post-grid-featured__body {
	justify-content: center;
	padding: var(--gpchild-space-2xl);
}

.gpchild-post-grid-featured__title {
	font-size: var(--gpchild-text-lg);
	font-weight: 700;
	margin-bottom: var(--gpchild-space-sm);
}

.gpchild-post-grid-featured__item--featured .gpchild-post-grid-featured__title {
	font-size: var(--gpchild-text-2xl);
}

.gpchild-post-grid-featured__title a {
	color: var(--gpchild-color-text);
}

.gpchild-post-grid-featured__title a:hover,
.gpchild-post-grid-featured__title a:focus {
	color: var(--gpchild-color-primary);
}

.gpchild-post-grid-featured__excerpt {
	font-size: var(--gpchild-text-sm);
	color: var(--gpchild-color-text-light);
	line-height: var(--gpchild-leading-relaxed);
	margin-bottom: var(--gpchild-space-md);
	flex-grow: 1;
}

.gpchild-post-grid-featured__item--featured .gpchild-post-grid-featured__excerpt {
	font-size: var(--gpchild-text-base);
}

.gpchild-post-grid-featured__meta {
	margin-top: auto;
}

.gpchild-post-grid-featured__read-more {
	display: inline-block;
	margin-top: var(--gpchild-space-sm);
	font-size: var(--gpchild-text-sm);
	font-weight: 600;
	color: var(--gpchild-color-primary);
}

.gpchild-post-grid-featured__read-more:hover,
.gpchild-post-grid-featured__read-more:focus {
	color: var(--gpchild-color-primary-dark);
}

.gpchild-post-grid-featured__read-more::after {
	content: " \2192";
}

@media (max-width: 768px) {
	.gpchild-post-grid-featured__item--featured {
		grid-template-columns: 1fr;
	}

	.gpchild-post-grid-featured__item--featured .gpchild-post-grid-featured__thumbnail {
		min-height: 200px;
		aspect-ratio: 16 / 10;
	}

	.gpchild-post-grid-featured__item--featured .gpchild-post-grid-featured__title {
		font-size: var(--gpchild-text-xl);
	}

	.gpchild-post-grid-featured__item--featured .gpchild-post-grid-featured__body {
		padding: var(--gpchild-card-padding);
	}
}


/* ==========================================================================
   7. Post List (.gpchild-post-list)
   Vertical list with thumbnails
   ========================================================================== */

.gpchild-post-list {
	display: flex;
	flex-direction: column;
	gap: var(--gpchild-space-lg);
}

.gpchild-post-list__item {
	position: relative;
	display: flex;
	gap: var(--gpchild-space-lg);
	background: var(--gpchild-card-bg);
	border: 1px solid var(--gpchild-card-border);
	border-radius: var(--gpchild-card-radius);
	box-shadow: var(--gpchild-card-shadow);
	overflow: hidden;
	transition: box-shadow var(--gpchild-transition-base);
}

.gpchild-post-list__item:hover {
	box-shadow: var(--gpchild-shadow-md);
}

.gpchild-post-list__thumbnail {
	position: relative;
	flex-shrink: 0;
	width: 280px;
	overflow: hidden;
}

.gpchild-post-list__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--gpchild-transition-slow);
}

.gpchild-post-list__item:hover .gpchild-post-list__image {
	transform: scale(1.05);
}

.gpchild-post-list__badge {
	position: absolute;
	top: var(--gpchild-space-sm);
	left: var(--gpchild-space-sm);
	z-index: 2;
}

.gpchild-post-list__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--gpchild-card-padding);
	flex-grow: 1;
	min-width: 0;
}

.gpchild-post-list__title {
	font-size: var(--gpchild-text-xl);
	font-weight: 700;
	margin-bottom: var(--gpchild-space-sm);
}

.gpchild-post-list__title a {
	color: var(--gpchild-color-text);
}

.gpchild-post-list__title a:hover,
.gpchild-post-list__title a:focus {
	color: var(--gpchild-color-primary);
}

.gpchild-post-list__excerpt {
	font-size: var(--gpchild-text-sm);
	color: var(--gpchild-color-text-light);
	line-height: var(--gpchild-leading-relaxed);
	margin-bottom: var(--gpchild-space-md);
}

.gpchild-post-list__meta {
	margin-top: auto;
}

.gpchild-post-list__read-more {
	display: inline-block;
	margin-top: var(--gpchild-space-sm);
	font-size: var(--gpchild-text-sm);
	font-weight: 600;
	color: var(--gpchild-color-primary);
}

.gpchild-post-list__read-more:hover,
.gpchild-post-list__read-more:focus {
	color: var(--gpchild-color-primary-dark);
}

.gpchild-post-list__read-more::after {
	content: " \2192";
}

@media (max-width: 768px) {
	.gpchild-post-list__item {
		flex-direction: column;
	}

	.gpchild-post-list__thumbnail {
		width: 100%;
		aspect-ratio: 16 / 10;
	}

	.gpchild-post-list__title {
		font-size: var(--gpchild-text-lg);
	}
}


/* ==========================================================================
   8. Post List Compact (.gpchild-post-list-compact)
   Minimal list, title + meta only, no thumbnails
   ========================================================================== */

.gpchild-post-list-compact {
	display: flex;
	flex-direction: column;
}

.gpchild-post-list-compact__item {
	display: flex;
	align-items: center;
	gap: var(--gpchild-space-md);
	padding: var(--gpchild-space-md) 0;
	border-bottom: 1px solid var(--gpchild-color-border);
	transition: background var(--gpchild-transition-fast);
}

.gpchild-post-list-compact__item:last-child {
	border-bottom: none;
}

.gpchild-post-list-compact__item:hover {
	background: var(--gpchild-color-bg-alt);
}

.gpchild-post-list-compact__number {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: var(--gpchild-text-sm);
	font-weight: 700;
	color: var(--gpchild-color-text-light);
	background: var(--gpchild-color-bg-alt);
	border-radius: var(--gpchild-radius-full);
}

.gpchild-post-list-compact__body {
	flex-grow: 1;
	min-width: 0;
}

.gpchild-post-list-compact__title {
	font-size: var(--gpchild-text-base);
	font-weight: 600;
	margin-bottom: var(--gpchild-space-xs);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gpchild-post-list-compact__title a {
	color: var(--gpchild-color-text);
}

.gpchild-post-list-compact__title a:hover,
.gpchild-post-list-compact__title a:focus {
	color: var(--gpchild-color-primary);
}

.gpchild-post-list-compact__meta {
	font-size: var(--gpchild-text-xs);
}


/* ==========================================================================
   9. Post Carousel (.gpchild-post-carousel)
   Horizontal scroll with scroll-snap
   ========================================================================== */

.gpchild-post-carousel {
	position: relative;
}

.gpchild-post-carousel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--gpchild-space-lg);
}

.gpchild-post-carousel__title {
	font-size: var(--gpchild-text-2xl);
	font-weight: 700;
}

.gpchild-post-carousel__nav {
	display: flex;
	gap: var(--gpchild-space-sm);
}

.gpchild-post-carousel__nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--gpchild-color-bg-alt);
	border: 1px solid var(--gpchild-color-border);
	border-radius: var(--gpchild-radius-full);
	color: var(--gpchild-color-text);
	font-size: var(--gpchild-text-lg);
	cursor: pointer;
	transition: background var(--gpchild-transition-fast),
				border-color var(--gpchild-transition-fast);
	text-decoration: none;
}

.gpchild-post-carousel__nav-btn:hover,
.gpchild-post-carousel__nav-btn:focus {
	background: var(--gpchild-color-primary);
	border-color: var(--gpchild-color-primary);
	color: var(--gpchild-color-text-inverse);
}

.gpchild-post-carousel__track {
	display: flex;
	gap: var(--gpchild-grid-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: var(--gpchild-space-sm);
}

.gpchild-post-carousel__track::-webkit-scrollbar {
	display: none;
}

.gpchild-post-carousel__item {
	position: relative;
	flex: 0 0 calc((100% - var(--gpchild-grid-gap) * 2) / 3);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--gpchild-card-bg);
	border: 1px solid var(--gpchild-card-border);
	border-radius: var(--gpchild-card-radius);
	box-shadow: var(--gpchild-card-shadow);
	overflow: hidden;
	transition: box-shadow var(--gpchild-transition-base),
				transform var(--gpchild-transition-base);
}

.gpchild-post-carousel__item:hover {
	box-shadow: var(--gpchild-shadow-md);
	transform: translateY(-2px);
}

.gpchild-post-carousel__thumbnail {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.gpchild-post-carousel__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--gpchild-transition-slow);
}

.gpchild-post-carousel__item:hover .gpchild-post-carousel__image {
	transform: scale(1.05);
}

.gpchild-post-carousel__badge {
	position: absolute;
	top: var(--gpchild-space-sm);
	left: var(--gpchild-space-sm);
	z-index: 2;
}

.gpchild-post-carousel__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: var(--gpchild-card-padding);
}

.gpchild-post-carousel__item-title {
	font-size: var(--gpchild-text-base);
	font-weight: 700;
	margin-bottom: var(--gpchild-space-sm);
}

.gpchild-post-carousel__item-title a {
	color: var(--gpchild-color-text);
}

.gpchild-post-carousel__item-title a:hover,
.gpchild-post-carousel__item-title a:focus {
	color: var(--gpchild-color-primary);
}

.gpchild-post-carousel__excerpt {
	font-size: var(--gpchild-text-sm);
	color: var(--gpchild-color-text-light);
	line-height: var(--gpchild-leading-relaxed);
	margin-bottom: var(--gpchild-space-md);
	flex-grow: 1;
}

.gpchild-post-carousel__item-meta {
	margin-top: auto;
}

@media (max-width: 1024px) {
	.gpchild-post-carousel__item {
		flex: 0 0 calc((100% - var(--gpchild-grid-gap)) / 2);
	}
}

@media (max-width: 768px) {
	.gpchild-post-carousel__item {
		flex: 0 0 85%;
	}
}


/* ==========================================================================
   10. Category Section (.gpchild-category-section)
   Section with category header and posts
   ========================================================================== */

.gpchild-category-section {
	padding: var(--gpchild-space-2xl) 0;
}

.gpchild-category-section--alt-bg {
	background: var(--gpchild-color-bg-alt);
	padding-left: var(--gpchild-space-lg);
	padding-right: var(--gpchild-space-lg);
}

.gpchild-category-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--gpchild-space-xl);
	padding-bottom: var(--gpchild-space-md);
	border-bottom: 2px solid var(--gpchild-color-primary);
}

.gpchild-category-section__title {
	font-size: var(--gpchild-text-xl);
	font-weight: 700;
	margin-bottom: 0;
}

.gpchild-category-section__link {
	font-size: var(--gpchild-text-sm);
	font-weight: 600;
	color: var(--gpchild-color-primary);
	white-space: nowrap;
}

.gpchild-category-section__link:hover,
.gpchild-category-section__link:focus {
	color: var(--gpchild-color-primary-dark);
}

.gpchild-category-section__link::after {
	content: " \2192";
}

.gpchild-category-section__grid {
	display: grid;
	grid-template-columns: repeat(var(--gpchild-grid-columns), 1fr);
	gap: var(--gpchild-grid-gap);
}

@media (max-width: 768px) {
	.gpchild-category-section__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--gpchild-space-sm);
	}
}


/* ==========================================================================
   11. Category Tabs (.gpchild-category-tabs)
   CSS-only tab switching using radio inputs
   ========================================================================== */

.gpchild-category-tabs {
	padding: var(--gpchild-space-2xl) 0;
}

.gpchild-category-tabs__title {
	font-size: var(--gpchild-text-2xl);
	font-weight: 700;
	margin-bottom: var(--gpchild-space-lg);
}

/* Hide radio inputs */
.gpchild-category-tabs__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.gpchild-category-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gpchild-space-xs);
	margin-bottom: var(--gpchild-space-xl);
	border-bottom: 2px solid var(--gpchild-color-border);
	padding-bottom: 0;
}

.gpchild-category-tabs__label {
	display: inline-block;
	padding: var(--gpchild-space-sm) var(--gpchild-space-lg);
	font-size: var(--gpchild-text-sm);
	font-weight: 600;
	color: var(--gpchild-color-text-light);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color var(--gpchild-transition-fast),
				border-color var(--gpchild-transition-fast);
}

.gpchild-category-tabs__label:hover {
	color: var(--gpchild-color-primary);
}

/* Active tab label - using general sibling combinator */
.gpchild-category-tabs__input:checked + .gpchild-category-tabs__label {
	color: var(--gpchild-color-primary);
	border-bottom-color: var(--gpchild-color-primary);
}

/* Tab panels */
.gpchild-category-tabs__panels {
	position: relative;
}

.gpchild-category-tabs__panel {
	display: none;
}

.gpchild-category-tabs__panel--active {
	display: block;
}

/* CSS-only panel switching using :checked + label ~ panel approach */
.gpchild-category-tabs__input:nth-of-type(1):checked ~ .gpchild-category-tabs__panels .gpchild-category-tabs__panel:nth-child(1),
.gpchild-category-tabs__input:nth-of-type(2):checked ~ .gpchild-category-tabs__panels .gpchild-category-tabs__panel:nth-child(2),
.gpchild-category-tabs__input:nth-of-type(3):checked ~ .gpchild-category-tabs__panels .gpchild-category-tabs__panel:nth-child(3),
.gpchild-category-tabs__input:nth-of-type(4):checked ~ .gpchild-category-tabs__panels .gpchild-category-tabs__panel:nth-child(4),
.gpchild-category-tabs__input:nth-of-type(5):checked ~ .gpchild-category-tabs__panels .gpchild-category-tabs__panel:nth-child(5),
.gpchild-category-tabs__input:nth-of-type(6):checked ~ .gpchild-category-tabs__panels .gpchild-category-tabs__panel:nth-child(6) {
	display: block;
}

.gpchild-category-tabs__panel-grid {
	display: grid;
	grid-template-columns: repeat(var(--gpchild-grid-columns), 1fr);
	gap: var(--gpchild-grid-gap);
}

@media (max-width: 768px) {
	.gpchild-category-tabs__nav {
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.gpchild-category-tabs__nav::-webkit-scrollbar {
		display: none;
	}

	.gpchild-category-tabs__label {
		white-space: nowrap;
	}
}


/* ==========================================================================
   12. Sidebar Posts (.gpchild-sidebar-posts)
   Compact sidebar widget
   ========================================================================== */

.gpchild-sidebar-posts {
	background: var(--gpchild-card-bg);
	border: 1px solid var(--gpchild-card-border);
	border-radius: var(--gpchild-card-radius);
	box-shadow: var(--gpchild-card-shadow);
	overflow: hidden;
}

.gpchild-sidebar-posts__header {
	padding: var(--gpchild-space-md) var(--gpchild-card-padding);
	background: var(--gpchild-color-bg-alt);
	border-bottom: 1px solid var(--gpchild-color-border);
}

.gpchild-sidebar-posts__title {
	font-size: var(--gpchild-text-base);
	font-weight: 700;
	margin-bottom: 0;
}

.gpchild-sidebar-posts__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gpchild-sidebar-posts__item {
	display: flex;
	gap: var(--gpchild-space-md);
	padding: var(--gpchild-space-md) var(--gpchild-card-padding);
	border-bottom: 1px solid var(--gpchild-color-border);
	transition: background var(--gpchild-transition-fast);
}

.gpchild-sidebar-posts__item:last-child {
	border-bottom: none;
}

.gpchild-sidebar-posts__item:hover {
	background: var(--gpchild-color-bg-alt);
}

.gpchild-sidebar-posts__thumbnail {
	flex-shrink: 0;
	width: 70px;
	height: 70px;
	border-radius: var(--gpchild-radius-sm);
	overflow: hidden;
}

.gpchild-sidebar-posts__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gpchild-sidebar-posts__body {
	flex-grow: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.gpchild-sidebar-posts__item-title {
	font-size: var(--gpchild-text-sm);
	font-weight: 600;
	margin-bottom: var(--gpchild-space-xs);
	line-height: var(--gpchild-leading-tight);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gpchild-sidebar-posts__item-title a {
	color: var(--gpchild-color-text);
}

.gpchild-sidebar-posts__item-title a:hover,
.gpchild-sidebar-posts__item-title a:focus {
	color: var(--gpchild-color-primary);
}

.gpchild-sidebar-posts__item-meta {
	font-size: var(--gpchild-text-xs);
	color: var(--gpchild-color-text-light);
}

.gpchild-sidebar-posts__number {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: var(--gpchild-text-sm);
	font-weight: 700;
	color: var(--gpchild-color-primary);
	background: rgba(37, 99, 235, 0.1);
	border-radius: var(--gpchild-radius-full);
}

.gpchild-sidebar-posts__more {
	display: block;
	padding: var(--gpchild-space-md) var(--gpchild-card-padding);
	text-align: center;
	font-size: var(--gpchild-text-sm);
	font-weight: 600;
	color: var(--gpchild-color-primary);
	border-top: 1px solid var(--gpchild-color-border);
	transition: background var(--gpchild-transition-fast);
}

.gpchild-sidebar-posts__more:hover,
.gpchild-sidebar-posts__more:focus {
	background: var(--gpchild-color-bg-alt);
	color: var(--gpchild-color-primary-dark);
}


/* ==========================================================================
   13. Newsletter CTA (.gpchild-newsletter)
   Email signup block
   ========================================================================== */

.gpchild-newsletter {
	background: var(--gpchild-color-primary);
	border-radius: var(--gpchild-radius-lg);
	padding: var(--gpchild-space-3xl);
	text-align: center;
	color: var(--gpchild-color-text-inverse);
}

.gpchild-newsletter--dark {
	background: var(--gpchild-color-bg-dark);
}

.gpchild-newsletter--gradient {
	background: linear-gradient(135deg, var(--gpchild-color-primary), var(--gpchild-color-secondary));
}

.gpchild-newsletter__icon {
	font-size: var(--gpchild-text-4xl);
	margin-bottom: var(--gpchild-space-md);
}

.gpchild-newsletter__title {
	font-size: var(--gpchild-text-2xl);
	font-weight: 800;
	margin-bottom: var(--gpchild-space-sm);
	color: var(--gpchild-color-text-inverse);
}

.gpchild-newsletter__description {
	font-size: var(--gpchild-text-base);
	opacity: 0.9;
	margin-bottom: var(--gpchild-space-xl);
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
	line-height: var(--gpchild-leading-relaxed);
}

.gpchild-newsletter__form {
	display: flex;
	gap: var(--gpchild-space-sm);
	max-width: 480px;
	margin: 0 auto;
}

.gpchild-newsletter__input {
	flex: 1;
	padding: var(--gpchild-space-sm) var(--gpchild-space-lg);
	font-size: var(--gpchild-text-base);
	font-family: var(--gpchild-font-body);
	border: 2px solid transparent;
	border-radius: var(--gpchild-radius-md);
	outline: none;
	transition: border-color var(--gpchild-transition-fast);
}

.gpchild-newsletter__input:focus {
	border-color: var(--gpchild-color-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
	outline: none;
}

.gpchild-newsletter__input::placeholder {
	color: var(--gpchild-color-text-light);
}

.gpchild-newsletter__submit {
	flex-shrink: 0;
	padding: var(--gpchild-space-sm) var(--gpchild-space-xl);
	font-size: var(--gpchild-text-base);
	font-weight: 700;
	font-family: var(--gpchild-font-body);
	background: var(--gpchild-color-bg-dark);
	color: var(--gpchild-color-text-inverse);
	border: none;
	border-radius: var(--gpchild-radius-md);
	cursor: pointer;
	transition: background var(--gpchild-transition-fast),
				transform var(--gpchild-transition-fast);
}

.gpchild-newsletter--dark .gpchild-newsletter__submit {
	background: var(--gpchild-color-primary);
}

.gpchild-newsletter__submit:hover,
.gpchild-newsletter__submit:focus {
	background: var(--gpchild-color-accent);
	transform: translateY(-1px);
}

.gpchild-newsletter__disclaimer {
	font-size: var(--gpchild-text-xs);
	opacity: 0.7;
	margin-top: var(--gpchild-space-md);
}

@media (max-width: 768px) {
	.gpchild-newsletter {
		padding: var(--gpchild-space-2xl) var(--gpchild-space-lg);
	}

	.gpchild-newsletter__form {
		flex-direction: column;
	}

	.gpchild-newsletter__submit {
		width: 100%;
	}
}


/* ==========================================================================
   14. Author Spotlight (.gpchild-author-spotlight)
   Author card with avatar
   ========================================================================== */

.gpchild-author-spotlight {
	display: flex;
	align-items: center;
	gap: var(--gpchild-space-xl);
	background: var(--gpchild-card-bg);
	border: 1px solid var(--gpchild-card-border);
	border-radius: var(--gpchild-card-radius);
	box-shadow: var(--gpchild-card-shadow);
	padding: var(--gpchild-space-xl);
	transition: box-shadow var(--gpchild-transition-base);
}

.gpchild-author-spotlight:hover {
	box-shadow: var(--gpchild-shadow-md);
}

.gpchild-author-spotlight--centered {
	flex-direction: column;
	text-align: center;
}

.gpchild-author-spotlight__avatar {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: var(--gpchild-radius-full);
	overflow: hidden;
	border: 3px solid var(--gpchild-color-primary);
}

.gpchild-author-spotlight--centered .gpchild-author-spotlight__avatar {
	width: 100px;
	height: 100px;
}

.gpchild-author-spotlight__avatar-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gpchild-author-spotlight__body {
	flex-grow: 1;
	min-width: 0;
}

.gpchild-author-spotlight__label {
	font-size: var(--gpchild-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--gpchild-color-primary);
	margin-bottom: var(--gpchild-space-xs);
}

.gpchild-author-spotlight__name {
	font-size: var(--gpchild-text-xl);
	font-weight: 700;
	margin-bottom: var(--gpchild-space-xs);
}

.gpchild-author-spotlight__name a {
	color: var(--gpchild-color-text);
}

.gpchild-author-spotlight__name a:hover,
.gpchild-author-spotlight__name a:focus {
	color: var(--gpchild-color-primary);
}

.gpchild-author-spotlight__role {
	font-size: var(--gpchild-text-sm);
	color: var(--gpchild-color-text-light);
	margin-bottom: var(--gpchild-space-sm);
}

.gpchild-author-spotlight__bio {
	font-size: var(--gpchild-text-sm);
	color: var(--gpchild-color-text-light);
	line-height: var(--gpchild-leading-relaxed);
	margin-bottom: var(--gpchild-space-md);
}

.gpchild-author-spotlight__stats {
	display: flex;
	gap: var(--gpchild-space-lg);
	font-size: var(--gpchild-text-sm);
}

.gpchild-author-spotlight--centered .gpchild-author-spotlight__stats {
	justify-content: center;
}

.gpchild-author-spotlight__stat-value {
	display: block;
	font-weight: 700;
	font-size: var(--gpchild-text-lg);
	color: var(--gpchild-color-text);
}

.gpchild-author-spotlight__stat-label {
	color: var(--gpchild-color-text-light);
	font-size: var(--gpchild-text-xs);
}

.gpchild-author-spotlight__social {
	display: flex;
	gap: var(--gpchild-space-sm);
	margin-top: var(--gpchild-space-md);
}

.gpchild-author-spotlight--centered .gpchild-author-spotlight__social {
	justify-content: center;
}

.gpchild-author-spotlight__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--gpchild-color-bg-alt);
	border: 1px solid var(--gpchild-color-border);
	border-radius: var(--gpchild-radius-full);
	color: var(--gpchild-color-text-light);
	font-size: var(--gpchild-text-sm);
	transition: background var(--gpchild-transition-fast),
				color var(--gpchild-transition-fast),
				border-color var(--gpchild-transition-fast);
}

.gpchild-author-spotlight__social-link:hover,
.gpchild-author-spotlight__social-link:focus {
	background: var(--gpchild-color-primary);
	border-color: var(--gpchild-color-primary);
	color: var(--gpchild-color-text-inverse);
}

@media (max-width: 768px) {
	.gpchild-author-spotlight {
		flex-direction: column;
		text-align: center;
	}

	.gpchild-author-spotlight__stats {
		justify-content: center;
	}

	.gpchild-author-spotlight__social {
		justify-content: center;
	}
}


/* ==========================================================================
   15. Ad Slot (.gpchild-ad-slot)
   Placeholder ad block
   ========================================================================== */

.gpchild-ad-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gpchild-color-bg-alt);
	border: 2px dashed var(--gpchild-color-border);
	border-radius: var(--gpchild-card-radius);
	padding: var(--gpchild-space-xl);
	min-height: 120px;
	text-align: center;
}

.gpchild-ad-slot--banner {
	min-height: 100px;
	max-width: 728px;
	margin-left: auto;
	margin-right: auto;
}

.gpchild-ad-slot--sidebar {
	min-height: 250px;
}

.gpchild-ad-slot--large {
	min-height: 280px;
}

.gpchild-ad-slot--full-width {
	max-width: none;
	border-radius: 0;
}

.gpchild-ad-slot__inner {
	max-width: 100%;
}

.gpchild-ad-slot__label {
	font-size: var(--gpchild-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--gpchild-color-text-light);
	margin-bottom: var(--gpchild-space-sm);
}

.gpchild-ad-slot__content {
	overflow: hidden;
}

.gpchild-ad-slot__content img {
	max-width: 100%;
	height: auto;
}

.gpchild-ad-slot__placeholder {
	font-size: var(--gpchild-text-sm);
	color: var(--gpchild-color-text-light);
}


/* ==========================================================================
   16. Breadcrumb Bar (.gpchild-breadcrumb)
   Breadcrumb navigation
   ========================================================================== */

.gpchild-breadcrumb {
	background: var(--gpchild-color-bg-alt);
	border-bottom: 1px solid var(--gpchild-color-border);
	padding: var(--gpchild-space-md) 0;
}

.gpchild-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--gpchild-text-sm);
}

.gpchild-breadcrumb__item {
	display: flex;
	align-items: center;
}

.gpchild-breadcrumb__item::after {
	content: "/";
	margin: 0 var(--gpchild-space-sm);
	color: var(--gpchild-color-text-light);
}

.gpchild-breadcrumb__item:last-child::after {
	display: none;
}

.gpchild-breadcrumb__link {
	color: var(--gpchild-color-text-light);
	transition: color var(--gpchild-transition-fast);
}

.gpchild-breadcrumb__link:hover,
.gpchild-breadcrumb__link:focus {
	color: var(--gpchild-color-primary);
}

.gpchild-breadcrumb__link--home {
	display: inline-flex;
	align-items: center;
	gap: var(--gpchild-space-xs);
}

.gpchild-breadcrumb__current {
	color: var(--gpchild-color-text);
	font-weight: 600;
}

@media (max-width: 768px) {
	.gpchild-breadcrumb__list {
		font-size: var(--gpchild-text-xs);
	}
}


/* ==========================================================================
   17. Pagination Section (.gpchild-pagination)
   Page number navigation
   ========================================================================== */

.gpchild-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gpchild-space-xs);
	padding: var(--gpchild-space-xl) 0;
}

.gpchild-pagination--left {
	justify-content: flex-start;
}

.gpchild-pagination--between {
	justify-content: space-between;
}

.gpchild-pagination__link,
.gpchild-pagination__current,
.gpchild-pagination__dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--gpchild-space-sm);
	font-size: var(--gpchild-text-sm);
	font-weight: 600;
	border-radius: var(--gpchild-radius-md);
	transition: background var(--gpchild-transition-fast),
				color var(--gpchild-transition-fast),
				border-color var(--gpchild-transition-fast);
}

.gpchild-pagination__link {
	color: var(--gpchild-color-text);
	background: var(--gpchild-color-bg);
	border: 1px solid var(--gpchild-color-border);
}

.gpchild-pagination__link:hover,
.gpchild-pagination__link:focus {
	background: var(--gpchild-color-primary);
	border-color: var(--gpchild-color-primary);
	color: var(--gpchild-color-text-inverse);
}

.gpchild-pagination__current {
	background: var(--gpchild-color-primary);
	color: var(--gpchild-color-text-inverse);
	border: 1px solid var(--gpchild-color-primary);
}

.gpchild-pagination__dots {
	color: var(--gpchild-color-text-light);
	border: 1px solid transparent;
	cursor: default;
}

.gpchild-pagination__prev,
.gpchild-pagination__next {
	font-weight: 600;
}

.gpchild-pagination__prev--disabled,
.gpchild-pagination__next--disabled {
	opacity: 0.4;
	pointer-events: none;
}

.gpchild-pagination__info {
	font-size: var(--gpchild-text-sm);
	color: var(--gpchild-color-text-light);
	padding: 0 var(--gpchild-space-sm);
}

@media (max-width: 768px) {
	.gpchild-pagination {
		flex-wrap: wrap;
	}

	.gpchild-pagination__link,
	.gpchild-pagination__current,
	.gpchild-pagination__dots {
		min-width: 36px;
		height: 36px;
		font-size: var(--gpchild-text-xs);
	}
}


/* ==========================================================================
   Sidebar Overrides
   Force compact/stacked layouts for components inside the narrow sidebar.
   The sidebar is only 260-300px wide so viewport-based media queries
   do not trigger — these rules ensure components adapt to the
   constrained width regardless of screen size.
   ========================================================================== */

/* Newsletter: stack form vertically */
.gpchild-sidebar .gpchild-newsletter {
	padding: var(--gpchild-space-xl) var(--gpchild-space-md);
}

.gpchild-sidebar .gpchild-newsletter__title {
	font-size: var(--gpchild-text-lg);
}

.gpchild-sidebar .gpchild-newsletter__description {
	font-size: var(--gpchild-text-sm);
}

.gpchild-sidebar .gpchild-newsletter__form {
	flex-direction: column;
}

.gpchild-sidebar .gpchild-newsletter__submit {
	width: 100%;
}

/* Post grid: force single column */
.gpchild-sidebar .gpchild-post-grid {
	--gpchild-grid-columns: 1;
}

/* Post grid featured: single column, no side-by-side featured */
.gpchild-sidebar .gpchild-post-grid-featured {
	display: flex;
	flex-direction: column;
	gap: var(--gpchild-grid-gap);
}

.gpchild-sidebar .gpchild-post-grid-featured__item--featured {
	grid-template-columns: 1fr;
}

/* Post list: stack thumbnail above body */
.gpchild-sidebar .gpchild-post-list__item {
	flex-direction: column;
	gap: 0;
}

.gpchild-sidebar .gpchild-post-list__thumbnail {
	width: 100%;
	aspect-ratio: 16 / 10;
}

/* Post carousel: single item visible */
.gpchild-sidebar .gpchild-post-carousel__item {
	flex: 0 0 100%;
}

/* Category section: single column grid */
.gpchild-sidebar .gpchild-category-section__grid {
	--gpchild-grid-columns: 1;
}

/* Category tabs: horizontal scroll, no wrap */
.gpchild-sidebar .gpchild-category-tabs__nav {
	overflow-x: auto;
	flex-wrap: nowrap;
	scrollbar-width: none;
}

.gpchild-sidebar .gpchild-category-tabs__nav::-webkit-scrollbar {
	display: none;
}

.gpchild-sidebar .gpchild-category-tabs__label {
	white-space: nowrap;
	font-size: var(--gpchild-text-xs);
	padding: var(--gpchild-space-xs) var(--gpchild-space-sm);
}

/* Author spotlight: stack vertically */
.gpchild-sidebar .gpchild-author-spotlight {
	flex-direction: column;
	text-align: center;
}

.gpchild-sidebar .gpchild-author-spotlight__stats {
	justify-content: center;
}

.gpchild-sidebar .gpchild-author-spotlight__social {
	justify-content: center;
}

/* Hero split: stack vertically in sidebar */
.gpchild-sidebar .gpchild-hero-split,
.gpchild-sidebar .gpchild-hero-split--reverse {
	flex-direction: column;
}

.gpchild-sidebar .gpchild-hero-split__media {
	min-height: 180px;
}

.gpchild-sidebar .gpchild-hero-split__title {
	font-size: var(--gpchild-text-xl);
}

/* Hero full: reduce height in sidebar */
.gpchild-sidebar .gpchild-hero-full {
	min-height: 250px;
}

.gpchild-sidebar .gpchild-hero-full__title {
	font-size: var(--gpchild-text-xl);
}

/* Hero slider: reduce height in sidebar */
.gpchild-sidebar .gpchild-hero-slider__slide {
	min-height: 250px;
}

.gpchild-sidebar .gpchild-hero-slider__title {
	font-size: var(--gpchild-text-xl);
}

/* Ad slot: ensure it fits */
.gpchild-sidebar .gpchild-ad-slot__inner {
	padding: var(--gpchild-space-md);
}

/* Breadcrumb: smaller text */
.gpchild-sidebar .gpchild-breadcrumb__list {
	font-size: var(--gpchild-text-xs);
}

/* Section titles: slightly smaller */
.gpchild-sidebar .gpchild-section__title {
	font-size: var(--gpchild-text-lg);
}

/* ==========================================================================
   Header (.gpchild-header)
   ========================================================================== */

.gpchild-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--gpchild-color-bg);
	border-bottom: 1px solid var(--gpchild-color-border);
	font-family: var(--gpchild-font-body);
}

.gpchild-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	gap: var(--gpchild-space-lg);
}

/* Logo */

.gpchild-header__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--gpchild-color-text);
	flex-shrink: 0;
	transition: opacity var(--gpchild-transition-fast);
}

.gpchild-header__logo:hover,
.gpchild-header__logo:focus {
	opacity: 0.8;
	color: var(--gpchild-color-text);
}

.gpchild-header__logo-img {
	max-height: 40px;
	width: auto;
	display: block;
}

.gpchild-header__site-name {
	font-family: var(--gpchild-font-heading);
	font-size: var(--gpchild-text-xl);
	font-weight: 700;
	color: var(--gpchild-color-text);
	letter-spacing: -0.025em;
	line-height: 1;
}

/* Navigation */

.gpchild-header__nav {
	display: flex;
	align-items: center;
}

.gpchild-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--gpchild-space-xs);
}

.gpchild-header__menu > li {
	position: relative;
}

.gpchild-header__menu a {
	display: block;
	padding: var(--gpchild-space-sm) var(--gpchild-space-md);
	font-size: var(--gpchild-text-sm);
	font-weight: 500;
	color: var(--gpchild-color-text-light);
	text-decoration: none;
	border-radius: var(--gpchild-radius-sm);
	transition: color var(--gpchild-transition-fast), background-color var(--gpchild-transition-fast);
	white-space: nowrap;
}

.gpchild-header__menu a:hover,
.gpchild-header__menu a:focus {
	color: var(--gpchild-color-primary);
	background-color: var(--gpchild-color-bg-alt);
}

.gpchild-header__menu .current-menu-item > a,
.gpchild-header__menu .current_page_item > a {
	color: var(--gpchild-color-primary);
	font-weight: 600;
}

/* Dropdown submenu (desktop) */

.gpchild-header__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: var(--gpchild-space-xs) 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background-color: var(--gpchild-color-bg);
	border: 1px solid var(--gpchild-color-border);
	border-radius: var(--gpchild-radius-md);
	box-shadow: var(--gpchild-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--gpchild-transition-base), transform var(--gpchild-transition-base), visibility var(--gpchild-transition-base);
	z-index: 100;
}

.gpchild-header__menu > li:hover > .sub-menu,
.gpchild-header__menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.gpchild-header__menu .sub-menu a {
	padding: var(--gpchild-space-sm) var(--gpchild-space-md);
	border-radius: 0;
	font-size: var(--gpchild-text-sm);
}

.gpchild-header__menu .sub-menu li:first-child a {
	border-radius: var(--gpchild-radius-md) var(--gpchild-radius-md) 0 0;
}

.gpchild-header__menu .sub-menu li:last-child a {
	border-radius: 0 0 var(--gpchild-radius-md) var(--gpchild-radius-md);
}

/* Hamburger toggle */

.gpchild-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: var(--gpchild-radius-sm);
	transition: background-color var(--gpchild-transition-fast);
	-webkit-tap-highlight-color: transparent;
}

.gpchild-header__toggle:hover,
.gpchild-header__toggle:focus-visible {
	background-color: var(--gpchild-color-bg-alt);
}

.gpchild-header__toggle-bar {
	display: block;
	width: 20px;
	height: 2px;
	background-color: var(--gpchild-color-text);
	border-radius: 2px;
	transition: transform var(--gpchild-transition-base), opacity var(--gpchild-transition-base);
	transform-origin: center;
}

/* Hamburger X animation */
.gpchild-header--menu-open .gpchild-header__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.gpchild-header--menu-open .gpchild-header__toggle-bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.gpchild-header--menu-open .gpchild-header__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Prevent body scroll when mobile menu is open */
body.gpchild-menu-open {
	overflow: hidden;
}

/* ---------- Header responsive ---------- */

@media (max-width: 768px) {
	.gpchild-header__inner {
		min-height: 56px;
	}

	.gpchild-header__logo-img {
		max-height: 34px;
	}

	.gpchild-header__toggle {
		display: flex;
	}

	.gpchild-header__nav {
		display: none;
		position: fixed;
		top: 56px;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--gpchild-color-bg);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 999;
	}

	.gpchild-header__nav--open {
		display: block;
	}

	.gpchild-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--gpchild-space-md) var(--gpchild-space-lg);
	}

	.gpchild-header__menu > li {
		border-bottom: 1px solid var(--gpchild-color-border);
	}

	.gpchild-header__menu > li:last-child {
		border-bottom: none;
	}

	.gpchild-header__menu a {
		padding: var(--gpchild-space-md);
		font-size: var(--gpchild-text-base);
		border-radius: 0;
	}

	/* Mobile submenu */
	.gpchild-header__menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: none;
		box-shadow: none;
		background: transparent;
		padding: 0;
		min-width: 0;
		border-radius: 0;
	}

	.gpchild-header__menu .sub-menu a {
		padding-left: calc(var(--gpchild-space-md) + var(--gpchild-space-lg));
		font-size: var(--gpchild-text-sm);
		color: var(--gpchild-color-text-light);
	}

	.gpchild-header__menu .sub-menu li:first-child a,
	.gpchild-header__menu .sub-menu li:last-child a {
		border-radius: 0;
	}
}

@media (max-width: 480px) {
	.gpchild-header__inner {
		min-height: 48px;
		gap: var(--gpchild-space-sm);
	}

	.gpchild-header__logo-img {
		max-height: 28px;
	}

	.gpchild-header__site-name {
		font-size: var(--gpchild-text-lg);
	}

	.gpchild-header__nav {
		top: 48px;
	}

	.gpchild-header__toggle {
		width: 40px;
		height: 40px;
		padding: 8px;
	}
}

@media (max-width: 360px) {
	.gpchild-header__site-name {
		font-size: var(--gpchild-text-base);
	}
}

/* ==========================================================================
   Footer (.gpchild-footer)
   ========================================================================== */

.gpchild-footer {
	background-color: var(--gpchild-color-primary-dark);
	color: var(--gpchild-color-text-inverse);
	margin-top: var(--gpchild-space-3xl);
}

/* ---------- Main: brand + nav grid ---------- */

.gpchild-footer__main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gpchild-space-3xl);
	padding: var(--gpchild-space-3xl) 0;
}

/* Brand */

.gpchild-footer__brand {
	max-width: 380px;
}

.gpchild-footer__logo {
	display: inline-block;
	text-decoration: none;
	color: var(--gpchild-color-text-inverse);
	transition: opacity var(--gpchild-transition-fast);
}

.gpchild-footer__logo:hover,
.gpchild-footer__logo:focus {
	opacity: 0.85;
	color: var(--gpchild-color-text-inverse);
}

.gpchild-footer__logo-img {
	max-height: 44px;
	width: auto;
	display: block;
}

.gpchild-footer__site-name {
	font-family: var(--gpchild-font-heading);
	font-size: var(--gpchild-text-2xl);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: var(--gpchild-leading-tight);
	color: var(--gpchild-color-text-inverse);
}

.gpchild-footer__tagline {
	margin: var(--gpchild-space-md) 0 0;
	font-size: var(--gpchild-text-sm);
	color: color-mix(in srgb, var(--gpchild-color-text-inverse) 60%, transparent);
	line-height: var(--gpchild-leading-relaxed);
	max-width: 300px;
}

/* Navigation */

.gpchild-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gpchild-space-sm) var(--gpchild-space-xl);
}

.gpchild-footer__menu li {
	margin: 0;
	padding: 0;
}

.gpchild-footer__menu a {
	display: inline-block;
	padding: var(--gpchild-space-xs) 0;
	font-size: var(--gpchild-text-sm);
	color: color-mix(in srgb, var(--gpchild-color-text-inverse) 70%, transparent);
	text-decoration: none;
	transition: color var(--gpchild-transition-fast);
	position: relative;
	white-space: nowrap;
}

.gpchild-footer__menu a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--gpchild-color-text-inverse);
	transition: width var(--gpchild-transition-base);
}

.gpchild-footer__menu a:hover,
.gpchild-footer__menu a:focus {
	color: var(--gpchild-color-text-inverse);
}

.gpchild-footer__menu a:hover::after,
.gpchild-footer__menu a:focus::after {
	width: 100%;
}

.gpchild-footer__menu .current-menu-item a {
	color: var(--gpchild-color-text-inverse);
}

.gpchild-footer__menu .current-menu-item a::after {
	width: 100%;
}

/* ---------- Divider ---------- */

.gpchild-footer__divider {
	height: 1px;
	background: color-mix(in srgb, var(--gpchild-color-text-inverse) 12%, transparent);
}

/* ---------- Bottom bar ---------- */

.gpchild-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--gpchild-space-md);
	padding: var(--gpchild-space-lg) 0;
}

.gpchild-footer__copyright {
	margin: 0;
	font-size: var(--gpchild-text-xs);
	color: color-mix(in srgb, var(--gpchild-color-text-inverse) 45%, transparent);
}

.gpchild-footer__back-to-top {
	display: inline-flex;
	align-items: center;
	gap: var(--gpchild-space-xs);
	font-size: var(--gpchild-text-xs);
	color: color-mix(in srgb, var(--gpchild-color-text-inverse) 45%, transparent);
	text-decoration: none;
	transition: color var(--gpchild-transition-fast);
}

.gpchild-footer__back-to-top:hover,
.gpchild-footer__back-to-top:focus {
	color: var(--gpchild-color-text-inverse);
}

.gpchild-footer__back-to-top svg {
	transition: transform var(--gpchild-transition-fast);
}

.gpchild-footer__back-to-top:hover svg {
	transform: translateY(-2px);
}

/* ---------- Footer responsive ---------- */

@media (max-width: 1024px) {
	.gpchild-footer__menu {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.gpchild-footer__main {
		grid-template-columns: 1fr;
		gap: var(--gpchild-space-2xl);
		padding: var(--gpchild-space-2xl) 0;
		text-align: center;
	}

	.gpchild-footer__brand {
		max-width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.gpchild-footer__tagline {
		max-width: 100%;
	}

	.gpchild-footer__menu {
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
		text-align: center;
	}

	.gpchild-footer__bottom {
		flex-direction: column;
		text-align: center;
		gap: var(--gpchild-space-sm);
	}
}

@media (max-width: 480px) {
	.gpchild-footer__menu {
		grid-template-columns: 1fr;
		gap: var(--gpchild-space-xs) var(--gpchild-space-lg);
	}

	.gpchild-footer__site-name {
		font-size: var(--gpchild-text-xl);
	}
}

@media (max-width: 360px) {
	.gpchild-footer__menu {
		grid-template-columns: 1fr;
	}

	.gpchild-footer__main {
		padding: var(--gpchild-space-xl) 0;
	}
}

/* ==========================================================================
   Global Mobile Responsive Fixes
   ========================================================================== */

/* --- 480px: Smartphone landscape / large phone --- */
@media (max-width: 480px) {

	/* Post list: thumbnail must not overflow container */
	.gpchild-post-list__item {
		flex-direction: column;
	}

	.gpchild-post-list__thumbnail {
		width: 100%;
		height: 180px;
	}

	.gpchild-post-list__body {
		padding: var(--gpchild-space-md);
	}

	/* Post list compact: tighter */
	.gpchild-post-list-compact__item {
		padding: var(--gpchild-space-sm) 0;
	}

	/* Carousel: show single item */
	.gpchild-post-carousel__item {
		flex: 0 0 100%;
	}

	/* Hero CTA: reduce min-height */
	.gpchild-hero-cta {
		min-height: 250px;
	}

	/* Hero full: reduce content padding */
	.gpchild-hero-full__content {
		padding: var(--gpchild-space-xl) var(--gpchild-space-md);
	}

	/* Hero slider: reduce slide height and dot size */
	.gpchild-hero-slider__slide {
		min-height: var(--gpchild-hero-height);
	}

	.gpchild-hero-slider__dot {
		width: 44px;
		height: 44px;
	}

	.gpchild-hero-slider__dot-img {
		width: 44px;
		height: 44px;
	}

	/* Post grid featured: reduce thumbnail height */
	.gpchild-post-grid-featured__item--featured .gpchild-post-grid-featured__thumbnail {
		min-height: 160px;
	}

	.gpchild-post-grid-featured__item--featured {
		grid-template-columns: 1fr;
	}

	/* Numbered list: reflow */
	.gpchild-list-numbered__item {
		gap: var(--gpchild-space-sm);
	}

	.gpchild-list-numbered__number {
		font-size: var(--gpchild-text-2xl);
		min-width: 2.5rem;
	}

	/* Timeline: reduce left spacing */
	.gpchild-list-timeline {
		padding-left: var(--gpchild-space-md);
	}

	.gpchild-list-timeline__item::before {
		left: calc(-1 * var(--gpchild-space-md) - 4px);
	}

	.gpchild-list-timeline::before {
		left: calc(-1 * var(--gpchild-space-md) + 1px);
	}

	/* Newsletter: stack form inline */
	.gpchild-newsletter__form {
		flex-direction: column;
	}

	.gpchild-newsletter__input {
		width: 100%;
	}

	.gpchild-newsletter__button {
		width: 100%;
	}

	/* Tabs: scroll horizontally instead of wrapping */
	.gpchild-tabs__nav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		gap: 0;
	}

	.gpchild-tabs__button {
		white-space: nowrap;
		flex-shrink: 0;
	}
}

/* --- 360px: Small phone --- */
@media (max-width: 360px) {

	/* Post list: even smaller thumbnail */
	.gpchild-post-list__thumbnail {
		height: 150px;
	}

	/* Hero CTA: further reduce */
	.gpchild-hero-cta {
		min-height: 200px;
	}

	/* Hero slider: hide dots on very small screens */
	.gpchild-hero-slider__nav {
		display: none;
	}

	/* Post grid featured: reduce further */
	.gpchild-post-grid-featured__item--featured .gpchild-post-grid-featured__thumbnail {
		min-height: 130px;
	}

	/* Numbered list: inline number */
	.gpchild-list-numbered__number {
		font-size: var(--gpchild-text-xl);
		min-width: 2rem;
	}

	/* Timeline: hide decorative line */
	.gpchild-list-timeline::before {
		display: none;
	}

	.gpchild-list-timeline__item::before {
		display: none;
	}

	.gpchild-list-timeline {
		padding-left: 0;
	}

	/* Carousel: tighter padding */
	.gpchild-post-carousel__item {
		padding: 0;
	}
}

/* --- 320px: Smallest phone --- */
@media (max-width: 320px) {

	/* Post list: minimal thumbnail */
	.gpchild-post-list__thumbnail {
		height: 120px;
	}

	/* Hero: minimal height */
	.gpchild-hero-cta {
		min-height: 160px;
	}

	.gpchild-hero-full__content {
		padding: var(--gpchild-space-md);
	}

	/* Post grid featured: minimal */
	.gpchild-post-grid-featured__item--featured .gpchild-post-grid-featured__thumbnail {
		min-height: 100px;
	}

	/* Category section grid: single column */
	.gpchild-category-section__grid {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================================
   Skip Link (.gpchild-skip-link)
   Accessible skip-to-content link, visible only on focus
   ========================================================================== */

.gpchild-skip-link {
	position: fixed;
	top: -100%;
	left: var(--gpchild-space-md);
	z-index: 10000;
	padding: var(--gpchild-space-sm) var(--gpchild-space-lg);
	font-size: var(--gpchild-text-sm);
	font-weight: 600;
	color: var(--gpchild-color-text-inverse);
	background: var(--gpchild-color-primary);
	border-radius: 0 0 var(--gpchild-radius-md) var(--gpchild-radius-md);
	text-decoration: none;
	transition: top var(--gpchild-transition-fast);
	box-shadow: var(--gpchild-shadow-lg);
}

.gpchild-skip-link:focus {
	top: 0;
	color: var(--gpchild-color-text-inverse);
	outline: 2px solid var(--gpchild-color-text-inverse);
	outline-offset: -2px;
}


/* ==========================================================================
   Floating Back-to-Top Button (.gpchild-back-to-top)
   ========================================================================== */

.gpchild-back-to-top {
	position: fixed;
	bottom: var(--gpchild-space-xl);
	right: var(--gpchild-space-xl);
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: var(--gpchild-color-primary);
	color: var(--gpchild-color-text-inverse);
	border: none;
	border-radius: var(--gpchild-radius-full);
	box-shadow: var(--gpchild-shadow-lg);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity var(--gpchild-transition-base),
				visibility var(--gpchild-transition-base),
				transform var(--gpchild-transition-base),
				background var(--gpchild-transition-fast);
}

.gpchild-back-to-top--visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.gpchild-back-to-top:hover,
.gpchild-back-to-top:focus-visible {
	background: var(--gpchild-color-primary-dark);
	transform: translateY(-2px);
	box-shadow: var(--gpchild-shadow-xl);
}

.gpchild-back-to-top:focus-visible {
	outline: 2px solid var(--gpchild-color-primary);
	outline-offset: 3px;
}

@media (max-width: 480px) {
	.gpchild-back-to-top {
		width: 44px;
		height: 44px;
		bottom: var(--gpchild-space-lg);
		right: var(--gpchild-space-lg);
	}
}


/* ==========================================================================
   Sticky Header Scrolled State (.gpchild-header--scrolled)
   ========================================================================== */

.gpchild-header--scrolled {
	box-shadow: var(--gpchild-shadow-md);
	border-bottom-color: transparent;
}

.gpchild-header--scrolled .gpchild-header__logo-img {
	max-height: 34px;
	transition: max-height var(--gpchild-transition-base);
}

.gpchild-header--scrolled .gpchild-header__inner {
	min-height: 56px;
	transition: min-height var(--gpchild-transition-base);
}


/* ==========================================================================
   Reading Progress Bar (.gpchild-progress-wrap)
   ========================================================================== */

/* z-index: 1001 — intentionally above header (1000) so the thin bar
   appears as a colored line at the very top edge of the viewport. */
.gpchild-progress-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	height: 3px;
	background: transparent;
	pointer-events: none;
}

.gpchild-progress-bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--gpchild-color-primary), var(--gpchild-color-secondary, var(--gpchild-color-primary-dark)));
	border-radius: 0 1px 1px 0;
	transition: width 50ms linear;
}


/* ==========================================================================
   Social Sharing (.gpchild-sharing)
   ========================================================================== */

.gpchild-sharing {
	margin-top: var(--gpchild-space-2xl);
	padding-top: var(--gpchild-space-xl);
	border-top: 1px solid var(--gpchild-color-border);
}

.gpchild-sharing__heading {
	font-family: var(--gpchild-font-heading);
	font-size: var(--gpchild-text-lg);
	font-weight: 700;
	margin-bottom: var(--gpchild-space-md);
	color: var(--gpchild-color-text);
}

.gpchild-sharing__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gpchild-space-sm);
}

.gpchild-sharing__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--gpchild-space-sm);
	padding: var(--gpchild-space-sm) var(--gpchild-space-lg);
	font-size: var(--gpchild-text-sm);
	font-weight: 600;
	font-family: var(--gpchild-font-body);
	color: var(--gpchild-color-text-inverse);
	border: none;
	border-radius: var(--gpchild-radius-md);
	text-decoration: none;
	cursor: pointer;
	transition: filter var(--gpchild-transition-fast),
				transform var(--gpchild-transition-fast);
}

.gpchild-sharing__btn:hover,
.gpchild-sharing__btn:focus-visible {
	filter: brightness(1.1);
	transform: translateY(-1px);
	color: var(--gpchild-color-text-inverse);
}

.gpchild-sharing__btn:focus-visible {
	outline: 2px solid var(--gpchild-color-primary);
	outline-offset: 2px;
}

.gpchild-sharing__btn svg {
	flex-shrink: 0;
}

/* Platform colors */
.gpchild-sharing__btn--facebook  { background: #1877f2; }
.gpchild-sharing__btn--twitter   { background: #0f1419; }
.gpchild-sharing__btn--whatsapp  { background: #25d366; }
.gpchild-sharing__btn--linkedin  { background: #0a66c2; }
.gpchild-sharing__btn--copy-link {
	background: var(--gpchild-color-bg-alt);
	color: var(--gpchild-color-text);
	border: 1px solid var(--gpchild-color-border);
}

.gpchild-sharing__btn--copy-link:hover,
.gpchild-sharing__btn--copy-link:focus-visible {
	background: var(--gpchild-color-bg-dark);
	color: var(--gpchild-color-text-inverse);
	border-color: var(--gpchild-color-bg-dark);
}

.gpchild-sharing__btn--copied {
	background: #16a34a !important;
	color: var(--gpchild-color-text-inverse) !important;
	border-color: #16a34a !important;
}

@media (max-width: 480px) {
	.gpchild-sharing__btn {
		font-size: var(--gpchild-text-xs);
		padding: var(--gpchild-space-sm);
		border-radius: var(--gpchild-radius-full);
		width: 44px;
		height: 44px;
		justify-content: center;
	}

	.gpchild-sharing__btn span {
		display: none;
	}
}


/* ==========================================================================
   Related Posts (.gpchild-related)
   ========================================================================== */

.gpchild-related {
	margin-top: var(--gpchild-space-2xl);
	padding-top: var(--gpchild-space-xl);
	border-top: 1px solid var(--gpchild-color-border);
}

.gpchild-related__heading {
	font-family: var(--gpchild-font-heading);
	font-size: var(--gpchild-text-xl);
	font-weight: 700;
	margin-bottom: var(--gpchild-space-xl);
	color: var(--gpchild-color-text);
}

.gpchild-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gpchild-grid-gap);
}

.gpchild-related__card {
	background: var(--gpchild-card-bg);
	border: 1px solid var(--gpchild-card-border);
	border-radius: var(--gpchild-card-radius);
	box-shadow: var(--gpchild-card-shadow);
	overflow: hidden;
	transition: box-shadow var(--gpchild-transition-base),
				transform var(--gpchild-transition-base);
}

.gpchild-related__card:hover {
	box-shadow: var(--gpchild-shadow-md);
	transform: translateY(-2px);
}

.gpchild-related__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.gpchild-related__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--gpchild-transition-slow);
}

.gpchild-related__card:hover .gpchild-related__thumb img {
	transform: scale(1.05);
}

.gpchild-related__body {
	padding: var(--gpchild-card-padding);
}

.gpchild-related__category {
	display: inline-block;
	font-size: var(--gpchild-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--gpchild-color-primary);
	margin-bottom: var(--gpchild-space-xs);
	text-decoration: none;
}

.gpchild-related__category:hover {
	color: var(--gpchild-color-primary-dark);
}

.gpchild-related__title {
	font-size: var(--gpchild-text-base);
	font-weight: 700;
	line-height: var(--gpchild-leading-tight);
	margin-bottom: var(--gpchild-space-sm);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gpchild-related__title a {
	color: var(--gpchild-color-text);
	text-decoration: none;
}

.gpchild-related__title a:hover {
	color: var(--gpchild-color-primary);
}

.gpchild-related__meta {
	font-size: var(--gpchild-text-xs);
	color: var(--gpchild-color-text-light);
}

@media (max-width: 768px) {
	.gpchild-related__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.gpchild-related__heading {
		font-size: var(--gpchild-text-lg);
	}
}


/* ==========================================================================
   DNA Axes — Image Ratio
   Applied via --gpchild-image-ratio CSS custom property
   ========================================================================== */

.gpchild-front-page .gpchild-post-grid__thumbnail,
.gpchild-front-page .gpchild-post-carousel__thumbnail,
.gpchild-front-page .gpchild-post-grid-featured__thumbnail,
.gpchild-front-page .gpchild-grid-photo__thumbnail {
	aspect-ratio: var(--gpchild-image-ratio, 16/9);
	overflow: hidden;
}

.gpchild-front-page .gpchild-post-grid__image,
.gpchild-front-page .gpchild-post-carousel__image,
.gpchild-front-page .gpchild-post-grid-featured__image,
.gpchild-front-page .gpchild-grid-photo__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   DNA Axes — Section Spacing
   Applied via --gpchild-section-spacing CSS custom property (multiplier)
   ========================================================================== */

.gpchild-front-page .gpchild-section {
	padding-top: calc(var(--gpchild-space-2xl) * var(--gpchild-section-spacing, 1));
	padding-bottom: calc(var(--gpchild-space-2xl) * var(--gpchild-section-spacing, 1));
}

/* ==========================================================================
   DNA Axes — Excerpt Style
   Applied via body class: gpchild-excerpt-{full|short|none|first-line}
   ========================================================================== */

.gpchild-excerpt-full [class*="__excerpt"] {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--gpchild-excerpt-lines, 4);
	overflow: hidden;
}

.gpchild-excerpt-short [class*="__excerpt"] {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.gpchild-excerpt-none [class*="__excerpt"] {
	display: none;
}

.gpchild-excerpt-first-line [class*="__excerpt"] {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

/* ==========================================================================
   DNA Axes — Meta Style
   Applied via body class: gpchild-meta-{full|minimal|none|icons}
   ========================================================================== */

/* full: default, no changes needed */

.gpchild-meta-minimal [class*="__reading-time"],
.gpchild-meta-minimal [class*="__author"] {
	display: none;
}

.gpchild-meta-none [class*="__meta"] {
	display: none;
}

.gpchild-meta-icons [class*="__meta"] {
	font-size: 0;
}

.gpchild-meta-icons [class*="__meta"] time,
.gpchild-meta-icons [class*="__meta"] span {
	font-size: var(--gpchild-text-sm, 0.875rem);
}

.gpchild-meta-icons [class*="__meta"] time::before {
	content: "\1F4C5 ";
}

.gpchild-meta-icons [class*="__separator"] {
	display: none;
}

/* ==========================================================================
   DNA Axes — Image Hover
   Applied via body class: gpchild-hover-{zoom|brighten|overlay|none}
   ========================================================================== */

.gpchild-hover-zoom [class*="__thumbnail"] img {
	transition: transform var(--gpchild-transition-base, 250ms ease);
}

.gpchild-hover-zoom [class*="__thumbnail"]:hover img,
.gpchild-hover-zoom [class*="__item"]:hover [class*="__thumbnail"] img {
	transform: scale(1.08);
}

.gpchild-hover-brighten [class*="__thumbnail"] img {
	transition: filter var(--gpchild-transition-base, 250ms ease);
	filter: brightness(0.95);
}

.gpchild-hover-brighten [class*="__thumbnail"]:hover img,
.gpchild-hover-brighten [class*="__item"]:hover [class*="__thumbnail"] img {
	filter: brightness(1.1);
}

.gpchild-hover-overlay [class*="__thumbnail"] {
	position: relative;
}

.gpchild-hover-overlay [class*="__thumbnail"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gpchild-color-primary, #2563eb);
	opacity: 0;
	transition: opacity var(--gpchild-transition-base, 250ms ease);
	pointer-events: none;
}

.gpchild-hover-overlay [class*="__thumbnail"]:hover::after,
.gpchild-hover-overlay [class*="__item"]:hover [class*="__thumbnail"]::after {
	opacity: 0.15;
}

/* hover-none: no hover effects (default browser behavior) */
.gpchild-hover-none [class*="__thumbnail"] img {
	transition: none;
}

/* ==========================================================================
   DNA Axes — Badge Style
   Applied via body class: gpchild-badge-{filled|outline|pill|none}
   ========================================================================== */

/* filled: default style already in base, no changes needed */

.gpchild-badge-outline [class*="__badge"] {
	background: transparent;
	color: var(--gpchild-color-primary, #2563eb);
	border: 1.5px solid var(--gpchild-color-primary, #2563eb);
}

.gpchild-badge-outline [class*="__badge"] a {
	color: var(--gpchild-color-primary, #2563eb);
}

.gpchild-badge-pill [class*="__badge"] {
	border-radius: var(--gpchild-radius-full, 9999px);
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.gpchild-badge-none [class*="__badge"] {
	display: none;
}

/* ==========================================================================
   DNA Effects — Stripe Background
   Body class: gpchild-fx-stripe-bg
   ========================================================================== */

.gpchild-fx-stripe-bg .gpchild-section:nth-child(even) {
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 10px,
		var(--gpchild-color-bg-alt, #f9fafb) 10px,
		var(--gpchild-color-bg-alt, #f9fafb) 12px
	);
}

/* ==========================================================================
   DNA Effects — Wave Dividers
   Body class: gpchild-fx-wave-dividers
   ========================================================================== */

.gpchild-fx-wave-dividers .gpchild-section {
	position: relative;
}

.gpchild-fx-wave-dividers .gpchild-section + .gpchild-section::before {
	content: "";
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	height: 40px;
	background: var(--gpchild-color-bg, #ffffff);
	clip-path: ellipse(55% 60% at 50% 40%);
	z-index: 1;
	pointer-events: none;
}

/* ==========================================================================
   DNA Effects — Frosted Cards
   Body class: gpchild-fx-frosted
   ========================================================================== */

.gpchild-fx-frosted .gpchild-post-grid__item,
.gpchild-fx-frosted .gpchild-post-list__item,
.gpchild-fx-frosted .gpchild-post-carousel__item,
.gpchild-fx-frosted .gpchild-post-grid-featured__item {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Dark theme support for frosted */
.gpchild-fx-frosted [data-theme="dark"] .gpchild-post-grid__item,
.gpchild-fx-frosted [data-theme="dark"] .gpchild-post-list__item {
	background: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   DNA Effects — Noise Texture
   Body class: gpchild-fx-noise
   ========================================================================== */

.gpchild-fx-noise .gpchild-section:nth-child(odd)::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.03;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 256px 256px;
	pointer-events: none;
	z-index: 0;
}

.gpchild-fx-noise .gpchild-section:nth-child(odd) {
	position: relative;
}

.gpchild-fx-noise .gpchild-section:nth-child(odd) > * {
	position: relative;
	z-index: 1;
}


/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	/* Hide non-essential UI */
	.gpchild-header,
	.gpchild-footer,
	.gpchild-skip-link,
	.gpchild-back-to-top,
	.gpchild-progress-wrap,
	.gpchild-sharing,
	.gpchild-sidebar,
	.gpchild-newsletter,
	.gpchild-ad-slot,
	.gpchild-post-carousel__nav,
	.gpchild-hero-slider__nav,
	.gpchild-pagination,
	.gpchild-breadcrumb,
	.gpchild-category-tabs__nav,
	.gpchild-post-grid__read-more,
	.gpchild-post-list__read-more,
	.gpchild-post-grid-featured__read-more {
		display: none !important;
	}

	/* Reset backgrounds and colors for ink saving */
	body,
	.gpchild-front-page,
	.gpchild-section,
	.gpchild-post-grid__item,
	.gpchild-post-list__item,
	.gpchild-related__card {
		background: white !important;
		color: black !important;
		box-shadow: none !important;
	}

	/* Force single column */
	.gpchild-post-grid,
	.gpchild-post-grid-featured,
	.gpchild-category-section__grid,
	.gpchild-category-tabs__panel-grid,
	.gpchild-related__grid {
		grid-template-columns: 1fr !important;
	}

	.gpchild-layout--with-sidebar {
		flex-direction: column !important;
	}

	.gpchild-layout--with-sidebar .gpchild-sidebar {
		display: none !important;
	}

	/* Featured post: single column */
	.gpchild-post-grid-featured__item--featured {
		grid-template-columns: 1fr !important;
	}

	/* Hero sections: reduce height */
	.gpchild-hero-full,
	.gpchild-hero-split,
	.gpchild-hero-slider__slide {
		min-height: auto !important;
	}

	/* Show URLs after links in content area */
	.entry-content a[href]::after,
	.gpchild-related__title a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #666;
		font-weight: 400;
	}

	/* Prevent page breaks inside articles */
	.gpchild-post-grid__item,
	.gpchild-post-list__item,
	.gpchild-related__card,
	article {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* Remove decorative effects */
	img {
		max-width: 100% !important;
	}

	a {
		color: black !important;
		text-decoration: underline !important;
	}

	.gpchild-badge {
		background: none !important;
		color: black !important;
		border: 1px solid #ccc !important;
	}
}