/*
 * Homepage Resource Bundles
 *
 * Card width is a fixed 500px (assets/js not involved in sizing —
 * pure CSS), with a 16px gap between cards, matching the Figma
 * reference exactly. This intentionally does NOT divide the container
 * into exactly 3 equal columns: the Figma itself shows a partial
 * "peek" of the next card rather than 3 full cards, signalling more
 * bundles are available to scroll to — see .qehs-resource-bundles__slide
 * below for the full rationale. Badge/check/button colors confirmed
 * via pixel sampling to be existing tokens — no new colors introduced.
 */

.qehs-resource-bundles {
	padding-block: var(--qehs-space-2xl);
	background-color: var(--qehs-background);
}

.qehs-resource-bundles__header {
	margin-bottom: var(--qehs-space-xl);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--qehs-space-md);
	flex-wrap: wrap;
}

.qehs-resource-bundles__heading-group {
	display: flex;
	align-items: baseline;
	gap: var(--qehs-space-md);
	flex-wrap: wrap;
}

.qehs-resource-bundles__title {
	margin: 0;
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--qehs-text);
}

.qehs-resource-bundles__subtitle {
	margin: 0;
	font-size: 1.1rem;
	color: var(--qehs-text-muted);
}

/* --- Arrow controls --- */

.qehs-resource-bundles__controls {
	display: flex;
	gap: var(--qehs-space-sm);
	flex-shrink: 0;
}

.qehs-resource-bundles__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--qehs-border);
	border-radius: 999px;
	background-color: var(--qehs-background);
	color: var(--qehs-primary);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.qehs-resource-bundles__arrow:hover:not(:disabled),
.qehs-resource-bundles__arrow:focus-visible {
	border-color: var(--qehs-secondary);
	color: var(--qehs-secondary);
}

.qehs-resource-bundles__arrow:focus-visible {
	outline: 2px solid var(--qehs-secondary);
	outline-offset: 2px;
}

.qehs-resource-bundles__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* --- Slider --- */

.qehs-resource-bundles__slider {
	/* Only this element scrolls horizontally — the page itself never
	   does. Stays within .qehs-container, so it never exceeds the
	   96px-inset content width used across the rest of the homepage. */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Native scrollbar hidden since the arrow buttons + drag/swipe are
	   the primary controls; scrolling itself is still fully functional
	   via trackpad, mouse wheel (shift), and touch. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.qehs-resource-bundles__slider::-webkit-scrollbar {
	display: none;
}

.qehs-resource-bundles__track {
	display: flex;
	gap: 16px;
}

.qehs-resource-bundles__slide {
	scroll-snap-align: start;
	/* Card dimensions themselves are untouched (bundle-card.php /
	   .qehs-bundle-card rules below) — this only sets how much of the
	   slider viewport each slide claims.

	   Fixed width (500px), measured and iteratively refined directly
	   against the Figma reference at 1440px (the initial 432px
	   estimate left the "ISO 9001 Toolkit" title wrapping to two
	   lines where the Figma shows one; 500px was the smallest width
	   that resolved this), rather than a formula dividing the
	   container into exactly 3 equal columns: the Figma itself doesn't
	   show exactly 3 full cards at this width — the 3rd card is
	   intentionally partially visible (a "peek"), signalling there's
	   more to scroll to. Forcing an exact 3-column division would have
	   meant either narrower cards than the Figma shows, or discarding
	   that intentional peek. A fixed width also sidesteps the flex-basis/
	   max-content circular-sizing issue entirely (no percentage or
	   calc() dependent on the track's own size). */
	flex: 0 0 500px;
	min-width: 280px;
}

@media (prefers-reduced-motion: reduce) {
	.qehs-resource-bundles__slider {
		scroll-behavior: auto;
	}
}

.qehs-resource-bundles__footer {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--qehs-space-lg);
}

/* Independent styling, intentionally not shared with
   .qehs-featured-documents__view-all — same visual treatment
   reproduced here rather than reusing/modifying that class. */
.qehs-resource-bundles__view-all {
	display: inline-flex;
	align-items: center;
	gap: var(--qehs-space-xs);
	font-weight: 600;
	color: var(--qehs-primary);
}

.qehs-resource-bundles__view-all:hover,
.qehs-resource-bundles__view-all:focus-visible {
	color: var(--qehs-secondary);
}

.qehs-resource-bundles__view-all:focus-visible {
	outline: 2px solid var(--qehs-secondary);
	outline-offset: 2px;
}

/* --- Bundle Card --- */

