/* =========================
   THEME TOKENS
   ========================= */

 /* rammetto-one-latin-400-normal */
@font-face {
  font-family: 'Rammetto One';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/rammetto-one@latest/latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/rammetto-one@latest/latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* cabin-latin-wght-normal */
@font-face {
  font-family: 'Cabin Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/cabin:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* syne-latin-wght-normal */
@font-face {
  font-family: 'Syne Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/syne:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ---- Fonts ---- */
  --font-body: 'Cabin Variable', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
  --font-head: 'Rammetto One';
  --font-headings: 'Syne Variable';
  --font-ui: var(--font-body);

  --dark-col: #00082F;
  --semidark-col: #353C52;
  --light-col: #684F7E;
  --accent1: #DD768C;
  --accent2: #FDB29F;

  --yellow-col: #CAD2CB;
  
  /* ---- Typography ---- */
  --lh: 1.5;

  /* ---- Base colors (RGB triplets for easy rgba()) ---- */
  --c-text: 17 17 17;          /* #111 */
  --c-bg: 255 255 255;         /* page base */
  --c-stage: 0 0 0;            /* stage background */

  --c-white: 255 255 255;
  --c-black: 0 0 0;

  /* ---- Borders / surfaces ---- */
  --c-border: 0 125 0;           /* used with alpha */
  --c-surface: 255 125 255;    /* cards/panels */

  /* ---- Overlay / dim ---- */
  --c-dim: 0 0 0;

  /* ---- Alphas ---- */
  --a-border-strong: .60;
  --a-border: .15;
  --a-border-soft: .12;

  --a-pill-bg: .55;
  --a-pill-border: .20;

  --a-surface-strong: .95;
  --a-surface: .75;
  --a-surface-soft: .45;
  --a-surface-softer: .35;
  --a-surface-ui: .70;

  --a-modal-backdrop: .55;

  /* ---- Radii ---- */
  --r-pill: 999px;
  --r-xs: 8px;
  --r-sm: 8px;
  --r-md: 8px;
  --r-lg: 8px;
  --r-xl: 8px;

  /* ---- Spacing ---- */
  --pad-x: 3vw;
  --pad-y: 5vh;

  /* ---- Component sizes ---- */
  --dots-right: 14px;
  --dots-gap: 10px;
  --dot-size: 10px;

  --card-w: 500px;
  --card-media-h: 400px;

  /* ---- Shadows (optional) ---- */
  --shadow-soft: 0 2px 10px rgba(0,0,0,.15);

  /* ---- Hero theme hooks ---- */
  --hero-bg: rgb(var(--c-black));
  --hero-wipe: rgb(var(--c-white));
}

/* =========================
   BASE
   ========================= */
*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
  overscroll-behavior-y: none;
}

#stage{
 overscroll-behavior: none;
}

body{
  overflow: hidden;
  font-family: var(--font-body);
  line-height: var(--lh);
  color: rgb(var(--c-text));
  background: rgb(var(--c-bg));
  font-size: 1.1rem;
}

a {
color: var(--accent1);
text-decoration: none;
}

a:hover {text-decoration: underline;}

#stage{
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: rgb(var(--c-stage));
  touch-action: pan-y;
}

/* FULLFRAME sections */
.snap-section{
  position: absolute;
  inset: 0;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  will-change: transform;
  transform: translateY(0);
  overflow: hidden;
}

.section-inner{
  width: 100%;
  height: 100%;
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;

  overflow-y: auto;             /* <— KLÍČ: obsah se scrolluje uvnitř sekce */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

h1, h2, h3{
  margin: 0;
  font-family: var(--font-headings);
  font-weight: 700;
  padding-bottom: 0.5rem;
}

p{ margin: 0; max-width: 70ch; padding: 0.5em 0; }

.hint{ opacity: .75; font-size: 14px; }

/* =========================
   PILL
   ========================= */
.pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(var(--c-border), var(--a-pill-border));
  background: rgba(var(--c-surface), var(--a-pill-bg));
  border-radius: var(--r-pill);
  padding: 6px 10px;
  font-size: 12px;
  opacity: .9;
  user-select: none;
  width: max-content;
  font-family: var(--font-ui);
}

