/* ============================================================
   Stránka /fotobook/: jen to, co šablona nemá (všechno ostatní jsou komponenty šablony).
   Každé pravidlo je okomentované proč.
   ============================================================ */

/* Prolínání fotek (mobilní hero a obálka u objednávky): šablona nemá crossfade. Čistá CSS animace,
   spouští se až při zobrazení (třída mp-story-animate z IntersectionObserveru na stránce). */
.mp-story-crossfade { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.15); background: rgba(0,0,0,.12); }
.mp-story-crossfade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.mp-story-crossfade img:first-child { opacity: 1; }
.mp-story-crossfade.mp-story-animate[data-count="2"] img { animation: mp-story-fade-2 12s ease-in-out infinite; }
.mp-story-crossfade.mp-story-animate[data-count="3"] img { animation: mp-story-fade-3 18s ease-in-out infinite; }
@keyframes mp-story-fade-2 { 0% { opacity: 0; } 6% { opacity: 1; } 44% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes mp-story-fade-3 { 0% { opacity: 0; } 4% { opacity: 1; } 29.33% { opacity: 1; } 33.33% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mp-story-crossfade.mp-story-animate img { animation: none; } }

/* Video s náhledem: Vimeo iframe se vloží až po kliknutí (neláduje LCP), potřebuje poměr 16:9 a tlačítko přehrát. */
.fb-video { position: relative; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.35); cursor: pointer; }
.fb-video-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; background: #fff; border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.3); cursor: pointer; }
.fb-video-play svg { margin-left: 3px; }

/* Před a po: šablona nemá porovnávací jezdec. Dva obrázky nad sebou, horní se ořezává podle polohy jezdce (--pos),
   ovládá ho průhledný <input type=range> přes celou fotku (funguje myší, dotykem i klávesnicí). */
.mp-ba { position: relative; overflow: hidden; border-radius: 10px; --pos: 50%; touch-action: pan-y; }
.mp-ba img { display: block; width: 100%; height: auto; }
.mp-ba .mp-ba-before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.mp-ba .mp-ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.5); pointer-events: none; }
.mp-ba .mp-ba-knob { position: absolute; top: 50%; left: var(--pos); width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.4); pointer-events: none; display: flex; align-items: center; justify-content: center; color: #333; font-size: 14px; }
.mp-ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

/* Pás obálek nad objednávkou: vodorovně posuvný (na mobilu se nezalamuje), šablona nic podobného nemá. */
.fb-covers-strip { display: flex; gap: 10px; overflow-x: auto; padding: 28px 24px; background: rgba(0,0,0,.3); scrollbar-width: none; }
.fb-covers-strip::-webkit-scrollbar { display: none; }
.fb-cover-img { flex-shrink: 0; width: 110px; height: 160px; object-fit: cover; object-position: top center; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
@media (min-width: 992px) { .fb-cover-img { width: 130px; height: 190px; } }

/* Obálka (crossfade) vedle seznamu "Co dcera získá". */
.fb-cta-cover { width: 100%; max-width: 240px; margin: 16px auto 0; border-radius: 8px; }


/* Zeď obálek (wptb-marquee / wptb-text-marquee1, jen pro obrázky): rozměry, mezery a opačný směr druhé řady.
   Smyčka šablony posune každou kopii o -100 % své šířky, proto je mezera mezi kopiemi 0 a odsazení je uvnitř kopie. */
.mp-cover-wall { padding: 115px 0 56px; }
@media (max-width: 991px) { .mp-cover-wall { padding-top: 90px; } }
.mp-cover-wall .wptb-heading { margin-bottom: 28px; }
.mp-cover-row { padding: 0; }
.mp-cover-row + .mp-cover-row { margin-top: 8px; }
.mp-cover-row .wptb-text-marquee1 { overflow: hidden; padding: 16px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.mp-cover-row .wptb-item--container { gap: 0; }
.mp-cover-row .wptb-text-marquee1.wptb-slide-to-left .wptb-item--inner { justify-content: flex-start; gap: 18px; padding-right: 18px; animation-duration: calc(var(--mp-n, 16) * 6s); }
.mp-cover-row--zpet .wptb-text-marquee1 .wptb-item--inner { animation-name: wptb_left_right; -webkit-animation-name: wptb_left_right; }
.mp-cover-row:hover .wptb-item--inner { animation-play-state: paused; }
.mp-cover-row .wptb-item--text.mp-cover { position: relative; display: block; flex: 0 0 auto; width: 170px; font-size: 0; line-height: 0; border-radius: 3px 8px 8px 3px; box-shadow: 5px 8px 20px rgba(0,0,0,.55); transition: transform .25s ease; }
.mp-cover-row .wptb-text-marquee1.wptb-slide-to-left .wptb-item--text.mp-cover img { display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 2 / 3; object-fit: cover; border-radius: inherit; animation: none; -webkit-animation: none; } /* přebíjí šablonu: obrázek v marquee je tam 60px rotující ikona */
/* hřbet a lesk, ať obálka vypadá jako kniha, ne jako obyčejná fotka */
.mp-cover-row .mp-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.4) 0, rgba(255,255,255,.2) 2.5%, rgba(0,0,0,.12) 5%, rgba(0,0,0,0) 9%, rgba(255,255,255,.05) 100%); }
.mp-cover-row .mp-cover:hover { transform: translateY(-8px) rotate(-1.2deg); }
@media (max-width: 767px) {
  .mp-cover-row .wptb-item--text.mp-cover { width: 120px; }
  .mp-cover-row .wptb-text-marquee1.wptb-slide-to-left .wptb-item--inner { gap: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-cover-row .wptb-text-marquee1 { overflow-x: auto; }
  .mp-cover-row .wptb-item--inner { animation: none !important; }
  .mp-cover-row .wptb-item--inner[aria-hidden="true"] { display: none; }
}