/*
 * Query loops, carousels, project cards, single project template.
 *
 * Part of the Web Weasel child theme. Loaded from inc/enqueue-assets.php.
 * Order matters: this file is printed after the previous module.
 */

/* Query loop grid (Portfolio, Blog): rely on Gutenberg's own native CSS Grid
   support (the is-layout-grid class WordPress already applies) instead of a
   manual CSS-columns masonry hack. The columns hack relied on break-inside,
   which several browsers honour inconsistently with inline-block children of
   varying heights, and produced a visibly broken layout. The native grid
   auto-places items row by row and, with stretch, gives every card in a row
   the same height -- simpler and reliable. */
/* align-items: start (not stretch): each card's <details> disclosure
   ("Voir le detail") grows that card in place without stretching or
   shifting the card next to it in the same row -- stretch was making the
   opposite-column card jump when its sibling's details opened. */
.wp-block-post-template.is-layout-grid {
	align-items: start;
}
.wp-block-post-template.is-layout-grid > li {
	margin: 0;
}
@media (max-width: 781px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Carousel slide hover effect removed: it did not read well in practice. */

/* Project cards (Portfolio loops): white card background, matching the Blog cards */
.ww-realisation-card {
	background: #fff !important;
	border-radius: 18px;
	padding: 16px !important;
	transition: transform 0.2s ease;
}
.ww-realisation-card:hover {
	transform: translateY(-6px);
}
.ww-realisation-card .wp-block-post-featured-image {
	border-radius: 12px;
	overflow: hidden;
}
.ww-realisation-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}
.ww-realisation-card .wp-block-post-title {
	font-size: 18px !important;
}
.ww-realisation-card details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--nunito-sans);
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--custom-biche-orange);
}
.ww-realisation-card details > div {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}
.ww-realisation-card details p {
	font-size: 14.5px;
	line-height: 1.5;
	margin: 0 !important;
	color: var(--wp--preset--color--ink, #0F1C1C);
}
.ww-realisation-card details p strong {
	color: var(--wp--preset--color--ww-teal-700);
}

/* single-realisation template: project detail card */
.ww-detail-card {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	padding: 26px 28px !important;
}
.ww-detail-card > * {
	width: 100%;
}
.ww-detail-row {
	flex-wrap: nowrap !important;
	gap: 6px !important;
	align-items: baseline !important;
	margin-bottom: 8px;
}
.ww-detail-row p {
	margin: 0 !important;
	font-size: 15px;
	line-height: 1.5;
}
.ww-detail-row p:first-child {
	flex: none;
	white-space: nowrap;
}
.ww-detail-block {
	margin-bottom: 10px;
}
.ww-detail-block p {
	margin: 0 !important;
	font-size: 15px;
	line-height: 1.6;
}
.ww-detail-block p:first-child {
	margin-bottom: 2px !important;
}
.ww-detail-row strong,
.ww-detail-block strong {
	color: var(--wp--preset--color--ww-teal-700);
}


/* Portfolio grid: halve the vertical gap between project rows, keep the
   horizontal gap between the two columns as-is (Gutenberg sets both via a
   single inline "gap" shorthand, so row-gap needs !important to override
   just that axis). */
.wp-block-post-template.is-layout-grid {
	row-gap: calc(var(--wp--preset--spacing--medium) / 2) !important;
}

/* Portfolio card details: custom chevron (replaces the native triangle
   marker) that rotates on open, and a soft fade-in for the revealed
   content. Height itself still snaps open/closed (native <details> has no
   size to transition without JS), but the fade removes the abrupt pop and
   the chevron gives a clear open/closed cue. Respects prefers-reduced-motion. */
.ww-realisation-card details summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ww-realisation-card details summary::-webkit-details-marker {
	display: none;
}
.ww-realisation-card details summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex: none;
	margin-top: -6px;
}
.ww-realisation-card details[open] summary::after {
	transform: rotate(-135deg);
	margin-top: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.ww-realisation-card details[open] > div {
		animation: ww-details-fade-in 0.25s ease;
	}
	@keyframes ww-details-fade-in {
		from { opacity: 0; transform: translateY(-4px); }
		to { opacity: 1; transform: translateY(0); }
	}
}


/* Carousel arrow buttons (Carousel Slider Block / Swiper) are 13.5x22px,
   far under the ~44x44px touch-target guideline (RGAA/responsive audit,
   2026-09-13). Grow the clickable hitbox without touching the icon itself:
   the buttons have no icon child (the arrow is drawn centered via ::after,
   flex-centered in the box), so widening/heightening the box just adds
   transparent padding around the same-size glyph. */
.cb-button-prev.swiper-button-prev,
.cb-button-next.swiper-button-next {
	min-width: 44px;
	min-height: 44px;
}