/* ==========================================================================
   Homepage: hero (prolínání scén), pergamen Legendy, Kolekce, Novinky.
   Zdroj: v2 Hero.tsx (podoba `prolinani`), BottleRow.tsx, StoryParchment.tsx,
   Products.tsx, HomeNews.tsx. Pravidla hera viz README v2, kapitola Hero.
   ========================================================================== */

/* Produkty a Novinky leží na jednom písku se zrnem (jako v2 bez švu). */
#main-content:has(.es-hero),
body.et-fb:has(.es-hero) {
  background-color: var(--espero-sand);
  background-image: var(--es-grain-06);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.es-hero {
  --next-section: #f5e6d2; /* pergamenový pruh pod hero */
  position: relative;
  overflow: hidden;
  min-height: 112dvh; /* pokračuje pod fold, teplá plocha nekončí řezem */
  padding: 0 !important;
}
.es-hero-row,
.es-hero-row > .et_pb_column {
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Scéna nesmí tvořit vlastní vrstvu: desky všech scén musí ležet pod
   láhvemi všech scén (v2: desky z-0–2, láhve z-20–22). */
.es-scene {
  display: contents !important;
}
:where(.es-hero .et_pb_module) {
  margin: 0 !important;
}

/* Barevný podklad scény + přechod do další sekce (gradient nastaví JS
   z `data-edge-*`); deska vějíře na jevišti. Každá scéna má jednu vrstvu
   pozadí = obal desky přes celou sekci. */
.es-scene-plate {
  position: absolute !important;
  inset: 0;
  z-index: var(--z, 0);
  width: auto !important;
  opacity: 0;
  background: var(--scene-bg, transparent);
}
.es-scene:first-child .es-scene-plate {
  opacity: 1;
}
/* Jeviště: výška řízená dvh, ne šířkou; záporný top (láhev má patku v 85 %).
   Mobil 3:4, od md 2:1 a na širokoúhlém monitoru roste se šířkou okna. */
.es-scene-plate .et_pb_image_wrap {
  position: absolute;
  left: 50%;
  top: -7dvh;
  height: 96dvh;
  aspect-ratio: 3 / 4;
  width: auto;
  max-width: none !important; /* Divi stropuje 100 %: jeviště je širší než okno */
  transform: translateX(-50%);
  translate: var(--px, 0) 0;
}
@media (min-width: 768px) {
  .es-scene-plate .et_pb_image_wrap {
    top: calc(-10dvh - max(0px, 50vw + 16px - 100dvh) / 2);
    height: max(100dvh, 50vw + 16px);
    aspect-ratio: 2 / 1;
  }
}
.es-scene-plate img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, black 62%, transparent 98%);
  mask-image: linear-gradient(to bottom, black 62%, transparent 98%);
}
/* Deska pro telefon (jiný ořez) jen pod md, desktopová jen od md. */
.es-scene-plate--mobile {
  display: none !important;
}
@media (max-width: 767px) {
  .es-scene-plate:not(.es-scene-plate--mobile) .et_pb_image_wrap {
    display: none;
  }
  .es-scene-plate--mobile {
    display: block !important;
    background: none;
  }
}

/* Láhev: stojí na lince podlahy (72 dvh), výška 42 / sm 53 dvh × `--vyska`. */
.es-scene-bottle {
  --lahev: 42dvh;
  position: absolute !important;
  inset: 0 0 auto;
  z-index: var(--z, 20);
  display: flex !important;
  flex-direction: row !important; /* Divi flex modul je jinak sloupec */
  align-items: flex-end;
  justify-content: center;
  width: auto !important;
  height: 72dvh;
  padding: 0 1rem;
  opacity: 0;
  pointer-events: none;
  translate: var(--px, 0) 0;
}
@media (min-width: 640px) {
  .es-scene-bottle {
    --lahev: 53dvh;
  }
}
.es-scene:first-child .es-scene-bottle {
  opacity: 1;
}
.es-scene-bottle .et_pb_image_wrap {
  position: relative;
  display: flex;
  justify-content: center;
  height: calc(var(--lahev) * var(--vyska, 1));
}
/* Kontaktní stín: packshoty jsou vyříznuté z bílé, bez něj by láhev visela. */
.es-scene-bottle .et_pb_image_wrap::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 135%;
  height: 2.4dvh;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background-color: rgb(42 26 16 / 0.25);
  filter: blur(12px);
}
.es-scene-bottle img {
  position: relative;
  width: auto !important;
  height: 100% !important;
  object-fit: contain;
  user-select: none;
}

