/* ===================================================================
   Widget placement presets – /widgets
   Each placement section sells the spot with dominant copy + a 3-preset
   visual switcher. Presets reuse the homepage hero look (hero-frame /
   hero-bubble from marketing/hero-stage.css) and are toggled client-side by
   marketing-widgets-presets.js (one panel visible, the rest hidden).

   Tokens inherited from marketing-v7.css (var(--rz-*)).
   =================================================================== */

/* ---- Section: text-dominant two-column, alternating sides --------------- */
.rz-home .rz-wplace {
  display: grid;
  /* Default (showcase right): copy gets the wider track, showcase the narrower. */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 32px 60px;
  align-items: center;
}
/* Explicit row + column placement + min-width:0. grid-row:1 keeps both items on
   the SAME row (without it, sparse auto-placement pushes the column-1 item to a
   new row = the visual drops below the text). min-width:0 stops either column's
   content (e.g. the 3-up strip) from expanding its track and overflowing. */
.rz-home .rz-wplace__copy { grid-column: 1; grid-row: 1; min-width: 0; }
.rz-home .rz-wplace__showcase { grid-column: 2; grid-row: 1; min-width: 0; }
/* side = "left" puts the showcase in the LEFT column. Keep the copy in the
   wider track by flipping the template, so the text stays dominant either way. */
.rz-home .rz-wplace--left { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.rz-home .rz-wplace--left .rz-wplace__showcase { grid-column: 1; grid-row: 1; }
.rz-home .rz-wplace--left .rz-wplace__copy { grid-column: 2; grid-row: 1; }

.rz-home .rz-wplace__title {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 10px 0 14px;
  color: var(--rz-text);
}
.rz-home .rz-wplace__lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--rz-text-muted);
  max-width: 46ch;
}
.rz-home .rz-wplace__points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.rz-home .rz-wplace__points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rz-text);
}
.rz-home .rz-wplace__points li svg {
  flex-shrink: 0;
  color: var(--rz-green);
}

/* ---- Showcase: segmented tabs + stage ---------------------------------- */
.rz-home .rz-wpreset { width: 100%; min-width: 0; }

.rz-home .rz-wpreset__tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  background: var(--rz-bg-alt, #f4f6f9);
  border: 1px solid rgba(15, 26, 46, 0.07);
  border-radius: 999px;
}
.rz-home .rz-wpreset__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--rz-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.rz-home .rz-wpreset__tab-ico { display: inline-flex; }
.rz-home .rz-wpreset__tab:hover { color: var(--rz-text); }
.rz-home .rz-wpreset__tab.is-active {
  background: var(--rz-white);
  color: var(--rz-text);
  box-shadow: 0 1px 2px rgba(15, 26, 46, 0.06), 0 4px 12px rgba(15, 26, 46, 0.08);
}

/* Stack all preset panels in a single grid cell so the stage always reserves
   the height of the TALLEST preset. Switching never changes the column height,
   so the copy on the other side can't jump. Inactive panels stay in layout
   (they only fade out – not display:none – which would collapse the height and
   reintroduce the jump). */
/* The single column is pinned to the container width (minmax(0,1fr)) – without
   it the implicit grid column sizes to the WIDEST panel's max-content (e.g. the
   3-up strip), which overflows past the copy column on the other side. */
.rz-home .rz-wpreset__stage { display: grid; grid-template-columns: minmax(0, 1fr); }
.rz-home .rz-wpreset__panel {
  grid-area: 1 / 1; /* every panel occupies the same cell, overlapping */
  min-width: 0;     /* allow inner grids to shrink instead of overflowing */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  /* The stage is as tall as the TALLEST preset, so a shorter active preset
     would otherwise sit at the top of the reserved area with empty space below
     it – making the centered copy column read as lower than the visual. Center
     the widget vertically in its cell so its midpoint lines up with the copy. */
  display: grid;
  align-content: center;
}
.rz-home .rz-wpreset__panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Let the widget / stage chain shrink to the column width too. */
.rz-home .rz-wpreset .hero-widget,
.rz-home .rz-wpreset .hero-stage,
.rz-home .rz-wpreset .hero-stage__body {
  min-width: 0;
}

/* Steady each stage body too, so a single preset doesn't collapse too short. */
.rz-home .rz-wpreset .hero-stage { min-height: clamp(260px, 22vw, 300px); }

/* Lift every preset's widget mockup onto a soft shadow so it reads as an
   elevated card that stands out from the section, instead of a flat block. */
