/*
 * Forty Thousand Hours page (page-forty-thousand-hours.php). Loaded on that page only.
 * Without JavaScript every step is visible; site.js adds .is-ready to stage the flip.
 */

.jwc-40k-intro { display: grid; gap: 14px; }
.jwc-40k-intro .jwc-eyebrow { margin: 0; }
.jwc-40k-intro h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: 1.05; text-wrap: balance; }

/* ---------- the flip ---------- */
.jwc-40k-flip { padding-block: clamp(32px, 5vw, 64px) clamp(56px, 7vw, 96px); overflow: hidden; }
.jwc-40k-flip__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 32px; align-items: center; }
.jwc-40k-flip__bottle { grid-column: 1 / 5; display: grid; place-items: center; }
.jwc-40k-flip__bottle img {
	width: auto; height: min(78vh, 700px); cursor: pointer;
	transition: transform 1.3s cubic-bezier(.65, 0, .35, 1);
}
.jwc-40k-flip__story { grid-column: 5 / 13; display: grid; gap: 28px; }
.jwc-40k-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.jwc-40k-step { display: grid; gap: 10px; }
.jwc-40k-step__say { font-size: .95rem; color: var(--jwc-stone); font-style: italic; }
.jwc-40k-step__big { font: 500 clamp(1.7rem, 3.4vw, 2.6rem)/1.15 var(--jwc-display); }
.jwc-40k-step__punch { color: var(--jwc-wine); font-style: italic; }
.jwc-40k-nowrap { white-space: nowrap; }
.jwc-40k-flip__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.jwc-40k-flip__controls [hidden] { display: none; } /* .jwc-btn sets display, which would beat [hidden] */
.jwc-40k-replay { padding: 0; border: 0; background: none; font: inherit; font-size: .95rem; color: var(--jwc-wine); text-decoration: underline; cursor: pointer; }

