/* ============================================================
   PQA Spectacular Archive — carousel
   Cards use .card.pqa-project-card from style.css (same as PQA Projects);
   this file only adds the carousel layout and a few card overrides.
   Prototype: prototype/spectacular-offseason.html, css/style.css
   ============================================================ */

.pqa-spec-archive-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.pqa-spec-archive-header .section-title {
	margin-bottom: 0;
}

.pqa-spec-archive-intro {
	margin: 0.75rem 0 0;
	text-align: left;
}

.pqa-spec-archive-nav {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}

.pqa-spec-archive-nav[hidden] {
	display: none;
}

/* "Below cards" option: arrows centered under the track */
.pqa-spec-archive-nav--bottom {
	justify-content: center;
	margin-top: 1.5rem;
}

.pqa-spec-archive-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--pqa-navy);
	background-color: var(--pqa-white);
	color: var(--pqa-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), opacity var(--transition);
}

.pqa-spec-archive-btn:hover:not(:disabled) {
	background-color: var(--pqa-navy);
	color: var(--pqa-white);
}

.pqa-spec-archive-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.pqa-spec-archive-btn:focus-visible,
.pqa-spec-archive-track:focus-visible {
	outline: 3px solid var(--pqa-accent-blue);
	outline-offset: 2px;
}

.pqa-spec-archive-track {
	--pqa-carousel-gap: var(--space-md, 2rem);
	--pqa-carousel-visible: 3;
	display: flex;
	gap: var(--pqa-carousel-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	list-style: none;
	padding: 0.5rem 0.25rem 1.5rem; /* room for the card hover lift + shadow */
	margin: -0.5rem -0.25rem 0;
}

.pqa-spec-archive-track::-webkit-scrollbar {
	display: none;
}

.pqa-spec-archive-slide {
	flex: 0 0 calc((100% - (var(--pqa-carousel-visible) - 1) * var(--pqa-carousel-gap)) / var(--pqa-carousel-visible));
	scroll-snap-align: start;
	display: flex;
	margin: 0;
}

.pqa-spec-archive-slide::before {
	content: none; /* guard against theme list bullets */
}

/* Card overrides — equal heights across the row */
.pqa-spec-archive-card {
	width: 100%;
}

.pqa-spec-archive-card .card-img,
.pqa-spec-archive-card .card-img-placeholder {
	height: 220px;
	flex-shrink: 0;
}

.pqa-spec-archive-card .card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* The Projects card fades the last 1.25rem of .card-text (overflow mask).
   Pad it so short summaries never sit inside the fade. */
.pqa-spec-archive-card .card-text {
	padding-bottom: 1.25rem;
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

/* "Showing 1–3 of 6" — announced to screen readers when the carousel
   scrolls, but not shown on screen. */
.pqa-spec-archive-status {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 1024px) {
	.pqa-spec-archive-track { --pqa-carousel-visible: 2; }
}

@media (max-width: 640px) {
	.pqa-spec-archive-track { --pqa-carousel-visible: 1.15; --pqa-carousel-gap: var(--space-sm, 1rem); }
	.pqa-spec-archive-header { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.pqa-spec-archive-track { scroll-behavior: auto; }
}

/* Editor preview: no JS runs, so show the arrows only when there are
   more cards than fit (render.php adds .has-overflow for 4+ cards). */
.editor-styles-wrapper .pqa-spec-archive.has-overflow .pqa-spec-archive-nav[hidden] {
	display: flex;
}