.rz-home .rz-wpreset .hero-widget {
  box-shadow:
    0 1px 2px rgba(15, 26, 46, 0.04),
    0 14px 36px rgba(15, 26, 46, 0.08);
}

/* On the alt-band sections (Kategorie a sidebar, Stránka recenzí) the widget
   keeps the section background (--rz-bg-alt), so the shadow alone isn't enough
   to separate it from the band. Lift it onto a lighter surface as well, so the
   preset clearly stands out. The light sections (homepage, detail produktu)
   keep their background – it's already a shade darker than the band – and only
   gain the shadow above. */
.rz-home .section--alt .rz-wpreset .hero-widget {
  background: var(--rz-bg, #FAFAF7);
  border-color: rgba(15, 26, 46, 0.06);
}

/* Homepage section only: drop the initials avatar from the preview bubbles. */
.rz-home #widget-homepage .hero-bubble__avatar { display: none; }

/* Homepage carousel: 3 wider, equal-height columns. Each card is a 2-row grid –
   text (auto) on top, photo (1fr) filling everything below – so the card always
   ENDS with the photo, no white strip at the bottom. The card's overflow:hidden
   + border-radius round the photo's two bottom corners automatically. */
.rz-home #widget-homepage .hero-stage--carousel .hero-stage__body {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  align-content: stretch;
}
.rz-home #widget-homepage .hero-stage--carousel .hero-bubble {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  height: 100%;
}
.rz-home #widget-homepage .hero-stage--carousel .hero-bubble__photo {
  aspect-ratio: auto;
  min-height: 0;
  height: 100%;
}
/* Nudge the text block (name, rating, source, review text) a little lower. */
.rz-home #widget-homepage .hero-stage--carousel .hero-bubble__inner {
  padding-top: 30px;
}

/* Homepage presets differ in height (Mřížka is the tallest; Carousel and Bubliny
   are shorter). The stage reserves the tallest preset's height, so the centered
   (align-content:center) shorter presets get pushed down, leaving a gap below the
   tabs. Pin every homepage panel to the top so each preview sits right under the
   switcher; Mřížka fills the whole stage anyway, so it's unaffected. */
.rz-home #widget-homepage .rz-wpreset__panel { align-content: start; }

/* With the homepage previews pinned to the top, the vertically-centered copy
   column reads lower than the visual. Keep it centered but lift it part-way up –
   higher than dead-center, but not flush with the top of the switcher. */
.rz-home #widget-homepage .rz-wplace__copy { transform: translateY(-32px); }

/* Stránka recenzí: same story – the default "Souhrn + seznam" preset is shorter
   than the tallest, so centering drops it well below the tabs. Pin the panels to
   the top so the preview sits right under the switcher. */
.rz-home #widget-recenze .rz-wpreset__panel { align-content: start; }

/* Homepage grid: nudge both the text block and the photo a little lower. */
.rz-home #widget-homepage .hero-stage--grid .hero-bubble__inner {
  padding-top: 16px;
}
/* The review text otherwise sits cramped right under the source/rating row –
   give it a little breathing room so it drops closer to the photo. */
.rz-home #widget-homepage .hero-stage--grid .hero-bubble__text {
  margin-top: 7px;
}
.rz-home #widget-homepage .hero-stage--grid .hero-bubble__photo {
  margin-top: 10px;
}

/* Homepage section only: hide the "· před X min" timestamp (keep the source). */
.rz-home #widget-homepage .rz-wpreset__meta-time { display: none; }

/* Homepage section only: keep the full name (incl. surname initial) on one line.
   The carousel layout otherwise sets white-space:normal, which drops the "K."
   onto a second row. */
.rz-home #widget-homepage .hero-bubble__author-name { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .rz-home .rz-wpreset__panel { transition: none; }
}

/* ---- New layout: list (sidebar / under product) ------------------------ */
.rz-home .rz-wpreset .hero-stage--list .hero-stage__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.rz-home .rz-wpreset .hero-stage--list .hero-bubble {
  display: block;
  padding: 12px 14px;
  transform: none !important;
}
.rz-home .rz-wpreset .hero-stage--list .hero-bubble__inner { gap: 7px; }
.rz-home .rz-wpreset .hero-stage--list .hero-bubble__text {
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kategorie "Úzký sloupec": more breathing room between the author/avatar row
   and the review text so the text isn't crammed against the circle. */
.rz-home #widget-kategorie .hero-stage--list .hero-bubble__text {
  margin-top: 14px;
}

