/*
 * BPM Catalog — /catalog archive styles.
 *
 * Implements spec §8.1 (hero), §8.2 (filter bar), §8.3 (grid), §8.4
 * (closing CTA). Uses BPM Theme preset CSS variables published by
 * theme.json so swapping theme tokens never requires CSS edits.
 *
 * Preset slug → CSS var mapping (all wired by core block editor):
 *   --wp--preset--color--bpm-flame              #FF0A00
 *   --wp--preset--color--bpm-flame-deep         #D60900
 *   --wp--preset--color--bpm-blaze              #FF7300
 *   --wp--preset--color--bpm-bg-dark            #141414
 *   --wp--preset--color--bpm-bg-light           #F5F5F3
 *   --wp--preset--color--bpm-text               #171717
 *   --wp--preset--color--bpm-text-muted         #6F6F6F
 *   --wp--preset--color--bpm-text-on-dark       #F5F5F3
 *   --wp--preset--color--bpm-text-muted-on-dark #A8A8A8
 *   --wp--preset--font-family--montserrat
 *   --wp--preset--font-family--lora
 *
 * Hard fallbacks are inlined for safety.
 */

/* -----------------------------------------------------------------
 * Shared layout container (matches §1.7 page gutters @ 1280px).
 * ----------------------------------------------------------------- */
.bpm-catalog-archive .bpm-catalog-container,
.bpm-closing-cta .bpm-catalog-container {
	/* Matches /work §1.7 gutter ladder via theme tokens — keeps all detail and
	 * archive pages on the same horizontal grid (24/32/64). */
	width: 100%;
	max-width: var(--bpm-container, 1280px);
	margin-inline: auto;
	padding-inline: var(--bpm-gutter-mobile, 24px);
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.bpm-catalog-archive .bpm-catalog-container,
	.bpm-closing-cta .bpm-catalog-container {
		padding-inline: var(--bpm-gutter-tablet, 32px);
	}
}

@media (min-width: 1025px) {
	.bpm-catalog-archive .bpm-catalog-container,
	.bpm-closing-cta .bpm-catalog-container {
		padding-inline: var(--bpm-gutter-desktop, 64px);
	}
}

/* -----------------------------------------------------------------
 * §8.1 — Hero
 * ----------------------------------------------------------------- */
