/* =========================================================================
   Batiself — Single project page styles.
   Loaded ALONGSIDE home.css. Contains hero (full-bleed from top of page,
   breadcrumb overlaid), overview (description + meta), masonry gallery
   (respects natural aspect ratios), testimonial, related-projects slider.

   TYPOGRAPHY: every text element here consumes a role from tokens.css.
   Roles in use on this page (see tokens.css for the catalog):
     - display  → .bs-project-hero__title
     - h2       → .bs-project-overview__title (via home.css)
     - h3       → .bs-project-related-card__title
     - h4       → .bs-project-overview__meta-title
     - body     → .bs-project-overview__text p
     - body-sm  → .bs-project-related-card__subtitle, dd
     - quote    → .bs-project-testimonial__quote
     - eyebrow  → .bs-project-hero__eyebrow
     - meta     → .bs-project-meta-list dt 
     - caption  → .bs-project-testimonial__author
   ========================================================================= */
 
.batiself-project { background: #fff; } 
 
/* ---------- Editorial hero --------------------------------------------
   Starts at the very top of the viewport (header is overlaid).
   Breadcrumb at top in white, title block at the bottom. */
.bs-project-hero {
	position: relative;
	min-height: clamp(460px, 64vh, 640px);
	background-color: var(--bs-color-bg-alt); 
	background-image: var(--hero-bg);
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	color: #fff;
}
.bs-project-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	/* Lighter overall (top + bottom thirds eased) + Batiself diagonals. */
	background:
		linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.06) 35%, rgba(0,0,0,.48) 100%),
		var(--bs-overlay-diagonals-soft);
	pointer-events: none;
}

/* Breadcrumb overlaid in the hero, just below the fixed header. */
.bs-project-hero__crumbs {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: calc(var(--bs-header-h) + 56px + 44px);
	padding-bottom: 12px;
}
.bs-project-hero__crumbs .bs-breadcrumb,
.bs-project-hero__crumbs .bs-breadcrumb__item,
.bs-project-hero__crumbs .bs-breadcrumb__link,
.bs-project-hero__crumbs .bs-breadcrumb__current {
	color: #fff;
}
.bs-project-hero__crumbs .bs-breadcrumb__link { opacity: .85; }
.bs-project-hero__crumbs .bs-breadcrumb__link:hover { opacity: 1; color: #fff; }
.bs-project-hero__crumbs .bs-breadcrumb__sep { opacity: 1; }

/* Title block sits at the bottom of the hero. */
.bs-project-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: 64px;
	padding-bottom: 64px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-top: auto;
}

/* Eyebrow — role: eyebrow */
.bs-project-hero__eyebrow {
	display: inline-block;
	background: var(--bs-color-accent);
	color: var(--bs-color-text);
	padding: 8px 16px;
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	line-height:    var(--bs-type-eyebrow-leading);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}

/* Hero title — role: display. Sits in a white block on the cover → Blue. */
.bs-project-hero__title {
	margin: 0;
	background: #fff;
	color: var(--bs-color-primary);
	padding: 20px 32px;
	display: inline-block;
	max-width: min(900px, 100%);
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-display-size);
	font-weight:    var(--bs-type-display-weight);
	line-height:    var(--bs-type-display-leading);
	letter-spacing: var(--bs-type-display-tracking);
	text-transform: var(--bs-type-display-case);
}
@media (max-width: 700px) {
	.bs-project-hero { min-height: clamp(380px, 60vh, 520px); }
	/* Breadcrumb joins the title block at the bottom of the hero (instead of
	   floating at the top), so the trail sits right above the title on mobile. */
	.bs-project-hero__crumbs { padding-top: 0; padding-bottom: 4px; }
	.bs-project-hero__inner { margin-top: 0; padding: 0 0 32px; }
	.bs-project-hero__title { padding: 14px 20px; }
}

/* ---------- Overview (description + meta sidebar) ---------------------- */
.bs-project-overview { padding: var(--bs-section-pad-y) 0; }
.bs-project-overview__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
	gap: var(--bs-space-xl);
	align-items: start;
}
@media (max-width: 900px) {
	.bs-project-overview__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Overview title — role: h2. On white bg → Blue. */
.bs-project-overview__title {
	margin: 0 0 18px;
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h2-size);
	font-weight:    var(--bs-type-h2-weight);
	line-height:    var(--bs-type-h2-leading);
	letter-spacing: var(--bs-type-h2-tracking);
	text-transform: var(--bs-type-h2-case);
}
.bs-project-overview__title strong { font-weight: var(--bs-weight-black); }

