/* ==========================================================================
   VENIRA — produktový popis (seop-venira-pd)

   OBSAH:
   01  Design tokeny .................. barvy, rádiusy, mezery, písmo
   02  Obal ........................... svislý rytmus mezi bloky
   03  Typografie ..................... nadpisy, odstavce, zvýraznění
   04  Blok: úvod ..................... přes celou šířku
   05  Blok: split .................... foto + text vedle sebe
   06  Blok: karta .................... barevný podklad bez fotky
   07  Blok: checklist ................ odrážky s fajfkou
   08  Blok: složky ................... celoširoké karty se štítkem
   09  Blok: rozbalovací seznam ....... FAQ, zavřené, otevřené se zvýrazní
   10  Blok: dlaždice ................. kontakty, rutiny
   11  Blok: tlačítko
   12  Blok: upozornění ............... tři sloupce se zlatými popisky
   13  Responzivita ................... 768 / 480 px
   ========================================================================== */


/* ==========================================================================
   01  DESIGN TOKENY
   Tady měň barvy a mezery pro celý popis najednou.
   ========================================================================== */

:root {
  /* Povrchy */
  --seop-venira-color-surface-soft: #F6F6F7;
  --seop-venira-color-surface-accent: #F5E2B9;
  --seop-venira-color-surface-card: #FFFFFF;
  --seop-venira-color-surface-image: #EAEAEA;

  /* Text */
  --seop-venira-color-text-strong: #000000;
  --seop-venira-color-text-body: inherit;
  --seop-venira-color-text-muted: #6B6B68;
  --seop-venira-color-text-accent: #C6A56B;

  /* Tlačítko */
  --seop-venira-color-cta: #000000;
  --seop-venira-color-cta-hover: #C6A56B;
  --seop-venira-color-cta-text: #FFFFFF;

  /* Rádiusy */
  --seop-venira-radius-xl: 20px;
  --seop-venira-radius-lg: 16px;
  --seop-venira-radius-md: 12px;
  --seop-venira-radius-sm: 4px;
  --seop-venira-radius-pill: 999px;

  /* Mezery */
  --seop-venira-space-xs: 8px;
  --seop-venira-space-sm: 12px;
  --seop-venira-space-md: 18px;
  --seop-venira-space-lg: 24px;
  --seop-venira-space-xl: 30px;
  --seop-venira-space-2xl: 44px;

  /* Písmo (vše v em, dědí se z šablony) */
  --seop-venira-fs-eyebrow: 0.72em;
  --seop-venira-fs-title: 1.3em;
  --seop-venira-fs-lead: 1.02em;
  --seop-venira-fs-text: 0.95em;
  --seop-venira-fs-small: 0.88em;
  --seop-venira-lh-text: 1.75;

  --seop-venira-transition: 200ms ease;
}


/* ==========================================================================
   02  OBAL
   Řídí mezery mezi bloky. Bloky samy vnější margin nemají,
   takže je můžeš libovolně přehazovat a mazat.
   ========================================================================== */

.seop-venira-pd {
  display: flex;
  flex-direction: column;
  gap: var(--_block-gap);
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  color: var(--seop-venira-color-text-body);

  --_block-gap: var(--seop-venira-space-2xl);
}

.seop-venira-pd * {
  box-sizing: border-box;
}


/* ==========================================================================
   03  TYPOGRAFIE
   Používá se uvnitř všech bloků. Duplicitní selektory kvůli tomu,
   aby to fungovalo na produktu, v článku, kategorii i na stránce.
   ========================================================================== */

.seop-venira-pd .seop-venira-title,
.type-post .seop-venira-pd .seop-venira-title,
.type-category .seop-venira-pd .seop-venira-title,
.type-page .seop-venira-pd .seop-venira-title,
.type-product .seop-venira-pd .seop-venira-title {
  display: block;
  padding: 0;
  margin: 0 0 var(--seop-venira-space-sm);
  background: none;
  font-family: inherit;
  font-size: var(--seop-venira-fs-title);
  font-weight: 700;
  line-height: 1.35;
  color: var(--seop-venira-color-text-strong);
}

