/* Fazonetka - stranka "Videa" - novy vzhled v1
   Stejny system jako nove stranky navodu (Jak zakoupit PDF / tistene strihy):
   Raleway cerne nadpisy, Roboto text, zaobleni 6 px, mezery 43 px mezi sekcemi,
   svetle modra = informace (tip, otazky), oranzova jen pro nakup.
   Pouze stranka /videa/ (body.in-videa). Bez zmeny HTML videi.
   Poradi na strance: uvod, casto kladene otazky, tip od Jany, videa.
   Pouziva existujici soubory fazonetka-videa-grid-v1.css, fazonetka-videa-zoom-v2.css
   a fazonetka-videa-faq-v3.css - tenhle soubor se vklada v Zahlavi AZ ZA NE.
   Nove HTML: uvodni text (class fazonetka-video-intro, nahrazuje puvodni 2 odstavce)
   a blok "Tip od Jany" (class fazonetka-video-tip). */

body.in-videa {
  --v-ink: #000;
  --v-text: #1f1f1f;
  --v-blue: #2274A5;
  --v-soft: #E7F5FD;
  --v-r: 6px;
  --v-sec: 43px;
}

/* ---- sirka stejna jako homepage ---- */
body.in-videa .content-wrapper { max-width: none !important; }
@media (min-width: 1200px) {
  body.in-videa #content-wrapper.container-narrow { width: 93.34% !important; max-width: none !important; }
}
@media (min-width: 768px) {
  body.in-videa main#content { padding-left: 0; padding-right: 0; }
}

/* ---- nadpis stranky ---- */
body.in-videa .pageArticleDetail > header h1 {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  color: #000;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  margin: 10px 0 24px;
}

/* ---- poradi bloku: uvod, otazky, tip, videa ---- */
body.in-videa .pageArticleDetail [itemprop="about"] {
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: var(--v-text);
}
body.in-videa .pageArticleDetail [itemprop="about"] > * { order: 9; }
body.in-videa .pageArticleDetail [itemprop="about"] > h1 { display: none; }
/* prazdne zbytky v kodu stranky (prazdne odstavce a prazdne radky editoru za videi):
   nejsou videt, ale davaly dohromady cca 1200 px bileho mista pod videi */
body.in-videa .pageArticleDetail [itemprop="about"] > .row,
body.in-videa .pageArticleDetail [itemprop="about"] > p:not(:has(iframe)) { display: none; }
body.in-videa .pageArticleDetail [itemprop="about"] > .fazonetka-video-intro { order: 1; }
body.in-videa .pageArticleDetail [itemprop="about"] > .fazonetka-video-faq { order: 2; }
body.in-videa .pageArticleDetail [itemprop="about"] > .fazonetka-video-tip { order: 3; }
body.in-videa .pageArticleDetail [itemprop="about"] > .fazonetka-video-grid { order: 4; }

/* ---- uvodni text ---- */
body.in-videa .fazonetka-video-intro {
  box-sizing: border-box;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
body.in-videa .fazonetka-video-intro p {
  margin: 0 0 12px !important;
  padding: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--v-text);
}
body.in-videa .fazonetka-video-intro p:last-child { margin-bottom: 0 !important; }
body.in-videa .fazonetka-video-intro .fazonetka-video-intro__lead {
  margin-bottom: 16px !important;
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--v-ink);
  text-wrap: balance;
}

/* ---- videa (mrizka) ---- */
body.in-videa .fazonetka-video-grid {
  gap: 28px 24px !important;
  margin: var(--v-sec) 0 0 0 !important;
}
body.in-videa .fazonetka-video-lite,
body.in-videa .fazonetka-video-player {
  border-radius: var(--v-r) !important;
}
body.in-videa .fazonetka-video-lite img { border-radius: var(--v-r); }

/* ---- spolecne: pasy ---- */
body.in-videa .fazonetka-video-tip,
body.in-videa .fazonetka-video-faq {
  box-sizing: border-box;
  margin: var(--v-sec) 0 0 !important;
  background: var(--v-soft);
  border-radius: var(--v-r);
}
body.in-videa .fazonetka-video-tip *,
body.in-videa .fazonetka-video-faq * { box-sizing: border-box; }
body.in-videa .fazonetka-video-tip h2,
body.in-videa .fazonetka-video-faq h2 {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  color: var(--v-ink) !important;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 !important;
  padding: 0 !important;
}
body.in-videa .fazonetka-video-tip h2::before, body.in-videa .fazonetka-video-tip h2::after,
body.in-videa .fazonetka-video-faq h2::before, body.in-videa .fazonetka-video-faq h2::after { display: none; content: none; }

