/*
Theme Name: History Museum Child
Theme URI: https://www.ovationthemes.com/products/free-museum-wordpress-theme
Description: Child theme of History Museum.
Author: OMAR ELFARSAOUI
Template: history-museum
Version: 1.0.0
Text Domain: history-museum-child
*/

/* Single collection_item / exhibition template: hero with bottom-aligned gradient */
.item-hero {
	position: relative;
	min-height: 80vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.item-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.item-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(24, 35, 23, 0.9) 0%, rgba(24, 35, 23, 0.4) 55%, rgba(24, 35, 23, 0) 100%);
	z-index: 1;
}

.item-hero__content {
	position: relative;
	z-index: 2;
	padding: 0 20px 64px;
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

/* Fiche technique sidebar box (server-rendered by musee-agricole/fiche-technique) */
.fiche-technique {
	background-color: var(--wp--preset--color--section-bg);
	border: 1px solid var(--wp--preset--color--border-color);
	border-radius: 4px;
	padding: 32px;
	position: sticky;
	top: 100px;
}

.fiche-title {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: 24px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin: 0 0 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wp--preset--color--border-color);
}

.fiche-row {
	margin-bottom: 24px;
}

.fiche-row:last-child {
	margin-bottom: 0;
}

.fiche-label {
	color: var(--wp--preset--color--body-text);
	margin: 0 0 4px;
}

.fiche-value {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
	margin: 0;
}

/* Item pull-quote */
.item-quote {
	background-color: var(--wp--preset--color--section-bg);
	border-left: 2px solid var(--wp--preset--color--primary-light);
	padding: 32px;
	margin: 48px 0;
}

.item-quote p {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: 24px;
	font-style: italic;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

/* "Détails et savoir-faire" bento image gallery */
.item-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 8px;
	height: 600px;
}

.item-gallery__large {
	grid-column: span 2;
	grid-row: span 2;
}

.item-gallery figure {
	position: relative;
	margin: 0;
	height: 100%;
	overflow: hidden;
	border-radius: 4px;
}

.item-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.item-gallery figure:hover img {
	transform: scale(1.05);
}

.item-gallery figcaption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 24px;
	background: linear-gradient(to top, rgba(24, 35, 23, 0.85) 0%, rgba(24, 35, 23, 0) 60%);
	color: #fff;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.item-gallery figure:hover figcaption {
	opacity: 1;
}

@media (max-width: 782px) {
	.item-gallery {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		height: auto;
	}

	.item-gallery__large {
		grid-column: span 1;
		height: 320px;
	}

	.item-gallery figure {
		height: 240px;
	}

	.item-gallery figcaption {
		opacity: 1;
	}

	.fiche-technique {
		position: static;
	}
}

/* Collections bento grid, per design spec */
.collections-bento {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 24px;
}

.collections-bento .wp-block-query {
	margin: 0;
}

.bento-large {
	grid-column: span 8;
}

.bento-small {
	grid-column: span 4;
}

.bento-medium {
	grid-column: span 6;
}

.bento-full {
	grid-column: span 12;
}

.bento-card-wrap {
	position: relative;
	height: 100%;
	min-height: 400px;
	border-radius: 4px;
	overflow: hidden;
	background-color: var(--wp--preset--color--section-bg);
}

.bento-full .bento-card-wrap {
	min-height: 450px;
}

.bento-card-wrap .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
	transition: transform 0.7s ease;
}

.bento-card-wrap:hover .wp-block-post-featured-image {
	transform: scale(1.05);
}

.bento-card-wrap .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bento-card-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 24px;
	background: linear-gradient(to top, rgba(24, 35, 23, 0.9) 0%, rgba(24, 35, 23, 0.55) 65%, rgba(24, 35, 23, 0) 100%);
}

.bento-card-caption .wp-block-post-terms {
	display: block;
	margin-bottom: 8px;
	text-transform: uppercase;
}

@media (max-width: 782px) {
	.bento-large,
	.bento-small,
	.bento-medium,
	.bento-full {
		grid-column: span 12;
	}
}

/* Hero cover: bottom-to-transparent gradient instead of a flat dim, per design spec */
.hero-gradient-overlay .wp-block-cover__background {
	background: linear-gradient(to top, rgba(27, 28, 25, 0.85) 0%, rgba(27, 28, 25, 0.35) 55%, rgba(27, 28, 25, 0) 100%) !important;
	opacity: 1 !important;
}

/* Ferme Mouilleseaux: asymmetric overlapping image composition, per design */
.ferme-image-composition {
	position: relative;
	min-height: 460px;
}

.ferme-image-large {
	position: absolute;
	top: 0;
	right: 0;
	width: 78%;
	height: 82%;
	margin: 0;
}

