/**
 * CQIP Articles front-end styles.
 *
 * Grid layout itself is inlined critically (see enqueue_assets()); this
 * file covers everything else. Font weight never drops below 400.
 */

.cqip-art-archive {
	/* Approved CQIP brand palette. Do not introduce ad-hoc colors for any
	   accent, interactive, or brand-carrying element; neutral grays for
	   borders and de-emphasized meta text are the only exception. */
	--cqip-brand-teal: #0fc5b8;
	--cqip-brand-arc: #3e517b;
	--cqip-brand-navy: #2e3b52;

	--cqip-art-border: #e2e5ea;
	--cqip-art-text: var(--cqip-brand-navy);
	--cqip-art-muted: #6b7280;
	--cqip-art-accent: var(--cqip-brand-teal);
	--cqip-art-radius: 10px;
}

.cqip-art-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.cqip-art-filters select,
.cqip-art-filter-search {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--cqip-art-border);
	border-radius: 6px;
	font-weight: 400;
}

.cqip-art-filters select:focus,
.cqip-art-filter-search:focus {
	outline: none;
	border-color: var(--cqip-art-accent);
	box-shadow: 0 0 0 2px rgba(15, 197, 184, 0.25);
}

.cqip-art-card {
	background: var(--cqip-art-card-bg, transparent);
	border: 1px solid var(--cqip-art-border);
	border-radius: var(--cqip-art-radius);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 0.5rem;
	border-top: 3px solid transparent;
	transition: border-top-color 0.15s ease;
}

.cqip-art-card:hover {
	border-top-color: var(--cqip-art-accent);
}

.cqip-art-card-link {
	order: 1;
	text-decoration: none;
	color: inherit;
}

.cqip-art-card-image {
	width: 100%;
	height: auto;
	border-radius: calc(var(--cqip-art-radius) - 4px);
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

.cqip-art-card-title {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0.5rem 0 0.25rem;
	color: var(--cqip-art-text);
}

.cqip-art-card-link:hover .cqip-art-card-title {
	color: var(--cqip-brand-arc);
}

.cqip-art-card-excerpt {
	order: 2;
	font-weight: 400;
	color: var(--cqip-art-muted);
	font-size: 0.9rem;
	margin: 0;
}

.cqip-art-card-meta {
	order: 3;
	margin-top: auto;
	display: flex;
	gap: 0.75rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--cqip-art-muted);
}

/* Cards are equal height by default (CSS Grid stretches items in a row to
   match the tallest), and the meta line sits at order 3 with margin-top:
   auto, so it always lands at the same edge of the card no matter how much
   title or excerpt text came before it. This is what pins meta (and the
   button below) to the bottom instead of drifting with content length. */

.cqip-art-card-button {
	order: 4;
	margin-top: auto;
	display: inline-block;
	text-align: center;
	background: var(--cqip-art-accent);
	color: #fff;
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none;
	padding: 0.55rem 1rem;
	border-radius: 6px;
}

.cqip-art-card-button:hover {
	background: var(--cqip-brand-arc);
	color: #fff;
}

/* Meta-position "top": the admin's per-type default, or a shortcode
   override, moves the meta line above the title/image instead of pinning
   it to the bottom. The button (if shown) always stays last regardless,
   since a trailing call-to-action is the page-builder norm either way. */
.cqip-art-archive[data-meta-position="top"] .cqip-art-card-meta {
	order: 0;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

/* Flex rows don't respond to the container's own text-align, unlike the
   plain text and inline-block elements (title, excerpt, button) around
   them, so this covers the one element that needs it explicitly. */
.cqip-art-archive[data-align="center"] .cqip-art-card-meta {
	justify-content: center;
}

.cqip-art-card--skeleton {
	animation: cqip-art-pulse 1.4s ease-in-out infinite;
}

.cqip-art-skeleton-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: calc(var(--cqip-art-radius) - 4px);
	background: var(--cqip-art-border);
}

.cqip-art-skeleton-line {
	height: 0.85rem;
	border-radius: 4px;
	background: var(--cqip-art-border);
	margin-top: 0.5rem;
}

.cqip-art-skeleton-line--title {
	width: 70%;
	height: 1.1rem;
}

@keyframes cqip-art-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

.cqip-art-empty {
	grid-column: 1 / -1;
	font-weight: 400;
	color: var(--cqip-art-muted);
}

.cqip-art-pagination {
	display: flex;
	align-items: center;
	gap: 1rem;
	justify-content: center;
	margin-top: 1.5rem;
	font-weight: 400;
}

.cqip-art-pagination button {
	border: 1px solid var(--cqip-art-border);
	background: #fff;
	color: var(--cqip-art-text);
	border-radius: 6px;
	padding: 0.4rem 0.75rem;
	cursor: pointer;
}

.cqip-art-pagination button:hover:not(:disabled) {
	border-color: var(--cqip-art-accent);
	color: var(--cqip-brand-arc);
}

.cqip-art-pagination button:disabled {
	opacity: 0.4;
	cursor: default;
}

@media (max-width: 782px) {
	.cqip-art-archive {
		--cqip-art-columns: 1;
	}
}