/*
 * Quill Quest discovery modules.
 *
 * Latest Posts keeps the freshest work easy to scan, while Most Viewed gives
 * the reader a compact signal of what other curious people are opening. The
 * base is the phone layout; wider compositions are additive min-width rungs.
 */

.qq-discovery-band {
	margin-block: var(--qq-sp-4xl);
}

.qq-discovery-band__latest,
.qq-discovery-band__popular {
	min-width: 0;
}

.qq-discovery-band__popular {
	margin-top: var(--qq-sp-2xl);
}

.qq-discovery-heading {
	border-top: var(--qq-bw-thick) solid var(--qq-c-text);
	padding-top: var(--qq-sp-sm);
}

.qq-discovery-heading h2 {
	margin-top: var(--qq-sp-2xs);
	font-family: var(--qq-c-font-serif);
	font-size: var(--qq-fs-3xl);
	font-weight: 500;
	letter-spacing: var(--qq-tracking-tight);
	line-height: var(--qq-lh-tight);
}

.qq-latest-list {
	margin-top: var(--qq-sp-lg);
	border: 1px solid var(--qq-c-border-strong);
	border-radius: var(--qq-radius-md);
	background: var(--qq-c-raised);
	box-shadow: var(--qq-c-elevation-raised);
	overflow: clip;
}

.qq-latest-item {
	box-shadow: inset 0 -1px 0 var(--qq-c-border);
}

.qq-latest-item:last-child {
	box-shadow: none;
}

.qq-latest-item__link {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	align-items: center;
	gap: var(--qq-sp-sm);
	min-height: 7rem;
	padding: var(--qq-sp-sm);
	color: var(--qq-c-text);
	text-decoration: none;
}

.qq-latest-item__link:hover {
	background: var(--qq-c-wash);
	color: var(--qq-c-text);
}

.qq-latest-item__media {
	aspect-ratio: 1.85 / 1;
	border-radius: var(--qq-radius-sm);
	background: var(--qq-c-surface);
	overflow: hidden;
}

.qq-latest-item__media .qq-post-image,
.qq-latest-item__media .qq-image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.qq-latest-item__media .qq-image-placeholder {
	min-height: 0;
	background: linear-gradient(135deg, var(--qq-c-surface), var(--qq-c-wash));
}

.qq-latest-item__copy {
	min-width: 0;
}

.qq-latest-item__copy .qq-category {
	margin-bottom: var(--qq-sp-xs);
	border-radius: var(--qq-radius-xs);
	background: var(--qq-c-brand-fill);
	padding: var(--qq-sp-3xs) var(--qq-sp-xs);
	color: var(--qq-c-text-on-brand);
	font-size: var(--qq-fs-2xs);
	letter-spacing: var(--qq-tracking-wide);
}

.qq-latest-item__copy h3 {
	font-family: var(--qq-c-font-sans);
	font-size: var(--qq-fs-base);
	font-weight: 600;
	line-height: var(--qq-lh-snug);
}

.qq-latest-item__link:hover h3 {
	color: var(--qq-c-link);
}

.qq-latest-item__copy p {
	display: none;
	margin-top: var(--qq-sp-xs);
	color: var(--qq-c-text-secondary);
	font-size: var(--qq-fs-xs);
	line-height: var(--qq-lh-normal);
}

.qq-latest-item__meta {
	display: block;
	margin-top: var(--qq-sp-xs);
	color: var(--qq-c-text-muted);
	font-size: var(--qq-fs-2xs);
}

.qq-discovery-empty {
	margin-top: var(--qq-sp-lg);
	border-top: 1px solid var(--qq-c-border-strong);
	padding-top: var(--qq-sp-md);
	color: var(--qq-c-text-muted);
}

.qq-most-viewed-panel {
	border-radius: var(--qq-radius-md);
	background: var(--qq-editorial-dark);
	padding: var(--qq-sp-lg);
	color: var(--qq-white);
	box-shadow: var(--qq-c-elevation-raised);
}

.qq-most-viewed-panel__header {
	display: grid;
	gap: var(--qq-sp-md);
	align-items: start;
}

.qq-most-viewed-panel .qq-eyebrow {
	color: var(--qq-on-dark-accent);
}

.qq-most-viewed-panel h2 {
	color: var(--qq-c-text-on-scrim);
	margin-top: var(--qq-sp-2xs);
	font-family: var(--qq-c-font-serif);
	font-size: var(--qq-fs-2xl);
	font-weight: 500;
	letter-spacing: var(--qq-tracking-tight);
	line-height: var(--qq-lh-tight);
}

.qq-most-viewed-panel__period {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--qq-sp-xs);
	align-items: end;
}