/* Prolnutí: pozadí 1,2 s, láhev 0,25 s (EASE); jen nastupující scéna. */
.es-scene-plate.is-in {
  transition: opacity 1.2s var(--espero-ease);
}
.es-scene-bottle.is-in {
  transition: opacity 0.25s var(--espero-ease);
}

/* Drobný řádek verzálkami: na telefonu na desce pod lahví (78 dvh),
   od md v úrovni hlavičky (výška = odsazení + logo). */
.es-hero-tagline {
  position: absolute !important;
  inset: 78dvh 0 auto;
  z-index: 30;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  width: auto !important;
  padding: 0 1.5rem;
  pointer-events: none;
}
@media (min-width: 768px) {
  .es-hero-tagline {
    top: 0;
    height: 112px;
  }
}
@media (min-width: 1024px) {
  .es-hero-tagline {
    height: 120px;
  }
}
.es-hero-tagline .et_pb_text_inner {
  width: 100%;
}
.es-hero-tagline :is(h1, h2, p) {
  width: 100%;
  margin: 0;
  padding: 0 !important;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(42 26 16 / 0.85); /* 5,5 : 1 i na nejtmavší scéně (Coffee) */
  user-select: none;
}
@media (min-width: 768px) {
  .es-hero-tagline :is(h1, h2, p) {
    font-size: clamp(15px, 1.6vw, 24px);
    color: rgb(42 26 16 / 0.75);
  }
}
@keyframes es-tagline-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.es-builder) body:not(.et-fb) .es-hero-tagline :is(h1, h2, p) {
    animation: es-tagline-in 1.1s var(--espero-ease) 0.15s both;
  }
}

/* Šipka dolů vpravo dole v prvních 100 dvh (`top-0 h-dvh` pás). */
.es-hero .et_pb_button_module_wrapper:has(.es-scroll-indicator) {
  position: absolute !important;
  z-index: 30;
  top: calc(100dvh - 1.25rem - 2.75rem); /* bottom-5 v pásu 100 dvh */
  right: 1.25rem;
  margin: 0 !important;
}
.et_pb_button.es-scroll-indicator {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 0 !important;
  color: transparent !important;
}
.et_pb_button.es-scroll-indicator::after {
  display: none !important;
}
/* Kolej (ink/25) a jezdec (ink/70) */
.et_pb_button.es-scroll-indicator::before {
  content: '' !important;
  position: absolute !important;
  inset: auto !important;
  left: calc(50% - 0.5px) !important;
  top: calc(50% - 1.125rem) !important;
  display: block !important;
  width: 1px;
  height: 2.25rem; /* h-9 */
  margin: 0 !important;
  opacity: 1 !important;
  background:
    linear-gradient(rgb(42 26 16 / 0.7), rgb(42 26 16 / 0.7)) 0 0 / 100% 50% no-repeat,
    rgb(42 26 16 / 0.25);
  font-size: 0 !important;
  animation: es-scroll-pulse 2.8s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}
