/**
 * Costume Groups archive and single-page styles.
 *
 * Reuses the shared Reviews archive primitives already present in the
 * costume-group markup, while adding costume-group-specific content,
 * card and single-page presentation.
 *
 * @package    Jedi_Theme
 * @subpackage Costume_Groups
 * @since      1.0.0
 */


/* ==========================================================================
   Archive: shell
   ========================================================================== */

body.jr-dark-commerce.post-type-archive-costume-groups
	.entry-header.title {
	margin: 0;
	padding: 0;
}


body.jr-dark-commerce.post-type-archive-costume-groups
	.entry-header.title::after {
	display: none;

	content: none;
}


/* ==========================================================================
   Archive: supporting copy
   ========================================================================== */

body.jr-dark-commerce
	.archive-costume-groups
	.before-heading-description {

	margin:
		0
		0
		2.5rem
}


body.jr-dark-commerce
	.archive-costume-groups
	.after-heading-description {
	margin:
		0
		0
		1.5rem;
}


body.jr-dark-commerce
	.archive-costume-groups
	.before-heading-description
	p,
body.jr-dark-commerce
	.archive-costume-groups
	.after-heading-description
	p {
	margin: 0;
	color: inherit;
}


body.jr-dark-commerce
	.archive-costume-groups
	.before-heading-description
	a,
body.jr-dark-commerce
	.archive-costume-groups
	.after-heading-description
	a {
	color: var(--jr-green-light);

	font-weight: 700;
	text-decoration-color: rgba(69, 217, 107, 0.5);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}


/* ==========================================================================
   Archive: section heading
   ========================================================================== */

body.jr-dark-commerce
	.archive-costume-groups
	.costume-group-taxonomy-sub-heading {
	margin-top: 0;
	padding: 0;
}


/**
 * Costume Groups archive grid.
 *
 * Matches the Reviews archive responsive column system while preserving
 * the costume-group-specific logo card presentation.
 *
 * Desktop: 4 columns
 * Small desktop: 3 columns
 * Tablet: 2 columns
 * Mobile: 1 column
 *
 * @package    Jedi_Theme
 * @subpackage Costume_Groups
 */

/* ==========================================================================
   Archive: grid
   ========================================================================== */

body.jr-dark-commerce.post-type-archive-costume-groups
	.archive-costume-groups
	.site-main.grid.grid-3 {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 1.125rem;

	align-items: stretch;

	padding-top: 0.5rem;
}


/* ==========================================================================
   Small desktop
   ========================================================================== */

@media (max-width: 1200px) {

	body.jr-dark-commerce.post-type-archive-costume-groups
		.archive-costume-groups
		.site-main.grid.grid-3 {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {

	body.jr-dark-commerce.post-type-archive-costume-groups
		.archive-costume-groups
		.site-main.grid.grid-3 {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 1rem;
	}
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 640px) {

	body.jr-dark-commerce.post-type-archive-costume-groups
		.archive-costume-groups
		.site-main.grid.grid-3 {
		grid-template-columns:
			minmax(0, 1fr);
	}
}


/* ==========================================================================
   Archive: costume-group cards
   ========================================================================== */

body.jr-dark-commerce
	.archive-costume-groups
	article.type-costume-groups {
	position: relative;
	overflow: hidden;

	display: flex;

	min-width: 0;
	height: 100%;

	flex-direction: column;

	margin: 0;
	padding: 0;

	border: 1px solid rgba(152, 169, 192, 0.2);
	border-radius: 0.25rem;

	background:
		rgba(8, 14, 22, 0.5);

	box-shadow:
		0 0.85rem 1.8rem rgba(0, 0, 0, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);

	transition:
		border-color 180ms ease,
		box-shadow 180ms ease,
		transform 180ms ease;
}


body.jr-dark-commerce
	.archive-costume-groups
	article.type-costume-groups::before,
body.jr-dark-commerce
	.archive-costume-groups
	article.type-costume-groups::after {
	display: none;

	content: none;
}


/* ==========================================================================
   Archive: logo stage
   ========================================================================== */

body.jr-dark-commerce
	.archive-costume-groups
	article.type-costume-groups
	a.post-thumbnail {
	position: relative;
	overflow: hidden;

	display: flex;

	width: 100%;

	aspect-ratio: 4 / 3;

	align-items: center;
	justify-content: center;

	margin: 0;
	padding:
		clamp(1rem, 2vw, 1.4rem);

	border-bottom: 1px solid rgba(152, 169, 192, 0.16);

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.035),
			transparent 55%
		),
		rgba(3, 8, 13, 0.9);

	text-decoration: none;
}


/*
 * Logos use many different source aspect ratios. Keep each source intact
 * rather than cropping it as if it were editorial photography.
 */
body.jr-dark-commerce
	.archive-costume-groups
	article.type-costume-groups
	a.post-thumbnail
	img.wp-post-image {
	display: block;

	width: 100%;
	height: 100%;
	max-width: 88%;
	max-height: 88%;

	margin: 0;

	object-fit: contain;
	object-position: center;

	transition:
		filter 220ms ease,
		transform 220ms ease;
}


/* ==========================================================================
   Archive: card content
   ========================================================================== */

body.jr-dark-commerce
	.archive-costume-groups
	article.type-costume-groups
	.blog-loop-content-wrapper {
	display: flex;

	flex:
		1
		1
		auto;

	align-items: flex-start;

	min-height: 5.25rem;

	padding:
		1.05rem
		1.15rem
		1.2rem;
}


