/*
==========================================================
FantasyFanzone Latest News / News Cards
Version: 4.1
==========================================================
*/

/*========================================================
SECTION
========================================================*/

.ffz-latest-news{
	position:relative;

	padding:var(--ffz-section-padding) 0;
}

/*========================================================
GRID
========================================================*/

.ffz-news-grid{
	display:grid;

	grid-template-columns:
		repeat(3,minmax(0,1fr));

	gap:var(--ffz-grid-gap);

	margin-top:48px;
}

/*
 * Blog / archive / search grids can reuse the same
 * responsive card behavior without depending on
 * .ffz-latest-news.
 */

.ffz-blog__grid{
	align-items:stretch;
}

/*========================================================
BLOG ITEM
========================================================*/

.ffz-blog__item{
	min-width:0;
	height:100%;
}

.ffz-blog__item > .ffz-news-card{
	height:100%;
}

/*========================================================
CARD
========================================================*/

.ffz-news-card{
	position:relative;

	display:flex;
	flex-direction:column;

	min-width:0;
	height:100%;

	overflow:hidden;

	border:
		1px solid
		var(--ffz-border);

	border-radius:24px;

	background:
		rgba(255,255,255,.04);

	box-shadow:
		0 8px 24px
		rgba(0,0,0,.08);

	transition:
		transform var(--ffz-transition-normal),
		border-color var(--ffz-transition-normal),
		box-shadow var(--ffz-transition-normal),
		background var(--ffz-transition-normal);
}

.ffz-news-card:hover{
	transform:translateY(-6px);

	border-color:
		rgba(124,58,237,.65);

	background:
		var(--ffz-card-hover);

	box-shadow:
		var(--ffz-shadow-lg);
}

/*========================================================
IMAGE
========================================================*/

.ffz-news-card__image{
	position:relative;

	display:block;

	aspect-ratio:16/9;

	overflow:hidden;

	background:
		var(--ffz-surface);
}

.ffz-news-card__image img{
	display:block;

	width:100%;
	height:100%;

	object-fit:cover;

	transition:
		transform .5s ease;
}

.ffz-news-card:hover
.ffz-news-card__image img{
	transform:scale(1.06);
}

/*========================================================
CONTENT
========================================================*/

.ffz-news-card__content{
	display:flex;
	flex:1;

	flex-direction:column;

	min-width:0;

	padding:24px;
}

/*========================================================
META
========================================================*/

.ffz-news-card__meta{
	display:flex;

	align-items:center;

	flex-wrap:wrap;

	gap:
		6px
		12px;

	margin-bottom:14px;

	color:
		var(--ffz-text-muted);

	font-size:12px;
	font-weight:600;
}

/*========================================================
CATEGORY
========================================================*/

.ffz-news-card__category{
	display:inline-flex;

	align-items:center;

	padding:5px 9px;

	border-radius:999px;

	background:
		rgba(124,58,237,.12);

	color:#c4b5fd;

	font-size:11px;
	font-weight:700;

	line-height:1;

	text-decoration:none;

	transition:
		background var(--ffz-transition-normal),
		color var(--ffz-transition-normal);
}

a.ffz-news-card__category:hover,
a.ffz-news-card__category:focus-visible{
	background:
		rgba(124,58,237,.20);

	color:#fff;
}

/*========================================================
DATE / READING TIME
========================================================*/

.ffz-news-card__date,
.ffz-news-card__reading-time{
	display:inline-flex;

	align-items:center;

	white-space:nowrap;
}

.ffz-news-card__date::before,
.ffz-news-card__reading-time::before{
	content:"";

	display:inline-block;

	width:4px;
	height:4px;

	margin-right:8px;

	border-radius:50%;

	background:
		rgba(255,255,255,.28);
}

.ffz-news-card__meta
> :first-child::before{
	display:none;
}

/*========================================================
TITLE
========================================================*/

