/* Reset */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

main {
	padding: 0 !important;
}

:root :where(.is-layout-flow) > * {
	margin-block-start: 0;
}

:root {
	--bg-color-1: rgba(57, 83, 91, 0.7);
	--bg-color-2: rgba(237, 106, 83, 0.7);
	--bg-color-3: rgba(237, 110, 167, 0.7);
	--bg-color-4: rgba(247, 171, 100, 0.7);
}

.wp-site-blocks {
	position: relative;
}

/* Header */
.site-header .wp-block-site-title a {
	text-decoration: none;
}

.site-header .wp-block-social-links.alignright {
	margin: 0 0 0 1em;
	transform: translateY(-0.3rem);
}

/* Footer */
footer {
	margin-top: auto;
	padding: var(--wp--custom--gap--vertical) var(--wp--custom--gap--horizontal);
}

/* Images */
img {
	height: auto;
	max-width: 100%;
}

/* Post Meta */
.post-meta a {
	color: currentColor;
}

.is-style-post-author-icon:before {
	-webkit-mask-image: url(svg/post-author.svg);
	mask-image: url(svg/post-author.svg);
}

.is-style-post-date-icon:before {
	-webkit-mask-image: url(svg/post-date.svg);
	mask-image: url(svg/post-date.svg);
}

.is-style-post-category-icon:before {
	-webkit-mask-image: url(svg/post-category.svg);
	mask-image: url(svg/post-category.svg);
}

.is-style-post-tag-icon:before {
	-webkit-mask-image: url(svg/post-tag.svg);
	mask-image: url(svg/post-tag.svg);
}

/* Homepage Masonry Layout */
.wp-block-post-template {
	display: flex;
}

.wp-block-group {
	padding: 0;
}

.wp-block-post {
	width: 24%;
	margin-bottom: 16px;
}

.post-overlay {
	position: relative;
	overflow: hidden;
}

.post-overlay a {
	color: #ffffff;
	text-decoration: none;
}

.post-overlay img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.3s ease;
}

.post-overlay:hover img {
	transform: scale(1.05);
}

.post-overlay .overlay-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var(--bg-color-1);
	color: #fff;
	opacity: 0;
	transform: translateY(20px); /* slight slide-up effect */
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none; /* overlay doesn’t “eat” clicks */
}

.post-overlay:hover .overlay-content {
	opacity: 1;
	transform: translateY(0);
}

.post-overlay .overlay-content .wp-block-post-title {
	margin: 0 0 0.5rem 0;
	font-size: 1.1rem;
	font-weight: bold;
}

.post-overlay .overlay-content .wp-block-post-terms {
	font-size: 0.8rem;
	opacity: 0.9;
}

/* Posts */
.post-container {
	display: flex;
}

.post-col-images {
	width: 50%;
}

.post-col-info {
	width: 50%;
	position: relative;
}

.post-col-info-inner {
	position: sticky;
	top: 0; /* distance from top of viewport */
	overflow-y: auto; /* scroll if content is too tall */
	padding-top: calc(2 * var(--wp--custom--gap--baseline));
	box-sizing: border-box;
}

.post-col-info figure {
	display: none;
}

.wp-block-post-title {
	font-weight: bold;
	margin-bottom: 1rem;
}

.post-col-images {
	display: flex;
	flex-direction: column;
}

.post-col-images .wp-block-gallery {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
	width: 100%;
}

/* À propos */
.about-banner {
	position: relative;
	left: -32px;
	width: 100vw;
	height: 250px;
	background: url(./img/about-banner.jpg) center / cover no-repeat #ed6a53;
	margin-bottom: var(--wp--custom--gap--vertical);
}

.about-img {
	display: flex;
	justify-content: left;
}

/* Contact */
.contact-img {
	display: flex;
	justify-content: right;
}

.contact-img img {
	max-height: 475px;
	object-fit: contain !important;
}

/* Media Queries */
@media screen and (min-width: 1290px) {
	.site-header .wp-block-column,
	.site-footer .wp-block-column {
		padding-left: var(--wp--custom--gap--horizontal);
		padding-right: var(--wp--custom--gap--horizontal);
	}
}

@media (max-width: 1024px) {
	.wp-block-post {
		width: 48%;
	}
}

@media (max-width: 781px) {
	.contact-img img {
		display: none;
	}

	.post-col-images,
	.post-col-info {
		width: 100%;
	}

	.post-container .wp-block-columns {
		display: flex;
		flex-direction: column-reverse;
	}
}

@media (max-width: 600px) {
	.wp-block-post {
		width: 100%;
	}

	.contact-img img {
		display: none;
	}
}