/*
 * Video recenze ve stylu Zápisník (polaroidy s videem na výšku, lepicí pásky),
 * stejně jako sekce videí v náhledu prodejky. Načítá se za webinar.css (proměnné
 * --w-*, pásky, lísteček, tlačítka): stránka /recenze/<číslo> a každá stránka,
 * která vkládá recenze_html() (prodejky).
 */

/* polaroid s videem */
.r-pol { position: relative; background: #fff; padding: 10px 10px 0; box-shadow: var(--w-stin); border-radius: 6px; margin: 0; }
.r-pol .w-paska { width: 84px; margin-left: -42px; top: -13px; }
.r-ram { position: relative; aspect-ratio: 9 / 16; border-radius: 3px; overflow: hidden; background-color: var(--w-bez);
  background-image: radial-gradient(var(--w-tecky) 1.1px, transparent 1.3px); background-size: 14px 14px; }
.r-ram video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; }
.r-pol figcaption { position: relative; padding: 9px 2px 11px; text-align: center; line-height: 1.25; }
.r-pol figcaption b { display: block; font-family: var(--w-ruka); font-weight: 400; font-size: 20px; overflow-wrap: anywhere; }
.r-pol figcaption small { display: block; font-size: 13px; color: var(--w-text-jemny); overflow-wrap: anywhere; }
.r-delka { display: inline-block; margin-top: 4px; background: var(--w-akcent-svetly); color: var(--w-text); font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 6px;
  font-variant-numeric: tabular-nums; }

/* mřížka a pás na prodejce (recenze_html) */
.r-videa { margin: 0; }
/* na telefonu videa pod sebou (jsou pak velká a dá se na ně kouknout), od tabletu dvě vedle sebe */
/* skládá se vedle sebe a na střed, aby poslední neúplná řada nekončila naprázdno */
.r-mrizka { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 14px; padding: 18px 0; }
.r-mrizka > * { width: 100%; }
.r-mrizka > :nth-child(odd) { transform: rotate(-1.2deg); }
.r-mrizka > :nth-child(even) { transform: rotate(1deg); }
.r-mrizka .r-pol figcaption b { font-size: 18px; }
.r-pas { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 22px 18px; margin: 0 -18px; scrollbar-width: thin; }
.r-pas > * { scroll-snap-align: center; }
.r-pas > :nth-child(odd) { transform: rotate(-1.4deg); }
.r-pas > :nth-child(even) { transform: rotate(1.2deg); }
.r-pas-pozn { display: block; text-align: center; font-size: 19px; color: var(--w-akcent-text); margin-top: 4px; }
.r-videa .r-text { align-self: start; }

/* stránka jedné recenze */
.v-recenze .r-stranka { padding: 6px 0 30px; }
.r-hlava { text-align: center; }
.r-hlava h1 { font-size: clamp(34px, 9.5vw, 62px); line-height: 1.06; margin: 4px 0 6px; overflow-wrap: anywhere; }
.r-kdo { color: var(--w-text-jemny); font-size: 16.5px; margin: 0 0 8px !important; }
.r-video-obal { width: min(380px, 100% - 56px); margin: 30px auto 8px; }
.r-velky { transform: rotate(-1.2deg); }
.r-velky figcaption b { font-size: 22px; }
.r-citat { margin: 26px 0 8px; }
.r-textova { margin-top: 34px; }
.r-citat p { font-size: 18px; margin: 0 !important; }
.r-zpet { text-align: center; padding: 22px 0 0; }
.v-recenze .r-dalsi { padding: 10px 0 46px; }
.r-dalsi h2 { text-align: center; font-size: clamp(26px, 6.4vw, 38px); margin-bottom: 4px; }

@media (min-width: 700px) {
  .r-mrizka { gap: 34px 26px; }
  .r-mrizka > * { width: calc((100% - 52px) / 3); }
  .r-pas { grid-auto-columns: 30%; margin: 0; padding: 22px 6px; }
  .r-pas-pozn { display: none; }
}
@media (min-width: 1000px) {
  .r-mrizka > * { width: calc((100% - 78px) / 4); }
  .r-pas { grid-auto-columns: 23%; }
}

/* dva sloupce od tabletu; osamělá poslední recenze v řadě pak jde na střed */
@media (min-width: 560px) and (max-width: 699px) {
  .r-mrizka > * { width: calc((100% - 14px) / 2); }
}