.ffz-news-card__title{
	margin:0 0 14px;

	color:
		var(--ffz-text,#fff);

	font-size:22px;
	font-weight:800;

	line-height:1.35;
}

.ffz-news-card__title a{
	color:inherit;

	text-decoration:none;

	transition:
		color var(--ffz-transition-normal);
}

.ffz-news-card__title a:hover,
.ffz-news-card__title a:focus-visible{
	color:
		var(--ffz-primary);
}

/*========================================================
EXCERPT
========================================================*/

.ffz-news-card__excerpt{
	flex:1;

	margin:0 0 20px;

	color:
		var(--ffz-text-muted);

	font-size:15px;

	line-height:1.75;
}

/*========================================================
AUTHOR
========================================================*/

.ffz-news-card__author{
	margin-bottom:18px;

	color:
		var(--ffz-text-muted);

	font-size:12px;
	font-weight:600;
}

/*========================================================
BUTTON
========================================================*/

.ffz-news-card__button{
	display:inline-flex;

	align-items:center;

	align-self:flex-start;

	gap:8px;

	margin-top:auto;

	color:
		var(--ffz-primary);

	font-size:14px;
	font-weight:800;

	text-decoration:none;

	transition:
		color var(--ffz-transition-normal);
}

.ffz-news-card__button:hover,
.ffz-news-card__button:focus-visible{
	color:#fff;
}

.ffz-news-card__button-text{
	display:inline-block;
}

.ffz-news-card__button-arrow{
	display:inline-block;

	transition:
		transform var(--ffz-transition-normal);
}

.ffz-news-card__button:hover
.ffz-news-card__button-arrow,
.ffz-news-card__button:focus-visible
.ffz-news-card__button-arrow{
	transform:
		translateX(4px);
}

/*========================================================
FOCUS
========================================================*/

.ffz-news-card__title a:focus-visible,
.ffz-news-card__category:focus-visible,
.ffz-news-card__button:focus-visible{
	outline:none;

	box-shadow:
		0 0 0 3px
		rgba(124,58,237,.25);

	border-radius:6px;
}

/*========================================================
FOOTER
========================================================*/

.ffz-news-footer{
	display:flex;

	align-items:center;
	justify-content:center;

	margin-top:48px;
}

/*========================================================
EMPTY STATE
========================================================*/

.ffz-latest-news .ffz-empty,
.ffz-blog__empty{
	margin-top:40px;

	padding:32px 20px;

	border:
		1px solid
		rgba(255,255,255,.06);

	border-radius:18px;

	background:
		rgba(255,255,255,.025);

	color:
		var(--ffz-text-muted);

	text-align:center;
}

.ffz-blog__empty h2{
	margin:
		0 0 12px;

	color:#fff;
}

.ffz-blog__empty p{
	margin:
		0 auto;

	max-width:680px;
}

.ffz-blog__search{
	max-width:720px;

	margin:
		24px auto 0;
}

/*========================================================
LOADING
========================================================*/

.ffz-latest-news.is-loading,
.ffz-latest-news--loading{
	pointer-events:none;
}

.ffz-latest-news.is-loading
.ffz-news-grid,
.ffz-latest-news--loading
.ffz-news-grid{
	opacity:.75;
}

.ffz-latest-news.is-loading
.ffz-news-card,
.ffz-latest-news--loading
.ffz-news-card{
	animation:
		ffzNewsPulse
		1.4s
		ease-in-out
		infinite;
}

@keyframes ffzNewsPulse{

	0%,
	100%{
		opacity:.65;
	}

	50%{
		opacity:1;
	}
}

/*========================================================
TABLET
========================================================*/

@media(max-width:1200px){

	.ffz-news-grid{
		grid-template-columns:
			repeat(2,minmax(0,1fr));
	}
}

/*========================================================
MOBILE
========================================================*/

@media(max-width:768px){

	.ffz-news-grid{
		grid-template-columns:1fr;

		gap:20px;

		margin-top:32px;
	}

	.ffz-news-card{
		border-radius:18px;
	}

	.ffz-news-card__content{
		padding:20px;
	}

	.ffz-news-card__title{
		font-size:20px;
	}

	.ffz-news-card__excerpt{
		font-size:14px;
	}

	.ffz-news-card__meta{
		font-size:11px;
	}

	.ffz-news-footer{
		margin-top:36px;
	}
}

/*========================================================
SMALL MOBILE
========================================================*/

@media(max-width:480px){

	.ffz-news-card__content{
		padding:18px 16px;
	}

	.ffz-news-card__title{
		font-size:18px;
	}

	.ffz-news-card__meta{
		gap:
			6px
			9px;
	}

	.ffz-news-card__category{
		padding:4px 8px;

		font-size:10px;
	}

	.ffz-news-card__date,
	.ffz-news-card__reading-time{
		font-size:10px;
	}

	.ffz-news-card__button{
		font-size:13px;
	}
}

/*========================================================
REDUCED MOTION
========================================================*/

@media(prefers-reduced-motion:reduce){

	.ffz-news-card,
	.ffz-news-card__image img,
	.ffz-news-card__button,
	.ffz-news-card__button-arrow{
		transition:none;
	}

	.ffz-news-card:hover{
		transform:none;
	}

	.ffz-news-card:hover
	.ffz-news-card__image img{
		transform:none;
	}

	.ffz-news-card__button:hover
	.ffz-news-card__button-arrow,
	.ffz-news-card__button:focus-visible
	.ffz-news-card__button-arrow{
		transform:none;
	}

	.ffz-latest-news.is-loading
	.ffz-news-card,
	.ffz-latest-news--loading
	.ffz-news-card{
		animation:none;
	}
}
/*========================================================
LATEST NEWS PAGE PAGINATION
========================================================*/

.ffz-news-pagination{
	margin-top:42px;
}

.ffz-news-pagination .page-numbers{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:8px;
	margin:0;
	padding:0;
	list-style:none;
}

.ffz-news-pagination .page-numbers a,
.ffz-news-pagination .page-numbers span{
	dis:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:42px;
	height:42px;
	padding:0 13px;
	border:1px solid var(--ffz-border);
	border-radius:12px;
	background:rgba(255,255,255,.035);
	color:var(--ffz-text);
	font-size:13px;
	font-weight:700;
	text-decoration:none;
	transition:
		background-color var(--ffz-transition-normal),
		border-color var(--ffz-transition-normal),
		color var(--ffz-transition-normal);
}

.ffz-news-pagination .page-numbers a:hover,
.ffz-news-pagination .page-numbers a:focus-visible,
.ffz-news-pagination .page-numbers .current{
	border-color:var(--ffz-primary);
	background:rgba(124,58,237,.14);
	color:#fff;
}

@media(max-width:768px){
	.ffz-news-pagination{
		margin-top:30px;
	}

	.ffz-news-pagination .page-numbers a,
	.ffz-news-pagination .page-numbers span{
		min-width:38px;
		height:38px;
		padding:0 10px;
		font-size:12px;
	}
}