/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.5.15,
* Autoprefixer: v10.5.0
* Browsers: last 4 version
*/

/* ============================================================
   BLOG — vychází 1:1 z LOCATIONS layoutu (stejný base soubor,
   jen přejmenovaný prefix loc- -> blog-, ať se to nemíchá).
   Použití:
   - .blog-intro-section / .blog-blocks-section / .blog-stack /
     .blog-block / .blog-side-label / .blog-media / .blog-gallery /
     .blog-copy ... -> INDEX stránka /blog/, jeden blok na
     každý článek, vertikální label = kategorie článku (přesně
     jak lokace, jen misto lokace je tam nazev kategorie clanku).
   - Nové třídy dole (.blog-article-*, .blog-faq-note) jsou navíc,
     jen pro jednotlivou stránku článku (single post) — v layoutu
     lokací nic takového nebylo, protože tam nebyl dlouhý text.
   ============================================================ */

/* ============================================================
   LOCATIONS PAGE — samostatné třídy (prefix blog-), nekoliduje
   s .locations-section na homepage. Vizuál (vertikální label,
   italic serif nadpisy, barvy) navazuje na stejný design systém,
   ale layout je nový: bloky pod sebou, ne horizontální strip,
   a fotka je teď mini-galerie s vlastním horizontálním scrollem.
   ============================================================ */

/* ── Intro (stejný vzor jako Investment intro) ─────────────── */
.blog-intro-section {
  padding-block: var(--section-pad-y) !important;
  padding-bottom: 56px !important;
  background-color: #fff !important;
}
/* Wrap se u ostatních sekcí centruje přes .blog-stack / .blog-article-*
   (max-width: var(--container-max), margin-inline:auto, padding-inline:
   var(--container-pad)) — přímo v této třídě, ne přes .pw-row. Intro
   sekce ale stojí na .pw-row samotné, a ta bez těchhle pravidel natvrdo
   nemusí být stejně vystředěná/odsazená jako bloky pod ní (proto byl
   nadpis na PC "moc vlevo" — jel na plnou šířku stránky místo do
   stejného centrovaného sloupce). !important stejně jako všude jinde. */
.blog-intro-section .pw-row {
  max-width: var(--container-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--container-pad) !important;
}
.blog-intro-section .eyebrow-label { display: block; margin-bottom: 12px; }
.blog-intro-heading {
  font-style: italic !important;
  font-weight: 300 !important;
  color: var(--text-primary) !important;
  font-size: var(--heading-lg) !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
  max-width: 720px;
}
.blog-intro-subtext {
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--text-secondary) !important;
  max-width: 560px;
  margin: 0 !important;
}

/* ── Location blocks (5x pod sebou) ─────────────────────────── */
.blog-blocks-section {
  background-color: #fff !important;
  padding-block: 16px var(--section-pad-y) !important;
}
.blog-stack {
  max-width: var(--container-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--container-pad) !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 88px;
}
.blog-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--gap-lg);
}
.blog-side-label {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--text-label);
  white-space: nowrap;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

/* Galerie + text — u sudých lokací (2., 4.) obrácené pořadí
   (text vlevo, galerie vpravo). Vertikální label zůstává mimo
   tohle .blog-media, takže se nikdy nepřehazuje. */
.blog-media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--gap-lg);
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
}
.blog-media--reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

/* Galerie fotek — víc fotek vedle sebe, scrolluje se jen uvnitř tohoto boxu.
   DŮLEŽITÉ: flex-basis MUSÍ mít pevnou hodnotu (ne "auto"), jinak si
   flexbox spočítá šířku podle SOUČTU všech fotek uvnitř (i těch mimo
   viditelnou oblast) a vezme prostor sloupci s textem — přesně tahle
   chyba způsobila to zborcené rozložení. */
.blog-gallery {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 clamp(340px, 36vw, 500px);
          flex: 0 0 clamp(340px, 36vw, 500px);
  width: clamp(340px, 36vw, 500px);
  max-width: clamp(340px, 36vw, 500px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  height: clamp(360px, 42vw, 540px);
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* Žádný scroll-snap: mandatory snap se pere s ručním posunem
     scrollLeft z JS hintu (prohlížeč se snaží dojet na nejbližší
     "zastávku" zatímco JS zároveň animuje pozici) — to způsobovalo
     tu trhanou/nesmyslně vypadající animaci (skok místo plynulého
     sunutí). !important natvrdo, protože i jen náznak mandatory
     snapu odjinud (globální styl webu apod.) tohle rozbije. */
  -ms-scroll-snap-type: none !important;
      scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch;
  background-color: var(--surface-tan);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.blog-gallery::-webkit-scrollbar { display: none; }
.blog-gallery-img {
  height: 100%;
  width: auto;
  max-width: none;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  scroll-snap-align: none !important;
  min-width: 1px; /* Zabrání smrsknutí na 0 */
  -webkit-transform: translateZ(0); /* Vynutí renderování při scrollu */
  transform: translateZ(0);
}

.blog-copy {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  max-width: 480px;
}
.blog-eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--text-label);
  margin: 0 0 10px;
}
.blog-title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  color: var(--primary-color);
  font-size: var(--heading-lg);
  line-height: 1.15;
  margin: 0 0 6px;
}
.blog-tags {
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 18px;
}
.blog-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.blog-bullets {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 2;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.blog-collections {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--primary-color);
  margin: 0;
}