/* Body text — role: body */
.bs-project-overview__text {
	color: var(--bs-color-text);
	font-size:      var(--bs-type-body-size);
	font-weight:    var(--bs-type-body-weight);
	line-height:    var(--bs-type-body-leading);
	letter-spacing: var(--bs-type-body-tracking);
}
.bs-project-overview__text p { margin: 0 0 14px; }

.bs-project-overview__meta {
	background: var(--bs-color-bg-alt);
	padding: 28px 28px;
	border-top: 4px solid var(--bs-color-primary);
}

/* Meta block title — role: h4. Sidebar sits on light-bg → Blue. */
.bs-project-overview__meta-title {
	margin: 0 0 18px;
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h4-size);
	font-weight:    var(--bs-type-h4-weight);
	line-height:    var(--bs-type-h4-leading);
	letter-spacing: var(--bs-type-h4-tracking);
	text-transform: var(--bs-type-h4-case);
}

.bs-project-meta-list {
	margin: 0;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 10px 18px;
}
/* dt — role: meta (label) */
.bs-project-meta-list dt {
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-meta-size);
	font-weight:    var(--bs-type-meta-weight);
	line-height:    var(--bs-type-meta-leading);
	letter-spacing: var(--bs-type-meta-tracking);
}
/* dd — role: body-sm (value) */
.bs-project-meta-list dd {
	margin: 0;
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-medium);   /* dd is body-sm but bumped to medium for legibility */
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}

/* ---------- Editorial gallery (masonry) -------------------------------
   CSS columns = native masonry: every image keeps its natural aspect
   ratio (height: auto), no cropping, no forced cells. */
.bs-project-gallery {
	padding: var(--bs-section-pad-y) 0;
	background: var(--bs-color-bg-alt);
}
.bs-project-gallery .home-section__header { margin-bottom: var(--bs-space-xl); }

.bs-project-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3 380px;
	column-gap: 20px;
}
.bs-project-gallery__item {
	display: block;
	margin: 0 0 20px;
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	overflow: hidden;
	background: #fff;
}
.bs-project-gallery__link {
	display: block;
	overflow: hidden;
}
.bs-project-gallery__img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .5s ease;
}
.bs-project-gallery__link:hover .bs-project-gallery__img { transform: scale(1.04); }

@media (max-width: 700px) {
	.bs-project-gallery { padding: 64px 0; }
	.bs-project-gallery__grid { columns: 1; }
}

/* ---------- Testimonial ------------------------------------------------ */
.bs-project-testimonial {
	background: var(--bs-color-primary);
	color: #fff;
	padding: var(--bs-section-pad-y) 0;
}
.bs-project-testimonial__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.bs-project-testimonial__mark {
	color: var(--bs-color-accent);
	margin: 0 auto 20px;
	display: block;
}

/* Quote — role: quote */
.bs-project-testimonial__quote {
	margin: 0 0 18px;
	padding: 0;
	color: #fff;
	font-size:      var(--bs-type-quote-size);
	font-weight:    var(--bs-type-quote-weight);
	line-height:    var(--bs-type-quote-leading);
	letter-spacing: var(--bs-type-quote-tracking);
}
.bs-project-testimonial__quote p { margin: 0; font-style: italic; }

/* Author — role: caption (with widest tracking override for refinement) */
.bs-project-testimonial__author {
	color: rgba(255, 255, 255, .85);
	font-style: normal;
	font-size:      var(--bs-type-caption-size);
	font-weight:    var(--bs-type-caption-weight);
	line-height:    var(--bs-type-caption-leading);
	letter-spacing: var(--bs-tracking-wide);  /* slight override: caption defaults to normal, here we want wide */
	text-transform: var(--bs-type-caption-case);
}

/* ---------- Related projects ------------------------------------------
   No per-context CSS needed. The "Autres projets inspirants" section
   on single-project pages is rendered by the canonical
   template-parts/components/section-projects.php and styled exclusively
   via .bs-project-card / .bs-projects-grid (home.css). */

