/*!
Theme Name: skritz-alchemy
Theme URI: https://www.skritz.com
Author: Skritz
Author URI: https://www.skritz.com
Description: Le nouveau thème de 2025 !
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: skritz-alchemy
*/

/***************** Couleurs & polices **********************/

:root {
	--color-text: 0, 0, 0;
	--color-bg: 255, 255, 255;
	--color-bg-dark: 223, 223, 223;
	--color-bg-darker: 203, 203, 203;


	--color-link: 255, 128, 0;				/* orange : #FF8000 */
	--color-link-dark: 212, 64, 0;		/* orange-brun pour les fonds clairs : #D44000 */
	--color-accent: 17, 57, 82;				/* bleu sombre : #113952 */


	--color-page-bg: 102, 102, 102;  /* #666666 */

	--font-sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--font-impact: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
	--font-serif: 'Georgia Pro', Georgia, 'DejaVu Serif', Times, 'Times New Roman', FreeSerif, 'DejaVu Math TeX', 'URW Bookman L', serif;;


	--font-size-big: 17px;
	--font-size-medium: 15px;
	--font-size-small: 11px;
	--font-size-title: 40px;


	@media ( min-width: 768px ) {
		--font-size-big: 18px;
		--font-size-medium: 16px;
		--font-size-small: 12px;
		--font-size-title: 70px;
	}

}



/***************** Général **********************/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-size: var(--font-size-big);
	line-height: 1.7;
	font-family: var(--font-sans);
	background:
		linear-gradient(
			to bottom,
			transparent calc(100% - 200px),
			rgb(60, 60, 60) 100%
		),
		linear-gradient(
			to bottom,
			#1d5c84 0%,
			rgb(var(--color-page-bg)) 943px,
			rgb(var(--color-page-bg)) 100%
		);
}