@keyframes es-scroll-pulse {
  0% {
    background-position: 0 -110%;
  }
  60%,
  100% {
    background-position: 0 230%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .et_pb_button.es-scroll-indicator::before {
    animation: none;
  }
}

/* Ve builderu: scény pod sebou v malém náhledu, ať jdou upravit. */
:is(html.es-builder, body.et-fb) .es-hero {
  min-height: 0;
}
:is(html.es-builder, body.et-fb) .es-scene {
  display: flex !important;
  gap: 1rem;
  align-items: flex-end;
  padding: 1rem;
}
:is(html.es-builder, body.et-fb) :is(.es-scene-plate, .es-scene-bottle, .es-hero-tagline) {
  position: relative !important;
  inset: auto;
  opacity: 1;
  height: auto;
}
:is(html.es-builder, body.et-fb) .es-scene-plate .et_pb_image_wrap {
  position: static;
  height: 160px;
  transform: none;
}
:is(html.es-builder, body.et-fb) .es-scene-plate--mobile {
  display: block !important;
}
:is(html.es-builder, body.et-fb) .es-scene-bottle .et_pb_image_wrap {
  height: 160px;
}

/* ==========================================================================
   Pergamen Legendy (StoryParchment, varianta 0)
   ========================================================================== */

.es-parchment {
  position: relative;
  padding: 0 !important;
  background-color: var(--espero-page) !important; /* prosvítá trhlinou */
}
.es-parchment > .es-parchment-sheet {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 7rem max(1.5rem, calc((100% - 48rem) / 2 + 1.5rem)) !important; /* py-28, max-w-3xl px-6 */
  background: url(../img/parchment/sheet-tan.webp) center / cover;
  -webkit-mask-image: url(../img/torn-top-0.svg), linear-gradient(#000, #000), url(../img/torn-bottom-1.svg);
  mask-image: url(../img/torn-top-0.svg), linear-gradient(#000, #000), url(../img/torn-bottom-1.svg);
  -webkit-mask-size: 100% 34px, 100% calc(100% - 68px), 100% 34px;
  mask-size: 100% 34px, 100% calc(100% - 68px), 100% 34px;
  -webkit-mask-position: top center, center, bottom center;
  mask-position: top center, center, bottom center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (min-width: 768px) {
  .es-parchment > .es-parchment-sheet {
    padding-top: 9rem !important; /* md:py-36 */
    padding-bottom: 9rem !important;
  }
}
.es-parchment-sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--es-grain-06);
  mix-blend-mode: multiply;
}
.es-parchment-sheet > .et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important; /* gap-6 */
  text-align: center;
}
:where(.es-parchment .et_pb_module) {
  margin: 0 !important;
}
.es-parchment-text p {
  max-width: 36rem;
  margin: 0 auto;
  text-align: center;
  padding: 0 !important;
  font-size: 15px;
  line-height: 1.625;
  color: rgb(42 26 16 / 0.8);
}
.es-legend-links {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.25rem !important;
  width: auto !important;
  margin-top: 0.5rem !important;
}
@media (min-width: 640px) {
  .es-legend-links {
    flex-direction: row !important;
    gap: 2.5rem !important;
  }
}
.es-legend-link p {
  margin: 0;
  padding: 0 !important;
}
/* Sazba jako přepínač Likéry / Rumy; linka se objeví až při najetí. */
.es-legend-link a {
  position: relative;
  display: inline-block;
  padding: 0.5rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--espero-ink);
  transition: color 300ms var(--espero-ease-tw);
}
.es-legend-link a::after {
  content: '';
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  width: 0;
  height: 1px;
  background-color: var(--espero-orange);
  transition: all 300ms var(--espero-ease-tw);
}
.es-legend-link a:is(:hover, :focus-visible) {
  color: var(--espero-orange);
}
.es-legend-link a:is(:hover, :focus-visible)::after {
  width: calc(100% - 1rem);
}
/* v2: `pb-1.5` je na řádkovém <span> uvnitř, výšku odkazu (44 px) nemění;
   jen linka leží o 6 px níž pod textem. */
.es-legend-link a::after {
  bottom: calc(0.5rem - 0.375rem);
}

/* ==========================================================================
   Kolekce na homepage (Products.tsx)
   ========================================================================== */

.es-home-products {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 !important; /* py-24 */
  background-color: transparent !important;
  background-image:
    url(../img/balboa-mark-ink-045.svg),
    radial-gradient(circle at center, rgba(234, 176, 131, 0.45), transparent 70%),
    radial-gradient(circle at center, rgba(248, 234, 197, 0.63), transparent 68%) !important;
  background-repeat: no-repeat !important;
  background-size:
    auto 420px,
    38rem 38rem,
    34rem 34rem !important;
  background-position:
    right -30vw center,
    right -12vw bottom,
    left -10vw top -6rem !important;
}
@media (min-width: 768px) {
  .es-home-products {
    padding: 8rem 0 !important; /* md:py-32 */
    background-size:
      auto 720px,
      38rem 38rem,
      34rem 34rem !important;
    background-position:
      right -7vw center,
      right -12vw bottom,
      left -10vw top -6rem !important;
  }
}
.es-home-products-head > .et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.25rem !important; /* gap-5 */
  text-align: center;
}
:where(.es-home-products .et_pb_module) {
  margin: 0 !important;
}
.es-home-products .es-tabs {
  margin-top: 0.5rem !important; /* mt-2 */
}
.es-home-products-cta {
  margin-top: 3.5rem !important; /* mt-14 */
}
@media (min-width: 768px) {
  .es-home-products-cta {
    margin-top: 4rem !important; /* md:mt-16 */
  }
}
.es-home-products-cta > .et_pb_column {
  display: flex !important;
  align-items: center !important;
}

/* ==========================================================================
   Novinky na homepage (HomeNews.tsx)
   ========================================================================== */

.es-homenews {
  position: relative;
  overflow: hidden;
  padding: 1rem 0 6rem !important; /* pt-4 pb-24 */
  background-color: transparent !important;
}
@media (min-width: 768px) {
  .es-homenews {
    padding: 2rem 0 8rem !important; /* md:pt-8 md:pb-32 */
  }
}
.es-homenews-head .et_pb_column {
  text-align: center;
}
.es-homenews-row {
  margin-top: 2.5rem !important; /* mt-10 */
}
@media (min-width: 768px) {
  .es-homenews-row {
    margin-top: 3rem !important; /* md:mt-12 */
  }
}