/* =========================
   BACKGROUNDS for non-hero
   ========================= */

.s2{ background-color: var(--dark-col); color: white;}
.s3{ background-color: black; color: white}
.s4{ background-color: var(--dark-col); color: white;}
.s5{ background-color: black; color: var(--yellow-col);}
.s6{ background-color: var(--dark-col); color: white; text-align: right; }
.s7{ background-color: black; color: white;}
.s8{ background-color: var(--dark-col); color: var(--yellow-col);}
.s9{ background-color: black; color: white}
.sBlack { background-color: black; color: var(--yellow-col);}
.sBlue { background-color: var(--dark-col); color: white;}



/* =========================
   OPTIONAL inner scroll area
   ========================= */
.inner-scroll{
  max-height: 45vh;
  overflow: auto;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--c-border), var(--a-border));
  background: rgba(var(--c-surface), var(--a-surface-softer));
  max-width: 80ch;
}

/* =========================
   NAV DOTS
   ========================= */
.dots{
  position: fixed;
  right: var(--dots-right);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--dots-gap);
  z-index: 9999;
  pointer-events: auto;

  /* Always visible on dark/light backgrounds */
  background: rgba(var(--c-surface), .55);
  border: 1px solid rgba(var(--c-border), var(--a-border-soft));
  padding: 10px 10px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(10px);
}

.dot{
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 999px;
  border: 1px solid rgba(var(--c-border), .45);
  background: rgba(var(--c-surface), .75);
  cursor: pointer;
  padding: 0;
}
.dot.active{
  background: rgba(var(--c-black), .78);
}

/* =========================
   HERO gated
   ========================= */
.hero{
  --wipe: 0;
  --titleR: 0;
  --dialogA: 0;
  background: var(--hero-bg);
  color: rgb(var(--c-white));
  overflow: hidden;
  position: relative;
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-wipe);
  transform: translateY(calc(100% - (var(--wipe) * 100%)));
  will-change: transform;
  z-index: 1;
}

.hero-center{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: var(--pad-y) var(--pad-x);
}

.hero-content{
  width: 100%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap: 4vw;
  align-items: center;
}

