/* ==========================================================================
   ZÁKLAD – proměnné, reset, tělo stránky
   ========================================================================== */

:root{
  --bg:       #0b1220;
  --panel:    #0f172a;
  --panel-2:  #111b32;
  --text:     #e8eefc;
  --muted:    #9fb2d9;
  --ring:     #1f2a44;
  --radius:   18px;
}

/* 🧹 Vypnutí modrého „bliknutí“ při tapnutí na odkazy / tlačítka na mobilech */
html, body, a, button, [role="button"] {
  -webkit-tap-highlight-color: transparent; /* vypne modrý overlay při dotyku */
}

/* 🔧 Zjemnění nebo zrušení focus rámečku (modrý obrys po kliku) na odkazech/tlačítkách */
a:focus,
a:focus-visible,
a:active,
button:focus,
button:focus-visible,
button:active {
  outline: none;             /* zruší defaultní modrý rámeček */
  box-shadow: none;          /* kdybys měl někde vlastní shadow na focus */
}


body{
  margin: 15px;
  color: var(--text);
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.45;

  /* jemné pozadí s dvěma radial gradienty */
  background:
    radial-gradient(1200px 600px at 20% 5%, #123, transparent),
    radial-gradient(1200px 600px at 80% 15%, #10223d, transparent),
    var(--bg);
}
  }

/* ====== ZÁKLADNÍ NASTAVENÍ STRÁNKY ====== */
body {
  font-family: Georgia, Tahoma, Verdana, sans-serif; /* typ písma */
  font-size: 16px;                                   /* základní velikost textu */
  line-height: 1.6;                                  /* výška řádku = lepší čitelnost */
  color: #222;                                       /* barva textu */
  margin: 0;                                         /* odstranění výchozích okrajů prohlížeče */
  padding: 0;

}

/* HERO – fotka vyplní pás a ořízne okraje */
.uvodni-fotka{
  height: clamp(220px, 40vw, 420px);  /* výška roste s šířkou */
  width: 100%;
  overflow: hidden;
}
.uvodni-fotka img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* vyplní, případně ořízne okraje */
  object-position: center;
  display: block;
}

/* ====== NADPISY ====== */
h1 {
  font-size: 32px;         /* velikost písma */
  font-weight: bold;       /* tučné písmo */
  text-align: center;      /* zarovnání na střed */
  margin: 0px 0;           /* horní a spodní mezera v nadpisu*/
}

h2 {
  /* tvoje aktuální nastavení */
  font-size: 28px;
  font-weight: bold;                 /* můžeš nechat, ale logo víc sedí s 900 */
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  text-align: center;
  margin: 10px 0;
  position: sticky;
  top: 0;
  z-index: 10;
  /*background: #fff;*/
  line-height: 1.4;
  color: #fff !important;

  /* 🔽 jen styl písma navíc (jako v logu) */
  text-transform: uppercase;         /* velkými písmeny */
  letter-spacing: .02em;             /* jemný rozestup */
  transform: scaleY(1.08);           /* „vyšší“ písmo */
  transform-origin: center;
  /* volitelné: o fous tučnější look loga */
  /* font-weight: 900; */
}

h3 {
  color: var(--wine);               /* ← vínově červená */

  font-size: 24px;
  font-weight: bold;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  text-align: center;
  margin: 26px 0;
  position: sticky;
  top: 0;
  z-index: 10;
  /*background: #fff;*/
  line-height: 1.4;

  text-transform: uppercase;
  letter-spacing: .02em;
  transform: scaleY(1.08);
  transform-origin: center;
  /* font-weight: 900; */
}

p {
  font-size: 20px;
  text-align: center;
  margin: 10px 0;
  line-height: 1.4;        /* nebo jiná vhodná hodnota */
  

}

li {
  font-size: 16px;
  text-align: justify;                           /* zarovnání do bloku */
  margin-bottom: 6px;
  transform: scale(1.20);                        /* efekt zvětšení při najetí myší */
}

/* ====== RESPONSIVITA ====== */
/* Tablety do šířky 900px → 2 fotky vedle sebe */

@media (max-width: 900px) {
  .galerie-fotky {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobily do šířky 500px → 1 fotka pod sebou */
@media (max-width: 500px) {
  .galerie-fotky {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  .menu {
    grid-template-columns: 1fr;
  }
}


/* ========== SMAJLÍK ============= */


.emoji {
  display: inline-block;
  animation: wave 2s ease-in-out infinite;
  transform-origin: 70% 70%;
}

@keyframes wave {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(15deg); }
  30% { transform: rotate(-10deg); }
  45% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}



/* ====== SOCIÁLNÍ LOGA ====== */





.intro-social-capsule{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;        /* text doprostřed */
  gap: 26px;
  padding: 28px 64px 28px 46px;   /* větší pravý vnitřní okraj -> ikony dál od kraje */
  border-radius: 24px;

  background:
    linear-gradient(to top right, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    radial-gradient(120% 180% at -20% -20%, rgba(62,166,255,.15), rgba(62,166,255,0) 60%),
    rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.08),
    0 14px 32px rgba(0,0,0,.45),
    0 0 25px rgba(62,166,255,.08);
  backdrop-filter: blur(10px) saturate(160%);
  transition: all .35s ease;
}

.intro-social-capsule:hover{
  transform: translateY(-3px);
  border-color: rgba(62,166,255,.55);
  box-shadow:
    0 0 35px rgba(62,166,255,.25),
    0 12px 40px rgba(0,0,0,.55);
}

/* texty */
.intro-social-text{
  color:#fff; font-weight:800; text-align:center;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height:1.7; margin:0 0 8px;
  max-width: 820px;
}

/* responsivita */
@media (max-width: 880px){
  .intro-social-capsule{ flex-direction: column; text-align:center; gap:14px; padding: 20px 18px; }
  .arrow-hint svg{ transform: rotate(90deg); }
  .social-links{ justify-content:center; }
}
@media (max-width: 480px){
  .arrow-hint{ display:none }
  .intro-social-links{ font-size: clamp(15px, 3.8vw, 17px); }
}

/* Velká pulzující loga */
.pulse-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  transition: all .3s ease;
  filter: drop-shadow(0 0 5px rgba(62,166,255,.25));
  animation: pulseGlow 3s ease-in-out infinite;
}

.pulse-icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
  opacity: 0.95;
}

/* individuální barvy při hoveru */
.pulse-icon.instagram:hover {
  background: radial-gradient(circle at 30% 30%, #E4405F, #9b2060);
  box-shadow: 0 0 25px #E4405F, 0 0 50px rgba(228,64,95,.4);
}
.pulse-icon.facebook:hover {
  background: radial-gradient(circle at 30% 30%, #1877F2, #0c4cd1);
  box-shadow: 0 0 25px #1877F2, 0 0 50px rgba(24,119,242,.4);
}

/* Pulzující záře */
@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 12px rgba(62,166,255,.3);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 28px rgba(62,166,255,.5);
  }
}
/* Responsivita */
@media (max-width: 640px) {
  .pulse-icon {
    width: 48px;
    height: 48px;
  }
  .pulse-icon svg {
    width: 24px;
    height: 24px;
  }
}



/* === SEZÓNNÍ POZADÍ V HORNÍ ČÁSTI === */

 
.top-season-hero {
  --hero-dim-top: .60;   /* ztmavení nahoře */
  --hero-dim-bot: .30;   /* ztmavení dole  */
  position: relative;
  background: #101827;
  padding: clamp(0px, 0vw, 64px) 18px;
  color: #fff;
  overflow: hidden;
}

/* jemný fade-out do tmavého pozadí stránky */
.top-season-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), #0b1017);
  pointer-events: none;
}

/* zajištění vrstvy obsahu */
.top-season-hero > * { position: relative; z-index: 1; }

@media (max-width: 640px) {
  .top-season-hero { --hero-dim-top: .65; --hero-dim-bot: .92; }
}



/* === NASTAVENÍ ÚVODNÍ FOTOGRAFIE === */

.obdelnik-foto{
  width: 100%;                         /* vždy přes celou šířku */
  height: clamp(200px, 31.25vw, 420px);/* 31.25vw = poměr 16:5 (600/1920) */
  overflow: hidden;
  /* volitelné: zaoblení a stín jako u dlaždic */
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  margin: 0 auto;             /* zarovná na střed */
}

