/* ===================================================================
   Hero Stage v3 – "Widget on site"
   Widget recenzí embedovaný do náznaku webu zákazníka (browser-window
   mockup). Cíl: návštěvník hned vidí, JAK to v praxi funguje – widget
   sedí na reálné stránce, ne jen plovoucí karty ve vzduchu.

   Struktura:
     .hero-frame            – okno prohlížeče (chrome + viewport)
       .hero-frame__chrome  – horní lišta (tečky + URL pill)
       .hero-frame__viewport
         .hero-widget       – samotný embedovaný widget
           .hero-widget__head – agregát hodnocení + Recenzia badge
           .hero-stage        – cyklující tělo recenzí

   State machine v hero-widget-stage.js přepíná layout tělo widgetu:
     stack – vertikální seznam s avatarem a fotkou (default)
     grid  – mřížka 2×2 s media tiles
   (renderery float/carousel zůstávají v JS, ale nejsou v sekvenci –
   nehodí se do sevřeného widgetu.)

   Tokeny dědíme z marketing-v7.css (var(--rz-*)).
   =================================================================== */

/* ===================================================================
   Browser-window mockup
   =================================================================== */
.hero-frame {
  position: relative;
  background: var(--rz-white);
  border: 1px solid var(--rz-border-soft, rgba(15, 26, 46, 0.08));
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(15, 26, 46, 0.05),
    0 28px 60px rgba(15, 26, 46, 0.14);
  isolation: isolate;
}

.hero-frame__chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  background: var(--rz-bg-alt, #f5f6f8);
  border-bottom: 1px solid rgba(15, 26, 46, 0.06);
}
.hero-frame__dots {
  display: inline-flex;
  gap: 7px;
  flex-shrink: 0;
}
.hero-frame__dots i {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: rgba(15, 26, 46, 0.16);
}
.hero-frame__dots i:nth-child(1) { background: #ff5f57; }
.hero-frame__dots i:nth-child(2) { background: #febc2e; }
.hero-frame__dots i:nth-child(3) { background: #28c840; }
.hero-frame__url {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--rz-white);
  border: 1px solid rgba(15, 26, 46, 0.07);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rz-text-muted);
}
.hero-frame__url svg {
  width: 12px;
  height: 12px;
  color: var(--rz-green);
  flex-shrink: 0;
}

.hero-frame__viewport {
  padding: 16px 16px 18px;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(255, 194, 60, 0.10), transparent 60%),
    var(--rz-white);
}

/* ===================================================================
   Embedovaný widget
   =================================================================== */
.hero-widget {
  border: 1px solid rgba(15, 26, 46, 0.08);
  border-radius: 16px;
  background: var(--rz-bg-alt, #f7f8fa);
  padding: 16px;
}
.hero-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hero-widget__score {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}
.hero-widget__avg {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--rz-text);
  letter-spacing: -0.02em;
}
.hero-widget__stars {
  display: inline-flex;
  align-items: center;
  gap: 1.5px;
  color: var(--rz-amber);
  transform: translateY(1px);
}
.hero-widget__stars svg { width: 15px; height: 15px; fill: currentColor; }
.hero-widget__count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rz-text-muted);
}
.hero-widget__brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--rz-green);
  flex-shrink: 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--rz-green-light, rgba(40, 167, 100, 0.10));
}
.hero-widget__brand svg { width: 13px; height: 13px; fill: currentColor; }

/* ---------- Stage container (tělo widgetu) ---------- */
.hero-stage {
  position: relative;
  width: 100%;
  min-height: clamp(250px, 24vw, 304px);
  isolation: isolate;
}

/* swap target – žije přímo v hero, žádný rám */
.hero-stage__body {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

/* ===================================================================
   Bubble – sjednocená karta recenze
   Stejný vizuální základ napříč všemi 4 stavy, jen layout se mění.
   =================================================================== */

.hero-bubble {
  --bubble-radius: 22px;
  position: relative;
  background: var(--rz-white);
  border: 1px solid rgba(15, 26, 46, 0.05);
  border-radius: var(--bubble-radius);
  box-shadow:
    0 1px 2px rgba(15, 26, 46, 0.04),
    0 10px 32px rgba(15, 26, 46, 0.08);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease;
}

.hero-bubble:hover {
  transform: translateY(-3px) rotate(0deg) !important;
  box-shadow:
    0 2px 4px rgba(15, 26, 46, 0.05),
    0 18px 40px rgba(15, 26, 46, 0.10);
  z-index: 5;
}

/* sub-elements */
.hero-bubble__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hero-bubble__source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.hero-bubble__source--heureka { background: var(--rz-red-light); color: var(--rz-red); }
.hero-bubble__source--google  { background: var(--rz-blue-light); color: var(--rz-blue); }
.hero-bubble__source--form    { background: var(--rz-bg-dark); color: var(--rz-white); }

.hero-bubble__author {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.hero-bubble__author-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--rz-text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hero-bubble__author-meta {
  font-size: 11px;
  color: var(--rz-text-muted);
  font-weight: 500;
  margin-top: 1px;
}

.hero-bubble__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--rz-green);
  color: #fff;
  flex-shrink: 0;
  vertical-align: middle;
}
.hero-bubble__verified svg { width: 8px; height: 8px; }

