/**
 * 善のAX研究所 (top page) — horizontal column cards.
 *
 * Base (no JS / prefers-reduced-motion / screens under 560px tall):
 *   a native swipe carousel — overflow-x: auto + scroll-snap, no pinning.
 * .is-pinned (added by assets/js/lab-scroll.js; v0.9.23: phones too, owner's request):
 *   the section height becomes 100dvh + the horizontal overflow; the inner
 *   .p-top-lab__pin sticks to the top and JS slides the track with translateX
 *   as the page scrolls. After the last card the page scrolls on normally.
 * The card design itself is the shared .c-lab-card (main.css).
 */
.p-top-lab--hscroll {
	--lab-gap: 28px;
	--lab-card-w: clamp(300px, 27vw, 380px);
	/* first card lines up with the container's left edge */
	--lab-pad: max(var(--gutter), calc((100% - var(--w-container)) / 2));
}

/* ---------- head: heading + lead (left), counter + progress (right) ---------- */
.p-top-lab__head {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px;
	margin-bottom: 36px;
}
.p-top-lab__intro { min-width: 0; max-width: 760px; }
.p-top-lab__intro .c-lead { margin-bottom: 0; }
.p-top-lab__status { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding-bottom: 6px; }
.p-top-lab__count {
	margin: 0; display: flex; align-items: baseline; gap: 8px;
	font-family: var(--f-en); font-weight: 600; line-height: 1; letter-spacing: .06em; color: var(--c-muted);
	font-variant-numeric: tabular-nums;
}
.p-top-lab__count-now { font-size: 30px; color: var(--c-heading); }
.p-top-lab__count-sep, .p-top-lab__count-total { font-size: 15px; }
.p-top-lab__bar { position: relative; display: block; width: 160px; height: 2px; background: var(--c-border); border-radius: 2px; overflow: hidden; }
.p-top-lab__bar-fill {
	position: absolute; inset: 0; background: var(--c-main);
	transform: scaleX(var(--lab-progress, 0)); transform-origin: left center;
}

/* ---------- viewport / track (base = native swipe carousel) ---------- */
.p-top-lab__viewport {
	position: relative;
	overflow-x: auto; overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--lab-pad);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-block: 8px 24px; /* room for the hover shadow */
}
.p-top-lab__viewport::-webkit-scrollbar { display: none; }
.p-top-lab__track {
	position: relative;
	display: flex; gap: var(--lab-gap);
	width: max-content;
	padding-inline: var(--lab-pad);
}
.p-top-lab__track > .c-lab-card { flex: 0 0 auto; width: var(--lab-card-w); scroll-snap-align: start; }

/* final card: link to the archive */
.p-top-lab__more-link {
	position: relative; justify-content: center; align-items: flex-start; gap: 6px;
	min-height: 100%; padding: 32px;
	background: linear-gradient(135deg, var(--c-tint) 0%, var(--c-tint-2) 100%);
	border-style: dashed;
}
.p-top-lab__more-en { font-family: var(--f-en); font-weight: 600; font-size: clamp(30px, 3vw, 40px); line-height: 1.1; letter-spacing: .02em; color: var(--c-main-deep); }
.p-top-lab__more-ja { font-weight: 700; font-size: 17px; color: var(--c-heading); }
.p-top-lab__more-icon {
	display: inline-grid; place-items: center; width: 52px; height: 52px; margin-top: 18px;
	border-radius: 50%; background: var(--c-main-deep); color: #fff;
	transition: transform var(--t-btn) ease;
}
.p-top-lab__more-link:hover .p-top-lab__more-icon,
.p-top-lab__more-link:focus-visible .p-top-lab__more-icon { transform: translateX(4px); }

@media (max-width: 767px) {
	.p-top-lab--hscroll { --lab-gap: 16px; --lab-card-w: min(78vw, 320px); }
	.p-top-lab__head { flex-direction: column; align-items: stretch; margin-bottom: 24px; }
	.p-top-lab__status { flex-direction: row; align-items: center; justify-content: space-between; padding-bottom: 0; }
	.p-top-lab__count-now { font-size: 24px; }
	.p-top-lab__bar { flex: 1; max-width: 200px; }
	.p-top-lab__more-link { padding: 28px 24px; }
}

