/* ==========================================================================
   Tea spectrum guide: template-parts/tea-guide.php (home page)
   Desktop: one row of equal tiles. Up to 960px: horizontal scroll strip.
   ========================================================================== */
.jc-guide { margin-bottom: 0; }
.jc-guide__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 1.5rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.jc-guide__head > div { flex: 1 1 420px; }
.jc-guide .jc-eyebrow { color: var(--jc-on-dark); }
.jc-guide .jc-h2 { margin: 0; color: var(--jc-white); }
.jc-guide__head > p { flex: 0 1 34rem; margin: 0; font-size: var(--jc-fs-base); line-height: 1.7; color: var(--jc-on-dark-muted); } /* as .jc-philo text */

.jc-guide__steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; height: 420px; }
.jc-guide__steps li { flex: 1 1 0; min-width: 0; display: flex; }

.jc-guide__step {
	flex: 1; min-width: 0; display: flex; flex-direction: column;
	background: var(--jc-cat-color); color: var(--jc-white); text-decoration: none;
}
.jc-guide__step:hover { color: var(--jc-white); }

/* Photo on top, solid tea colour below: a clean edge, no fade */
.jc-guide__img { position: relative; flex: 1 1 auto; min-height: 0; background: var(--jc-cat-color); }
.jc-guide__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.jc-guide__body { flex: none; display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.5rem 1.5rem; }
.jc-guide__n { font-size: .625rem; letter-spacing: var(--jc-tracking-label); color: rgba(255, 255, 255, .75); } /* as .jc-art__topic */
.jc-guide__name { font-size: 1.25rem; font-weight: 500; line-height: 1.3; } /* as .jc-art__title */
.jc-guide__taste { font-size: var(--jc-fs-sm); line-height: 1.5; color: rgba(255, 255, 255, .85); min-height: 3em; } /* as .jc-philo__desc */
.jc-guide__go { margin-top: .5rem; font-size: .75rem; letter-spacing: var(--jc-tracking-btn); text-transform: uppercase; } /* as .jc-art__go */
.jc-guide__step:hover .jc-guide__go { text-decoration: underline; text-underline-offset: 4px; }

.jc-guide__more { display: inline-block; margin-top: 2rem; font-size: .75rem; letter-spacing: var(--jc-tracking-label); text-transform: uppercase; color: var(--jc-white); text-decoration: underline; text-underline-offset: 4px; } /* as .jc-library__all */
.jc-guide__more:hover { color: var(--jc-white); }

/* Tablet + phone: swipeable strip that bleeds to the screen edge */
@media (max-width: 960px) {
	.jc-guide__steps {
		height: auto; gap: .625rem;
		margin-inline: calc(var(--jc-gutter) * -1); padding-inline: var(--jc-gutter);
		overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scroll-padding-inline: var(--jc-gutter);
		scrollbar-width: none;
	}
	.jc-guide__steps::-webkit-scrollbar { display: none; }
	.jc-guide__steps li { flex: 0 0 min(72vw, 280px); scroll-snap-align: start; }
	.jc-guide__img { flex: none; aspect-ratio: 4 / 3; }
	.jc-guide__body { padding: 1.1rem 1.25rem 1.25rem; }
	.jc-guide__name { font-size: 1.125rem; }
}