a {
	color: rgb(var(--color-link));
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1 {
	color: rgb(var(--color-accent));
	text-align: center;
	font-weight: 800;
	font-size: var(--font-size-title);
	margin: 0 0 50px;
	line-height: 1.2;
}

h2 {
	font-size: 30px;
	font-weight: 600;
	color: rgb(var(--color-accent));
	margin: 0 0 20px;
	line-height: 1.2;	
}

h3 {
	font-size: 20px;
	font-weight: 600;
	color: rgb(var(--color-accent));
	margin: 0 0 20px;
	line-height: 1.2;	
}

img {
	max-width: 100%;
}

:focus-visible {
	outline: 3px solid rgb(var(--color-link));
	outline-offset: 2px;
}

svg {
	display: inline-block;
	align-content: center;
	vertical-align: middle;
	margin-top: -2px;
}

h2 svg {
	width: 30px;
	height: 30px;
}

/***************** Structure **********************/
.wrapper {
	margin: 0 auto;
	max-width: 100%;
	width: 1100px;
	padding: 0 10px;
	overflow: hidden;
}

.main-content {

}

.container {
	background: #fff;
	padding: 20px 10px;
}

@media (min-width: 768px) {
	.container {
		padding: 30px 40px;
	}
}


.container-dark {
	background: rgb(var(--color-bg-dark));
	border-top: 3px dotted rgb(var(--color-page-bg));
}



/****************** Header *************************/
.site-header {
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.header-branding {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	align-items: flex-end;
	align-items: center;
	gap: 30px;
}

.category-list li {
	padding: 0;
	margin: 0;
	display: inline-block;
}

.search-form {
	position: relative;
	display: flex;
	overflow: hidden;
	border-radius: 15px;
	background: rgb(var(--color-accent));
	border: 2px solid rgb(var(--color-accent));
	width: 400px;
	max-width: 100%;
}

.search-form:focus-within {
	border: 2px solid rgb(var(--color-link));
	background: rgb(var(--color-link));
}

.search-form > label {
	flex: 1;
}

.search-input {
	outline: none;
	font-size: var(--font-size-big);
	background: #fff;
	padding: 10px 20px;  
	border: none;
	width: 100%;
}


.search-form .search-btn {
	width: 44px;
	top: 0px;
	right: 0px;
	z-index: 100;
	background: rgb(var(--color-link));
	color: #000;
	border: none;
	cursor: pointer;

	color: rgb(var(--color-link));
	background: rgb(var(--color-accent));

}

.search-form .search-btn:hover,
.search-form .search-btn:focus {
	background: rgb(var(--color-link));
	color: rgb(var(--color-accent));
	outline: none;
}

.search-form .search-btn svg {
	width: 24px;
	height: 24px;
}



@media (min-width: 768px) {
	.main-content {
		overflow: hidden;
		border-radius: 20px 20px 0 0;
	}
	.site-header {
		padding: 20px 0;
	}

	.header-branding {
		flex-direction: row;
	}

}



.site-title {
	margin: 0;
	line-height: 1;
	font-size: 34px;
	font-weight: 800;
	font-family: var(--font-sans);
}

.site-title a {
	display: block;
	padding: 5px 0;
	color:rgb(var(--color-link));
}



.site-header nav {
	width: 100%;
}

.site-header nav ul {
	display: flex;
	margin: 20px 0 0;
	padding: 0;
	justify-content: space-between;
	flex-direction: column;
}

.site-header nav a {
	display: block;
	color: #fff;
}

.site-header nav .active a {
	color: rgb(var(--color-link));
}


@media (max-width: 767px) {
	.wrapper {
		margin-top: 45px;
	}

	.header-branding {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: rgb(var(--color-accent));
		z-index: 100;
		flex-direction: row;
		padding: 10px 20px;
		min-width: 45px;
		align-items: center;
		justify-content: space-between;		
	}

	body.wp-customizer .header-branding,
	body.admin-bar .header-branding,
	body.customize-partial-edit-shortcuts-shown .header-branding {
		top: 45px;
	}

	.site-title {
		font-size: 26px;
	}

	.menu-toggle {
		background: none;
		border: none;
		color: #fff;
		padding: 5px 15px 5px 50px;
	}

	.site-header .overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
		z-index: 98;
	}

	.site-header.active .overlay {
		opacity: 1;
		visibility: visible;
	}

	.site-header nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: white;
		transform: translateY(-100%);
		transition: transform 0.3s ease;
		z-index: 99;
		padding-top: 80px;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);d
	}

	.site-header.active nav {
		transform: translateY(0);
	}

	.site-header nav a {
		border-top: 1px solid #eee;
		padding: 10px 10px;
		color: #000;
	}

	.site-header nav a:hover {
		background:rgba(var(--color-accent), 0.1);
	}
	.site-header nav .active a {
		background: rgba(var(--color-link), 0.1);
	}


	.header-branding .search-form {
		display: none;
	}

	.site-header nav .search-form {
		margin: auto;
		max-width: 95%;
	}
}



@media (min-width: 768px) {

	.site-header .overlay {
		display: none;
	}

	.header-branding .menu-toggle {
		display: none;
	}

	.site-header nav .search-form {
		display: none;
	}

	.site-header nav ul {
		flex-direction: row;
		gap: 30px;
		margin: 0;
	}
}


/***************** Filtres **********************/


.filters {
	position: relative;
	margin: 40px 0 0;
}

