/* ============================================================
   flair/term-showcase: the terms of a product taxonomy as photos.

   Grid or carousel, in three looks: tiles that touch each other (tiles-flush),
   tiles with a gap and rounded corners (tiles), and cards with the name beneath.
   Uses only this plugin's Brand Kit properties. Sizes are in rem, and the ones
   that should follow the screen use clamp().
   ============================================================ */
.flair-termshow{
	--flair-termshow-cols:3;
	--flair-termshow-gap:0;
	--flair-termshow-radius:0;
	font-family:var(--flair-companion-font-body);
}
.flair-termshow--cols-1{--flair-termshow-cols:1}
.flair-termshow--cols-2{--flair-termshow-cols:2}
.flair-termshow--cols-3{--flair-termshow-cols:3}
.flair-termshow--cols-4{--flair-termshow-cols:4}
.flair-termshow--cols-5{--flair-termshow-cols:5}
.flair-termshow--cols-6{--flair-termshow-cols:6}
.flair-termshow--tiles,
.flair-termshow--cards{
	--flair-termshow-gap:var(--flair-companion-space-sm);
	--flair-termshow-radius:var(--flair-companion-radius-card,1rem);
}
.flair-termshow__list{margin:0;padding:0;list-style:none}
.flair-termshow .flair-termshow__item{margin:0;min-width:0;width:auto}
.flair-termshow__link{display:block;position:relative;color:inherit;text-decoration:none}

/* ---- Grid ---- */
.flair-termshow--grid .flair-termshow__list{
	display:grid;
	grid-template-columns:repeat(var(--flair-termshow-cols),minmax(0,1fr));
	gap:var(--flair-termshow-gap);
}

/* ---- Carousel ---- */
.flair-termshow__wrap{position:relative}
.flair-termshow--carousel .flair-termshow__list{
	display:flex;gap:var(--flair-termshow-gap);
	overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
}
.flair-termshow--carousel .flair-termshow__list::-webkit-scrollbar{display:none}
.flair-termshow--carousel .flair-termshow__item{
	flex:0 0 calc((100% - (var(--flair-termshow-cols) - 1) * var(--flair-termshow-gap)) / var(--flair-termshow-cols));
	scroll-snap-align:start;
}
.flair-termshow__arrow{
	position:absolute;top:50%;z-index:2;transform:translateY(-50%);
	display:flex;align-items:center;justify-content:center;
	width:2.5rem;height:2.5rem;padding:0;
	border:0;border-radius:50%;
	background:var(--flair-companion-color-background);color:var(--flair-companion-color-foreground);
	box-shadow:var(--flair-companion-shadow-md);
	font-size:1.5rem;line-height:1;cursor:pointer;
}
.flair-termshow__arrow.flair-product-carousel-prev{left:var(--flair-companion-space-xs)}
.flair-termshow__arrow.flair-product-carousel-next{right:var(--flair-companion-space-xs)}
.flair-termshow__arrow:disabled{opacity:0;pointer-events:none}
.flair-termshow__arrow:focus-visible{outline:0.125rem solid var(--flair-companion-color-primary);outline-offset:0.125rem}

/* ---- The photo ---- */
.flair-termshow__media{
	display:block;overflow:hidden;
	border-radius:var(--flair-termshow-radius);
	background:var(--flair-companion-color-background-alt);
}
.flair-termshow__media.is-empty{aspect-ratio:4/5}
.flair-termshow__img{display:block;width:100%;height:100%;object-fit:cover}
.flair-termshow--tiles-flush .flair-termshow__media,
.flair-termshow--tiles .flair-termshow__media{min-height:clamp(18rem,12rem + 20vw,30rem)}
.flair-termshow--tiles-flush .flair-termshow__img,
.flair-termshow--tiles .flair-termshow__img{position:absolute;inset:0}
.flair-termshow--tiles-flush .flair-termshow__media,
.flair-termshow--tiles .flair-termshow__media{position:relative}
.flair-termshow--cards .flair-termshow__img{aspect-ratio:4/5;height:auto}

/* ---- The label ---- */
.flair-termshow__pill{
	position:absolute;left:50%;bottom:var(--flair-companion-space-md);transform:translateX(-50%);
	max-width:calc(100% - 2 * var(--flair-companion-space-sm));
	padding:0.5rem clamp(1.125rem,1rem + 0.5vw,1.5rem);
	border-radius:var(--flair-companion-radius-button,62.4375rem);
	background:var(--flair-companion-color-background);color:var(--flair-companion-color-secondary);
	box-shadow:var(--flair-companion-shadow-sm);
	font-family:var(--flair-companion-font-headings);font-weight:700;
	font-size:0.9375rem;line-height:1.2;text-align:center;
	transition:var(--flair-companion-motion-fast) var(--flair-companion-motion-ease);
}
.flair-termshow__link:hover .flair-termshow__pill,
.flair-termshow__link:focus-visible .flair-termshow__pill{box-shadow:var(--flair-companion-shadow-md);transform:translateX(-50%) translateY(-0.125rem)}
.flair-termshow__caption{
	display:block;margin-top:var(--flair-companion-space-xs);
	font-family:var(--flair-companion-font-headings);font-weight:700;
	font-size:var(--flair-companion-font-size-body);line-height:1.3;
}
.flair-termshow__link:hover .flair-termshow__caption{text-decoration:underline}
.flair-termshow__count{font-family:var(--flair-companion-font-body);font-weight:400;color:var(--flair-companion-color-muted)}
.flair-termshow__link:focus-visible{outline:0.125rem solid var(--flair-companion-color-primary);outline-offset:0.125rem}

@media (max-width:48em){
	.flair-termshow--grid{--flair-termshow-cols:2}
	.flair-termshow--carousel{--flair-termshow-cols:2}
}
@media (max-width:30em){
	.flair-termshow--grid{--flair-termshow-cols:1}
	.flair-termshow--carousel{--flair-termshow-cols:1}
}

/* Photos follow the style of the theme (for example grayscale, color again on hover). */
.flair-termshow__img{filter:var(--flair-companion-image-filter,none);transition:filter .45s ease}
.flair-termshow__link:hover .flair-termshow__img{filter:var(--flair-companion-image-filter-hover,var(--flair-companion-image-filter,none))}