.hero-left{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.hero-mark-png{
  position: relative;
  width: min(45vw, 650px);
  max-height: 60vh;
  height: auto;
  aspect-ratio: 300 / 220;
  filter: drop-shadow(var(--shadow-soft));
}

.hero-mark-png .mark{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.hero-mark-png .mark-white{ opacity: calc(1 - var(--wipe)); }
.hero-mark-png .mark-black{ opacity: var(--wipe); }

.hero-right{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
}

.hero-title{
  font-weight: 800;
  letter-spacing: .02em;
  line-height: .92;
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(44px, 4vw, 70px);
}

.hero-title.rad{
  color: rgb(var(--titleR), var(--titleR), var(--titleR)) !important;
}

.hero-title.dia{
  color: rgb(var(--c-black));
  opacity: var(--dialogA);
  transform: translateY(calc((1 - var(--dialogA)) * 10px));
  transition: opacity 0ms, transform 0ms;
}
.hero-hint{
  margin-top: 18px;
  font-size: 20px;
  opacity: .75;
  max-width: 35ch;
  /*color: rgba(var(--c-black), .70);*/
  color: var(--semidark-col);
  mix-blend-mode: multiply;
  font-family: var(--font-ui);
}
.hero[data-hero-state="0"] .hero-hint{ opacity: 0; }

/* =========================
   BILINGUAL
   ========================= */
/* =========================
   BILINGUAL (shared image)
   ========================= */

[data-bilingual]{
  position: relative;
  width: 100%;
  height: 100%;                 /* sedí na 100vh sekce */
  overflow-x: hidden;           /* horizontální posuv řeší track */
  overflow-y: auto;             /* ✅ tady vznikne vnitřní scroll */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  --bi: 0; /* 0 = EN, 1 = CZ */
}


/* fallback pro prohlížeče bez overflow: clip */


/* track a panes */
.bilingual-track{
  display: flex;
  width: 200%;
  transform: translateX(0%);
  will-change: transform;
  height: 100%;
}

.bilingual-pane{
  width: 50%;
  height: 100%;
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;

  position: relative;
  z-index: 3; /* text nad obrázkem */
}

/* ---------- shared image (one image for both languages) ---------- */
.bio-media.shared{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(
  calc(-50% + ((0.5 - var(--bi)) * 70vw)),
  -50%
);

  z-index: 2;
  pointer-events: none;

  display: flex;
  align-items: center;
  justify-content: center;
}

.bio-media.shared img{
  width: min(260px, 22vw);
  max-height: 56vh;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

/* EN (1st pane): make room on the right for the shared image */
.bilingual-pane:nth-child(1) .bio-text{
  padding-right: clamp(220px, 24vw, 360px);
}



/* CZ (2nd pane): make room on the left + align text right */
.bilingual-pane:nth-child(2){
  text-align: right;
}
.bilingual-pane:nth-child(2) .bio-text{
  padding-left: clamp(220px, 24vw, 360px);
  margin-left: auto;
}
.bilingual-pane:nth-child(2) .bio-text p{
  margin-left: auto;
}

/* bilingual UI */
.bilingual-ui{
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  z-index: 4;
}

/* mobile card default OFF */
.bio-mobile-card{ display: none; }

/* mobile-only ON */
@media (max-width: 1100px){
  .bio-mobile-card{
    display: block;
    width: 100%;
    height: 300px;
    margin: 0 0 14px;
    border-radius: var(--r-xl);
    border: 1px solid rgba(var(--c-border), var(--a-border-soft));
    box-shadow: var(--shadow-soft);

    /* místo shared image: použijeme background (lehké, bez layout bojů) */
    background:
      linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0)),
      url("assets/img/portrait.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* text ať nezačíná uprostřed sekce */
  .bilingual-pane{
    justify-content: flex-start;
    padding-top: 18px;
    padding-bottom: 18px;
  }
}

@media (max-width: 1100px){
  [data-bilingual]{
    overflow-x: hidden;
    overflow-y: auto;           /* ✅ musí zůstat */
  }


  .bio-media.shared{ display: none !important; }

  /* zruš velké rezervy – na mobilu nemají smysl */
  .bilingual-pane:nth-child(1) .bio-text,
  .bilingual-pane:nth-child(2) .bio-text{
    padding: 0;
    margin: 0;
  }
  
  .bilingual-pane:nth-child(2){
    text-align: left;
  }

  /* ať text nepoleze do fotky */
  .bilingual-pane .bio-text{
    padding-bottom: clamp(120px, 18vh, 180px);
  }
}

/* FIX: mobile – bilingual content must be allowed to grow vertically,
   otherwise it gets clipped and section-inner cannot scroll */
@media (max-width: 1100px){

  /* držíme overflow skryté kvůli horizontálnímu posuvu (EN/CZ),
     ale výška se musí odvíjet od obsahu */


  .bilingual-track{
    height: auto;      /* bylo 100% -> problém */
    align-items: stretch;
  }

  .bilingual-pane{
    height: auto;      /* bylo 100% -> problém */
    min-height: 0;
    justify-content: flex-start; /* ať to netlačí doprostřed */
    padding: 18px var(--pad-x) 22px;
  }

  /* když používáš mobile card, ať je vždy nahoře vidět */
  .bio-mobile-card{
    margin-top: 6px;
  }

  /* zruš tenhle hack, pokud ho máš (zbytečně zvyšuje chaos layoutu) */
  .bilingual-pane .bio-text{
    padding-bottom: 0 !important;
  }
}


/* =========================
   CAROUSEL (manual only)
   ========================= */
.carousel{
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(var(--c-border), var(--a-border));
  background: rgba(var(--c-surface), .25);
  padding: 10px 0;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

.carousel-track{
  display: flex;
  width: max-content;
  will-change: transform;
  transform: translateX(0px);
  cursor: grab;
  user-select: none;
  touch-action: pan-x;
}

.carousel-track:active{ cursor: grabbing; }

/* Cards for dynamic items */
.card{
  position: relative;
  flex: 0 0 auto;
  width: var(--card-w);
  margin: 10px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(var(--c-border), var(--a-border));
  background: rgba(var(--c-surface), var(--a-surface));
  overflow: hidden;
}

.card-media{
  width: 100%;
  height: var(--card-media-h);
  background: rgba(var(--c-black), .08);
  background-size: cover;
  background-position: center;
}

.card-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
  color: rgb(var(--c-white));
  opacity: 0;
  background: rgba(var(--c-black), 0);
  transition: opacity .15s ease, background .15s ease;
}
.card:hover .card-overlay{
  opacity: 1;
  background: rgba(var(--c-black), .35);
}
.card-title{ font-weight: 700; font-family: var(--font-headings); }
.card-meta{ opacity: .9; font-size: 13px; font-family: var(--font-headings); font-weight: 100; }

/* UI under carousels */
.carousel-ui{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.btn{
  border: 1px solid rgba(var(--c-border), .20);
  background-color: var(--semidark-col);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  color: white;
}

/* About language helper buttons */
.bio-lang{
  margin-top: 8px;
  width: max-content;
}

.modal-close{
  appearance: none;
  -webkit-appearance: none;
  position: sticky;
  top: 0;
  width: 100%;
  text-align: right;
  font-size: 28px;
  padding: 10px 14px;

  /* always visible over dark modal content */
  background: rgba(0,0,0,.65);
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  color: rgb(var(--c-white));
}


/* click affordance */
.carousel-track .card,
.carousel-track a,
.carousel-track [role="button"]{
  cursor: pointer;
}

/* =========================
   MODAL
   ========================= */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}

.modal[aria-hidden="false"]{ display: block; }

.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(var(--c-dim), var(--a-modal-backdrop));
}

.modal-panel{
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
  background-color: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(980px, 92vw);
  height: min(86vh, 900px);
 /* background: rgba(var(--c-surface), var(--a-surface-strong));*/
  border-radius: var(--r-xl);
  overflow: auto;
  border: 2px solid var(--semidark-col);
  color: white;
  font-family: var(--font-body);
  padding: 1em;
}

.modal-panel,
.modal-panel *{
  box-sizing: border-box;
}

.modal-panel h1{
  margin: 0 0 1em;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.15;
  letter-spacing: .01em;
}

.modal-panel .hint{
  margin-bottom: 14px;
}

.modal-panel a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.modal-panel a:focus-visible,
.modal-close:focus-visible,
.btn:focus-visible,
.dot:focus-visible{
  outline: 3px solid rgba(0,0,0,.55);
  outline-offset: 3px;
}

@media (max-width: 720px){
  .modal-panel{
    left: 0;
    top: 0;
    transform: none;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}

.modal-body{ padding: 10px 18px 24px;}

/* WP content inside modal */
.wp-content img{ max-width: 100%; height: auto; }
.wp-content p{ margin: 0 0 12px; }
.wp-content h2,
.wp-content h3{ margin: 18px 0 8px; }
.wp-content ul{ margin: 8px 0 14px 18px; }

/* =========================
   BLOG LIST (simple)
   ========================= */
.bloglist{
  max-width: 90ch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bloglist-head{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.bloglist-items{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blogitem{
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--c-border), var(--a-border-soft));
  background: rgba(var(--c-surface), var(--a-surface-soft));
  cursor: pointer;
}
.blogitem:hover{
  background: rgba(var(--c-surface), .62);
}

.blogitem-title{
  font-weight: 800;
  margin-bottom: 4px;
  font-family: var(--font-head);
}

.blogitem-meta{
  font-size: 12px;
  opacity: .75;
  margin-bottom: 8px;
  font-family: var(--font-ui);
}

.blogitem-excerpt{
  font-size: 14px;
  opacity: .9;
  font-family: var(--font-body);
}

.posts-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* mobil */
@media (max-width: 820px){
  .posts-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================
   MOBILE LAYOUT FIXES
   ========================= */

@media (max-width: 900px){
  :root{
    --pad-x: 5vw;
    --pad-y: 5vh;
    --card-w: 82vw;
    --card-media-h: 82vw;
    --dots-right: 10px;
    --dots-gap: 8px;
    --dot-size: 9px;
  }

  .hero-center{ padding: var(--pad-y) var(--pad-x); }

  .hero-content{
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }

  .hero-left{
    justify-content: center;
  }

  .hero-mark-png{
    width: min(86vw, 520px);
    max-height: 38vh;
  }

  .hero-right{
    align-items: center;
    text-align: center;
  }

  .hero-title{
    font-size: clamp(34px, 10vw, 56px);
    line-height: 0.95;
  }

  .hero-hint{
    max-width: 60ch;
    margin-top: 10px;
  }

  /* Carousels: more breathing room */
  .carousel{
    border-radius: var(--r-lg);
  }
  .card{
    margin: 10px 12px;
  }
}

@media (max-width: 640px){
  .dots{
    right: 50%;
    top: auto;
    bottom: 14px;
    transform: translateX(50%);
    flex-direction: row;
    background: rgba(var(--c-surface), .55);
    border: 1px solid rgba(var(--c-border), var(--a-border-soft));
    padding: 8px 10px;
    border-radius: var(--r-pill);
    backdrop-filter: blur(8px);
  }
}



/* =========================
   ACCESSIBILITY
   ========================= */
@media (prefers-reduced-motion: reduce){
  .snap-section{ will-change: auto; }
  .hero::before,
  .bilingual-track,
  .carousel-track{
    transition: none !important;
  }
}

/* ===== NAV DOTS: make them solid + high contrast (override theme surface) ===== */
.dots{
  background: rgba(0,0,0,.55);          /* místo rgba(var(--c-surface), .55) */
  border-color: rgba(255,255,255,.22);
  backdrop-filter: none;                /* lepší čitelnost + výkon */
}

.dot{
  background: rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.55);
}

.dot.active{
  background: rgba(255,255,255,.95);    /* aby byla aktivní vždy vidět */
  transform: scale(1.15);
}

.dot:focus-visible{
  outline: 3px solid rgba(255,255,255,.85);
  outline-offset: 3px;
}

.card-badge{
  position:absolute;
  right:10px;
  top:10px;
  font-size:14px;
  line-height:1;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
}
.card-media{
  position: relative;
  overflow: hidden;
}

.card-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* když chceš vyplnit i za cenu ořezu, dej cover */
  pointer-events: none; /* aby klik šel na kartu */
  background: rgba(0,0,0,.08);
}

/* Two-column inner layout (desktop) -> stacked (mobile) */
.inner-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  width: 100%;
  max-width: none;
}

/* grid children must be allowed to shrink */
.inner-container > *{
  min-width: 0;
}

/* ===== FULL-BLEED: extend to viewport edges, ignoring parent padding ===== */
.inner-container.full-bleed{
  width: calc(100% + (2 * var(--pad-x)));
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));
  max-width: none;
}