/* Jeremy / Forty Thousand: three masks cut from the label, stacked in one frame */
.jwc-40k-ambigram { position: relative; width: min(100%, 440px); aspect-ratio: 1326 / 124; transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }
.jwc-40k-ambigram__part {
	position: absolute; inset: 0; transition: background-color .6s ease;
	-webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat;
}
.jwc-40k-ambigram__part--thousand { --m: url(../img/brand/flip-thousand.png); background: #D8B4A6; }
.jwc-40k-ambigram__part--jf { --m: url(../img/brand/flip-jf.png); background: var(--jwc-wine); }
.jwc-40k-ambigram__part--eremy { --m: url(../img/brand/flip-eremy.png); background: var(--jwc-wine); }

/* staged: steps wait for the flip, then arrive one by one (the pause before the punchline is the script's) */
.jwc-40k-flip.is-ready .jwc-40k-step { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.jwc-40k-flip.is-flipped .jwc-40k-flip__bottle img { transform: rotate(180deg); }
.jwc-40k-flip.is-flipped .jwc-40k-step { opacity: 1; transform: none; }
.jwc-40k-flip.is-flipped .jwc-40k-step[data-step="1"] { transition-delay: 1.1s; }
.jwc-40k-flip.is-flipped .jwc-40k-step[data-step="2"] { transition-delay: 2.2s; }
.jwc-40k-flip.is-flipped .jwc-40k-step[data-step="3"] { transition-delay: 4.4s; }
.jwc-40k-flip.is-flipped .jwc-40k-ambigram { transform: rotate(180deg); transition-delay: 2.6s; }
.jwc-40k-flip.is-flipped .jwc-40k-ambigram__part--thousand { background: var(--jwc-wine); transition-delay: 3.4s; }
.jwc-40k-flip.is-flipped .jwc-40k-ambigram__part--eremy { background: #D8B4A6; transition-delay: 3.4s; }

/* ---------- the hours ---------- */
.jwc-40k-script {
	width: min(100%, 560px); aspect-ratio: 1400 / 310; margin-bottom: 28px; /* matches label-script-heading.png */ background: var(--jwc-stone);
	-webkit-mask: url(../img/brand/label-script-heading.png) left center / contain no-repeat;
	mask: url(../img/brand/label-script-heading.png) left center / contain no-repeat;
}
.jwc-40k-hours h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 24px; }
.jwc-40k-bar { display: flex; gap: 3px; height: 14px; margin-bottom: 28px; }
.jwc-40k-bar span { flex: 0 1 0; }
.jwc-40k-bar span:nth-child(1) { background: var(--jwc-wine); }
.jwc-40k-bar span:nth-child(2) { background: #9C5A54; }
.jwc-40k-bar span:nth-child(3) { background: #C9A28F; }
.jwc-40k-hours__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.jwc-40k-hours__list li { display: grid; gap: 8px; align-content: start; padding-top: 14px; border-top: 2px solid var(--jwc-rule); }
.jwc-40k-hours__list li:nth-child(1) { border-color: var(--jwc-wine); }
.jwc-40k-hours__list li:nth-child(2) { border-color: #9C5A54; }
.jwc-40k-hours__list li:nth-child(3) { border-color: #C9A28F; }
.jwc-40k-hours__num { font-size: .95rem; color: var(--jwc-stone); }
.jwc-40k-hours__num b { margin-right: 4px; font: 500 2rem/1 var(--jwc-display); color: var(--jwc-ink); font-variant-numeric: lining-nums tabular-nums; }
.jwc-40k-hours__list h3 { font-size: 1.2rem; }
.jwc-40k-hours__list p:not(.jwc-40k-hours__num) { color: var(--jwc-stone); font-size: .95rem; }

/* ---------- the turntable ---------- */
.jwc-40k-turn__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 32px; align-items: center; }
.jwc-40k-turn__copy { grid-column: 1 / 7; display: grid; gap: 14px; }
.jwc-40k-turn__copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.jwc-40k-turn__copy p:not(.jwc-eyebrow) { color: var(--jwc-stone); max-width: 48ch; }
.jwc-40k-turn__hint { font-size: .9rem; font-style: italic; }
.jwc-40k-turn__stage { grid-column: 8 / 12; display: grid; justify-items: center; gap: 16px; touch-action: pan-y; user-select: none; }
.jwc-40k-turn__img { width: auto; height: min(70vh, 620px); cursor: grab; }
.jwc-40k-turn__stage.is-dragging .jwc-40k-turn__img { cursor: grabbing; }
.jwc-40k-turn__range { width: min(100%, 260px); }
.jwc-40k-turn__range input { width: 100%; accent-color: var(--jwc-wine); }

/* ---------- close ---------- */
.jwc-40k-end .jwc-in { display: grid; gap: 14px; justify-items: start; }
.jwc-40k-end h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.jwc-40k-end p { color: var(--jwc-stone); }

/* ---------- tablet and phone ---------- */
@media (max-width: 860px) {
	.jwc-40k-hours__list { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
	.jwc-40k-turn__grid { grid-template-columns: 1fr; }
	.jwc-40k-turn__copy, .jwc-40k-turn__stage { grid-column: 1 / -1; }
	/* Phones: a slim bottle beside the steps, so the flip and the words stay on screen together */
	.jwc-40k-flip__grid { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "intro intro" "bottle controls" "bottle steps"; gap: 20px 18px; align-items: start; }
	.jwc-40k-flip__story { display: contents; }
	.jwc-40k-intro { grid-area: intro; }
	.jwc-40k-flip__bottle { grid-area: bottle; grid-column: auto; }
	.jwc-40k-flip__controls { grid-area: controls; }
	.jwc-40k-steps { grid-area: steps; }
	.jwc-40k-flip__bottle img { height: 340px; }
	.jwc-40k-step__big { font-size: 1.45rem; }
	.jwc-40k-turn__img { height: 420px; }
	.jwc-40k-steps { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.jwc-40k-flip__bottle img, .jwc-40k-ambigram, .jwc-40k-ambigram__part,
	.jwc-40k-flip.is-ready .jwc-40k-step { transition: none !important; }
}