.obdelnik-foto img{
  width: 100%;
  height: 100%;
  object-fit: cover;                   /* hezky vyplní, nic se neroztáhne */
  object-position: center;             /* můžeš dát třeba "50% 40%" když chceš víc nahoru */
  display: block;
}

/* tenhle media query už není potřeba – clamp to řeší plynule */
/*
@media (max-width: 768px){
  .obdelnik-foto{ height: 250px; }
}
*/

/* GLASS PILULKA OKOLO ÚVODNÍ FOTKY */
.wrap-pill{
  width: 90%;
  max-width: 1180px;
  margin: 12px auto 18px;
  padding: 12px;                              /* mezera mezi rámem a fotkou */
  border-radius: 16px;
   background:
  radial-gradient(120% 180% at -20% -20%, rgba(62,166,255,.12), rgba(62,166,255,0) 60%),
  rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.35);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  isolation: isolate;                         /* jistota, že backdrop-filter funguje korektně */
}

/* decentní hover – stejný feeling jako máš u textové pilulky */
.wrap-pill:hover{
  transform: translateY(-2px);
  border-color: var(--accent, #3ea6ff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 16px 36px rgba(0,0,0,.5);
}

/* Intro sekce – jen drobný spacing (nech klidně svoje barvy/stíny) */
.intro-bar{
  padding: 0;
}
.intro-bar h1{
  margin: 0 0 8px;
}
.intro-bar p{
  font-size: 28px;
  font-weight: bold;                 /* můžeš nechat, ale logo víc sedí s 900 */
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  text-align: center;
  margin: 10px 0;
  position: sticky;
  top: 0;
  z-index: 10;
  /*background: #fff;*/
  line-height: 1.4;
  color: #fff !important;

}

/* ================ INTRO CARD ================= */

.intro-card{
  display: flex;
  justify-content: center;     /* zarovná pilulku na střed */
}

.intro-card > p{
  /* typografie */
  color: #fff;
  font-weight: 800;             /* klidně ponecháš své */
  line-height: 1.35;
  letter-spacing: .2px;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);

  /* pilulka / sklo */
  display: inline-block;
  margin: 12px 0 18px;
  padding: 12px 18px;
  border-radius: 16px;
  background:
  radial-gradient(120% 180% at -20% -20%, rgba(62,166,255,.12), rgba(62,166,255,0) 60%),
  rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.16); 
  backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.35);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* decentní hover */