.inner-container ul{
  list-style: none;
  list-style-type: none;
  list-style-image: none;

  margin: 0;
  padding: 0;
  padding-left: 0;

  /* pro jistotu i v některých prohlížečích */
  -webkit-padding-start: 0;
}


.left-column{
  text-align: left;
  width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.right-column{
  text-align: right;
  width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-right: 2em;
}

.center-column{
  text-align: center;
  width: 100%
}

/* Mobile: stack */
@media (max-width: 900px){
  .inner-container{
    grid-template-columns: 1fr;
  }

  .right-column{
    text-align: left;
    padding-right: 0;
  }
}

/* =========================
   SOLE IMAGE SECTION
   ========================= */

/* když chceš v sekci jen obrázek a nic dalšího */
.sole-img{
  display: flex;
  align-items: center;     /* vertikálně */
  justify-content: center; /* horizontálně */
  padding: 0;
}

.sole-img-right{
  display: flex;
  align-items: center;     /* vertikálně */
  justify-content: right; /* horizontálně */
  padding: 0;
  width: 100%;
  height: 100%;
  padding: 2em;
}

.sole-img-left{
  display: flex;
  align-items: center;     /* vertikálně */
  justify-content: left; /* horizontálně */
  padding: 0;
  width: 100%;
  height: 100%;
  padding: 2em;
}

/* upravené img: responsivní, drží ratio, neprotáhne se */
.soil-img{
  display: block;
  border: 0;

  width: max(400px); /* můžeš změnit max px */
  height: auto;            /* ✅ zachová ratio */
  max-height: 90vh;        /* aby nepřetekl z výšky */
  object-fit: contain;     /* pro jisttu */
}

.soil-img-small{
  display: block;
  border: 0;

  width: max(200px); /* můžeš změnit max px */
  height: auto;            /* ✅ zachová ratio */
  max-height: 90vh;        /* aby nepřetekl z výšky */
  object-fit: contain;     /* pro jisttu */
}

.footer {
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: var(--font-headings);
  font-size: 0.9rem;
}

/* Quote container: fills parent section, centers content */
.quote-div{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;      /* vertical center */
  justify-content: center;  /* horizontal center */
  text-align: center;
}

/* Stack quote + author, quote always above author */
.quote-div p,
.quote-div span{
  display: block;           /* ensures line break + stacking */
  margin: 0;
}

.quote-div p{
  font-size: clamp(20px, 2.4vw, 40px);
  line-height: 1.25;
  max-width: 70ch;
  padding: 0 5vw;
  font-family: var(--font-head);
}

.quote-div span{
  margin-top: 12px;
  font-size: clamp(14px, 1.2vw, 18px);
  opacity: .85;
  font-family: var(--font-ui);
}

/* Hardcore WP */

/* =========================
   WP CONTENT: center images + captions
   ========================= */

/* obrázky */
.wp-content img,
.wp-content figure img{
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* figure jako celek (včetně WP align tříd) */
.wp-content figure,
.wp-content .wp-block-image,
.wp-content figure.wp-block-image,
.wp-content .wp-caption{
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

/* caption text */
.wp-content figcaption,
.wp-content .wp-caption-text{
  display: block;
  text-align: center;
  font-style: italic;
  margin-top: 8px;
  opacity: .85;
  font-size: 0.95em;
  line-height: 1.35;
}

/* když WP vloží zarovnávací třídy, zruš floaty a udrž střed */
.wp-content .alignleft,
.wp-content .alignright{
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* i pro "aligncenter" (pro jistotu) */
.wp-content .aligncenter{
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

.right-stack{
  margin-left: auto;        /* přirazí blok doprava */
  width: 100%;              /* aby text-align fungoval přes celou šířku */
  max-width: 70ch;          /* stejné omezení jako p máš defaultně */
  text-align: right;        /* h2 + p doprava */
  padding-right: 2em;
}

@media (max-width: 900px){
  .right-stack{
  padding-right: 0;
}
}