.seop-venira-pd .seop-venira-text,
.type-post .seop-venira-pd .seop-venira-text,
.type-category .seop-venira-pd .seop-venira-text,
.type-page .seop-venira-pd .seop-venira-text,
.type-product .seop-venira-pd .seop-venira-text {
  display: block;
  padding: 0;
  margin: 0 0 var(--seop-venira-space-sm);
  font-family: inherit;
  font-size: var(--seop-venira-fs-text);
  line-height: var(--seop-venira-lh-text);
  color: var(--seop-venira-color-text-body);
}

.seop-venira-pd .seop-venira-text:last-child {
  margin-bottom: 0;
}

/* Perex pod hlavním nadpisem */
.seop-venira-pd .seop-venira-text--lead {
  font-size: var(--seop-venira-fs-lead);
}

/* Malý zlatý mezinadpis (Ranní rutina apod.) */
.seop-venira-pd .seop-venira-eyebrow {
  display: block;
  padding: 0;
  margin: var(--seop-venira-space-md) 0 var(--seop-venira-space-xs);
  background: none;
  font-family: inherit;
  font-size: var(--seop-venira-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--seop-venira-color-text-accent);
}

/* Štítek nad hlavním nadpisem */
.seop-venira-pd .seop-venira-badge {
  display: inline-block;
  padding: 5px 13px;
  margin: 0 0 var(--seop-venira-space-sm);
  border-radius: var(--seop-venira-radius-pill);
  background: var(--seop-venira-color-surface-accent);
  font-size: var(--seop-venira-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--seop-venira-color-text-strong);
}

/* Béžové zvýraznění názvu složky uvnitř věty */
.seop-venira-pd .seop-venira-mark {
  display: inline;
  padding: 1px 5px;
  border-radius: var(--seop-venira-radius-sm);
  background: var(--seop-venira-color-surface-accent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  color: var(--seop-venira-color-text-strong);
}

/* Zlatý akcent pro čísla a klíčové fráze */
.seop-venira-pd .seop-venira-accent {
  display: inline;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  color: var(--seop-venira-color-text-accent);
}

/* Tučný text zůstává součástí věty */
.seop-venira-pd strong,
.seop-venira-pd b {
  display: inline;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  color: var(--seop-venira-color-text-strong);
}

/* Odkaz v textu */
.seop-venira-pd .seop-venira-link,
.type-post .seop-venira-pd .seop-venira-link,
.type-category .seop-venira-pd .seop-venira-link,
.type-page .seop-venira-pd .seop-venira-link,
.type-product .seop-venira-pd .seop-venira-link {
  display: inline;
  transition: color var(--seop-venira-transition);
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  color: var(--seop-venira-color-text-strong);
}

.seop-venira-pd .seop-venira-link:hover,
.seop-venira-pd .seop-venira-link:focus {
  color: var(--seop-venira-color-text-accent);
}


/* ==========================================================================
   04  BLOK: ÚVOD
   Přes celou šířku, zarovnaný doleva.
   Modifikátor: --center (na střed)
   ========================================================================== */

.seop-venira-intro {
  display: block;
  width: 100%;
  text-align: left;
}

.seop-venira-intro--center {
  text-align: center;
}

.seop-venira-intro .seop-venira-title {
  --seop-venira-fs-title: 1.6em;
}


/* ==========================================================================
   05  BLOK: SPLIT (foto + text)
   Modifikátory:
   --reverse   foto na druhou stranu
   --framed    text i foto na barevném podkladu
   --accent    béžový podklad, kombinuj s --framed
   --narrow    menší foto pro dlouhé texty, text zarovnán nahoru
   --wide      foto na šířku 3:2
   --square    čtvercové foto
   --contain   foto bez ořezu
   ========================================================================== */

.seop-venira-split {
  display: flex;
  flex-direction: var(--_dir);
  align-items: center;
  gap: var(--_gap);
  padding: var(--_pad);
  border-radius: var(--seop-venira-radius-xl);
  background: var(--_surface);

  --_dir: row;
  --_gap: var(--seop-venira-space-lg);
  --_pad: 0;
  --_surface: transparent;
  --_media-size: 45%;
  --_media-ratio: 4 / 5;
  --_media-fit: cover;
  --_media-radius: var(--seop-venira-radius-lg);
}

.seop-venira-split--reverse {
  --_dir: row-reverse;
}

.seop-venira-split--framed {
  --_pad: var(--seop-venira-space-lg);
  --_surface: var(--seop-venira-color-surface-soft);
  --_media-size: 42%;
}

.seop-venira-split--accent {
  --_surface: var(--seop-venira-color-surface-accent);
}

.seop-venira-split--narrow {
  --_media-size: 34%;
  align-items: flex-start;
}

.seop-venira-split--wide {
  --_media-ratio: 3 / 2;
}

.seop-venira-split--square {
  --_media-ratio: 1 / 1;
}

.seop-venira-split--contain {
  --_media-fit: contain;
}

.seop-venira-split__media {
  flex: 0 0 var(--_media-size);
  width: var(--_media-size);
  max-width: var(--_media-size);
  padding: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--_media-radius);
  background: var(--seop-venira-color-surface-image);
}