.filters-header {
	display: flex;
	gap: 20px;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.filter-search {
	position: relative;
	flex-grow: 1;
	text-align: center;
	max-width: 400px;
}

.filter-search .filter-icon {
	width: 24px;
	height: 24px;
	position: absolute;
	top: 6px;
	left: 11px;
	z-index: 50;
	color: #999;
}

.filter-search .filter-icon svg {
	height: 100%;
	width: 100%;
}

.filter-search input {
	width: 100%;
	padding: 10px 10px 10px 40px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.filter-search input:focus {
	outline: none;
	border-color: rgba( var(--color-link) );
}

.filter-toggle {
	display: inline-block;
	cursor: pointer;
	background: #fff;
	padding: 4px 15px 0 0;
	font-weight: 400;
	font-size: var(--font-size-big);
	color: rgb(var(--color-link-dark));
	position: relative;
}

.filter-toggle:hover {
	text-decoration: underline;
}

.tag-active .filter-toggle {
	position: absolute;
	top: -17px;
	left: 0;
	margin: 0;
	padding-top: 0;
}

.filter-toggle::before {
	content: '🏷️';
	display: inline-block;
	margin: 0 10px 0 0;
}


.filters-tags {
	margin: 20px 0;
}

.tag-active .filters-tags {
	position: relative;
	border-top: 1px solid rgb(var(--color-link-dark));
	padding: 10px 0;
	margin-top: 40px;
}



.filter-more {
	display: none;
	padding: 10px 15px;
	border-bottom: 1px solid rgb(var(--color-link-dark));
}

.tag-active .filter-more {
	display: block;
}

.filter-group label {
	color: #666;
	font-size: var(--font-size-small);
	font-weight: 600;
}

.filter-group .tags-checkboxes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(171px, auto));
	gap: 5px 15px;
}

.filter-group .tag-checkbox {
	display: inline-block;
	font-weight: 400;
}

#filter-results { 
	position:relative;
}

#filter-results #filter-loading {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(images/loading.svg) no-repeat center center rgba(255, 255, 255, 0.7); /* from https://github.com/n3r4zzurr0/svg-spinners */
	background-size: 100px;
}



/***************** Article Grid **********************/


.articles {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(190px, auto));	
	justify-content: center;
}


@media (min-width: 768px) {
	.articles {
		gap: 20px;
		grid-template-columns: repeat(auto-fit, minmax(195px, auto));
	}
}

.card {
	display: block;
	position: relative;
	aspect-ratio: 5/4;
	overflow: hidden;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	padding-bottom: 60px;
	max-width: 280px;
	transition: transform 0.2s ease-out,
							box-shadow 0.2s ease-out;
}

.card article {
	width: 100%;
	height: 100%;
	background: #000;
}

@media (min-width: 768px) {
	.card:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
	}
}


.card-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.15);
}

.card-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	min-height: 61px;	
	background: rgba(var(--color-accent));
	border-radius: 0 0 5px 5px;
	padding: 12px 15px;
}

.card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0 !important;
}

.card .card-category {
	position: absolute;
	top: 0;
	right: 0;
	background-color: rgba(var(--color-text), 0.7);
	color: rgb(var(--color-bg));
	padding: 0px 10px;
	font-size: var(--font-size-small);
	backdrop-filter: blur(8px);
	border-radius: 0 10px 0 0;
}

.card .card-date {
	line-height: 1;
	font-size: var(--font-size-small);
	color: #fff;
	margin-bottom: 4px;
}

.card h3 {
	font-size: var(--font-size-medium);
	margin: 0;
	text-wrap: balance;
	color: rgb(var(--color-link));
	line-height: 1.2;
	font-weight: 300;
}

.articles-top,
.articles-bottom {
	display: flex;
	justify-content: space-between;
	margin: 20px 0;
	align-items: center;
}
.articles-bottom {
	justify-content: flex-end;
}

.pagination > a,
.pagination > span {
	display: inline-block;
	padding: 5px;
}

@media (max-width: 767px) {

	.articles-top,
	.articles-bottom {
		flex-direction: column;
	}

	.pagination {
		display: flex;
		width: 100%;
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: 0 50px;
	}

}


/******************* Articles & pages ****************/
.hero {
	position: relative;
	overflow: hidden;	
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, 0.8);
}

.hero img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}


.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg,rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.50) 40%, rgba(0, 0, 0, 0.50) 60%, rgba(0, 0, 0, 0.20) 100%);
	z-index: 2;
}

.hero-overlay {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	justify-items: center;
	align-items: center;
	width: 100%;
	min-height: 100%;
	padding: 20px;
	gap: 30px;
}

.hero-overlay h1 {
	grid-row: 2;
	margin: 0;
}

.hero-overlay .hero-meta {
	grid-row: 3;
	align-self: end;
}

@media (min-width: 768px) {
	.hero {
		aspect-ratio: 16 / 9;
		min-height: unset;
	}
}