/* ---------- pinned mode (wide screens, JS) ---------- */
.p-top-lab.is-pinned { padding-block: 0; }
.p-top-lab.is-pinned .p-top-lab__pin {
	position: sticky; top: 0;
	height: 100vh;
	height: 100dvh; /* v0.9.23: the visible height with the phone toolbars (JS keeps the section height in sync) */
	display: flex; flex-direction: column; justify-content: center;
	/* the fixed header on top; the bottom service cards / phone bar hide while this section is on screen
	   (data-zbc-hide / data-float-hide), so only the home-indicator inset is kept at the bottom */
	padding: calc(var(--header-h) + var(--header-top) + 8px) 0 max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
	overflow: hidden;
}
/* compact the head so the whole block fits common laptop heights (1440x780 etc.) */
.p-top-lab.is-pinned { --lab-card-w: clamp(260px, min(27vw, 40vh), 380px); }
.p-top-lab.is-pinned .c-heading { margin-bottom: 56px; }
.p-top-lab.is-pinned .c-heading__en { font-size: clamp(56px, min(10.4vw, 11vh), 160px); }
.p-top-lab.is-pinned .p-top-lab__head { margin-bottom: 24px; }
.p-top-lab.is-pinned .p-top-lab__viewport { padding-block: 8px 16px; }
@supports (overflow: clip) { .p-top-lab.is-pinned .p-top-lab__pin { overflow: clip; } }
.p-top-lab.is-pinned .p-top-lab__viewport { overflow: hidden; scroll-snap-type: none; }
@supports (overflow: clip) { .p-top-lab.is-pinned .p-top-lab__viewport { overflow: clip; } }
.p-top-lab.is-pinned .p-top-lab__track {
	transform: translate3d(var(--lab-x, 0px), 0, 0);
	will-change: transform;
}

/* ---------- v0.9.23 pinned on phones: cards ≈ 80vw with the next one peeking, compact head ---------- */
@media (max-width: 767px) {
	.p-top-lab.is-pinned { --lab-card-w: min(80vw, 340px); --lab-gap: 14px; }
	.p-top-lab.is-pinned .p-top-lab__pin { padding-top: calc(var(--header-h) + var(--header-top) + 16px); } /* centred between header and bottom */
	.p-top-lab.is-pinned .c-heading { margin-bottom: 12px; }
	.p-top-lab.is-pinned .c-heading__en { font-size: clamp(40px, 12vw, 56px); }
	.p-top-lab.is-pinned .p-top-lab__head { margin-bottom: 14px; gap: 10px; }
	.p-top-lab.is-pinned .c-lead { font-size: 13.5px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.p-top-lab.is-pinned .c-lab-card__body { padding: 14px 16px 16px; }
	.p-top-lab.is-pinned .c-lab-card__excerpt { display: none; }
	/* vertical page scroll drives the cards: let the browser keep vertical panning native and smooth */
	.p-top-lab.is-pinned .p-top-lab__viewport { touch-action: pan-y; }
}
@media (max-width: 767px) and (max-height: 700px) {
	.p-top-lab.is-pinned .c-lead { display: none; } /* 360×640 class phones: title, counter and cards only */
}
/* v0.9.23 short laptops (1280×720, 1366×768): compact the head instead of falling back to the carousel
   (the fallback now only applies under 560px tall, see lab-scroll.js) */
@media (min-width: 768px) and (max-height: 820px) {
	.p-top-lab.is-pinned .c-heading { margin-bottom: 20px; }
	.p-top-lab.is-pinned .c-heading__en { font-size: clamp(48px, min(9vw, 9vh), 120px); }
	.p-top-lab.is-pinned .p-top-lab__head { margin-bottom: 16px; }
	.p-top-lab.is-pinned .c-lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.p-top-lab.is-pinned .c-lab-card__excerpt { -webkit-line-clamp: 2; }
}

/* v0.9.24: hide the floating TOP / consult buttons while the pinned cards are on screen */
.js.is-lab-pinned-view .c-float.is-visible, .is-lab-pinned-view .c-float { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; }