.hero-bubble__stars {
  display: inline-flex;
  align-items: center;
  gap: 1.5px;
  color: var(--rz-amber);
  flex-shrink: 0;
}
.hero-bubble__star { width: 12px; height: 12px; fill: currentColor; }

.hero-bubble__text {
  font-size: 13.5px;
  color: var(--rz-text);
  line-height: 1.5;
  letter-spacing: -0.005em;
}

/* avatar – initials na barevném gradientu */
.hero-bubble__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(
    135deg,
    hsl(var(--hero-avatar-h, 200), 65%, 58%),
    hsl(calc(var(--hero-avatar-h, 200) + 30), 65%, 42%)
  );
  border-radius: 999px;
  width: 36px;
  height: 36px;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(15, 26, 46, 0.12);
}

/* photo avatar – kulatý crop z portrétu (object-position: top → tvář nahoře) */
.hero-bubble__avatar--photo {
  background: var(--rz-bg-alt);
  padding: 0;
  overflow: hidden;
  margin: 0;
  width: 40px;
  height: 40px;
}
.hero-bubble__avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  /* fade-in po load (preventuje "pop" když obrázek doletí) */
  animation: hero-photo-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hero-photo-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* photo – reálná fotka zákazníka (Unsplash, lazy-load) */
.hero-bubble__photo {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--rz-bg-alt); /* placeholder než se obrázek načte */
  flex-shrink: 0;
  display: block;
}
.hero-bubble__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* subtle warm filter pro UGC feel napříč různými zdroji */
  filter: saturate(1.05) contrast(1.02);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-bubble:hover .hero-bubble__photo img {
  transform: scale(1.04);
}

/* ===================================================================
   STATE 1 – Stack (= list s avatary a fotkami) – DEFAULT
   Vertikální flow karet, bez rotace, plná šířka.
   =================================================================== */

.hero-stage--stack .hero-stage__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}
.hero-stage--stack .hero-bubble {
  display: grid;
  grid-template-columns: 1fr 72px;
  gap: 14px;
  align-items: center;
  transform: none !important;
}
.hero-stage--stack .hero-bubble:nth-child(4) { display: none; }
.hero-stage--stack .hero-bubble__photo {
  width: 72px;
  height: 72px;
  border-radius: 12px;
}
.hero-stage--stack .hero-bubble__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
/* V seznamovém (stack) layoutu je text recenze menší – karty jsou pod sebou
   a kratší řádky se čtou líp než plné 13.5px. */
.hero-stage--stack .hero-bubble__text {
  font-size: 12px;
  line-height: 1.45;
}

/* ===================================================================
   STATE 3 – Grid (masonry)
   4 dlaždice ve 2×2 mřížce, fotka dominuje, text je krátký excerpt.
   =================================================================== */

.hero-stage--grid .hero-stage__body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 8px 0;
}
.hero-stage--grid .hero-bubble {
  padding: 10px;
  gap: 8px;
  transform: none !important;
}
.hero-stage--grid .hero-bubble__photo {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 12px;
}
.hero-stage--grid .hero-bubble__text {
  font-size: 12.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 2px;
}
.hero-stage--grid .hero-bubble__head {
  padding: 0 2px;
}
.hero-stage--grid .hero-bubble:nth-child(2) { transform: translateY(16px) !important; }
.hero-stage--grid .hero-bubble:nth-child(3) { transform: translateY(-8px) !important; }

/* ===================================================================
   Embedded-context overrides
   Uvnitř widgetu (šedý podklad) chceme lehčí stíny a krotší masonry
   offset, aby karty neutíkaly mimo rám okna.
   =================================================================== */
.hero-widget .hero-bubble {
  box-shadow:
    0 1px 2px rgba(15, 26, 46, 0.04),
    0 6px 18px rgba(15, 26, 46, 0.06);
}
.hero-widget .hero-stage--grid .hero-bubble:nth-child(2) { transform: translateY(8px) !important; }
.hero-widget .hero-stage--grid .hero-bubble:nth-child(3) { transform: translateY(-4px) !important; }

