/* =========================================================================
   Batiself — Shared partners cards.
   Used by:
     - template-parts/home/section-partners.php       (wrapped in a swiper)
     - template-parts/category/section-partners.php   (grid OR scroll-rail)
   Loaded site-wide alongside the header/tokens so the design system stays
   consistent regardless of where partners are rendered.
   ========================================================================= */

/* ---------- Card (image-as-background + centred logo overlay) ---------- */
.cat-partner-card {
	margin: 0;
	min-width: 0;
}
.cat-partner-card__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background-color: var(--bs-color-primary-dark);
	background-size: cover;
	background-position: center;
	border: 1px solid var(--bs-color-border);
	text-decoration: none;
	overflow: hidden;
	transition: border-color .25s ease;
} 
.cat-partner-card__link::before {
	content: '';
	position: absolute;
	inset: 0;
	/* Lighter base (a flat dark layer via a no-op gradient so multi-layer
	   syntax stays valid) + Batiself diagonals signature. */
	background:
		linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)),
		var(--bs-overlay-diagonals-soft);
	transition: background .25s ease;
}
.cat-partner-card__link:hover {
	border-color: var(--bs-color-primary);
}
.cat-partner-card__link:hover::before {
	background:
		linear-gradient(rgba(0, 0, 0, .22), rgba(0, 0, 0, .22)),
		var(--bs-overlay-diagonals-soft);
}

.cat-partner-card__logo {
	position: relative;
	z-index: 1;
	max-width: 55%;
	max-height: 55%;
	object-fit: contain;
}

.cat-partner-card__name {
	position: relative;
	z-index: 1;
	padding: var(--bs-space-xs) var(--bs-space-md);
	background: rgba(255, 255, 255, .92);
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h4-size);
	font-weight:    var(--bs-type-h4-weight);
	letter-spacing: var(--bs-type-h4-tracking);
	text-transform: var(--bs-type-h4-case);
}

/* Placeholder partners get a neutral pattern background. */
.cat-partner-card--placeholder .cat-partner-card__link {
	background-color: var(--bs-color-border);
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, .35) 0 6px,
		transparent 6px 12px
	);
}

/* ---------- Logo-only mode (brand card without an ambiance background) ----
   Clean light card so the brand logo (which often has white/transparent
   background and saturated colors) stays legible. No dark overlay, no
   diagonals — just a neutral surface with a soft border + hover lift. */
.cat-partner-card--logo-only .cat-partner-card__link {
	background-color: #fff;
	background-image: none;
	border-color: var(--bs-color-border);
}
.cat-partner-card--logo-only .cat-partner-card__link::before {
	/* Kill the dark overlay + diagonals; keep the element for layering
	   structure but make it invisible. */
	background: none;
}
.cat-partner-card--logo-only .cat-partner-card__link:hover {
	border-color: var(--bs-color-primary);
	background-color: #fbfcfe;
}
.cat-partner-card--logo-only .cat-partner-card__link:hover::before {
	background: none;
}
.cat-partner-card--logo-only .cat-partner-card__logo {
	/* Brand logos breathe better with more room than the ambiance-mode 55%. */
	max-width:  72%;
	max-height: 62%;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.cat-partner-card--logo-only .cat-partner-card__link:hover .cat-partner-card__logo {
	transform: scale(1.04);
}
/* Plain-text fallback name (when the brand has no logo imported yet) — keep
   it clean on the white bg instead of the white pill that was designed for
   dark ambiance. */
.cat-partner-card--logo-only .cat-partner-card__name {
	background: transparent;
	color: var(--bs-color-primary);
	padding: 0;
}

/* ---------- Brand grid (category "Nos partenaires" + /marques/ page) -------
   Compact logo cards: many per row, flat aspect, small contained logos. Lives
   here (site-wide) so both the category section and the dedicated brands page
   share it. The home swiper (scoped below) is untouched. */
.cat-partners__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: var(--bs-space-sm);
}
/* Compact card — FIXED height so every card (logo or name) is identical,
   regardless of grid row sizing (fixes the uneven cards). */
.cat-partners__grid .cat-partner-card__link {
	aspect-ratio: auto;
	height: 96px;
}
/* Logos: small + consistent (were huge on the old oversized cards). */
.cat-partners__grid .cat-partner-card--logo-only .cat-partner-card__logo {
	max-width: 72%;
	max-height: 44px;
}
/* No-logo brand → WHITE card, brand name in BLUE (same size as the logo
   cards), consistent with the logo cards' clean surface. */