/* ---- tip od Jany ---- */
body.in-videa .fazonetka-video-tip {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px 36px;
  padding-left: max(36px, calc(50% - 500px));
  padding-right: max(36px, calc(50% - 500px));
}
body.in-videa .fazonetka-video-tip__ico {
  flex: 0 0 auto;
  width: 149px;
  height: 149px;
  border-radius: 50%;
  background: url("/user/documents/upload/DMupravy/fazonetka-tip-od-jany.png") center / cover no-repeat;
}
body.in-videa .fazonetka-video-tip h2 { font-size: 24px; text-align: left; }
body.in-videa .fazonetka-video-tip p {
  max-width: 780px;
  margin: 10px 0 0 !important;
  padding: 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--v-text);
}
body.in-videa .fazonetka-video-tip p:first-of-type { margin-top: 12px !important; font-size: 17px; }

/* ---- casto kladene otazky (svetle modry panel, bile radky, sipka vpravo) ---- */
body.in-videa .fazonetka-video-faq { padding: 30px 30px 32px; color: var(--v-text); }
body.in-videa .fazonetka-video-faq__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
}
body.in-videa .fazonetka-video-faq__title-wrap { grid-column: 2; display: block; text-align: center; }
body.in-videa .fazonetka-video-faq__star { display: none; }
body.in-videa .fazonetka-video-faq__title { font-size: 28px; text-align: center; }
body.in-videa .fazonetka-video-faq__note { grid-column: 3; flex: none; justify-content: flex-end; }
body.in-videa .fazonetka-video-faq__note img { display: block; width: auto; max-width: 260px; height: auto; max-height: 64px; }
body.in-videa .fazonetka-video-faq__list { display: grid; gap: 6px; }
body.in-videa .fazonetka-video-faq__item { margin: 0; background: #fff; border-radius: var(--v-r); border: 0; }
body.in-videa .fazonetka-video-faq__item summary {
  min-height: 0;
  padding: 15px 56px 15px 16px;
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: 16px;
  line-height: 1.35;
  color: #000;
  position: relative;
}
body.in-videa .fazonetka-video-faq__item summary:hover { color: var(--v-blue); }
body.in-videa .fazonetka-video-faq__plus { position: absolute; right: 14px; top: 50%; margin-top: -12px; }
body.in-videa .fazonetka-video-faq__plus::before { border-color: #1f1f1f; }
body.in-videa .fazonetka-video-faq__answer { padding: 0 56px 16px 16px; }
body.in-videa .fazonetka-video-faq__answer p {
  margin: 0 !important;
  font-size: 16px;
  line-height: 1.6;
  color: var(--v-text);
}
body.in-videa .fazonetka-video-faq__answer p + p { margin-top: 10px !important; }

/* ---- tablet ---- */
@media (max-width: 1000px) {
  body.in-videa .fazonetka-video-tip { padding-left: 32px; padding-right: 32px; }
}

/* ---- mobil ---- */
@media (max-width: 767px) {
  body.in-videa .pageArticleDetail > header h1 { font-size: 26px; margin-bottom: 18px; }
  body.in-videa .fazonetka-video-intro { text-align: center; }
  body.in-videa .fazonetka-video-intro p { font-size: 16px; }
  body.in-videa .fazonetka-video-intro .fazonetka-video-intro__lead { font-size: 19px; margin-bottom: 14px !important; }
  body.in-videa { --v-sec: 36px; }
  body.in-videa .fazonetka-video-grid { gap: 22px 0 !important; }

  body.in-videa .fazonetka-video-tip { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 18px; }
  body.in-videa .fazonetka-video-tip__ico { width: 117px; height: 117px; }
  body.in-videa .fazonetka-video-tip h2 { font-size: 22px; }
  body.in-videa .fazonetka-video-tip p, body.in-videa .fazonetka-video-tip p:first-of-type { font-size: 16px; }

  body.in-videa .fazonetka-video-faq { padding: 24px 12px 26px; }
  body.in-videa .fazonetka-video-faq__head { display: block; margin-bottom: 16px; }
  body.in-videa .fazonetka-video-faq__title { font-size: 24px; }
  body.in-videa .fazonetka-video-faq__note { display: none; }
  body.in-videa .fazonetka-video-faq__item summary { padding: 14px 44px 14px 14px; min-height: 56px; font-size: 16px; display: flex; align-items: center; }
  body.in-videa .fazonetka-video-faq__plus { right: 10px; }
  body.in-videa .fazonetka-video-faq__answer { padding: 0 14px 16px; }
  body.in-videa .fazonetka-video-faq__answer p { font-size: 15.5px; }
}