.intro-card > p:hover{
  transform: translateY(-2px);
  border-color: var(--accent, #3ea6ff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 16px 36px rgba(0,0,0,.5);
}

/* odkazy uvnitř textu – čisté a moderní */
.intro-card > p a{
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.35);
  padding-bottom: 1px;
}
.intro-card > p a:hover{
  color: var(--accent, #3ea6ff);
  border-bottom-color: var(--accent, #3ea6ff);
}

/* Pokud máš dřív nastavené sticky, může rušit stín/hover.
   Když ho nechceš, odkomentuj:
.intro-card > p{ position: static !important; }
*/

/* ================ INTRO CARD PORTRÉT =============== */


.intro-card.portret{
  display:block;              /* už nepotřebujeme flex */
}

.intro-card.portret > p{
  display:block;              /* z inline-block na block */
  width:100%;                 /* roztáhne se na šířku kontejneru */
  text-align:center;
  font-size: clamp(18px, 2vw + 6px, 22px); /* velikost textu */
  color:#fff;
  font-weight:900;
  line-height:2.35;           /* místo 3.35 – to dělalo obří vertikální mezeru */
  letter-spacing:.2px;
  text-shadow:0 2px 10px rgba(0,0,0,.35);

  margin:10px 0;
  padding:16px 0px;          /* trochu větší vnitřní okraj pro delší řádek */
  border-radius:16px;
  background:
    radial-gradient(120% 180% at -20% -20%, rgba(62,166,255,.16), rgba(62,166,255,0) 60%),
    rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.35);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.intro-card.portret > p:hover{
  transform: translateY(-2px);
  border-color: var(--accent, #3ea6ff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 16px 36px rgba(0,0,0,.5);
}

.intro-card.portret > p a{
  color:#fff;
  text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.35);
  padding-bottom:1px;
}
.intro-card.portret > p a:hover{
  color:var(--accent, #3ea6ff);
  border-bottom-color:var(--accent, #3ea6ff);
}

/* responsivní drobnost */
@media (max-width: 640px){
  :root{ --gap:14px; }
  .intro-card.portret > p{ padding:14px 0px; }
}

@media (max-width: 640px){
  .intro-card.portret > p{ font-size: 18px; }
}


/* === ÚVODNÍ FOTO V POZADÍ U PORTRÉTŮ === */


.portrait-bg{
  position: relative;
  background:
    linear-gradient(rgba(0,0,0,0.6), rgba(11,16,23,0.95)),
    url("images/IMG_20251026_123244.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;               /* desktop parallax */
  color: #fff;
  padding: 0 18px;
  padding-bottom: calc(var(--zpet-h,0px) + 0px);  /* místo pod tlačítko */
  overflow: hidden;
}

/* Mobile: fixed umí být trhaný – vypneme */
@media (max-width: 768px){
  .portrait-bg{ background-attachment: scroll; }
}

/* Úvodní textová „kapsle“ – zmenšíme brutální padding 480px 
.intro-card.portret{
  position: relative;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(120px, 18vw, 220px) 24px 80px;
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(0,0,0,.5);
  overflow: hidden;
  /* POZOR: už sem nedáváme background-image – zůstává na .portrait-bg 
} */

.intro-card.portret p{
  position: relative;
  z-index: 1;
  font-size: clamp(1rem, 2vw, 1.4rem);
  line-height: 1.6;
}

/* jemné ztmavení přes kapsli, ať je text čitelný */
.intro-card.portret::before{
  content:"";
  position:absolute;
  inset:0;
   background:
  radial-gradient(120% 180% at -20% -20%, rgba(62,166,255,.12), rgba(62,166,255,0) 60%),
  rgba(0,0,0,.35);
  z-index:0;
}

/* pro jistotu držíme obsah (karty, tlačítko) nad pozadím */
.gallery-grid, .albums, .zpet{ position: relative; z-index: 2; }



/* =========== GRID DLAŽDICE =============== */



.menu-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

/* Jeden společný poloměr, ať je to všude stejné */
:root{
  --radius: 18px;            /* zkus 16–22px podle chuti */
}

/* Dlaždice složek (tile) */
.tile{
  border-radius: var(--radius);
  overflow: hidden;                      /* ořízne obsah do zaoblení */
  background: #0f172a;                   /* tvé tmavé pozadí */
  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
    0 8px 24px rgba(0,0,0,.35),          /* vnější měkký stín */
    inset 0 1px 0 rgba(255,255,255,.04); /* jemná vnitřní linka pro „sklo“ */
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

/* Hlavička dlaždice a text, ať se nepřilepí na hranu */
.tile .menu-head,
.tile p{
  padding: 14px 16px;
}

/* Obrázky uvnitř dlaždic (když použiješ <img>) */
.tile img{
  display: block;
  width: 100%;
  height: 220px;               /* nebo klidně aspect-ratio */
  object-fit: cover;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* ====== HLAVNÍ MENU SLOŽKY (3 × 3) ====== */

:root{
  --bg: #0b1017;
  --card-top: #0f1b23;
  --card-bot: #0c141b;
  --text: #e7eef6;
  --muted: #a7b4c5;
  --ring: rgba(255,255,255,.08);
  --ring-strong: rgba(255,255,255,.14);
}

/* Kontejner s mřížkou 3 sloupce */
.menu-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin: 24px auto;
  max-width: 1680px; /*velikost složky - obdelníku */
  padding: 0 16px;
}

/* Dlaždice */
.menu-grid > a.tile{
  position: relative;
  display: block;
  padding: 18px 20px 22px;
  border-radius: 16px;
  text-decoration: none;
  border-color: var(--accent, #3ea6ff);
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  border: 1px solid var(--ring);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.2) inset,
    0 10px 18px rgba(0,0,0,.35);
  color: var(--text);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  overflow: hidden;
}

/* highlight nahoře */
.menu-grid > a.tile::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 60% at 50% -40%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
}

.menu-grid > a.tile:hover,
.menu-grid > a.tile:focus-visible{
  transform: translateY(-2px);
  border-color: var(--accent, #3ea6ff);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 14px 24px rgba(0,0,0,.45);
}

/* Vnitřní hlavička */
.menu-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.menu-icon{ font-size:22px; line-height:1; }
.menu-grid h3{ margin:0; font-size:26px; letter-spacing:.02em; }
.menu-grid p { margin:0; font-size:20px; color: var(--muted); }

/* Responsivita */
/* === HLAVNÍ MENU SLOŽKY (RESPONZIVNÍ GRID) === */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* defaultně 3 sloupce */
  gap: 18px;
  margin: 24px auto;
  max-width: 1680px;
  padding: 0 16px;
}


/* Střední displeje – tablety, menší notebooky */
@media (max-width: 1024px) {
  .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 sloupce */
    max-width: 1200px;
  }
}

/* Menší zařízení – telefony (včetně na výšku) */
@media (max-width: 900px) {
  .menu-grid {
    grid-template-columns: 1fr; /* 1 sloupec */
    max-width: 700px;
    gap: 16px;
  }
}

/* Extra malé – úzké telefony */
@media (max-width: 520px) {
  .menu-grid {
    padding: 0 10px;
    gap: 14px;
  }
}


/* Podtitulek */
.menu p{
  margin:0;
  font-size: 14px;
  color: var(--muted);
}

/* ======= SLOŽKY MENU IKONY ========= */

.menu-icon{
  --ico: var(--accent, #3ea6ff);
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  font-size:20px; line-height:1;
  background:
    radial-gradient(120% 180% at -20% -20%, rgba(62,166,255,.16), rgba(62,166,255,0) 60%),
    rgba(255,255,255,.04);
  border:1px solid var(--ring, rgba(255,255,255,.10));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25) inset,
    0 6px 14px rgba(0,0,0,.35);
  color:#fff;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

/* hezky zareaguje s dlaždicí */
.tile:hover .menu-icon{
  transform: translateY(-1px);
  border-color: var(--accent, #3ea6ff);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25) inset,
    0 10px 22px rgba(0,0,0,.45);
  background:
    radial-gradient(120% 180% at -20% -20%, rgba(62,166,255,.22), rgba(62,166,255,0) 60%),
    rgba(255,255,255,.06);
}

/* === FOTKA V POZADÍ DLAŽDICE NA HLAVNÍ STRÁNCE === */


.menu-grid > a.tile {
  position: relative;
  overflow: hidden;
}

/* Všechen text nad fotkou */
.menu-grid > a.tile > * {
  position: relative;
  z-index: 2;
}

/* Fotka přes CSS proměnnou */
.menu-grid > a.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.40) saturate(1.1);
  transition: filter 0.4s ease, transform 0.4s ease;
  z-index: 1;
}


/* Jemné rozjasnění na hover */
.menu-grid > a.tile:hover::before {
  filter: brightness(0.8) saturate(1.2);
  transform: scale(1.05);
}

/* Aby highlight zůstal nahoře */
.menu-grid > a.tile::after {
  z-index: 3;
}

.menu-grid > a.tile h3 {
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.menu-grid > a.tile p {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
menu-grid > a.tile {
  color: #fff; /* čistě bílý text */
}

.menu-grid > a.tile h3,
.menu-grid > a.tile p {
  color: #fff; /* zajistí, že i nadpis a odstavec budou bílé */
}

.menu-grid > a.tile h3 {
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.menu-grid > a.tile p {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}




/* === PODSLOŽKY VE SLOŽCE PORTRET === */



:root{
  /* Dark varianta (tvoje nynější): */
  --tile-bg:       #0f1b23;
  --tile-bg-hover: #151a22;
  --tile-border:   rgba(255,255,255,.10);
  --tile-text:     #e7eef6;
  --muted:         #a7b4c5;
  --accent:        #7f1d1d;           /* vínová – klidně uprav */
  --ring:          rgba(255,255,255,.08);
  --ring-strong:   rgba(255,255,255,.14);
}

/* === FOTKA V POZADÍ DLAŽDICE VE SLOŽCE PORTRÉTY === */


/* Mřížka pro pod-alba (klidně uprav počty sloupců) */
.albums{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
  margin: 24px auto;
  max-width: 1280px; /* ⬅️ TADY JE MAXIMÁLNÍ ŠÍŘKA CELÉ MŘÍŽKY */
  padding: 0 16px;
}

@media (max-width: 1024px){ .albums{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px){  .albums{ grid-template-columns: 1fr; } }

/* Dlaždice pod-alb */
.albums a.album{
  position: relative;
  display: block;
  overflow: hidden;
  padding: 18px 20px 22px;
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid var(--ring, rgba(255,255,255,.08));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.2) inset,
    0 10px 18px rgba(0,0,0,.35);
  color: #fff;
}

/* obsah nad fotkou */
.albums a.album > *{ position: relative; z-index: 2; }

/* fotka z proměnné --bg-url */
.albums a.album::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--bg-url);
  background-size: cover;        /* přizpůsobí se dlaždici */
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(.40) saturate(1.1); /* ztmavení kvůli čitelnosti */
  transition: filter .35s ease, transform .35s ease;
  z-index:1;
}

/* hover efekt */
.albums a.album:hover::before{
  filter: brightness(.8) saturate(1.2);
  transform: scale(1.05);
}

/* typografie */
.albums a.album h3{
  margin:0;
  font-weight:800;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.albums a.album p{
  margin:.5rem 0 0;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 6px rgba(0,0,0,.5);
  display: -webkit-box;
  -webkit-line-clamp: 3;   /* kolik řádků ponechat */
  -webkit-box-orient: vertical;
}

/* Jemný „svit“ shora jako na úvodu */
.album::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 60% at 50% -40%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
}

/* Hlavička dlaždice (ikona + název) */
.album-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem; }
.album-icon{ font-size:22px; line-height:1; }

/* Scope na H3 jen uvnitř .albums, ať ti to nerozbíjí jiné H3 */
.albums h3{
  margin:0;
  font-size:22px;
  letter-spacing:.02em;
  text-transform:none; /* když chceš kapitálky → uppercase */
}

/* Popisek */
.albums p{
  margin:.2rem 0 0;
  font-size:18px;
  color: var(--muted);
}

/* Badge s počtem fotek – stejné chování jako na úvodu */
.menu-count{
  position:absolute; top:12px; right:12px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 8px; min-width:28px; height:24px;
  font-size:13px; font-weight:700; line-height:1;
  border-radius:999px;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--ring);
  color:#fff;
}
.menu-count::before{ content: attr(data-count); }

/* Volitelný akcent okraje dlaždice (když chceš odlišit jednotlivé složky) */
.album[data-accent]{
  border-color: color-mix(in oklab, var(--tile-border), var(--accent) 40%);
}
.album:hover[data-accent]{
  border-color: color-mix(in oklab, var(--tile-border), var(--accent) 65%);
}

/* ————————————————————————————————————————————————
   Pokud máš na ÚVODU světlé karty, stačí přepnout barvy:
:root{
  --tile-bg:#f2f2f2; --tile-bg-hover:#e7e7e7;
  --tile-text:#111;  --tile-border:#d9d9d9; --muted:#666;
}
   ———————————————————————————————————————————————— */

/* ========== IKONY NA PODSLOŽKÁCH V PORTRÉTU ============ */

.album-icon{
  --ico: var(--accent, #3ea6ff);
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  font-size:20px; line-height:1;
  background:
    radial-gradient(120% 180% at -20% -20%, rgba(62,166,255,.16), rgba(62,166,255,0) 60%),
    rgba(255,255,255,.04);
  border:1px solid var(--ring, rgba(255,255,255,.10));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25) inset,
    0 6px 14px rgba(0,0,0,.35);
  color:#fff;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

/* hezky zareaguje s dlaždicí */
.tile:hover .album-icon{
  transform: translateY(-1px);
  border-color: var(--accent, #3ea6ff);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25) inset,
    0 10px 22px rgba(0,0,0,.45);
  background:
    radial-gradient(120% 180% at -20% -20%, rgba(62,166,255,.22), rgba(62,166,255,0) 60%),
    rgba(255,255,255,.06);
}


/* ================= ZPĚT ============== */


/* Rezerva, aby lišta nezakrývala obsah */
.page-gallery { 
  padding-bottom: var(--zpet-h, 0px);
}

/* Spodní lišta přes celou šířku – ukotvená */
.zpet{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2147483647;
  display: flex;
  justify-content: center;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  backdrop-filter: blur(6px);
}

/* Tlačítko uvnitř lišty */
.zpet a{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  background:
    radial-gradient(120% 180% at -20% -20%, rgba(62,166,255,.16), transparent 60%),
    rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25) inset,
    0 8px 18px rgba(0,0,0,.35);
}

.zpet a:hover,
.zpet a:focus-visible{
  transform: translateY(-1px);
  border-color: var(--accent, #3ea6ff);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25) inset,
    0 10px 22px rgba(0,0,0,.45);
  background: rgba(255,255,255,.10);
  color: #fff; /* pro jistotu */
  outline: none;
}

/* Volitelné zúžení tlačítka na menších displejích */
@media (max-width: 560px){
  .zpet a{ padding: 10px 14px; font-size: 14px; }
}

/* kotva pro návrat – nic nezobrazuje */
#navrat{ height:0; }

/* ať se kotva zarovná pod intro lištu (používáš-li --intro-h) */
#navrat{ scroll-margin-top: calc(var(--intro-h, 80px) + 16px); }



/* === GALERIE – grid + vzhled dlaždic ============================ */

:root{
  --focus-red: #ff3b30;        /* barva červené linky */
  --pill-pad: 14px;            /* vnitřní padding pilulky */
}

.gallery-pill{
  /* full-bleed i když je uvnitř .container */
  width: 90vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);           /* vycentrujeme přes viewport */
  
  padding: var(--pill-pad);
  border-radius: 16px;
  background:
    radial-gradient(120% 180% at -20% -20%, rgba(62,166,255,.16), rgba(62,166,255,0) 60%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.35);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    outline-color .18s ease;
  isolation: isolate;
}

/* HOVER: červený ring – offset dovnitř, ať nevzniká scrollbar */
.gallery-pill:hover{
  transform: translateY(-2px) translateX(-50%);
  border-color: rgba(255,59,48,.45);
  /*outline: 2px solid var(--focus-red);*/
  outline-offset: -2px;                      /* ring jde jemně dovnitř */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 16px 36px rgba(0,0,0,.5),
    0 0 0 3px rgba(255,59,48,.15);
}

/* Klávesnice (kdybys přidal tabindex/role) */
.gallery-pill:focus{ outline: none; }
.gallery-pill:focus-visible{
  outline: 2px solid var(--focus-red);
  outline-offset: -2px;
}

/* Reset figure, ať kolem nejsou mezery */
.galerie-fotky figure {
  margin: 0;
}

/* Obrázky vyplní buňku a nezůstane baseline mezera */
.galerie-fotky img {
  display: block;
  width: 100%;
  height: auto;

  opacity: 0;                 /* fade-in start */
  transition: opacity .4s ease;
}
.galerie-fotky img[data-loaded="true"] {
  opacity: 1;                 /* fade-in konec */
}

/* Grid – 4 sloupce na velkých, méně na menších */
.galerie-fotky{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
  margin: 0;
  counter-reset: idx;
  padding-bottom: var(--zpet-reserve, 16px);
}
@media (max-width: 1200px){
  .galerie-fotky{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 820px){
  .galerie-fotky{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .galerie-fotky{ grid-template-columns: 1fr; }
}

/* Preferuje-li uživatel méně pohybu, vypni animaci */
@media (prefers-reduced-motion: reduce){
  .galerie-fotky img { transition: none; opacity: 1; }
}

/* dlaždice jednoduché – bez vlastního „rámu“, jen zaoblení */
.galerie-fotky figure{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}

/* badge který už máš – funguje beze změny */
.galerie-fotky figure::before{
  /* tvoje původní hodnoty, klidně nech */
  top: 10px; left: 10px;
}

/* obrázek uvnitř dlaždice */
.galerie-fotky figure > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(102%);
}

/* responzivní rozpad 4→3→2→1 sloupce */
@media (max-width: 1200px){
  .galerie-fotky{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .galerie-fotky{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .galerie-fotky{ grid-template-columns: 1fr; }
}

/* prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .gallery-pill{ transition: none; }
}


/* === VIEWER (lightbox) ========================================== */


.viewer[hidden]{ display: none; }
.viewer{
  position: fixed;
  inset: 0;
  background: rgba(12,17,24,.78);
 /* background: linear-gradient(180deg, var(--card-top), var(--card-bot));*/
  backdrop-filter: blur(4px); /*ZTMAVENÍ A ZESVĚTLENÍ POZADÍ PŘI ROZKLIKNUTÉ FOTKY */
  z-index: 2000;
}
.viewer-layout{
  height: 100%;
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
}
.viewer-stage{
  max-height: 100vh;
  display: grid;
  place-items: center;
  padding-bottom: 70px; /* přidáme spodní padding pro jistotu */
}

#viewerImg {
  width: 100%;
  max-width: 94vw;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  cursor: default !important;
}

/* tlačítka */
.viewer-btn{
  cursor: pointer;
  border: 1px solid var(--ring, rgba(255,255,255,.18));
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 20px;
  color: #e8eaed;
}
.viewer-close{
  position: absolute;
  top: 16px;
  right: 16px;
}
.viewer-rail{
  display: flex;
  justify-content: center;
}
.viewer-arrow{ font-size: 28px; }

.viewer-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
  transition: all 0.2s ease;
}

/* volitelné – drobný styling textu v intro-baru */
.intro-bar h1 small{
  font-weight: 600;
  color: var(--muted, #9aa0a6);
  font-size: .6em;
}
.intro-bar p{
  color: var(--muted, #9aa0a6);
  margin-top: .5rem;
}

/* === FIX: badge vlevo nahoře + menší mezery ===================== */

/* fotky blíž k sobě */
.galerie-fotky{
  gap: 10px;              /* klidně zmenši na 10px, chceš-li víc natěsno */
}

/* jistota pro pozicování a žádné defaultní okraje figure */
.galerie-fotky figure{
  position: relative;
  margin: 0;
  border-radius: 18px;    /* zaoblené rohy jako v náhledu */
  overflow: hidden;
}




/* ================= PATIČKA======================= */



/* 🌇 Sekce s pozadím – čistá, bez přetékání pod footer */
.page-hero-bg {
  position: relative;
  background: #101827;
  padding: 18px 20px 80px;     /* dolní padding zkrácený, ať nestrká footer */
  box-sizing: border-box;
  overflow: hidden;
}

/* 📱 iPhone fix */
@supports (-webkit-touch-callout:none){
  .page-hero-bg { background-attachment: scroll; }
}

/* Jemný fade – decentní, končí těsně nad footerem */
.page-hero-bg::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:100px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), #0b1017 100%);
  pointer-events:none;
}

/* 🧾 Footer: pevné, tmavé pozadí bez fotky */
footer.copyright-bar {
  position: relative;
  z-index: 2;
  background: #0b1017;
  color: var(--muted, #a7b4c5);
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 14px 10px;
}

footer.copyright-bar a {
  color: var(--accent, #3ea6ff);
  text-decoration: none;
}
footer.copyright-bar a:hover {
  text-decoration: underline;
}


/* Podtrhni jen Cookies, GDPR/Privacy a RSS */
.copyright-bar a[href*="cookies"],
.copyright-bar a[href*="autorska-prava"],
.copyright-bar a[href*="privacy"],
.copyright-bar a[href*="podminky-foceni"],
.copyright-bar a[href*="gdpr"],
.copyright-bar a[href$="rss.xml"],
.copyright-bar a[href*="/rss"]{
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.7px;
  text-decoration-skip-ink: auto;
}





/* ========== COOKIES ============== */



:root{
  --safe-top: max(16px, env(safe-area-inset-top)); /* notch/okraj */
  --close-size: 44px;                               /* velikost křížku */
}

/* hlavní mezera nad prvním blokem (Cookies/Privacy stránky) */
.page-doc .intro-card{
  /* víc místa nahoře = nic se neschová pod křížek */
  margin: calc(var(--safe-top) + var(--close-size) + 12px) auto 48px;
  padding: 0 22px;
}

/* --- jemné mobilní úpravy --- */
@media (max-width: 680px){
  /* křížek menší a blíž k okraji */
  .close-btn{
    top: 10px; right: 10px;
    width: 40px; height: 40px;
  }
  /* úměrně zmenšíme rezervu */
  .page-doc .intro-card{
    margin-top: calc(var(--safe-top) + 46px + 12px);
  }

  /* pohodlnější čitelnost v kapsli */
  .page-doc .card{
    padding: 14px 16px;
    border-radius: 14px;
  }

  /* nadpisy a zalamování */
  .page-doc h1{ font-size: clamp(22px, 6vw, 30px); line-height: 1.2; }
  .page-doc .card h2{
    font-size: clamp(18px, 4.8vw, 22px);
    line-height: 1.25;
    letter-spacing: .2px;
    text-transform: none;              /* kdybys měl globálně Uppercase */
    overflow-wrap: anywhere;           /* dlouhá slova se nezlomí ven */
  }

  /* text + seznamy */
  .page-doc .card p,
  .page-doc .card li{ font-size: 15px; line-height: 1.7; }

  .page-doc .card ul{
    padding-left: 1.1rem;              /* hezké odsazení puntíků */
    list-style-position: outside;
    margin: .25rem 0 1rem 0;
  }
}

/* extra úzké mobily – víc „dechu“ po stranách */
@media (max-width: 380px){
  .page-doc .intro-card{ padding: 0 12px; }
}

.page-doc .card:hover,
.page-doc .card:focus-within {
  background: rgba(255,255,255,.06);
  border-color: var(--accent, #3ea6ff);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}
.page-doc .card:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
}

.page-doc .card:hover,
.page-doc .card:focus-within {
  background: rgba(255,255,255,.06);
  border-color: var(--accent, #3ea6ff);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

.page-doc .card:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
}
 


/* ============= PRIVACY ============= */



.policy {
  display:flex;
  justify-content:center;
  padding: 24px 16px;
}
.policy-card{
  width:min(960px, 100%);
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  border: 1px solid var(--ring);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* NADPIS – zrušíme lepení, aby se při scrollu nehýbal */
.policy-card .policy-title{
  position: static !important;   /* přebije případné globální sticky */
  top: auto !important;
  margin: 0 0 16px 0;
  text-align: center;
}



/* ================= GDPR ================= */



.policy-table{
  --col-left: 220px;                /* šířka levého sloupce */
  --gap: 12px;                       /* mezera mezi sloupci */
  --divider: rgba(255,255,255,.18);  /* barva dělící linky */

  display: grid;
  grid-auto-rows: auto;
  row-gap: 10px;
}

/* Jeden sjednocený styl pro řádek */
.policy-table .row{
  position: relative; /* kvůli dělící lince */
  display: grid;
  grid-template-columns: var(--col-left) 1fr;
  gap: var(--gap);
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--ring);
  align-items: start;
  overflow: hidden;  /* nic nepřetéká přes zaoblení */
  transition: transform .18s ease, border-color .18s ease,
              box-shadow .18s ease, background-color .18s ease;
}

/* Dělící linka uprostřed gapu (přes celou výšku řádku) */
.policy-table .row::after{
  content: "";
  position: absolute;
  top: 10px; bottom: 10px;
  left: calc(var(--col-left) + var(--gap)/2);
  width: 1px;
  background: var(--divider);
  pointer-events: none;
}

/* Hover/focus jako u karet */
.policy-table .row:hover,
.policy-table .row:focus-within{
  background: rgba(255,255,255,.06);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}
.policy-table .row:active{
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
}

/* Levý sloupec – hlavička */
.policy-table .cell.head{
  font-weight: 800;
  color: var(--text);
  opacity: .9;
  /* žádný border-right – linku kreslí ::after */
}

/* Obsahové buňky – bezpečné zalamování + korekce okrajů potomků */
.policy-table .cell{
  overflow-wrap: anywhere;
  align-items: top;
  word-break: break-word;
  text-align: left;                 /* jistič proti globálnímu center */
}
.policy-table .cell > :first-child { margin-top: 0; }
.policy-table .cell > :last-child  { margin-bottom: 0; }

/* Typografie uvnitř buněk */
.policy-table .cell p{
  margin: 0 0 10px;
  color: var(--text);
  line-height: 1.6;
}
.policy-table .cell ul{
  margin: 0 0 10px;
  padding-left: 1.2em;              /* místo pro puntík */
  list-style: disc outside;
  color: var(--text);
  opacity: .9;
}
.policy-table .cell li{ margin: 0 0 6px; }
.policy-table .cell li strong{ color: var(--accent); }

/* Odkazy uvnitř karty */
.policy-card a{
  color: #ff6464;
  text-decoration: underline;
}

/* Mobil: sloupce pod sebe + vypnout dělící linku */
@media (max-width: 720px){
  .policy-table .row{
    grid-template-columns: 1fr;
  }
  .policy-table .row::after{ display: none; }
  .policy-table .cell.head{ opacity: .85; }
}

/* Preferuje-li uživatel méně animací */
@media (prefers-reduced-motion: reduce){
  .policy-table .row{ transition: none; }
}

.policy-table .cell strong {
  color: #ff6464; /* nebo jakýkoliv odstín červené, co jsi měl předtím */
}




/* ============ AUTORSKÁ PRÁVA =============== */




.policy-card.card:hover,
.policy-card.card:focus-within {
  background: rgba(255,255,255,.06);
  border-color: var(--accent, #3ea6ff);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}
.policy-card.card:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
}

@media (max-width: 720px) {
  .policy-card.card {
    padding: 16px;
  }
}



/* --- PODMÍNKY FOCENÍ --- */



.page-policy .wrap{
  /* měl jsi tam overflow-x: clip; → pryč */
  overflow: visible !important;
  padding-inline: clamp(12px, 4vw, 18px);
  padding-bottom: 16px;
}

/* 1) Karta je vždy vystředěná a nikdy nepřeteče */
.page-policy .policy-card{
  width: min(100%, 920px);   /* nikdy širší než viewport/obal */
  margin: 0 auto;            /* centrování */
  border-radius: 16px;
  overflow: hidden;          /* aby se radius projevil i vizuálně */
}

/* 2) Všechno uvnitř karty počítá šířku včetně border/padding → žádné 2px přetečení */
.page-policy .policy-card,
.page-policy .policy-card * ,
.page-policy .policy-card *::before,
.page-policy .policy-card *::after{
  box-sizing: border-box;
}

/* 3) Grid se nesmí roztahovat – druhý sloupec je “pružný” a smí se zúžit */
.page-policy .policy-table .row{
  grid-template-columns: 220px minmax(0, 1fr);
}
.page-policy .policy-table .cell{
  min-width: 0;              /* dovolí textu zalomit se místo roztlačení boxu */
}

/* 4) PDF náhled nikdy nepřeteče přes kartu (border-box + block) */
.page-policy object.pdf-view{
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--ring);
  margin-bottom: 8px;
}

.pdf-wrap.clean{
  border:1px solid var(--ring);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
}

.pdf-frame{
  width:100%;
  height:480px;   /* bylo 720px */
  display:block;
  border:0;
}

/* ===== Mobilní přepnutí na 1 sloupec – silnější selektory ===== */
@media (max-width: 720px){
  .page-policy .policy-table .row{
    display: grid; /* jistota */
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
  }

  .page-policy .policy-table .cell.head{
    font-size: 13px;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--accent, #3ea6ff);
    margin-bottom: -2px;
  }

  .page-policy .policy-table .cell{
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.55;
  }
}



/* ============== BAREVNÉ ODDĚLOVACÍ ČÁRY ================= */



hr{
  border: none;
  height: 6px;
  background: linear-gradient(90deg, #3ea6ff, #9c27b0, #ff7043);
  border-radius: 2px;
  opacity: .6;
  margin: 24px auto;
  width: 100%;
}





/* ===== INFOHUB: NOVINKY • DOTAZ • RECENZE ===== */
/* Rodič – 3 sloupce, všechny položky na řádku mají stejnou výšku */




.infohub-3-inner{
  display:grid;
  gap:22px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: stretch;
}

/* Každý sloupec je flex sloupec, aby šel obsah roztáhnout */
.col{
  display:flex;
  flex-direction:column;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 14px 16px 16px;
  min-height:0; /* brání overflow u vnořených gridů */
}

/* Vnitřky, které mají vyplnit zbytek výšky kapsle */
.col-news .news-table,
.col-reviews .reviews-table,
.col-ask .dotaz-hodnoceni{
  flex:1;        /* roztáhni na výšku kapsle */
  min-height:0;  /* důležité ve flex kontejnerech */
  display:flex;
  flex-direction:column;
} 

/* Volitelné přilepení spodních CTA (tlačítka) k dolní hraně */
.col-ask .btn-zobrazit{ margin-top:auto; }

.col h3{
  margin: 0 0 10px;
  font-size: clamp(16px, 2vw, 19px);
  text-align: center;
}

.infohub-3-head h2{
  text-align: left;                    /* zarovnání vlevo */
  font-family: "Montserrat", sans-serif; /* styl písma */
  font-weight: 800;                    /* tučný, ale ne přehnaně */
  font-size: clamp(22px, 3vw, 28px);   /* responsivní velikost */
  letter-spacing: 1.5px;               /* malé rozestupy mezi písmeny */
  color: var(--text, #e7eef6);
  margin: 0 0 20px;
  text-shadow: 0 0 12px rgba(62,166,255,.25);
  border-left: 4px solid var(--accent, #3ea6ff);
  padding-left: 12px;                  /* malý odsazení za linkou */
  text-transform: uppercase;           /* všechna písmena velká */
}

/* Podnadpis pod H2 */
.infohub-3-head .subheading{
  text-align: left;
  margin: -6px 0 14px;                 /* jemně přisadit k H2 */
  color: var(--muted, #a8b4c7);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.55;
  letter-spacing: .2px;
  display: grid;
  gap: 2px;                            /* mezera mezi řádky */
}

.infohub-3-head .subheading span{
  display: block;                      /* každý řádek zvlášť */
  opacity: .95;
}

/* === Mobilní fix: h2 v .infohub-3-head doleva === */
@media (max-width: 768px){
  /* Kdyby byl rodič flex a centroval, h2 si to přepíše sám */
  .infohub-3-head{
    display: flex;
    flex-direction: column;
    align-items: center;   /* zbytek může zůstat na střed */
  }

  .infohub-3-head > h2.gradient{
    text-align: left !important;  /* přebije text-align z rodičů */
    align-self: flex-start !important; /* zruší centrování přes flex */
    width: 100%;
    margin: 0 0 8px 0;
    padding-left: 12px;           /* jemné odsazení od levého okraje */
    display: block;               /* jistota proti inline chování */
  }
}

@media (max-width: 768px){
  .infohub-3-head > p.subheading{
    text-align: left !important;
    align-self: flex-start !important;
    width: 100%;
    padding-left: 12px;
  }
}

/* Hlavička boxu (NEW / Přidat recenzi) */
.col-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
}

/* Badge NEW – pokud používáš */
.badge-new{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing:.4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent, #3ea6ff);
  color: #0b1017;
  box-shadow: 0 8px 16px rgba(62,166,255,.35);
}

/* CTA řádek na spodek kapsle (pokud je potřeba něco „přilepit“ dolů) */
.col .home-cta,
.col .btn-row { margin-top: auto; }

/* ===== Velká vnější „tile-like“ kapsle (obálka celé sekce) ===== */
.tile-like{
  width:100%;
  max-width:none;
  margin:40px 0;
  padding:28px 40px;
  border-radius:22px;
  background:
    radial-gradient(120% 180% at -20% -20%, rgba(62,166,255,.12), rgba(62,166,255,0) 60%),
    rgba(0,0,0,.35);
  border:1px solid var(--ring, rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  color:var(--text, #e7eef6);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-sizing:border-box;
}
.tile-like:hover,
.tile-like:focus-visible{
  transform:translateY(-2px);
  border-color:var(--accent, #3ea6ff);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 14px 24px rgba(0,0,0,.45);
}

/*.tile-like:focus-within{ outline:2px solid var(--accent, #3ea6ff); outline-offset:2px; }*/



/* ===== Vnitřky, aby vyplnily výšku kapsle rovnoměrně ===== */
/* Aktuality: tabulka se roztáhne a drží se uvnitř bez overflow */
.col-news .news-table{
  flex: 1;          /* vyplň zbytek kapsle */
  min-height: 0;    /* důležité proti přetečení ve flex kontejnerech */
}

/* Máte dotaz: vnitřní glass box vyplní kapsli a je centrovaný */
.col-ask .dotaz-hodnoceni{
  flex: 1;
  min-height: 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Recenze: tabulka vyplní výšku */
.col-reviews .reviews-table{
  flex: 1;
  min-height: 0;
}

/* ===== Responsivita ===== */
@media (max-width: 860px){
  .infohub-3-inner{
    grid-template-columns: 1fr;   /* sloupce pod sebe */
  }
  .col{ 
    /* na mobilu nevnucujeme výšku – necháme přirozenou */
  }
}



/* ============== RECENZE – FINÁLNÍ CSS ============== */
/* Proměnné (barvy, poloměry, stíny, pozadí) */



:root{
  --accent:#3ea6ff;
  --ring:rgba(255,255,255,.16);
  --text:#fff;
  --muted:#a7b4c5;
  --radius:22px;
  --glass:rgba(0,0,0,.45);
  --shadow:0 10px 24px rgba(0,0,0,.4);
  --bg-dark:#0b1017;
  --star:#ffd159;
}

/* Reset a základ (box model, font, barvy pozadí) */
*{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:10px;
  background:var(--bg-dark);
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Sekce se společným foto-pozadím (např. patička) */
.footer-bg{
  background:
    linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.2)),
    url("images/podzim/20241027-1730042579740.jpg");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  padding:60px 20px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* Skleněná kapsle pro feedback blok (glass efekt) */
.feedback-glass{
  background:
    radial-gradient(120% 180% at -20% -20%, rgba(62,166,255,.12), rgba(62,166,255,0) 60%),
    var(--glass);
  border:1px solid var(--ring);
  border-radius:var(--radius);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  backdrop-filter: blur(6px) saturate(160%);
  box-shadow:var(--shadow);
  width:min(720px, 92%);
  margin:auto;
  padding:30px 26px;
}
.feedback-glass h2{ margin-top:0; }

/* Tlačítko pro otevření formuláře (toggle) */
.toggle-btn{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:10px 18px;
  font-weight:800;
  cursor:pointer;
  transition:background .25s ease, transform .1s ease;
  margin-top:14px;
}
.toggle-btn:hover{ background:#54b8ff; }
.toggle-btn:active{ transform:translateY(1px); }
.toggle-btn:focus{
  outline:2px solid rgba(62,166,255,.6);
  outline-offset:2px;
}

/* Wrapper, který rozbaluje/sbaluje feedback formulář */
.feedback-form-wrapper{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .6s ease, opacity .5s ease, margin-top .3s ease;
}
.feedback-form-wrapper.open{
  max-height:900px;
  opacity:1;
  margin-top:18px;
}




/* ============= RECENZE – STEJNÝ RYTMUS JAKO AKTUALITY ============= */


.col-reviews {
  display: flex;
  flex-direction: column;
}

/* Tabulka */
.reviews-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

/* Grid pro tělo tabulky – přesně 4 pevné řádky */
.reviews-table tbody {
  display: grid;
  grid-template-rows: repeat(4, minmax(58px, 1fr)); /* uprav dle počtu aktualit */
}

/* Každý řádek = 2 sloupce: (jméno + hvězdy) | text recenze */
.reviews-table tr {
  display: grid;
  grid-template-columns: 180px 1fr; /* stejné sloupce jako u Aktualit */
  align-items: center;
  gap: 22px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}
.reviews-table tr:last-child {
  border-bottom: none;
}

/* Levý sloupec: jméno + hvězdy (vnitřní grid pro zarovnání hvězd) */
.reviews-table th {
  display: grid;
  grid-template-columns: 120px 6.6ch; /* 120px jméno | 6.6ch hvězdy */
  align-items: center;
  gap: 8px;
  text-align: left;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}

.reviews-table .who {
  overflow: hidden;
  text-overflow: ellipsis;
}

.reviews-table .stars {
  justify-self: start;
  font-size: 17px;
  letter-spacing: 2px;
  color: #ffd700;
  text-shadow:
    0 0 6px rgba(255,215,0,.6),
    0 0 12px rgba(255,200,0,.4);
}

/* Pravý sloupec – text recenze */
.reviews-table td {
  color: var(--muted, #a7b4c5);
  font-size: 17px;
  line-height: 1.6;
  font-style: italic;
} 

/* ====== Mobilní zobrazení ====== */
@media (max-width: 640px) {
  .col.col-reviews .col-head { align-items: flex-start; flex-wrap: wrap; }
  .col.col-reviews .btn-recenze { padding: 10px 16px; }

  .reviews-table tbody {
    grid-template-rows: repeat(4, minmax(64px, 1fr));
  }
  .reviews-table tr {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 6px;
  }
  .reviews-table th {
    grid-template-columns: minmax(90px, 1fr) auto;
    font-size: 18px;
  }
  .reviews-table td { font-size: 16px; }
}
  


/* ========== HVĚZDIČKOVÉ HODNOCENÍ (rating) ========== */
.rating{
  display:inline-flex;
  flex-direction:row-reverse;
  gap:8px;
  font-size:28px;
  user-select:none;
}
.rating input{ display:none; }
.rating label{
  cursor:pointer;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.4));
  transition: transform .1s ease;
  color:#7f8da1; /* neaktivní */
}
.rating label:hover{ transform: scale(1.05); }
.rating input:checked ~ label,
.rating label:hover,
.rating label:hover ~ label{ color:var(--star); }

/* ========== HLAVIČKA BLOKU RECENZÍ + TLAČÍTKO ========== */
/* Nadpis vlevo, tlačítko vpravo */
.col.col-reviews .col-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px; /* lehký odstup pod hlavičkou */
}

/* „Přidat recenzi“ – neutrální, jemně pulzující tlačítko */
.col.col-reviews .btn-recenze{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.3px;

  color:#0b1017; /* tmavý text na světlém tlačítku */
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,240,240,.85));
  box-shadow:0 0 10px rgba(255,255,255,.25), 0 0 20px rgba(255,255,255,.15);

  transition:transform .2s ease, box-shadow .3s ease, filter .2s ease;
  animation:pulseNeutral 2.4s ease-in-out infinite;
  will-change: transform, box-shadow;
}
.col.col-reviews .btn-recenze:hover{
  transform:translateY(-2px);
  box-shadow:0 0 14px rgba(255,255,255,.35), 0 0 28px rgba(255,255,255,.25);
}
.col.col-reviews .btn-recenze:focus{
  outline:2px solid rgba(255,255,255,.55);
  outline-offset:2px;
}

/* Jemné „dýchání“ (sdílené i s jinými tlačítky, chceš-li) */
@keyframes pulseNeutral{
  0%,100%{
    box-shadow:0 0 8px rgba(255,255,255,.25), 0 0 18px rgba(255,255,255,.10);
    transform:scale(1);
  }
  50%{
    box-shadow:0 0 16px rgba(255,255,255,.45), 0 0 36px rgba(255,255,255,.25);
    transform:scale(1.04);
  }
}
/* Respektuj uživatele, kteří nechtějí animace */
@media (prefers-reduced-motion: reduce){
  .col.col-reviews .btn-recenze{ animation:none; }
}


/* Zarovnání jména a hvězd do sloupce */
.reviews-table th{
  display: grid;
  grid-template-columns: 100px auto; /* šířku klidně doladíš (100–160px) */
  align-items: center;
  gap: 8px;
  text-align: left;
  white-space: nowrap;
}

.reviews-table .who{
  font-weight: 800;
  overflow: hidden;             /* když bude jméno dlouhé… */
  text-overflow: ellipsis;
}

.reviews-table .stars{
  justify-self: start;          /* hvězdy začnou přesně ve stejné svislé ose */
  margin-left: 0;               /* zrušíme případné posuny */
}

/* Mobil – necháme je vedle sebe, jen uvolníme šířku jména */
@media (max-width:640px){
  .reviews-table th{
    grid-template-columns: minmax(90px, 1fr) auto;
  }
}


/* Hvězdy u recenze – jemný zlatý gradient + pulzující záře */
.reviews-table th .stars {
  font-size: 17px;
  font-weight: 700;
  background: linear-gradient(90deg, #ffea70 0%, #ffd000 50%, #ffb400 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 6px rgba(255, 215, 0, .6),
    0 0 12px rgba(255, 200, 0, .4);
  display: inline-block;
  animation: starPulse 1.8s ease-in-out infinite;
  transform-origin: center;
}

/* Pulz hvězdiček */
@keyframes starPulse {
  0%, 100% {
    text-shadow:
      0 0 6px rgba(255, 215, 0, .6),
      0 0 12px rgba(255, 200, 0, .4);
    transform: scale(1);
  }
  50% {
    text-shadow:
      0 0 10px rgba(255, 235, 100, .9),
      0 0 18px rgba(255, 215, 0, .7);
    transform: scale(1.08);
  }
}

/* Pravý sloupec: text recenze */
.reviews-table td {
  color: var(--muted, #a7b4c5);
  font-size: 17px;
  line-height: 1.6;
}


/* ========== Mobilní úpravy (stack pod sebe) ========== */
@media (max-width:640px){
  .col.col-reviews .col-head{ align-items:flex-start; flex-wrap:wrap; }
  .col.col-reviews .btn-recenze{ padding:10px 16px; }

  .reviews-table tbody{
    grid-template-rows: repeat(4, minmax(64px, 1fr));
  }
  .reviews-table tr{
    grid-template-columns: 1fr;
    align-items:flex-start;
    gap:6px;
  }
  .reviews-table th{ font-size:18px; }
  .reviews-table td{ font-size:16px; }
}




/* ============= AKTUALITY – FINÁLNÍ VERZE ============= */




/* 📦 Obecné rozložení a tabulka */
.col-news {
  display: flex;
  flex-direction: column;
}

/* Tabulka aktualit */
.news-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

/* Grid pro řádky – rovnoměrná výška všech čtyř */
.news-table tbody {
  display: grid;
  grid-template-rows: repeat(3, minmax(58px, 1fr)); /* uprav dle počtu aktualit */
}

/* Každý řádek = 2 sloupce: (datum) | (text) */
.news-table tr {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 22px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}
.news-table tr:last-child {
  border-bottom: none;
}

/* Levý sloupec (datum) */
.news-table th {
  font-size: 20px;
  font-weight: 800;
  color: var(--text, #fff);
  text-align: left;
  white-space: nowrap;
}

/* Pravý sloupec (text aktuality) */
.news-table td {
  color: var(--muted, #a7b4c5);
  font-size: 17px;
  line-height: 1.6;
}

/* 🔗 Odkazy uvnitř aktualit */
.news-table a {
  color: var(--accent, #3ea6ff);
  font-weight: 700;
  text-decoration: none;
}
.news-table a:hover {
  text-decoration: underline;
}

/* 🆕 „Ping“ animace u nových dat */
.news-table tr.is-new th time {
  position: relative;
  padding-right: 16px;
}
.news-table tr.is-new th time::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #3ea6ff);
  transform: translateY(-50%);
}
.news-table tr.is-new th time::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #3ea6ff);
  transform: translateY(-50%) scale(1);
  opacity: .6;
  animation: newsPing 1.6s ease-out infinite;
}

/* Kroužek se rozpíná a mizí */
@keyframes newsPing {
  0% {
    transform: translateY(-50%) scale(1);
    opacity: .6;
  }
  80%, 100% {
    transform: translateY(-50%) scale(2.2);
    opacity: 0;
  }
}

/* === MOBILE CENTER FOR INFOHUB + NEWS === */
@media (max-width: 768px){

  /* 1) Rodič sekce – poskládat kapsle pod sebe a vystředit */
  .infohub-3-inner,
  .infohub-3 {                     /* pro jistotu obě varianty názvu */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;     /* centrování kapslí */
    gap: 22px;
    text-align: center;
  }

  /* 2) Každá kapsle (skleněná „col“) – šířka a centrování */
  .infohub-3-inner .col,
  .infohub-3 .col {
    width: 100%;
    max-width: 640px;                  /* optická šířka na mobilu */
    margin: 0 auto;                    /* vycentrování */
    text-align: center;
    min-width: 0;                       /* prevence přetékání */
  }

  /* 3) AKTUALITY – z 2 sloupců na 1 sloupec */
  .news-table tbody{
    display: block;                     /* grid na <tr>, tbody jako blok */
  }
  .news-table tr{
    display: grid;
    grid-template-columns: 1fr;         /* 💥 žádných 180px vlevo */
    gap: 8px;
    padding: 12px 0;
  }
  .news-table th,
  .news-table td{
    display: block;
    text-align: center;                 /* vše doprostřed */
  }
  .news-table th{
    white-space: normal;                /* povolí zalomení datumu */
    font-size: 18px;                    /* o chlup menší na mobilu */
  }
  .news-table td{
    max-width: 90%;
    margin: 0 auto;
    line-height: 1.5;
  }

  /* 4) NEW badge udržíme uprostřed */
  .infohub-3-inner .badge,
  .infohub-3 .badge,
  .infohub-3-inner .new,
  .infohub-3 .new{
    align-self: center;
  }

  /* 5) Nadpis + podnadpis sekce na střed */
  .infohub-3-head h2,
  .infohub-3-head .subheading{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}


/* ============= PILULKA NEW ============= */
/* Neutrální pulzující styl – ladí s ostatními tlačítky */
.badge-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .3px;
  text-decoration: none;
  padding: 10px 22px;
  font-size: 14px;

  color: #0b1017; /* tmavý text na světlém pozadí */
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,240,240,.85));
  box-shadow: 0 0 10px rgba(255,255,255,.25), 0 0 20px rgba(255,255,255,.15);

  transition: transform .2s ease, box-shadow .3s ease, filter .2s ease;
  animation: badgePulseNeutral 2.4s ease-in-out infinite;
  will-change: transform, box-shadow;
}

/* Hover – jemné zesvětlení a nadzvednutí */
.badge-new:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 0 16px rgba(255,255,255,.35), 0 0 30px rgba(255,255,255,.25);
}

/* Pulzující efekt (stejný styl jako ostatní tlačítka) */
@keyframes badgePulseNeutral {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(255,255,255,.25), 0 0 18px rgba(255,255,255,.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(255,255,255,.45), 0 0 36px rgba(255,255,255,.25);
  }
}

/* 💡 Pokud má uživatel vypnuté animace */
@media (prefers-reduced-motion: reduce) {
  .badge-new { animation: none; }
}



/* ==================== MÁTE DOTAZ – HODNOCENÍ ==================== */



/* Vnější kapsle */
.dotaz-hodnoceni {
  display: flex;
  flex-direction: column;
  gap: 22px;                 
  align-items: center;
  justify-content: center;
  text-align: center;

 /*     VNĚJŠÍ KAPSLE
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 26px 24px;
  width: 100%;
  max-width: 380px;
  margin: auto; 

  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 20px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease; */
}

/* Nadpis */
.dotaz-hodnoceni h3 {
  font-size: clamp(18px, 2.3vw, 22px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Text */
.dotaz-hodnoceni p {
  color: rgba(255,255,255,.8);
  margin-bottom: 14px;
}

/* Dělící čára s přechodem */
.dotaz-hodnoceni hr {
  width: 100%;
  height: 4px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #3ea6ff, #ff9f43);
  opacity: .85;
}

/* Hodnocení */
.rating-badge {
  font-weight: 800;
  color: #fff;
  font-size: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 8px 14px;
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* ==================== PULZUJÍCÍ TLAČÍTKA ==================== */
.btn-dotaz,
.btn-hodnoceni {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .3px;
  text-decoration: none;
  padding: 10px 22px;
  font-size: 14px;

  color: #0b1017; /* tmavý text na světlém tlačítku */
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,240,240,.85));
  box-shadow: 0 0 10px rgba(255,255,255,.25), 0 0 20px rgba(255,255,255,.15);
  transition: transform .2s ease, box-shadow .3s ease, filter .2s ease;
  animation: btnPulseNeutral 2.6s ease-in-out infinite;
  will-change: transform, box-shadow;
}

  /* ✅ Průsvitné glass pozadí 
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #ffffff; /* text bílý 
  text-shadow: 0 0 6px rgba(255,255,255,.6); */

/* Hover – jemné zesvětlení a nadzvednutí */
.btn-dotaz:hover,
.btn-hodnoceni:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 0 16px rgba(255,255,255,.35), 0 0 30px rgba(255,255,255,.25);
}

/* Jemné dýchání – sjednocené s ostatními pulzujícími tlačítky */
@keyframes btnPulseNeutral {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(255,255,255,.25), 0 0 18px rgba(255,255,255,.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(255,255,255,.45), 0 0 36px rgba(255,255,255,.25);
  }
}

/* Pokud má uživatel vypnuté animace */
@media (prefers-reduced-motion: reduce) {
  .btn-dotaz,
  .btn-hodnoceni { animation: none; }
}

/* Mobile přizpůsobení */
@media (max-width: 480px) {
  .dotaz-hodnoceni {
    padding: 20px 18px;
    max-width: 95%;
  }
  .btn-dotaz,
  .btn-hodnoceni {
    padding: 10px 18px;
    font-size: 13px;
  }
}


/* 🎯 OBAL pro všechny ručně vybrané top recenze */


.top-reviews {
  display: flex;                 /* všechny recenze pod sebou */
  flex-direction: column;        /* svislé uspořádání */
  gap: 12px;                     /* mezera mezi kartami */
  margin-top: 12px;
}

/* 💬 JEDNA recenze v kapsli */
.review-card {
 /* background: rgba(255, 255, 255, 0.08);  průsvitné pozadí – stejné jako u druhé kapsle */
  border: 1px solid rgba(255, 255, 255, 0.15); /* jemný bílý obrys */
  border-radius: 12px;
  padding: 16px 18px;
 /* backdrop-filter: blur(6px) saturate(140%); */
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ✨ Efekt při přejetí myší – lehké zvednutí */
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* 🌟 HVĚZDY – jemný puls bez záře */
.review-stars {
  color: #ffd159;               /* teplá zlatá barva hvězd */
  font-size: 1.2rem;
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: inline-block;
}

/* Každá hvězda se jemně zvětšuje v rytmu */
.review-stars span {
  display: inline-block;
  animation: pulseStar 2.4s ease-in-out infinite;
}

/* Každá hvězda má zpoždění → efekt "vlny" */
.review-stars span:nth-child(1) { animation-delay: 0s; }
.review-stars span:nth-child(2) { animation-delay: 0.15s; }
.review-stars span:nth-child(3) { animation-delay: 0.3s; }
.review-stars span:nth-child(4) { animation-delay: 0.45s; }
.review-stars span:nth-child(5) { animation-delay: 0.6s; }

/* 🔄 Klíčová animace pro jemné pulzování */
@keyframes pulseStar {
  0%, 100% {
    transform: scale(1);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.18);   /* lehké zvětšení */
    opacity: 1;               /* malý „nádech“ */
  }
}

/* 📝 Text recenze */
.review-text {
  font-style: italic;
  font-size: 0.95rem;
  color: #eaeff5;
  margin: 0 0 6px;
  line-height: 1.5;
  text-align: left;           /* text zůstane vlevo */
}

/* ✍️ Meta informace (jméno, datum) */
.review-meta {
  font-size: 0.85rem;
  color: #b9c5d5;
  text-align: right;          /* podpis zarovnaný doprava */
  margin-top: 4px;
}
  

/* ===============================================
   LETNÍ SVĚTLÝ PRUH POD FOTKOU – AKTIVNÍ
   =============================================== */

/* ❄ ZIMNÍ TMAVÁ VARIANTA – zakomentovaná */
#slozky {
  background: #0b1017;
} 



/* ☀ LETNÍ SVĚTLÁ VARIANTA – aktivní 
#slozky {
  background: #f8fbff;
  padding-top: 20px;
  padding-bottom: 20px;
}  */



/* ====== ZÁŘIVÉ PADAJÍCÍ HVĚZDY (overlay) ====== */


.starfall{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;              /* dej tak, aby to bylo nad pozadím, ale pod UI */
  overflow: hidden;
  opacity: .85;
}

/* jednotlivá hvězda */
.starfall .star{
  position: absolute;
  top: -12vh;
  left: 0;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 40%, rgba(255,255,255,0) 70%);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.45));
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
  animation:
    starFall var(--d) linear var(--delay) infinite,
    starTwinkle calc(var(--d) * .45) ease-in-out calc(var(--delay) * .6) infinite;
}

/* pád + lehké kývání do strany */
@keyframes starFall{
  0%   { transform: translate3d(var(--x), -15vh, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: .95; }
  100% { transform: translate3d(calc(var(--x) + var(--drift)), 115vh, 0) rotate(120deg); opacity: 0; }
}

/* jemné poblikávání */
@keyframes starTwinkle{
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

/* respektuj uživatele s omezením animací */
@media (prefers-reduced-motion: reduce){
  .starfall { display: none; }
}