.hero h1 {
	color: #fff;
	text-shadow: -1px -1px 10px rgba(0, 0, 0, 0.7), 1px 1px 10px rgba(0, 0, 0, 0.7);
	font-family: var(--font-impact);
	text-transform: uppercase;
	line-height: 1.2;
	word-break: break-word;
	text-wrap: balance;
	margin-right: 10px;
	margin-left: 10px;
}


.hero-meta {	  
	display: inline-flex;	
	color: #fff;
	font-size: var(--font-size-medium);
	padding: 10px 24px;
	background: rgba(var(--color-accent), 1);
	border-radius: 20px;
	flex-direction: column;
	gap: 10px;
	box-shadow: 0 0 10px rgba(var(--color-text), 0.6);
}

@media (min-width: 768px) {
	.hero-meta {
		flex-direction: row;
		gap: 40px;
	}
}

.entry-meta {
	display: flex;
	gap: 5px;
	align-items: flex-end;
	line-height: 24px;
}

.entry-meta svg {
	width: 24px;
	height: 24px;
}

.obsolete {
	margin: 40px;
	padding: 20px;
	background: #fff1a5a3;
	border: 1px solid #fb2f00;
}

.obsolete h2 {
	color: #fb2f00;
	margin: 0 0 20px;
}


.entry-content {
	padding: 5px 10px;
}

@media (min-width: 768px) {
	.entry-content {
		width: 90%;
		max-width: 670px;
		margin: auto;
	}
}


.entry-content h2 {
	margin: 40px 0 20px;
	color: rgb(var(--color-accent));
}

.entry-content a {
	color: rgb(var(--color-link-dark));
}

.gallery img,
.gallery-icon img,
.wp-block-gallery img {
	margin: 0;
}


.verdict,
.verdict-plus,
.verdict-minus,
.verdict-average {
	padding: 15px 30px;
	margin-bottom: 30px;
}

.verdict h2,
.verdict-plus h2,
.verdict-minus h2,
.verdict-average h2 {
	margin: 0 0 20px;
	padding: 0;
}

.verdict-plus {
	background-color: #e4edfd;
	border-left: 5px solid #0f51bb;
}

.verdict-plus h2 {
	background: none;
	color: #0f51bb;
}

.verdict-minus {
	background-color: #fbe0de;
	border-left: 5px solid #bc1e0e;  
}

.verdict-minus h2 {
	background: none;
	color: #bc1e0e;  
}

.verdict-average {
	background-color: #ffe8da;
	border-left: 5px solid #c44e00;    
}

.verdict-average h2 {
	background: none;
	color: #c44e00;
}

.medal {
	margin: 0 0 0 20px;
	display: inline-block;
}
.medal img {
	width: auto;
	height: auto;
}

.medal-bronze {
	filter: drop-shadow(0 0px 10px rgba(231, 78, 37, 0.9));
}
.medal-silver {
	filter: drop-shadow(0 0px 10px rgba(255, 255, 255, 0.9));
}
.medal-gold {
	filter: drop-shadow(0 0px 10px rgba(255, 215, 0, 0.9));
}
.medal-diamond {
	filter: drop-shadow(0 0px 10px rgba(37, 239, 255, 0.9))
}

.medals-bronze {
	background: rgba(231, 78, 37, 0.4);
	border-left: 5px solid rgb(231, 78, 37);
	padding: 15px;
}
.medals-silver {
	background: rgba(100, 100, 100, 0.4);
	border-left: 5px solid rgb(100, 100, 100);
	padding: 15px;
}
.medals-gold {
	background: rgba(255, 215, 0, 0.4);
	border-left: 5px solid rgb(255, 215, 0);
	padding: 15px;
}
.medals-diamond {
	background: rgba(37, 239, 255, 0.4);
	border-left: 5px solid rgb(37, 239, 255);
	padding: 15px;
}



/************** Support anciens articles ***********************/

.gallery {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	margin: 10px 0;
}