.seop-venira-split__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--_media-ratio);
  object-fit: var(--_media-fit);
  object-position: center;
  border-radius: var(--_media-radius);
}

.seop-venira-split__body {
  flex: 1 1 auto;
  min-width: 0;
}


/* ==========================================================================
   06  BLOK: KARTA (barevný podklad, bez fotky)
   Modifikátor: --accent (béžová místo šedé)
   ========================================================================== */

.seop-venira-card {
  display: block;
  padding: var(--seop-venira-space-xl);
  border-radius: var(--seop-venira-radius-xl);
  background: var(--_surface);

  --_surface: var(--seop-venira-color-surface-soft);
}

.seop-venira-card--accent {
  --_surface: var(--seop-venira-color-surface-accent);
}


/* ==========================================================================
   07  BLOK: CHECKLIST (odrážky s fajfkou)
   Funguje samostatně i uvnitř splitu a karty.
   ========================================================================== */

.seop-venira-check {
  display: block;
  list-style: none;
  padding: 0;
  margin: var(--seop-venira-space-md) 0 0;
  background: none;

  --_icon-size: 18px;
  --_icon-url: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --_tile-surface: var(--seop-venira-color-surface-card);
}

/* Na volné ploše jsou dlaždice naopak šedé */
.seop-venira-pd > .seop-venira-check {
  --_tile-surface: var(--seop-venira-color-surface-soft);
}

.seop-venira-check > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  list-style: none;
  padding: 12px 16px;
  margin: 0 0 var(--seop-venira-space-xs);
  border-radius: var(--seop-venira-radius-md);
  background: var(--_tile-surface);
  font-size: var(--seop-venira-fs-small);
  line-height: 1.6;
}

.seop-venira-check > li:last-child {
  margin-bottom: 0;
}

.seop-venira-check > li::before {
  content: none;
}

.seop-venira-check > li::marker {
  content: none;
}

.seop-venira-check__icon {
  flex: 0 0 var(--_icon-size);
  width: var(--_icon-size);
  height: var(--_icon-size);
  margin-top: 2px;
  -webkit-mask-image: var(--_icon-url);
  mask-image: var(--_icon-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--seop-venira-color-text-accent);
}


/* ==========================================================================
   08  BLOK: SLOŽKY (celoširoké karty, štítek vlevo)
   Modifikátor: --accent (béžové podklady karet)
   Šířku štítku měň přes --_label-size.
   ========================================================================== */

.seop-venira-ing {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  background: none;

  --_label-size: 180px;
  --_surface: var(--seop-venira-color-surface-soft);
  --_label-surface: var(--seop-venira-color-surface-accent);
}

.seop-venira-ing--accent {
  --_surface: var(--seop-venira-color-surface-accent);
  --_label-surface: var(--seop-venira-color-surface-card);
}

.seop-venira-ing > li {
  display: flex;
  align-items: flex-start;
  gap: var(--seop-venira-space-md);
  list-style: none;
  padding: var(--seop-venira-space-md) 22px;
  margin: 0 0 10px;
  border-radius: var(--seop-venira-radius-lg);
  background: var(--_surface);
}

.seop-venira-ing > li:last-child {
  margin-bottom: 0;
}

.seop-venira-ing > li::before {
  content: none;
}

.seop-venira-ing > li::marker {
  content: none;
}