/* =========================================================================
   PROJECTS ARCHIVE (archive-project.php)
   ---------------------------------------------------------------------------
   Editorial listing of all projects:
     1. Hero band (light-bg, eyebrow + H1 + lead + count badge)
     2. Featured project card (landscape 16:9, full container, page 1 only)
     3. Grid of portrait 2:3 cards (reuses .bs-project-card from home.css)
     4. Pagination (WP paginate_links → .page-numbers ul)
     5. Final CTA strip → /contact/

   All cards consume the canonical .bs-project-card visual already defined
   in home.css → strict consistency with the home + category + single
   project rails. Only layout primitives + the featured-variant override
   live here.
   ========================================================================= */

.batiself-projects-archive { background: #fff; }

/* ---- 1. Hero ---------------------------------------------------------- */
.bs-projects-archive-hero {
	background: var(--bs-color-bg-alt);
	border-bottom: 1px solid var(--bs-color-border);
	padding: var(--bs-space-xl) 0 var(--bs-space-lg);
}
.bs-projects-archive-hero__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--bs-space-xl);
	flex-wrap: wrap;
}
.bs-projects-archive-hero__text {
	max-width: 720px;
}
.bs-projects-archive-hero__eyebrow {
	margin: 0 0 var(--bs-space-xs);
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}
.bs-projects-archive-hero__title {
	margin: 0 0 var(--bs-space-sm);
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h1-size);
	font-weight:    var(--bs-type-h1-weight);
	line-height:    var(--bs-type-h1-leading);
	letter-spacing: var(--bs-type-h1-tracking);
	text-transform: var(--bs-type-h1-case);
}
.bs-projects-archive-hero__title strong { font-weight: var(--bs-weight-black); }
.bs-projects-archive-hero__lead {
	margin: 0;
	max-width: 640px;
	color: var(--bs-color-text);
	font-size:      var(--bs-type-lead-size);
	font-weight:    var(--bs-type-lead-weight);
	line-height:    var(--bs-type-lead-leading);
}
/* Count badge — flush right on desktop, stacks below text on mobile. */
.bs-projects-archive-hero__count {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	padding: var(--bs-space-sm) var(--bs-space-md);
	background: var(--bs-color-primary);
	color: #fff;
	border-radius: 18px;
	min-width: 140px;
	text-align: right;
}
.bs-projects-archive-hero__count-num {
	font-size:      var(--bs-text-3xl);
	font-weight:    var(--bs-weight-black);
	line-height:    var(--bs-leading-flat);
	letter-spacing: var(--bs-tracking-tight);
}
.bs-projects-archive-hero__count-label {
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
	color: var(--bs-color-accent);
}

/* ---- 2. Featured card ------------------------------------------------- */
.bs-projects-archive-featured-section {
	padding: var(--bs-space-xl) 0 0;
}
/* Override the canonical .bs-project-card portrait silhouette: featured
   card sits as a 16:9 landscape full-width hero, with a yellow "À la une"
   flag in the top-left and a larger title block. The rest of the card
   visual contract (gradient overlay, white text, outlined arrow CTA) is
   inherited from .bs-project-card in home.css. */
.bs-project-card--featured {
	aspect-ratio: 16 / 9;
	min-height: 0;
	width: 100%;
}
.bs-project-card--featured .bs-project-card__link {
	padding: var(--bs-space-xl) var(--bs-space-lg);
}
.bs-project-card--featured .bs-project-card__title {
	font-size:      var(--bs-type-h1-size);
	font-weight:    var(--bs-type-h1-weight);
	line-height:    var(--bs-type-h1-leading);
	letter-spacing: var(--bs-type-h1-tracking);
	text-transform: var(--bs-type-h1-case);
}
.bs-project-card--featured .bs-project-card__subtitle {
	margin-top: var(--bs-space-xs);
	font-size: var(--bs-type-lead-size);
	opacity: 1;
}
.bs-project-card__flag {
	position: absolute;
	top: var(--bs-space-md);
	left: var(--bs-space-md);
	z-index: 2;
	display: inline-block;
	padding: 6px 14px;
	background: var(--bs-color-accent);
	color: var(--bs-color-text);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}

/* ---- 3. Grid of remaining projects ------------------------------------ */
.bs-projects-archive-section {
	padding: var(--bs-space-xl) 0 var(--bs-space-2xl);
}
.bs-projects-archive-grid {
	list-style: none;
	margin: 0 0 var(--bs-space-xl);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--bs-space-sm);
}
@media (max-width: 1100px) { .bs-projects-archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
	.bs-projects-archive-grid { grid-template-columns: 1fr; gap: 14px; }
	/* From the 2nd project on (the grid — the 1st is the separate featured
	   card above), use compact horizontal rectangles so the list takes far
	   less vertical space on a phone. */
	.bs-projects-archive-grid .bs-project-card {
		aspect-ratio: 16 / 8;
		min-height: 0;
	}
	.bs-projects-archive-grid .bs-project-card__title {
		font-size: var(--bs-type-body-size);
	}
}