.cat-partners__grid .cat-partner-card--name .cat-partner-card__link {
	background-color: #fff;
	background-image: none;
	border-color: var(--bs-color-border);
}
.cat-partners__grid .cat-partner-card--name .cat-partner-card__link::before { background: none; }
.cat-partners__grid .cat-partner-card--name .cat-partner-card__link:hover {
	background-color: #fbfcfe;
	border-color: var(--bs-color-primary);
}
.cat-partners__grid .cat-partner-card--name .cat-partner-card__name {
	background: transparent;
	color: var(--bs-color-primary);
	padding: 0 var(--bs-space-sm);
	text-align: center;
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-bold);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
}

/* ---------- Home Partners Swiper specific overrides --------------------
   The swiper-slide sits in a single row, so we need the card to stretch
   to the slide's full height and the .__link to match. */
.home-partners .swiper-slide.cat-partner-card {
	height: auto;
}
.home-partners .swiper-slide.cat-partner-card .cat-partner-card__link {
	height: 100%;
	min-height: 150px;
}

/* ---------- Category "Nos partenaires" → 3-row horizontal slider --------
   Brands flow top→bottom into 3 rows, then overflow to the right → native
   horizontal scroll (swipe / drag / trackpad / scrollbar). Overrides the
   wrapping grid. */
.cat-partners__grid.cat-partners__rows {
	display: grid;
	grid-template-rows: repeat(3, 96px);   /* exactly 3 uniform rows */
	grid-auto-flow: column;
	grid-auto-columns: clamp(150px, 17vw, 200px);
	gap: var(--bs-space-sm);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: var(--bs-space-sm);
	scrollbar-width: thin;
	scrollbar-color: var(--bs-color-primary) transparent;
}
.cat-partners__rows .cat-partner-card__link { height: 100%; }
.cat-partners__rows > .cat-partner-card { scroll-snap-align: start; }
.cat-partners__rows::-webkit-scrollbar { height: 8px; }
.cat-partners__rows::-webkit-scrollbar-thumb {
	background: var(--bs-color-primary);
	border-radius: 999px;
}
@media (max-width: 600px) {
	.cat-partners__grid.cat-partners__rows { grid-auto-columns: clamp(140px, 60vw, 180px); }
}

/* ---------- Brand directory (/marques/ page) — logo + name + count card --- */
.bs-brand-index {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--bs-space-md);
}
.bs-brand-index__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--bs-color-border);
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bs-brand-index__card:hover {
	border-color: var(--bs-color-primary);
	box-shadow: 0 10px 26px rgba(16, 54, 86, .12);
}
.bs-brand-index__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	padding: var(--bs-space-md);
	border-bottom: 1px solid var(--bs-color-border);
	background: #fff;
}
.bs-brand-index__logo {
	max-width: 78%;
	max-height: 52px;
	object-fit: contain;
}
.bs-brand-index__initial {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--bs-color-bg-alt);
	color: var(--bs-color-primary);
	font-size: 24px;
	font-weight: var(--bs-weight-bold);
}
.bs-brand-index__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--bs-space-sm) var(--bs-space-md);
}
.bs-brand-index__name {
	color: var(--bs-color-primary);
	font-weight: var(--bs-weight-bold);
	font-size: var(--bs-type-body-size);
}
.bs-brand-index__count {
	color: var(--bs-color-muted);
	font-size: var(--bs-type-body-sm-size);
}

/* ---------- /marques/ page — hero + list ------------------------------- */
/* Charte band: filled Blue with the Batiself diagonals signature + a soft
   highlight, white text, centered. */
.batiself-brands-hero {
	position: relative;
	overflow: hidden;
	background: var(--bs-color-primary);
	color: #fff;
}
.batiself-brands-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 140% at 12% 0%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%),
		var(--bs-overlay-diagonals-soft);
	opacity: .9;
	pointer-events: none;
}
.batiself-brands-hero .home-container { position: relative; z-index: 1; }
.batiself-brands-hero .home-section__header { margin: 0; max-width: 760px; }
.batiself-brands-hero__eyebrow {
	display: inline-block;
	margin: 0 0 var(--bs-space-sm);
	padding: 5px 12px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .35);
	color: #fff;
	font-weight:    var(--bs-weight-bold);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
}
.batiself-brands-hero .home-section__title {
	color: #fff;
	font-size:   var(--bs-type-h1-size);
	font-weight: var(--bs-type-h1-weight);
	line-height: var(--bs-type-h1-leading);
}
.batiself-brands-hero .home-section__title strong { color: var(--bs-color-accent); }
.batiself-brands-hero .home-section__intro {
	color: rgba(255, 255, 255, .9);
	max-width: 60ch;
	font-size: var(--bs-type-body-size);
}

.batiself-brands-list { padding-top: var(--bs-space-xl); }
.batiself-brands__cta {
	margin-top: var(--bs-space-xl);
	text-align: center;
}
.batiself-brands-empty {
	color: var(--bs-color-muted);
}