.seop-venira-ing__label {
  flex: 0 0 auto;
  min-width: var(--_label-size);
  padding: 6px 14px;
  border-radius: var(--seop-venira-radius-pill);
  background: var(--_label-surface);
  font-size: var(--seop-venira-fs-small);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--seop-venira-color-text-strong);
}

.seop-venira-ing__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--seop-venira-fs-small);
  line-height: 1.7;
  color: var(--seop-venira-color-text-body);
}


/* ==========================================================================
   09  BLOK: ROZBALOVACÍ SEZNAM (FAQ)
   Vše zavřené. Otevřená položka zežloutne a otázka ztuční.
   Čistě CSS přes <details>, bez JS.
   ========================================================================== */

.seop-venira-acc {
  display: block;

  --_surface: var(--seop-venira-color-surface-soft);
  --_surface-open: var(--seop-venira-color-surface-accent);
  --_icon-size: 18px;
  --_icon-plus: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  --_icon-minus: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

/* Uvnitř barevného rámečku jsou položky bílé */
.seop-venira-split .seop-venira-acc,
.seop-venira-card .seop-venira-acc {
  --_surface: var(--seop-venira-color-surface-card);
}

.seop-venira-acc__item {
  display: block;
  padding: 15px 20px;
  margin: 0 0 var(--seop-venira-space-xs);
  transition: background var(--seop-venira-transition);
  border-radius: var(--seop-venira-radius-md);
  background: var(--_surface);
}

.seop-venira-acc__item:last-child {
  margin-bottom: 0;
}

.seop-venira-acc__item:hover {
  background: var(--seop-venira-color-surface-image);
}

/* Otevřená položka */
.seop-venira-acc__item[open],
.seop-venira-acc__item[open]:hover {
  background: var(--_surface-open);
}

.seop-venira-acc__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-height: 28px;
  cursor: pointer;
  list-style: none;
  font-size: var(--seop-venira-fs-text);
  font-weight: 600;
  line-height: 1.5;
  color: var(--seop-venira-color-text-strong);
}

.seop-venira-acc__item[open] .seop-venira-acc__q {
  font-weight: 700;
}

.seop-venira-acc__q::-webkit-details-marker {
  display: none;
}

.seop-venira-acc__q::marker {
  content: none;
}

.seop-venira-acc__q::after {
  content: "";
  flex: 0 0 var(--_icon-size);
  width: var(--_icon-size);
  height: var(--_icon-size);
  margin-top: 3px;
  -webkit-mask-image: var(--_icon-plus);
  mask-image: var(--_icon-plus);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--seop-venira-color-text-accent);
}

.seop-venira-acc__item[open] .seop-venira-acc__q::after {
  -webkit-mask-image: var(--_icon-minus);
  mask-image: var(--_icon-minus);
  background-color: var(--seop-venira-color-text-strong);
}

.seop-venira-acc__a {
  display: block;
  padding: 0;
  margin: 10px 0 0;
  font-size: var(--seop-venira-fs-small);
  line-height: 1.75;
  color: var(--seop-venira-color-text-body);
}


/* ==========================================================================
   10  BLOK: DLAŽDICE (kontakty, rutiny)
   Modifikátory: --stack (jeden sloupec), --wide (širší dlaždice)
   ========================================================================== */

.seop-venira-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--_item-size), 1fr));
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: var(--seop-venira-space-md) 0 0;
  background: none;

  --_item-size: 240px;
  --_surface: var(--seop-venira-color-surface-soft);
}

.seop-venira-tiles--stack {
  --_item-size: 100%;
}

.seop-venira-tiles--wide {
  --_item-size: 320px;
}

.seop-venira-split--framed .seop-venira-tiles,
.seop-venira-card .seop-venira-tiles {
  --_surface: var(--seop-venira-color-surface-card);
}

.seop-venira-tiles > li {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  background: none;
}

.seop-venira-tiles > li::before {
  content: none;
}

.seop-venira-tiles > li::marker {
  content: none;
}

.seop-venira-tiles__tile,
.type-post .seop-venira-tiles__tile,
.type-category .seop-venira-tiles__tile,
.type-page .seop-venira-tiles__tile,
.type-product .seop-venira-tiles__tile {
  display: block;
  height: 100%;
  padding: 16px 18px;
  transition: background var(--seop-venira-transition);
  border-radius: var(--seop-venira-radius-md);
  background: var(--_surface);
  font-size: var(--seop-venira-fs-small);
  line-height: 1.65;
  text-decoration: none;
  color: var(--seop-venira-color-text-body);
}