.ferme-image-large img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ferme-image-inset {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48%;
	z-index: 2;
	box-shadow: 0 10px 30px rgba(27, 28, 25, 0.25);
	background: var(--wp--preset--color--base);
	padding: 6px;
}

.ferme-image-inset .wp-block-image {
	margin: 0;
}

.ferme-image-inset img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.ferme-image-label {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	margin: 0;
	background: var(--wp--preset--color--primary);
	color: #fff;
	padding: 6px 10px;
}

/* Label-caps utility (nav items, eyebrows, categories) */
.has-label-caps-font-size {
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--inter);
}

.has-display-lg-font-size {
	letter-spacing: -0.02em;
}

/* Links inside content read as underlined with an offset, per design spec */
.entry-content a,
.wp-block-post-content a {
	text-underline-offset: 4px;
	text-decoration-color: var(--wp--preset--color--primary-light);
}

/* Buttons: flat, no shadow, hover shifts to terracotta */
.wp-element-button,
.wp-block-button__link {
	box-shadow: none;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-light) !important;
	color: #fff !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-light) !important;
	border-color: var(--wp--preset--color--primary-light) !important;
	color: #fff !important;
}

/* Sticky, blurred main navigation row (top contact bar stays static above it) */
.middle-header-box {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: rgba(251, 249, 244, 0.8);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--border-color);
}

/* Primary navigation reads as label-caps, active/hover shifts to terracotta */
.nav-block .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.nav-block .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary-light);
}

/* Cards inside query loops (Collections, Actualités, Expositions): keyline + subtle radius */
.wp-block-query .wp-block-post-template > li > .wp-block-group,
.wp-block-query .wp-block-post-template .wp-block-group {
	border-radius: 4px;
	overflow: hidden;
}

.wp-block-query .wp-block-post-template img {
	border-radius: 0;
}

/* Equal-height cards: stretch each card to the tallest in its row, push
   the "read more" link to a shared baseline regardless of excerpt length */
.wp-block-post-template.is-layout-grid {
	align-items: stretch;
}

.wp-block-post-template.is-layout-grid > li {
	height: 100%;
}

.wp-block-post-template.is-layout-grid > li > .wp-block-group {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wp-block-post-template.is-layout-grid > li > .wp-block-group > .wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.wp-block-post-template .wp-block-post-excerpt {
	flex: 1;
}

/* Teaser row (Le Musée/Collections/Visiter/Actualités): equal-height columns,
   "En savoir plus" links share the same baseline regardless of text length */
.teaser-row {
	align-items: stretch !important;
}

.teaser-row > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.teaser-row > .wp-block-column > p:nth-of-type(1) {
	flex: 1;
}

/* Keyline borders at 20% opacity, per design spec, wherever a border-color block is used */
[style*="border-color:var(--wp--preset--color--border-color)"] {
	border-color: rgba(196, 200, 191, 0.6) !important;
}

/* Actualités récentes: full section box (background included) at 80% of viewport width */
.actualites-recentes {
	width: 80vw !important;
	max-width: 80vw !important;
	margin-left: calc(50% - 40vw) !important;
	margin-right: calc(50% - 40vw) !important;
}

/* Homepage hero photo carousel */
.hero-carousel {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-top: -60px;
	min-height: 100vh;
	overflow: hidden;
}

@media (max-width: 782px) {
	.hero-carousel {
		margin-top: -60px;
	}
}

.hero-carousel .hero-swiper {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

.hero-carousel .hero-swiper .swiper-wrapper {
	height: 100% !important;
}

.hero-carousel .hero-swiper .swiper-slide {
	height: 100% !important;
}

.hero-swiper .swiper-slide {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero-carousel__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--primary);
	opacity: 0.5;
	z-index: 1;
}

.hero-carousel__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	text-align: center;
	color: #fff;
	padding: 80px 20px;
	max-width: 900px;
	margin: 0 auto;
}

.hero-carousel__eyebrow {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.hero-carousel__title {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-weight: 500;
	font-size: 64px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 1.5rem;
	color: #fff;
}

.hero-carousel__subtitle {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 18px;
	margin-bottom: 2rem;
}

.hero-carousel__buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.hero-carousel__btn {
	display: inline-block;
	padding: 1rem 2rem;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.hero-carousel__btn--primary {
	background-color: var(--wp--preset--color--primary-light);
	color: #fff;
}

.hero-carousel__btn--primary:hover {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
}

.hero-carousel__btn--outline {
	background-color: transparent;
	color: #fff;
	border: 1px solid #fff;
}

.hero-carousel__btn--outline:hover {
	background-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 782px) {
	.hero-carousel__title {
		font-size: 40px;
	}
}