/* ---- Project LIST cards: title/subtitle in a white banner with blue text --
   Client choice: keep the cover photo, but the text block sits on a white
   banner with blue text so it reads as a clean label. Scoped to the projects
   archive so the home / category project SHOWCASE sliders keep their overlay
   style. */
.batiself-projects-archive .bs-project-card__body {
	background: #fff;
	padding: 12px 14px;
	gap: 4px;
	max-width: 100%;
}
.batiself-projects-archive .bs-project-card .bs-project-card__title,
.batiself-projects-archive h2.bs-project-card__title,
.batiself-projects-archive h3.bs-project-card__title {
	color: var(--bs-color-primary);
}
/* List cards show the title only — hide the subtitle/excerpt. */
.batiself-projects-archive .bs-project-card__subtitle {
	display: none;
}

/* ---- 4. Pagination (matches WP's paginate_links list output) ---------- */
.bs-projects-archive-pagination {
	display: flex;
	justify-content: center;
	margin: var(--bs-space-md) 0 0;
}
.bs-projects-archive-pagination .page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bs-projects-archive-pagination .page-numbers > li > a,
.bs-projects-archive-pagination .page-numbers > li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--bs-color-border);
	color: var(--bs-color-text);
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-bold);
	line-height:    var(--bs-leading-flat);
	letter-spacing: var(--bs-tracking-wide);
}
.bs-projects-archive-pagination .page-numbers > li > a:hover {
	border-color: var(--bs-color-primary);
	color: var(--bs-color-primary);
}
.bs-projects-archive-pagination .page-numbers > li > .current {
	background: var(--bs-color-primary);
	border-color: var(--bs-color-primary);
	color: #fff;
}
.bs-projects-archive-pagination .page-numbers > li > .dots {
	border-color: transparent;
	background: transparent;
}

/* ---- 5. Final CTA strip ----------------------------------------------- */
.bs-projects-archive-cta {
	background: var(--bs-color-primary-dark);
	color: #fff;
	padding: var(--bs-space-xl) 0;
}
.bs-projects-archive-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bs-space-xl);
	flex-wrap: wrap;
}
.bs-projects-archive-cta__eyebrow {
	margin: 0 0 var(--bs-space-xs);
	color: var(--bs-color-accent);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}
.bs-projects-archive-cta__title {
	margin: 0 0 var(--bs-space-sm);
	color: #fff;
	font-size:      var(--bs-type-h2-size);
	font-weight:    var(--bs-type-h2-weight);
	line-height:    var(--bs-type-h2-leading);
	letter-spacing: var(--bs-type-h2-tracking);
	text-transform: var(--bs-type-h2-case);
}
.bs-projects-archive-cta__title strong { font-weight: var(--bs-weight-black); }
.bs-projects-archive-cta__lead {
	margin: 0;
	max-width: 560px;
	color: rgba(255, 255, 255, .85);
	font-size:      var(--bs-type-body-size);
	line-height:    var(--bs-type-body-leading);
}
.bs-projects-archive-cta__actions {
	display: flex;
	gap: var(--bs-space-sm);
	flex-wrap: wrap;
}
.bs-projects-archive-cta__actions .home-btn--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6);
}
.bs-projects-archive-cta__actions .home-btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px #fff;
}

/* ---- Empty state ------------------------------------------------------ */
.bs-projects-archive-empty .home-container {
	text-align: center;
	padding: var(--bs-space-xl) 0;
}
.bs-projects-archive-empty p {
	max-width: 520px;
	margin: var(--bs-space-sm) auto var(--bs-space-md);
	color: var(--bs-color-muted);
}

/* ---- Responsive tweaks ------------------------------------------------ */
@media (max-width: 900px) {
	.bs-projects-archive-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--bs-space-md);
	}
	.bs-projects-archive-hero__count {
		align-self: flex-start;
		min-width: 0;
	}
	.bs-project-card--featured {
		aspect-ratio: 4 / 5;
	}
	.bs-project-card--featured .bs-project-card__link {
		padding: var(--bs-space-md) var(--bs-space-md);
	}
	.bs-projects-archive-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}