a.seop-venira-tiles__tile:hover,
a.seop-venira-tiles__tile:focus {
  background: var(--seop-venira-color-surface-accent);
}

.seop-venira-tiles__tile strong {
  display: block;
  margin: 0 0 4px;
  font-size: 1.08em;
}


/* ==========================================================================
   11  BLOK: TLAČÍTKO
   ========================================================================== */

.seop-venira-pd .seop-venira-btn,
.type-post .seop-venira-pd .seop-venira-btn,
.type-category .seop-venira-pd .seop-venira-btn,
.type-page .seop-venira-pd .seop-venira-btn,
.type-product .seop-venira-pd .seop-venira-btn {
  display: inline-block;
  min-height: 44px;
  padding: 13px 24px;
  margin: var(--seop-venira-space-md) 0 0;
  transition: background var(--seop-venira-transition), color var(--seop-venira-transition);
  border-radius: 10px;
  background: var(--seop-venira-color-cta);
  font-size: var(--seop-venira-fs-small);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  color: var(--seop-venira-color-cta-text);
}

.seop-venira-pd .seop-venira-btn:hover,
.seop-venira-pd .seop-venira-btn:focus {
  background: var(--seop-venira-color-cta-hover);
  color: var(--seop-venira-color-text-strong);
}


/* ==========================================================================
   12  BLOK: UPOZORNĚNÍ (tři sloupce vedle sebe, zlaté popisky)
   Bez rámečku. Šířku sloupce měň přes --_item-size.
   ========================================================================== */

.seop-venira-note {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--_item-size), 1fr));
  gap: var(--seop-venira-space-md) var(--seop-venira-space-xl);
  list-style: none;
  padding: 0;
  margin: 0;
  background: none;

  --_item-size: 210px;
}

.seop-venira-note > li {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  background: none;
}

.seop-venira-note > li::before {
  content: none;
}

.seop-venira-note > li::marker {
  content: none;
}

.seop-venira-note__label {
  display: block;
  padding: 0;
  margin: 0 0 5px;
  background: none;
  font-size: var(--seop-venira-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--seop-venira-color-text-accent);
}

.seop-venira-note__text {
  display: block;
  padding: 0;
  margin: 0;
  font-size: var(--seop-venira-fs-small);
  line-height: 1.7;
  color: var(--seop-venira-color-text-body);
}


/* ==========================================================================
   13  RESPONZIVITA
   ========================================================================== */

@media (max-width: 767px) {
  .seop-venira-pd {
    --_block-gap: var(--seop-venira-space-xl);
    --seop-venira-space-xl: 20px;
  }

  .seop-venira-split {
    --_dir: column;
    --_gap: var(--seop-venira-space-md);
    --_media-size: 100%;
    --_pad: 0;
    align-items: stretch;
  }

  .seop-venira-split--reverse,
  .seop-venira-split--narrow {
    --_dir: column;
    --_media-size: 100%;
    align-items: stretch;
  }

  .seop-venira-split--framed {
    --_pad: var(--seop-venira-space-md);
  }

  .seop-venira-ing > li {
    flex-direction: column;
    gap: 10px;
    padding: var(--seop-venira-space-md);
  }

  .seop-venira-ing__label {
    min-width: 0;
    text-align: left;
  }

  .seop-venira-note {
    --_item-size: 100%;
    gap: var(--seop-venira-space-md);
  }

  .seop-venira-tiles {
    --_item-size: 100%;
  }

  .seop-venira-intro .seop-venira-title {
    --seop-venira-fs-title: 1.3em;
  }

  .seop-venira-pd .seop-venira-title {
    --seop-venira-fs-title: 1.15em;
  }

  .seop-venira-pd .seop-venira-btn {
    display: block;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .seop-venira-split {
    --_gap: var(--seop-venira-space-lg);
  }
}

@media (min-width: 1200px) {
  .seop-venira-split {
    --_gap: var(--seop-venira-space-xl);
  }

  .seop-venira-ing {
    --_label-size: 200px;
  }
}