/**
 * JSD Section
 *
 * The shared chrome every JSD content section sits inside: full-bleed white
 * ground, 1280px inner measure, an editorial header with a hairline rule, and
 * a restrained empty state.
 *
 * Neutral by design — a section is a section, whether it holds deal cards,
 * category tiles, store tiles or anything added later. Nothing in here knows
 * what it wraps.
 */

/*
 * Top padding is deliberately lighter than the bottom. The section that
 * precedes the first one on the homepage (the JSD-06 hero) already carries
 * generous bottom padding, and stacking two full measures leaves the heading
 * floating.
 */
.jsd-section {
	padding: 40px 24px 96px;
	background: #ffffff;
}

.jsd-section__inner {
	max-width: 1280px;
	margin: 0 auto;
}

/* Header ----------------------------------------------------------------- */

.jsd-section .jsd-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 32px;
	margin: 0 0 32px;
	padding-bottom: 18px;
	border-bottom: 1px solid #e5e5e5;
}

.jsd-section .jsd-section__title {
	margin: 0;
	color: #000000;
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.jsd-section .jsd-section__subtitle {
	margin: 0;
	color: #767676;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* Muted tone ------------------------------------------------------------- */

.jsd-section--muted {
	background: #fafafa;
}

/* Dark tone -------------------------------------------------------------- */

.jsd-section--dark {
	background: #000000;
}

.jsd-section--dark .jsd-section__title {
	color: #ffffff;
}

.jsd-section--dark .jsd-section__subtitle {
	color: #a8a8a8;
}

.jsd-section--dark .jsd-section__header {
	border-bottom-color: #333333;
}

.jsd-section--dark .jsd-section__empty {
	border-color: #333333;
	color: #a8a8a8;
}

/* Empty state ------------------------------------------------------------ */

.jsd-section .jsd-section__empty {
	margin: 0;
	padding: 40px 24px;
	border: 1px dashed #e5e5e5;
	border-radius: 2px;
	color: #767676;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	text-align: center;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1024px) {
	.jsd-section {
		padding: 32px 24px 72px;
	}

	.jsd-section .jsd-section__header {
		margin-bottom: 26px;
	}
}

@media (max-width: 640px) {
	.jsd-section {
		padding: 28px 20px 56px;
	}

	.jsd-section .jsd-section__header {
		margin-bottom: 22px;
		padding-bottom: 14px;
	}

	.jsd-section .jsd-section__subtitle {
		font-size: 0.875rem;
	}
}