body.jr-dark-commerce
	.archive-costume-groups
	article.type-costume-groups
	.entry-header {
	width: 100%;

	margin: 0;
	padding: 0;
}


body.jr-dark-commerce.post-type-archive-costume-groups
	article.type-costume-groups
	.entry-header::after {
	display: none;

	content: none;
}


body.jr-dark-commerce
	.archive-costume-groups
	article.type-costume-groups
	.entry-title {
	max-width: 100%;

	margin: 0;

	font-size:
		clamp(
			1rem,
			0.96rem + 0.2vw,
			1.15rem
		);

	font-weight: 680;
	letter-spacing: -0.015em;
	line-height: 1.4;

	text-align: left;
}


body.jr-dark-commerce
	.archive-costume-groups
	article.type-costume-groups
	.entry-title::after {
	display: none;

	content: none;
}


body.jr-dark-commerce
	.archive-costume-groups
	article.type-costume-groups
	.entry-title
	a {
	color: var(--jr-text);

	text-decoration: none;

	transition:
		color 160ms ease;
}


body.jr-dark-commerce
	.archive-costume-groups
	article.type-costume-groups
	a:focus-visible {
	outline: 2px solid var(--jr-green-light);
	outline-offset: 3px;
}


/* ==========================================================================
   Archive: card hover
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups:hover {
		border-color: rgba(152, 169, 192, 0.38);

		box-shadow:
			0 1.1rem 2.2rem rgba(0, 0, 0, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.035);

		transform: translateY(-2px);
	}


	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups:hover
		a.post-thumbnail
		img.wp-post-image {
		filter: brightness(1.04);

		transform: scale(1.025);
	}


	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups:hover
		.entry-title
		a {
		color: #fff;
	}
}


/* ==========================================================================
   Single costume group: safe foundation
   ========================================================================== */

/*
 * Keep the single page isolated from archive card rules.
 * More detailed single-profile styling can be added once its exact markup
 * is confirmed.
 */
body.jr-dark-commerce.single-costume-groups
	article.type-costume-groups
	> .entry-header {
	margin:
		0
		0
		2rem;

	padding: 0;

	text-align: left;
}


body.jr-dark-commerce.single-costume-groups
	article.type-costume-groups
	h1.entry-title {
	position: relative;

	max-width: 19ch;

	margin: 0;

	color: var(--jr-text);

	font-weight: 780;
	line-height: 0.98;

	text-wrap: balance;
}


/*
 * Font size intentionally inherits the global site H1 setting.
 */
body.jr-dark-commerce.single-costume-groups
	article.type-costume-groups
	h1.entry-title::after {
	display: block;

	width: clamp(5rem, 12vw, 9rem);
	height: 2px;

	margin-top: 1.5rem;

	background:
		linear-gradient(
			90deg,
			var(--jr-green-light),
			transparent
		);

	box-shadow:
		0 0 1.1rem rgba(45, 166, 83, 0.28);

	content: "";
}


body.jr-dark-commerce.single-costume-groups
	article.type-costume-groups
	> .entry-content {
	color: var(--jr-text);

	font-size:
		clamp(
			1rem,
			0.96rem + 0.12vw,
			1.08rem
		);

	line-height: 1.8;
}


body.jr-dark-commerce.single-costume-groups
	article.type-costume-groups
	> .entry-content
	img {
	display: block;

	max-width: 100%;
	height: auto;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 640px) {

	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups
		a.post-thumbnail {
		aspect-ratio: 16 / 10;

		padding:
			1rem
			1.25rem;
	}


	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups
		.blog-loop-content-wrapper {
		min-height: 0;
	}


	body.jr-dark-commerce
		.archive-costume-groups
		.before-heading-description,
	body.jr-dark-commerce
		.archive-costume-groups
		.after-heading-description {
		font-size: 0.94rem;
	}
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups,
	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups
		a.post-thumbnail
		img.wp-post-image {
		transition: none;
	}


	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups:hover,
	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups:hover
		a.post-thumbnail
		img.wp-post-image {
		transform: none;
	}
}



/* ==========================================================================
   Single costume group: original behaviour
   ========================================================================== */

/**
 * Preserve the original single costume-group behaviour.
 *
 * The single template uses a div.type-costume-groups wrapper, while archive
 * cards use article.type-costume-groups. These rules therefore preserve the
 * original single-page image/date visibility without changing archive cards.
 *
 * @package    Jedi_Theme
 * @subpackage Costume_Groups
 */

div.type-costume-groups .wp-post-image,
div.type-costume-groups time.entry-date.published,
div.type-costume-groups time.updated {
	display: none;
}

body.jr-dark-commerce div.type-costume-groups h2 {
	color: var(--jr-text);
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 640px) {

	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups
		a.post-thumbnail {
		aspect-ratio: 16 / 10;

		padding:
			1rem
			1.25rem;
	}


	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups
		.blog-loop-content-wrapper {
		min-height: 0;
	}


	body.jr-dark-commerce
		.archive-costume-groups
		.before-heading-description,
	body.jr-dark-commerce
		.archive-costume-groups
		.after-heading-description {
		font-size: 0.94rem;
	}
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups,
	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups
		a.post-thumbnail
		img.wp-post-image {
		transition: none;
	}


	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups:hover,
	body.jr-dark-commerce
		.archive-costume-groups
		article.type-costume-groups:hover
		a.post-thumbnail
		img.wp-post-image {
		transform: none;
	}
}