.bpm-catalog-hero {
	background: var(--wp--preset--color--bpm-bg-dark, #141414);
	color: var(--wp--preset--color--bpm-text-on-dark, #F5F5F3);
	padding: 144px 0 96px;
}

@media (max-width: 1024px) { .bpm-catalog-hero { padding: 112px 0 72px; } }
@media (max-width: 767px)  { .bpm-catalog-hero { padding: 88px 0 56px; } }

.bpm-catalog-hero .bpm-catalog-container > * {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.bpm-catalog-hero__eyebrow {
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bpm-flame, #FF0A00);
	margin: 0 0 24px;
}

.bpm-catalog-hero__h1 {
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 700;
	font-size: 96px;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--bpm-text-on-dark, #F5F5F3);
	max-width: 1080px;
	margin: 0 auto 24px;
}

@media (max-width: 1024px) { .bpm-catalog-hero__h1 { font-size: 64px; } }
@media (max-width: 767px)  { .bpm-catalog-hero__h1 { font-size: 40px; } }

.bpm-catalog-hero__accent {
	color: var(--wp--preset--color--bpm-flame, #FF0A00);
	font-style: italic;
	font-weight: 700;
}

.bpm-catalog-hero__support {
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--bpm-text-muted-on-dark, #A8A8A8);
	max-width: 720px;
	margin: 0 auto 48px;
}

@media (max-width: 1024px) {
	.bpm-catalog-hero__support { font-size: 17px; margin-bottom: 40px; }
}
@media (max-width: 767px) {
	.bpm-catalog-hero__support { font-size: 16px; margin-bottom: 32px; }
}

/* -----------------------------------------------------------------
 * §8.2 — Filter bar
 * ----------------------------------------------------------------- */
.bpm-catalog-filter-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: nowrap;
	margin: 0;
}

/* Zone 1: Search */
.bpm-catalog-filter-bar__search {
	position: relative;
	width: 280px;
	flex: 0 0 280px;
}
.bpm-catalog-filter-bar__search input[type="search"] {
	width: 100%;
	height: 44px;
	box-sizing: border-box;
	padding: 0 16px 0 44px;
	background: rgba(245, 245, 243, 0.06);
	border: 1px solid rgba(245, 245, 243, 0.32);
	border-radius: 999px;
	color: var(--wp--preset--color--bpm-text-on-dark, #F5F5F3);
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-size: 14px;
	font-weight: 400;
	outline: none;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
.bpm-catalog-filter-bar__search input::placeholder {
	color: rgba(245, 245, 243, 0.5);
}
.bpm-catalog-filter-bar__search input:focus {
	border-color: var(--wp--preset--color--bpm-flame, #FF0A00);
	box-shadow: 0 0 0 2px rgba(255, 10, 0, 0.5);
}
.bpm-catalog-filter-bar__search-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(245, 245, 243, 0.6);
	pointer-events: none;
}

/* Zone 2: Genre pills */
.bpm-catalog-filter-bar__pills {
	display: flex;
	gap: 12px;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	flex: 1 1 auto;
	justify-content: center;
	scrollbar-width: none;
}
.bpm-catalog-filter-bar__pills::-webkit-scrollbar { display: none; }

.bpm-catalog-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 20px;
	border: 1px solid rgba(245, 245, 243, 0.32);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--bpm-text-on-dark, #F5F5F3);
	text-decoration: none;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
	white-space: nowrap;
	flex-shrink: 0;
}
.bpm-catalog-pill:hover {
	background: rgba(255, 10, 0, 0.12);
	border-color: var(--wp--preset--color--bpm-flame, #FF0A00);
	color: var(--wp--preset--color--bpm-text-on-dark, #F5F5F3);
}
.bpm-catalog-pill.is-active {
	background: var(--wp--preset--color--bpm-flame, #FF0A00);
	border-color: var(--wp--preset--color--bpm-flame, #FF0A00);
	color: #FFFFFF;
}
.bpm-catalog-pill:focus-visible {
	outline: 2px solid var(--wp--preset--color--bpm-flame, #FF0A00);
	outline-offset: 2px;
}

/* Zone 3: Dropdowns (v1.4.2 — now includes Genre as 4th dropdown).
   flex-wrap added so a 4th element doesn't blow out narrow viewports. */
.bpm-catalog-filter-bar__dropdowns {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.bpm-catalog-dropdown {
	position: relative;
}
.bpm-catalog-dropdown__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 20px;
	background: transparent;
	border: 1px solid rgba(245, 245, 243, 0.32);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--bpm-text-on-dark, #F5F5F3);
	cursor: pointer;
	transition: border-color 200ms ease, background 200ms ease;
}
.bpm-catalog-dropdown.is-active .bpm-catalog-dropdown__trigger {
	background: rgba(255, 10, 0, 0.12);
	border-color: var(--wp--preset--color--bpm-flame, #FF0A00);
	color: var(--wp--preset--color--bpm-flame, #FF0A00);
}
.bpm-catalog-dropdown__chevron {
	transition: transform 200ms ease;
	color: currentColor;
}
.bpm-catalog-dropdown[aria-expanded="true"] .bpm-catalog-dropdown__chevron,
.bpm-catalog-dropdown.is-open .bpm-catalog-dropdown__chevron {
	transform: rotate(180deg);
}

.bpm-catalog-dropdown__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 100%;
	max-width: 280px;
	background: #1A1A1A;
	border: 1px solid rgba(245, 245, 243, 0.16);
	border-radius: 12px;
	padding: 8px 0;
	margin: 0;
	list-style: none;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	z-index: 100;
	display: none;
}
.bpm-catalog-dropdown.is-open .bpm-catalog-dropdown__panel {
	display: block;
}

.bpm-catalog-dropdown__option {
	padding: 12px 16px;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--bpm-text-on-dark, #F5F5F3);
	cursor: pointer;
	letter-spacing: 0;
	text-transform: none;
}
.bpm-catalog-dropdown__option:hover {
	background: rgba(255, 255, 255, 0.06);
}
.bpm-catalog-dropdown__option.is-selected {
	color: var(--wp--preset--color--bpm-flame, #FF0A00);
}
.bpm-catalog-dropdown__option.is-selected::before {
	content: "✓ ";
}
.bpm-catalog-dropdown__option--any {
	border-bottom: 1px solid rgba(245, 245, 243, 0.10);
}

/* Meta row */
.bpm-catalog-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 24px;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-size: 14px;
	color: var(--wp--preset--color--bpm-text-muted-on-dark, #A8A8A8);
}
.bpm-catalog-meta-row__count { margin: 0; }
.bpm-catalog-meta-row__right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bpm-catalog-sort__select {
	height: 32px;
	padding: 0 12px;
	background: transparent;
	border: 1px solid rgba(245, 245, 243, 0.32);
	border-radius: 999px;
	font-family: inherit;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.10em;
	color: var(--wp--preset--color--bpm-text-on-dark, #F5F5F3);
	cursor: pointer;
}
.bpm-catalog-sort__select option { color: #141414; background: #FFFFFF; }

.bpm-catalog-clear-all {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
	transition: color 200ms ease, border-color 200ms ease;
}
.bpm-catalog-clear-all:hover {
	color: var(--wp--preset--color--bpm-flame, #FF0A00);
	border-bottom-color: currentColor;
}

.bpm-catalog-freshness {
	text-align: center;
	margin: 16px 0 0;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-style: italic;
	font-size: 13px;
	color: rgba(168, 168, 168, 0.7);
}

/* -----------------------------------------------------------------
 * Mobile filter bar (<768px)
 * ----------------------------------------------------------------- */
@media (max-width: 767px) {
	.bpm-catalog-filter-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.bpm-catalog-filter-bar__search {
		width: 100%;
		flex-basis: auto;
	}
	.bpm-catalog-filter-bar__pills {
		justify-content: flex-start;
	}
	.bpm-catalog-filter-bar__dropdowns {
		flex-wrap: wrap;
		gap: 8px;
	}
	.bpm-catalog-meta-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.bpm-catalog-meta-row__right {
		width: 100%;
		justify-content: space-between;
	}
}

/* -----------------------------------------------------------------
 * §8.3 — Grid
 * ----------------------------------------------------------------- */
.bpm-catalog-grid-section {
	background: var(--wp--preset--color--bpm-bg-light, #F5F5F3);
	color: var(--wp--preset--color--bpm-text, #171717);
	padding: 96px 0;
}
@media (max-width: 1024px) { .bpm-catalog-grid-section { padding: 80px 0; } }
@media (max-width: 767px)  { .bpm-catalog-grid-section { padding: 64px 0; } }

.bpm-catalog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 32px;
}
@media (max-width: 1024px) {
	.bpm-catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
}
@media (max-width: 767px) {
	.bpm-catalog-grid { grid-template-columns: 1fr; gap: 32px; }
}

.bpm-catalog-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid rgba(20, 20, 20, 0.08);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.bpm-catalog-card:hover {
	border-color: var(--wp--preset--color--bpm-flame, #FF0A00);
	box-shadow: 0 0 24px rgba(255, 10, 0, 0.20);
	transform: translateY(-4px);
}
.bpm-catalog-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--bpm-flame, #FF0A00);
	outline-offset: 2px;
}

.bpm-catalog-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: rgba(20, 20, 20, 0.04);
	overflow: hidden;
}
.bpm-catalog-card__img,
.bpm-catalog-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease-out;
}
.bpm-catalog-card:hover .bpm-catalog-card__img,
.bpm-catalog-card:hover .bpm-catalog-card__image img {
	transform: scale(1.03);
}

.bpm-catalog-card__image-fallback {
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--bpm-blaze, #FF7300);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bpm-catalog-card__image-fallback img {
	width: 40%;
	height: auto;
}

.bpm-catalog-card__text {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bpm-catalog-card__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bpm-flame, #FF0A00);
}
.bpm-catalog-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: var(--wp--preset--color--bpm-text, #141414);
}
.bpm-catalog-card__support {
	margin: 0;
	font-family: var(--wp--preset--font-family--lora, "Lora", serif);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--bpm-text-muted, #6F6F6F);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Tertiary CTA on card — always-visible Flame per Spec §1.8 + §4.3 amendment
 * (v1.2.7 line 10): no opacity gating, no hover-reveal. Arrow nudges +4px
 * on card hover only (pointer devices). Label stays at full Flame at rest. */
.bpm-catalog-card__cta {
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bpm-flame, #FF0A00);
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}
.bpm-catalog-card__cta-arrow {
	display: inline-block;
	transition: transform 200ms ease-out;
}
@media (hover: hover) {
	.bpm-catalog-card:hover .bpm-catalog-card__cta-arrow {
		transform: translateX(4px);
	}
}
@media (max-width: 767px) {
	.bpm-catalog-card__cta { margin-top: 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bpm-catalog-card,
	.bpm-catalog-card__img,
	.bpm-catalog-card__image img,
	.bpm-catalog-card__cta,
	.bpm-catalog-card__cta-arrow {
		transition: none !important;
		transform: none !important;
	}
}

/* Load more / end of list */
.bpm-catalog-loadmore {
	margin-top: 64px;
	text-align: center;
}
.bpm-catalog-loadmore .bpm-button.is-loading {
	opacity: 0.6;
	cursor: progress;
	pointer-events: none;
}
.bpm-catalog-endlist {
	margin-top: 64px;
	text-align: center;
	font-family: var(--wp--preset--font-family--lora, "Lora", serif);
	font-style: italic;
	font-size: 16px;
	color: var(--wp--preset--color--bpm-text-muted, #6F6F6F);
}

/* Buttons (per §1.8) — keep self-contained for portability */
.bpm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 24px;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 999px;
	border: 2px solid var(--wp--preset--color--bpm-flame, #FF0A00);
	transition: background 200ms ease, color 200ms ease, transform 200ms ease;
	cursor: pointer;
}
.bpm-button--primary {
	background: var(--wp--preset--color--bpm-flame, #FF0A00);
	color: #FFFFFF;
}
.bpm-button--primary:hover {
	background: var(--wp--preset--color--bpm-flame-deep, #D60900);
	border-color: var(--wp--preset--color--bpm-flame-deep, #D60900);
	transform: translateY(-1px);
}
.bpm-button--secondary {
	background: transparent;
	color: var(--wp--preset--color--bpm-flame, #FF0A00);
}
.bpm-button--secondary:hover {
	background: rgba(255, 10, 0, 0.08);
}

/* Empty state */
.bpm-catalog-empty {
	background: var(--wp--preset--color--bpm-blaze, #FF7300);
	color: #FFFFFF;
	border-radius: 12px;
	padding: 64px 32px;
	text-align: center;
}
.bpm-catalog-empty__mark { width: 80px; height: 80px; margin: 0 auto 24px; display: block; }
.bpm-catalog-empty__title {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.2;
}
.bpm-catalog-empty__support {
	margin: 0 0 24px;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-size: 16px;
	line-height: 1.5;
}
.bpm-catalog-empty__cta {
	display: inline-block;
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	padding: 12px 24px;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-decoration: none;
	transition: background 200ms ease;
}
.bpm-catalog-empty__cta:hover { background: rgba(255, 255, 255, 0.22); }

/* -----------------------------------------------------------------
 * §8.4 — Closing CTA
 * ----------------------------------------------------------------- */
.bpm-closing-cta {
	background: var(--wp--preset--color--bpm-bg-dark, #141414);
	color: var(--wp--preset--color--bpm-text-on-dark, #F5F5F3);
	padding: 144px 0;
	text-align: center;
}
@media (max-width: 1024px) { .bpm-closing-cta { padding: 112px 0; } }
@media (max-width: 767px)  { .bpm-closing-cta { padding: 88px 0; } }

.bpm-closing-cta__eyebrow {
	margin: 0 0 24px;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bpm-flame, #FF0A00);
}
.bpm-closing-cta__h2 {
	margin: 0 0 24px;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 700;
	font-size: 96px;
	line-height: 1.05;
	color: var(--wp--preset--color--bpm-text-on-dark, #F5F5F3);
}
@media (max-width: 1024px) { .bpm-closing-cta__h2 { font-size: 64px; } }
@media (max-width: 767px)  { .bpm-closing-cta__h2 { font-size: 40px; } }

.bpm-closing-cta__body {
	max-width: 720px;
	margin: 0 auto 40px;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--bpm-text-muted-on-dark, #A8A8A8);
}
@media (max-width: 1024px) { .bpm-closing-cta__body { font-size: 17px; } }
@media (max-width: 767px)  { .bpm-closing-cta__body { font-size: 16px; } }

.bpm-closing-cta__button-wrap { margin: 0; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px,1px,1px,1px);
	width: 1px; height: 1px;
	overflow: hidden;
}