@media (max-width: 960px) {
  .blog-gallery {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 clamp(280px, 42vw, 380px);
            flex: 0 0 clamp(280px, 42vw, 380px);
    width: clamp(280px, 42vw, 380px);
    max-width: clamp(280px, 42vw, 380px);
    height: clamp(300px, 50vw, 420px);
  }
}

@media (max-width: 680px) {
  .blog-stack { gap: 56px; }
  /* DŮLEŽITÉ: .blog-block NEpřepínáme na column! Na živých Lokacích
     zůstává na mobilu pořád row — vertikální label je NALEVO vedle
     celého media bloku (ne nad ním). Jen .blog-media uvnitř (foto +
     text) se zlomí pod sebe. Label i .blog-block gap zůstávají stejné
     jako na desktopu (žádný override tady), takže label pořád sedí
     vedle fotky vertikálně — přesně jak na referenčním screenshotu. */
  .blog-block {
    gap: 16px;
  }
  /* .blog-eyebrow uvnitř .blog-copy duplikuje stejnou kategorii, co
     .blog-side-label už ukazuje vedle fotky — na mobilu by se kategorie
     zobrazila dvakrát, tak tu druhou (ležatou, u titulku) schováváme. */
  .blog-eyebrow {
    display: none;
  }
  .blog-media,
  .blog-media--reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 100%;
  }
  .blog-gallery {
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    width: 100%;
    max-width: 100%;
    height: 62vw;
  }
  .blog-copy { max-width: none; }
}

/* ── Closing CTA (stejný vzor jako investment-cta-section) ──── */
.blog-cta-section {
  background-color: var(--secondary-color);
  padding-block: var(--section-pad-y);
  text-align: center;
  overflow: hidden;
}
.blog-cta-heading {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  color: var(--background-color);
  font-size: var(--heading-lg);
  line-height: 1.3;
  max-width: 560px;
  margin: 0 auto 16px;
}
.blog-cta-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--background-color);
  opacity: 0.9;
  max-width: 520px;
  margin: 0 auto 32px;
}
@media (max-width: 680px) {
  .blog-cta-heading { font-size: 24px; }
}


/* ============================================================
   BLOG — jednotlivý článek (single post)
   Hero + tělo článku ve stejné typografii jako zbytek webu.
   FAQ sekce dole záměrně NEMÁ vlastní blog-faq-* třídy — recykluje
   1:1 .faq-section/.faq-heading/.faq-list/.faq-item/.faq-question/
   .faq-answer/.faq-icon, přesně jak jsou už na webu (Investment
   stránka) — žádný guláš, jedna FAQ komponenta pro celý web.
   ============================================================ */

.blog-article-hero {
  background-color: #fff !important;
  padding-block: var(--section-pad-y) 0 !important;
}
.blog-article-hero-wrap {
  max-width: 820px !important;
  margin-inline: auto !important;
  padding-inline: var(--container-pad) !important;
}
.blog-article-category {
  display: block;
  margin-bottom: 14px;
}
.blog-article-title {
  font-family: var(--font-heading) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  color: var(--text-primary) !important;
  font-size: var(--heading-lg) !important;
  line-height: 1.18 !important;
  margin: 0 0 20px !important;
}
.blog-article-meta {
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-label) !important;
  margin: 0 0 36px !important;
}
.blog-article-featured-img {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.blog-article-featured-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
}

.blog-article-body-section {
  background-color: #fff !important;
  padding-block: 48px var(--section-pad-y) !important;
}
.blog-article-body {
  max-width: 720px !important;
  margin-inline: auto !important;
  padding-inline: var(--container-pad) !important;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-secondary);
}
.blog-article-body p { margin: 0 0 24px; }
.blog-article-body ul {
  margin: 0 0 24px;
  padding-left: 22px;
}
.blog-article-body li { margin: 0 0 10px; line-height: 1.7; }
.blog-article-body h2 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  color: var(--primary-color);
  font-size: var(--heading-md, 28px);
  line-height: 1.25;
  margin: 48px 0 18px;
}
.blog-article-body h2:first-child { margin-top: 0; }
.blog-article-body blockquote {
  margin: 0 0 24px;
  padding: 20px 24px;
  border-left: 2px solid var(--primary-color);
  background-color: var(--surface-tan);
  font-style: italic;
  color: var(--text-primary);
}
.blog-article-body a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Index karta má jen JEDNU fotku (featured image článku), ne
   víc fotek na horizontální scroll jako u lokací — takže tam
   nechceme width:auto (to by nechalo mezeru nebo useklo fotku
   podle poměru stran), ale klasický cover na celou plochu boxu. */
.blog-gallery-img.is-cover {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
}

/* People Also Ask — recyklovaná .faq-section, jen v užším sloupci
   ať sedí vizuálně pod text článku */
.blog-article-faq-wrap {
  max-width: 720px !important;
  margin-inline: auto !important;
  padding-inline: var(--container-pad) !important;
}
.blog-article-faq-wrap .faq-section { padding: 0 !important; }

@media (max-width: 680px) {
  .blog-article-title { font-size: 28px !important; }
  .blog-article-body { font-size: 16px; }
}