.qq-most-viewed-panel__period label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.qq-most-viewed-panel__period select,
.qq-most-viewed-panel__period button {
	min-height: var(--qq-control-min);
	font-family: var(--qq-c-font-sans);
	font-size: var(--qq-fs-xs);
}

.qq-most-viewed-panel__period select {
	min-width: 0;
	border: 1px solid var(--qq-c-border-strong);
	border-radius: var(--qq-control-radius);
	background: var(--qq-night-900);
	padding: var(--qq-sp-xs) var(--qq-sp-sm);
	color: var(--qq-white);
}

.qq-most-viewed-panel__period button {
	border: 1px solid var(--qq-c-brand-fill);
	border-radius: var(--qq-control-radius);
	background: var(--qq-c-brand-fill);
	padding: var(--qq-sp-xs) var(--qq-sp-sm);
	color: var(--qq-c-text-on-brand);
	font-weight: 600;
}

.qq-most-viewed-panel__period button:hover {
	border-color: var(--qq-c-brand-fill-hover);
	background: var(--qq-c-brand-fill-hover);
}

.qq-most-viewed-panel__note,
.qq-most-viewed-panel__empty {
	margin-top: var(--qq-sp-md);
	color: var(--qq-night-100);
	font-size: var(--qq-fs-xs);
	line-height: var(--qq-lh-normal);
}

.qq-most-viewed-list {
	margin: var(--qq-sp-md) 0 0;
	padding: 0;
	list-style: none;
}

.qq-most-viewed-item {
	border-bottom: 1px solid rgb(255 255 255 / 18%);
}

.qq-most-viewed-item:last-child {
	border-bottom: 0;
}

.qq-most-viewed-item__link {
	display: grid;
	grid-template-columns: 1.35rem 4.75rem minmax(0, 1fr);
	gap: var(--qq-sp-xs);
	align-items: center;
	min-height: 5.25rem;
	padding-block: var(--qq-sp-xs);
	color: var(--qq-white);
	text-decoration: none;
}

.qq-most-viewed-item__link:hover {
	color: var(--qq-on-dark-accent);
}

.qq-most-viewed-item__rank {
	align-self: start;
	padding-top: var(--qq-sp-xs);
	color: var(--qq-on-dark-accent);
	font-family: var(--qq-c-font-serif);
	font-size: var(--qq-fs-md);
	font-weight: 500;
	line-height: 1;
}

.qq-most-viewed-item__media {
	aspect-ratio: 1.45 / 1;
	border-radius: var(--qq-radius-xs);
	background: var(--qq-night-700);
	overflow: hidden;
}

.qq-most-viewed-item__media .qq-post-image,
.qq-most-viewed-item__media .qq-image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.qq-most-viewed-item__media .qq-image-placeholder {
	min-height: 0;
	background: linear-gradient(135deg, var(--qq-night-700), var(--qq-night-800));
}

.qq-most-viewed-item__copy {
	display: grid;
	min-width: 0;
	gap: var(--qq-sp-2xs);
}

.qq-most-viewed-item__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: var(--qq-fs-xs);
	font-weight: 600;
	line-height: var(--qq-lh-snug);
}

.qq-most-viewed-item__trend {
	font-size: 1rem;
	line-height: 1;
	width: 1.25rem;
}

@media ( min-width: 480px ) {
	.qq-latest-item__link {
		grid-template-columns: 8rem minmax(0, 1fr);
	}

	.qq-latest-item__copy p {
		display: block;
	}
}

@media ( min-width: 768px ) {
	.qq-discovery-band {
		display: grid;
		grid-template-columns: minmax(0, 1.8fr) minmax(16rem, 1fr);
		gap: var(--qq-sp-xl);
	}

	.qq-discovery-band__popular {
		margin-top: 0;
	}

	.qq-latest-item__link {
		grid-template-columns: 9rem minmax(0, 1fr);
		gap: var(--qq-sp-md);
		padding: var(--qq-sp-md);
	}

	.qq-latest-item__copy h3 {
		font-size: var(--qq-fs-md);
	}

	.qq-most-viewed-panel {
		padding: var(--qq-sp-lg) var(--qq-sp-md);
	}

	.qq-most-viewed-panel__header {
		gap: var(--qq-sp-sm);
	}
}

@media ( min-width: 1024px ) {
	.qq-discovery-band {
		grid-template-columns: minmax(0, 2.6fr) minmax(18rem, 1fr);
		gap: var(--qq-sp-2xl);
	}

	.qq-latest-item__link {
		grid-template-columns: 10rem minmax(0, 1fr);
	}

	.qq-most-viewed-panel {
		position: sticky;
		top: var(--qq-sp-xl);
	}

	.qq-most-viewed-panel--compact {
		position: static;
	}
}