/* Stránka recenzí ("Souhrn + seznam" and "Seznam"): push the review text lower
   so it isn't crammed under the author row. Covers the list inside the summary
   preset too. */
.rz-home #widget-recenze .hero-stage--list .hero-bubble__text {
  margin-top: 14px;
}

/* Detail produktu (Pod produktem / Souhrn / Spotlight): the review text sits
   crammed right under the author/source row in every preset. Push it down a
   touch across the whole section so it isn't glued to the heading. */
.rz-home #widget-produkt .hero-bubble__text {
  margin-top: 8px;
}

/* ---- New layout: strip (a band of compact text reviews above a listing) --- */
.rz-home .rz-wpreset .hero-stage--strip .hero-stage__body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-content: center;
  padding: 8px 0;
}
.rz-home .rz-wpreset .hero-stage--strip .hero-bubble {
  padding: 14px 14px 13px;
  gap: 9px;
  min-width: 0; /* let cards shrink (text clamps) instead of overflowing */
  transform: none !important;
}
/* Rating row sits on top, author/source below the quote – a clean, photo-free
   testimonial card. */
.rz-home .rz-wpreset .hero-stage--strip .hero-bubble__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Attribution on top (name + source/time), review text below. The head wraps so
   the rating drops to its own line and never squeezes the name. */
.rz-home .rz-wpreset .hero-stage--strip .hero-bubble__head {
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 6px;
}
/* Drop the initials avatar here for more room. */
.rz-home .rz-wpreset .hero-stage--strip .hero-bubble__avatar { display: none; }
.rz-home .rz-wpreset .hero-stage--strip .hero-bubble__author-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.rz-home .rz-wpreset .hero-stage--strip .hero-bubble__stars {
  flex-basis: 100%;
}
.rz-home .rz-wpreset .hero-stage--strip .hero-bubble__text {
  font-size: 12.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- New layout: spotlight (one big review, photo on top) -------------- */
.rz-home .rz-wpreset .hero-stage--spotlight .hero-stage__body {
  display: flex;
  padding: 6px 0;
}
.rz-home .rz-wpreset .hero-stage--spotlight .hero-bubble {
  display: flex;
  flex-direction: column-reverse; /* photo (last child) sits on top */
  gap: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  transform: none !important;
}
.rz-home .rz-wpreset .hero-stage--spotlight .hero-bubble__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}
.rz-home .rz-wpreset .hero-stage--spotlight .hero-bubble__inner {
  padding: 14px 16px 16px;
  gap: 9px;
}
.rz-home .rz-wpreset .hero-stage--spotlight .hero-bubble__text {
  font-size: 14px;
  line-height: 1.5;
}

/* ---- Aggregate summary block (avg + stars + rating breakdown) ----------- */
.rz-home .rz-wpreset__summary {
  display: grid;
  gap: 12px;
  padding: 2px 2px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(15, 26, 46, 0.08);
}
.rz-home .rz-wpreset__summary-score {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rz-home .rz-wpreset__summary-score strong {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rz-text);
  line-height: 1;
}
.rz-home .rz-wpreset__summary-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rz-text-muted);
}
.rz-home .rz-wpreset__bars { display: grid; gap: 6px; }
.rz-home .rz-wpreset__bar {
  display: grid;
  grid-template-columns: 26px 1fr 34px;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rz-text-muted);
}
.rz-home .rz-wpreset__bar i {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 26, 46, 0.08);
  overflow: hidden;
}
.rz-home .rz-wpreset__bar b {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--rz-amber);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
  .rz-home .rz-wplace,
  .rz-home .rz-wplace--left {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Single column: copy on top, showcase below, regardless of side. */
  .rz-home .rz-wplace__copy,
  .rz-home .rz-wplace--left .rz-wplace__copy { grid-column: 1; grid-row: 1; }
  .rz-home .rz-wplace__showcase,
  .rz-home .rz-wplace--left .rz-wplace__showcase { grid-column: 1; grid-row: 2; }
  .rz-home .rz-wplace__lead { max-width: none; }
}
@media (max-width: 560px) {
  .rz-home .rz-wpreset__tabs { display: flex; width: 100%; }
  .rz-home .rz-wpreset__tab { flex: 1; justify-content: center; padding: 8px 6px; }
}

/* Reduced motion – no stage fade. */
@media (prefers-reduced-motion: reduce) {
  .rz-home .rz-wpreset__stage { transition: none; }
}