/**
 * GR Content Preview List - Frontend Styles
 */

.wp-block-gr-content-preview-list {
	margin: 2rem 0;
	background: linear-gradient(45deg, black, transparent);	
}

.wp-block-gr-content-preview-list .c-rating {
	height: auto;
}

.gr-content-preview-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: inherit;
}

.gr-content-preview-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.gr-content-preview-item {
	display: flex;
	gap: 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding: 1rem;
	padding-bottom: 1.5rem;
}

.gr-content-preview-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.gr-content-preview-thumbnail {
	flex-shrink: 0;
	width: 120px;
	height: 120px;
	overflow: hidden;
	border-radius: 4px;
}

.gr-content-preview-thumbnail img,
.gr-content-preview-thumbnail-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background-color: #f0f0f0;
}

/* Lazy loading fade-in effect */
.gr-content-preview-thumbnail img[loading="lazy"],
.gr-content-preview-thumbnail-img[loading="lazy"] {
	transition: opacity 0.3s ease-in-out;
}

.gr-content-preview-thumbnail img[loading="lazy"]:not([src*=""])  {
	opacity: 0.8;
}

.gr-content-preview-thumbnail a {
	display: block;
}

.gr-content-preview-content {
	flex: 1;
	min-width: 0;
}

.gr-content-preview-item-title {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	line-height: 1.4;
}

.gr-content-preview-item-title a {
	color: inherit;
	text-decoration: none;
}

.gr-content-preview-item-title a:hover {
	text-decoration: underline;
}

.gr-content-preview-meta {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.3);
	margin-bottom: 0.5rem;
}

.gr-content-preview-meta a {
	color: inherit;
	text-decoration: none;
}

.gr-content-preview-meta a:hover {
	text-decoration: underline;
}

.gr-content-preview-rating {
	font-weight: 600;
	color: #2c5282;
}

.gr-content-preview-excerpt {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.5);
}

/* Star rating styles for contentlift */
.c-contentlift__item__stars {
	margin-top: 0.35rem;
}

.c-contentlift__item__stars .c-rating {
	display: flex;
	gap: 0.1rem;
	align-items: center;
	position: relative;
}

.c-contentlift__item__stars .rating-list__item {
	width: 14px;
	height: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.c-contentlift__item__stars .rating-list__star {
	width: 100%;
	height: 100%;
}

.c-contentlift__item__stars .star--full path:not([fill]) {
	fill: #FFD700;
}

.c-contentlift__item__stars .star--grey path:not([fill]) {
	fill: #444;
}

/* Star rating styles for tiny contentlift */
.c-genericlift__col__stars {
	margin-top: 0.25rem;
}

.c-genericlift__col__stars .c-rating {
	display: flex;
	gap: 0.1rem;
	align-items: center;
	position: relative;
}

.c-genericlift__col__stars .rating-list__item {
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.c-genericlift__col__stars .rating-list__star {
	width: 100%;
	height: 100%;
}

.c-genericlift__col__stars .star--full path:not([fill]) {
	fill: #FFD700;
}

.c-genericlift__col__stars .star--grey path:not([fill]) {
	fill: #444;
}

/* Star rating styles for default list template */
.gr-content-preview-stars {
	margin-top: 0.5rem;
}

.gr-content-preview-stars .c-rating {
	display: flex;
	gap: 0.1rem;
	align-items: center;
	position: relative;
}

.gr-content-preview-stars .rating-list__item {
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gr-content-preview-stars .rating-list__star {
	width: 100%;
	height: 100%;
}

.gr-content-preview-stars .star--full path:not([fill]) {
	fill: #FFD700;
}

.gr-content-preview-stars .star--grey path:not([fill]) {
	fill: #444;
}

/* Responsive adjustments */
@media (max-width: 640px) {
	.gr-content-preview-item {
		flex-direction: column;
	}

	.gr-content-preview-thumbnail {
		width: 100%;
		height: 200px;
	}
}

/* Query type specific styles */
.query-type-latest-game-reviews .gr-content-preview-rating {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	background-color: #2c5282;
	color: white;
	border-radius: 4px;
	font-size: 0.875rem;
	margin-left: 0.25rem;
}

/* Editor styles */
.wp-block-gr-content-preview-list-editor {
	min-height: 100px;
}

/* Alignment styles */
.alignleft.wp-block-gr-content-preview-list {
	margin-right: 2rem;
}

.alignright.wp-block-gr-content-preview-list {
	margin-left: 2rem;
}

.aligncenter.wp-block-gr-content-preview-list {
	margin-left: auto;
	margin-right: auto;
}

.alignwide.wp-block-gr-content-preview-list {
	max-width: var(--wp--style--global--wide-size, 1280px);
}

.alignfull.wp-block-gr-content-preview-list {
	max-width: none;
}

/* Template Type: Content Lift */
.template-type-contentlift .c-contentlift--news,
.template-type-contentlift .c-contentlift--horizontal {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr; /* Default: 1 column, overridden by dynamic CSS */
}

/* Template Type: Content Lift Detailed */
.template-type-contentlift-detailed .c-contentlift--detailed {
	display: grid;
	gap: 1.5rem;
	padding: 1rem;
	grid-template-columns: 1fr; /* Default: 1 column, overridden by dynamic CSS */
}

.c-contentlift__item--detailed {
	display: flex;
	flex-direction: column;
	position: relative;
}

.c-contentlift__item--detailed .c-contentlift__item__textcontent {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.c-contentlift__item--detailed .c-contentlift__item__excerpt {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgb(221, 221, 221);
	margin-top: 0.5rem;
}

.c-contentlift__item--detailed.horizontal {
	flex-direction: row;
	gap: 1rem;
}

.c-contentlift__item--detailed.horizontal .c-contentlift__item__imagecontainer {
	flex-shrink: 0;
	width: 200px;
}

.c-contentlift__item--detailed.horizontal .c-contentlift__item__textcontent {
	flex: 1;
	margin-top: 0;
}

@media (max-width: 640px) {
	.c-contentlift__item--detailed.horizontal {
		flex-direction: column;
	}

	.c-contentlift__item--detailed.horizontal .c-contentlift__item__imagecontainer {
		width: 100%;
	}

	.c-contentlift__item--detailed.horizontal .c-contentlift__item__textcontent {
		margin-top: 0.5rem;
	}
}

/* Template Type: Graphic Preview */
.template-type-graphic .gr-content-preview-grid {
	display: grid;
	grid-template-columns: 1fr; /* Default: 1 column, overridden by dynamic CSS */
	gap: 1.5rem;
}

/* Fallback for older blocks without custom breakpoints */
.template-type-graphic .gr-content-preview-grid:not([class*="gr-cpl-"]) {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (max-width: 768px) {
	.template-type-graphic .gr-content-preview-grid:not([class*="gr-cpl-"]) {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
}

@media (max-width: 480px) {
	.template-type-graphic .gr-content-preview-grid:not([class*="gr-cpl-"]) {
		grid-template-columns: 1fr;
	}
}

/* Sticky positioning */
.is-sticky {
	position: sticky;
	top: 2rem;
	z-index: 10;
	/* background-color: rgba(0, 0, 0, 0.8); */
}

/* Sticky positioning for adaptive columns */
.is-sticky .c-contentlift__item--news,
.is-sticky .c-contentlift__item--detailed,
.is-sticky .c-preview--graphic {
	position: sticky;
	top: 0;
	z-index: 5;
	margin-bottom: 1rem;
}

/* general img loading lazy transition */
img[loading="lazy"] {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

img[loading="lazy"][src] {
	opacity: 1;
}