/* ===== Postavte si bagetu ===== */
.build { background: linear-gradient(180deg, var(--flour), var(--linen) 18%, var(--linen) 100%); padding: clamp(72px, 10vw, 150px) var(--gut); display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.build > * { max-width: 100%; }
.build__copy { justify-self: end; max-width: 520px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px; text-align: left; font: 500 .95rem/1.2 var(--sans); color: var(--charcoal); background: var(--flour); border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: background .25s, color .25s, border-color .25s, translate .25s var(--ease); }
.opt i { font: italic 600 1.35rem/1 var(--serif); color: var(--wine); font-style: italic; }
.opt[aria-pressed="true"] { background: var(--wine); color: var(--flour); border-color: var(--wine); }
.opt[aria-pressed="true"] i { color: var(--light-crust); }
@media (hover: hover) { .opt:hover { translate: 0 -2px; border-color: var(--wine); } }
.pick { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); min-height: 118px; }
.pick h3 { font-size: 2rem; }
.pick p { margin-top: 8px; color: var(--soft); max-width: 40ch; }
.build .note { margin-top: 10px; }

.stage { margin: 0; position: relative; min-width: 0; }
.stage__box { position: relative; aspect-ratio: 16 / 10.5; border-radius: 28px; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 42% 38%, #FBF4E3 0%, #F1E5CC 55%, #E5D3B0 100%); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -50px rgba(55, 16, 16, .5); }
.stage__box::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(106, 29, 29, .035) 0 1px, transparent 1px 38px), repeating-linear-gradient(0deg, rgba(106, 29, 29, .035) 0 1px, transparent 1px 38px); pointer-events: none; mask-image: linear-gradient(180deg, transparent 20%, #000); -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s; touch-action: pan-y; cursor: grab; z-index: 1; }
.stage canvas.grab { cursor: grabbing; }
.is-3d .stage canvas, .day.is-3d canvas { opacity: 1; }
.stage__fb { position: absolute; left: 4%; top: 50%; translate: 0 -50%; width: 92%; height: auto; transition: opacity .6s; }
.is-3d .stage__fb { opacity: 0; }
html.reduce .stage canvas, html.reduce .day canvas { display: none; }
.stage__fb[data-variant="seeds"] { --seeds: 1; } .stage__fb[data-variant="tomato"] { --tomato: 1; } .stage__fb[data-variant="figs"] { --figs: 1; }
.stage__hint { position: absolute; right: 18px; bottom: 16px; z-index: 2; font: 600 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--charcoal); pointer-events: none; }
.stage__cap { margin-top: 14px; display: flex; justify-content: flex-end; }
html.reduce .stage__hint { display: none; }

/* ===== Den v pekárně (pinned) ===== */
.day { background: var(--oven); color: var(--flour); position: relative; }
.day__pin { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 70px); align-items: center; padding: clamp(72px, 9vw, 130px) var(--gut); max-width: 1500px; margin: 0 auto; }
.day h2 { color: var(--flour); font-size: clamp(2.3rem, 4.6vw, 4.2rem); }
.day .eyebrow { color: var(--light-crust); }
.day__glow { position: absolute; inset: 0; pointer-events: none; opacity: calc(.25 + var(--p, 0) * .75); background: radial-gradient(ellipse 60% 70% at 72% 52%, rgba(217, 120, 40, .42), rgba(120, 40, 16, .18) 45%, transparent 72%); }
.day__txt, .day__stage { position: relative; z-index: 1; }
.caps { margin-top: 28px; display: grid; gap: 26px; }
.cap { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-content: start; }
.cap b { grid-row: 1 / 3; font: italic 600 2.4rem/1 var(--serif); color: var(--light-crust); }
.cap h3 { color: var(--flour); font-size: 2rem; }
.cap p { color: rgba(245, 240, 230, .82); margin-top: 6px; max-width: 42ch; }
.rail { display: none; gap: 6px; margin-top: 26px; }
.rail i { width: 56px; height: 3px; border-radius: 2px; background: rgba(245, 240, 230, .25); transition: background .4s; }
.rail i.is-on { background: var(--light-crust); }
.day__stage { margin: 0; aspect-ratio: 16 / 11; position: relative; }
.day__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s; }
.day__fb { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 100%; height: auto; transition: opacity .6s; }
.day.is-3d .day__fb { opacity: 0; }
.day__stage figcaption { position: absolute; right: 0; bottom: 0; z-index: 2; }
.day .stage__fb { --seeds: 0; }

html.js:not(.nopin) .day { height: 430vh; }
html.js:not(.nopin) .day__pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: 90px 40px; }
html.js:not(.nopin) .rail { display: flex; }
html.js:not(.nopin) .caps { display: grid; gap: 0; min-height: 190px; }
html.js:not(.nopin) .cap { grid-area: 1 / 1; opacity: 0; translate: 0 22px; transition: opacity .6s var(--ease), translate .6s var(--ease); pointer-events: none; }
html.js:not(.nopin) .cap.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }

@media (max-width: 960px) {
  .build { grid-template-columns: 1fr; }
  .build__copy { justify-self: start; max-width: 640px; }
  .stage { order: -1; }
  .build .eyebrow { margin-top: 6px; }
  .stage__box { aspect-ratio: 4 / 3; }
  .day__pin { grid-template-columns: 1fr; gap: 0; align-content: center; }
  .day__stage { order: -1; aspect-ratio: 16 / 10; }
  html.js:not(.nopin) .day { height: 380vh; }
  html.js:not(.nopin) .day__pin { padding-block: 76px 24px; align-content: start; }
  html.js:not(.nopin) .day__stage { aspect-ratio: auto; height: 36svh; }
  .day h2 { font-size: 2.1rem; }
  .cap h3 { font-size: 1.6rem; } .cap b { font-size: 1.9rem; }
  html.js:not(.nopin) .caps { margin-top: 16px; min-height: 150px; }
  .day__txt .eyebrow { margin-bottom: 8px; }
}
@media (max-width: 480px) {
  .opts { grid-template-columns: 1fr; }
  .pick { min-height: 130px; }
}