/* ===================================================================
   STATE 4 – Carousel (image-first, 4 portréty vedle sebe)
   Čtyři rovnocenné karty s portrait fotkou, krátkým excerptem a
   meta-info dole. Mírný vertikální stagger vytváří masonry-feel.
   =================================================================== */

.hero-stage--carousel .hero-stage__body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-content: center;
  align-items: center;
  padding: 8px 0;
  min-height: inherit;
}
.hero-stage--carousel .hero-bubble {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* vertikální stagger – každá karta jinak posunutá pro masonry feel */
.hero-stage--carousel .hero-bubble:nth-child(1) { transform: translateY(0) !important; }
.hero-stage--carousel .hero-bubble:nth-child(2) { transform: translateY(16px) !important; }
.hero-stage--carousel .hero-bubble:nth-child(3) { transform: translateY(-8px) !important; }
.hero-stage--carousel .hero-bubble:nth-child(4) { transform: translateY(8px) !important; }

.hero-stage--carousel .hero-bubble__photo {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 0;
  flex-shrink: 0;
}
.hero-stage--carousel .hero-bubble__inner {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
}
.hero-stage--carousel .hero-bubble__text {
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-stage--carousel .hero-bubble__inner .hero-bubble__stars svg {
  width: 11px;
  height: 11px;
}
.hero-stage--carousel .hero-bubble .hero-bubble__author-name {
  font-size: 11.5px;
  white-space: normal;
}

/* ===================================================================
   Per-card View Transitions
   Každá bublina má stabilní view-transition-name přiřazený z JS
   (style="view-transition-name: bubble-r-1"). Prohlížeč sám animuje
   pozici/velikost mezi stavy. Sjednocený easing pro plynulý dojem.
   =================================================================== */

/* Hlavní snippet – soft spring s mírným bounceem na konci */
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 0.72s;
  animation-timing-function: cubic-bezier(0.34, 1.18, 0.42, 1);
}

/* Per-card stagger – každá bublina nastoupí o ~70ms později.
   Vytváří dojem "vlny", místo aby všechny karty migrovaly naráz. */
::view-transition-new(bubble-r-1) { animation-delay: 0ms; }
::view-transition-new(bubble-r-2) { animation-delay: 70ms; }
::view-transition-new(bubble-r-3) { animation-delay: 140ms; }
::view-transition-new(bubble-r-4) { animation-delay: 210ms; }

/* Old (mizící) verze odejde rychleji, aby se nepřekrývala s novou */
::view-transition-old(bubble-r-1),
::view-transition-old(bubble-r-2),
::view-transition-old(bubble-r-3),
::view-transition-old(bubble-r-4) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

/* Crossfade fallback (bez View Transitions API) – vlnitý sequence */
.hero-stage__body.is-leaving {
  opacity: 0;
  transition: opacity 0.28s ease;
}
.hero-stage__body.is-entering .hero-bubble {
  opacity: 0;
  animation: hero-bubble-in 0.55s cubic-bezier(0.34, 1.18, 0.42, 1) forwards;
}
.hero-stage__body.is-entering .hero-bubble:nth-child(1) { animation-delay: 0ms; }
.hero-stage__body.is-entering .hero-bubble:nth-child(2) { animation-delay: 70ms; }
.hero-stage__body.is-entering .hero-bubble:nth-child(3) { animation-delay: 140ms; }
.hero-stage__body.is-entering .hero-bubble:nth-child(4) { animation-delay: 210ms; }
@keyframes hero-bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===================================================================
   Responsive
   - Desktop: widget vedle copy v hero gridu
   - Mobile (<720): hero přejde na 1 sloupec (řízeno marketing-v7.css),
     widget se zúží – krotíme masonry offset a velikosti.
   =================================================================== */

@media (max-width: 720px) {
  .hero-stage { min-height: clamp(270px, 74vw, 380px); }

  .hero-frame__viewport { padding: 13px 12px 14px; }
  .hero-widget { padding: 13px; }
  .hero-widget__avg { font-size: 23px; }

  /* grid: 2 sloupce zachováme, ale bez Y-offsetů (čistší na mobilu) */
  .hero-stage--grid .hero-bubble:nth-child(2),
  .hero-stage--grid .hero-bubble:nth-child(3),
  .hero-widget .hero-stage--grid .hero-bubble:nth-child(2),
  .hero-widget .hero-stage--grid .hero-bubble:nth-child(3) { transform: none !important; }
}

/* ===================================================================
   Reduced motion – žádné tranzice, žádný autoplay
   (JS sám respektuje prefers-reduced-motion a vypne cyklus;
    tady jen zhladíme statický pohled).
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero-bubble:hover { transform: none !important; }
  .hero-stage__body.is-leaving,
  .hero-stage__body.is-entering { animation: none; transition: none; opacity: 1; }
}