.qehs-bundle-card {
	display: flex;
	border: 1px solid var(--qehs-border);
	border-radius: var(--qehs-radius-lg);
	overflow: hidden;
	background-color: var(--qehs-background);
	height: 100%;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.qehs-bundle-card:hover,
.qehs-bundle-card:focus-within {
	box-shadow: var(--qehs-shadow-md);
	transform: translateY(-3px);
}

.qehs-bundle-card__media {
	flex: 0 0 40%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--qehs-background-alt);
	padding: var(--qehs-space-md);
}

.qehs-bundle-card__image {
	display: block;
	width: 100%;
	height: auto;
	/* Preserves the artwork's full aspect ratio — never crops. */
	object-fit: contain;
}

.qehs-bundle-card__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: var(--qehs-space-lg);
}

.qehs-bundle-card__heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--qehs-space-sm);
	margin-bottom: var(--qehs-space-md);
}

.qehs-bundle-card__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--qehs-text);
}

.qehs-bundle-card__badge {
	flex-shrink: 0;
	padding: 2px 10px;
	border-radius: 999px;
	background-color: var(--qehs-error-tint);
	color: var(--qehs-error);
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
}

.qehs-bundle-card__items {
	margin: 0 0 var(--qehs-space-md);
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--qehs-space-md);
}

.qehs-bundle-card__items li {
	display: flex;
	align-items: center;
	gap: var(--qehs-space-sm);
	font-size: 0.9rem;
	color: var(--qehs-text);
}

.qehs-bundle-card__check {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--qehs-secondary);
}

.qehs-bundle-card__price {
	margin-top: auto;
	margin-bottom: var(--qehs-space-md);
	display: flex;
	align-items: baseline;
	gap: var(--qehs-space-sm);
}

.qehs-bundle-card__price-current {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--qehs-text);
}

.qehs-bundle-card__price-original {
	font-size: 0.95rem;
	color: var(--qehs-text-muted);
	text-decoration: line-through;
}

/* Pill-shaped outline button, scoped to this card only — mirrors the
   approach already used for the Hero CTAs and header Login button:
   the shared button.css is untouched, this is independent markup, not
   a reused .qehs-btn class, per instruction not to modify global
   button styling. */
.qehs-bundle-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--qehs-space-md) var(--qehs-space-lg);
	border: 2px solid var(--qehs-accent-blue);
	border-radius: var(--qehs-radius-lg);
	color: var(--qehs-accent-blue);
	font-weight: 600;
	font-size: 1.05rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.qehs-bundle-card__cta:hover,
.qehs-bundle-card__cta:focus-visible {
	background-color: var(--qehs-accent-blue);
	color: #ffffff;
}

.qehs-bundle-card__cta:focus-visible {
	outline: 2px solid var(--qehs-accent-blue);
	outline-offset: 2px;
}

/* --- Tablet: ~2 cards visible, matching the site's existing 1024px
   breakpoint. Card composition stays horizontal (image left, content
   right) since it remains usable at this width. --- */
@media (max-width: 1024px) {
	.qehs-resource-bundles__title {
		font-size: 1.875rem;
	}

	.qehs-resource-bundles__track {
		gap: var(--qehs-space-lg);
	}

	.qehs-resource-bundles__slide {
		flex: 0 0 440px;
	}
}

/* --- Mobile: ~1 card visible; card switches to a stacked (image on
   top) composition, since a wide image column becomes too cramped
   alongside 5 list items + price + button at this width. --- */
@media (max-width: 768px) {
	.qehs-resource-bundles__slide {
		flex-basis: calc(100vw - 2 * var(--qehs-container-padding) - 32px);
	}

	.qehs-bundle-card {
		flex-direction: column;
	}

	.qehs-bundle-card__media {
		flex-basis: auto;
	}

	.qehs-bundle-card__image {
		max-width: 220px;
		margin: 0 auto;
	}
}

@media (max-width: 480px) {
	.qehs-resource-bundles {
		padding-block: var(--qehs-space-xl);
	}

	.qehs-resource-bundles__header {
		margin-bottom: var(--qehs-space-lg);
	}

	.qehs-resource-bundles__title {
		font-size: 1.5rem;
	}

	.qehs-resource-bundles__subtitle {
		font-size: 1rem;
	}

	.qehs-resource-bundles__slide {
		flex-basis: calc(100vw - 2 * var(--qehs-container-padding) - 16px);
		min-width: 0;
	}

	.qehs-resource-bundles__footer {
		justify-content: center;
	}
}