.gallery-columns-4 {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.gallery-item {
	text-align: center;
}

.gallery figure {
	margin: 0;
}

.alignright {
	float: right;
	margin: 0 0 0 10px;
}

blockquote {
	margin: 0 auto;
	padding-left: 20px;
	border-left: 5px solid #666;
	background: #ececec;
	font-style: italic;
	overflow: hidden;
}

blockquote p {
	margin: 10px 0;
}


/************** Section "more" ***********************/
.related-articles,
.related-tags {
	margin: 0 0 20px 0;
}

.related-tags h3 {
	font-size: var(--font-size-medium);
	font-weight: 400;
}

.related-tags .tag-list {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.related-tags a {
display: inline-block;
	border-radius: 30px;	
	padding: 10px 18px;
	font-size: var(--font-size-medium);
	background: rgba(var(--color-link));
	border: 1px solid rgba(var(--color-link));  
	color: #000;
}

.related-tags a:hover {
	text-decoration: none;
	background: #fff;
	color: rgba(var(--color-link));
}


/********************** Commentaires ***********************/


.comment-respond {
	overflow: hidden;
	margin: 30px 0;
	padding: 30px;
	background: rgb(var(--color-bg));
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.comment-form p {
	display: block;
	margin-top: 0;
	margin-bottom: 10px;
}

.comment-form label {
	font-weight: 600;
	color: #333;
}

.comment-form input,
.comment-form input,
.comment-form textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #fff;
}

.comment-form input[type=checkbox] {
	width: auto;
}

.cnns-comment-subscription {
	display: flex !important;
	width: 100%;
	flex-wrap: nowrap;
	align-items: baseline;
}

@media (min-width: 768px) {
	.comment-form-email, 
	.comment-form-url {
		float: left;
		width: 49%;
	}
}

.comment-form-email {
	margin-right: 1%;
}
.comment-form-url {
	margin-left: 1%;
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border: 1px solid rgb(var(--color-link));
}


.form-submit {
	float: right;
	margin-top: 15px !important;
}

.form-submit input {
	background-color: rgb(var(--color-accent));
	color: rgb(var(--color-link));
	border: none;
	cursor: pointer;
	padding: 15px 30px;
}

.form-submit input:hover {
	background-color: rgb(var(--color-link));
	color: rgb(var(--color-accent));
}

.form-submit input:focus {
	outline: 3px solid rgb(var(--color-link));
	outline-offset: 2px;
}

/* liste des commentaires */
.avatar {
	background-color:#509cee;
	color: #fff;
	line-height: 1;
	text-align: center;
	font-family: Arial, Helvetica;
	font-weight: 800;
}

.avatar-40 {
	height: 40px;
	width: 40px;
	font-size: 40px;
}
.avatar-80 {
	height: 80px;
	width: 80px;
	font-size: 80px;
}

.comment-list {
	margin: 0;
	padding: 0;
}

.comment-list .comment,
.comment-list .pingback {
	background: #ffffff;
	display: block;
	margin: 0 0 30px;
	min-height: 130px;
	position: relative;
	overflow: hidden;
	padding: 25px 30px 25px 140px;
	font-size: var(--font-size-medium);
}
.comment-list .avatar {
	left: 30px;
	position: absolute;
	top: 25px;
}

.comment-meta {
	display: flex;
	justify-content: space-between;
}

.comment-author .fn {
	color: rgb(var(--color-accent));
	font-weight: 600;
}

.comment-author .says {
	display: none;
}

.comment-metadata a {
	color: #999;
}

.comment-list .comment p {
	clear: both;
	margin: 15px 0 0;
}


/************************************************************************
 *                          F O O T E R
 ************************************************************************/

.site-footer {
	background: rgb(var(--color-accent));
	padding: 25px 0;
	margin-bottom: 20px;
	color: #fff;
}

.site-footer .h-card {
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin: 0 10px;
	gap: 40px;  
}

@media (min-width: 768px) {
	.site-footer .h-card {
		flex-direction: row;
		gap: 70px;
		margin: 0 40px;	  
	}
}

.site-footer h3 {
	color: #fff;
	margin-bottom: 5px;
}

.footer-about {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
	font-size: var(--font-size-medium);
	max-width: 700px;
}

@media (max-width: 340px) {
	.u-photo {
		display: none;
	}
}

.footer-about p {
	margin: 0;
}

.footer-socials {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	flex-wrap: wrap;
}

@media (min-width: 768px) {
	.footer-socials {	
		flex-direction: column;
		gap: 0;
	}
}

.facebook,
.youtube,
.rss,
.sc {
	display: flex;
	gap: 8px;
	margin: 0 0 10px;
	align-items: center;
	font-size: var(--font-size-medium);
}

.facebook::before,
.youtube::before,
.rss::before,
.sc::before  {
	height:24px;
	width:24px;
	display: block;
	content: "";
	background: rgb(var(--color-link));
}

.facebook::before {  mask-image: url('images/brand-facebook.svg');  }
.youtube::before {  mask-image: url('images/brand-youtube.svg');  }
.rss::before {  mask-image: url('images/rss.svg');  }
.sc::before {  mask-image: url('images/bookmark.svg');  }

/*
.facebook span,
.twitter span,
.instagram span,
.steam span,
.youtube span,
.rss span,
.tiktok span,
.sc span {
	display:none;
}
*/


.footer-menu {
	display: flex;
	justify-content: center;
	margin: 20px 0px 10px;
	border-top: 3px dotted #666;
	padding: 20px 0 0;
	gap: 25px;
	flex-wrap: wrap;
}

@media (min-width: 768px) {
	.footer-menu {
		gap: 40px;
	}
}


.footer-menu li {
	display: block;
	margin: 0;
	padding: 0;
}

/*
.footer-menu li:not(:first-child)::before {
	content: "•";
	display: inline-block;
	margin-right: 40px;
}
*/

.footer-copy {
	text-align: center;
}



/************************************************************************
 *                        F R O N T     P A G E
 ************************************************************************/

.front-page-image::after {
	content: "";
	display: block;
}
.front-page-image img {
	display: block;
}

.front-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.front-main,
.front-aside {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	justify-content: space-between;
	width: 100%;
}

.front-page section {
	width: 100%;
}



@media (min-width: 768px) {
	.front-page {
		display: flex;
		gap: 70px;
		flex-direction: row;
		align-items: stretch;
	}

	.front-page .articles {
		justify-content: start;
	}

	.front-main {
		flex: 2;
		align-items: stretch;
	}

	.front-aside {
		flex: 1;
	}

	.front-page a.card {
		width: 300px;
		max-width: 100%;
	}	
}





.front-page h2 {
	display: flex;
    flex-direction: column;	
	line-height: 1;
}

.front-page .front-more {
	font-size: var(--font-size-medium);
}


.front-comments ul {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
}

.front-comments li {
	display: block;
	margin: 0;
	padding: 0;
}

.front-comments a {
	background: #ffffff;
	overflow: hidden;
	padding: 10px;
	display: block;
	color: #000;
    line-height: 1.4;
	border: 1px solid #ccc;
	font-size: var(--font-size-medium);	
}
.front-comments a:hover {
	text-decoration: none;
	background: rgb(255 128 0 / 7%);
}

.recent-comment {
	background: #FFF;
	margin-bottom: 20px;
	overflow: hidden;
	padding: 10px;
}

.recent-comment-avatar .avatar {
	float: left;
	margin: 0 10px 10px 0;
}

.recent-comment-author {
	color: rgb(var(--color-accent));
	display: block;
	font-weight: 600;
}

.recent-comment-time {
	display: block;
	color: #999;
	font-weight: 300;
}

.recent-comment-text {
	display: block;
	clear: both;
	margin: 15px 0;	
}

.recent-comment-link {
    border-top: 1px solid #EAEAEA;
    color: #999;
    display: block;
    margin: 10px 0 0;
    padding: 10px 0 0;

    font-size: var(--font-size-medium);
}

.recent-comment-link strong {
	color: rgb(var(--color-link));
	font-weight: 400;
}