/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* POZADÍ */
.background {
  position: fixed;
  inset: 0;
  background: url("krajina 6.png") center / cover no-repeat;
  z-index: -2;
}

/* SKLO 0 - pozadí */

.glass {
  width: 100vw;
  min-height: 100px;
  padding: 32px 56px;

  /* skoro žádná bílá barva */
  background: rgba(255, 255, 255, 0.10);

  border: 1px solid rgba(255,255,255,0.22);

  /* KLÍČ: menší blur */
  backdrop-filter: blur(10px) saturate(1.25) contrast(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.25) contrast(1.05);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 20px 60px rgba(0,0,0,0.06);

  box-shadow: 0 1px 0 rgba(255,255,255,0.35); /* zjemnuje stín */
}


.header {
  height: 40px;    /* zamkmnutá lyšta logo */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo {
  flex-shrink: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}



/* LOGO */
.logo {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #111;
  font-weight: 700;
}

.logo {
  flex-shrink: 0;           /* ← logo se nezmenší */
}


.dot {
  width: 10px;
  height: 10px;
  background: #6ddcff;
  border-radius: 50%;
}

/* Pavel || Kašša – 2× větší */
.name {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 36px;
  font-weight: 790;
  line-height: 1;
  letter-spacing: -0.5px;
  color: #0f172a;
}

.first { margin-right: 14px; }
.last  { margin-left: 14px; }

.divider {
  width: 3px;
  height: 40px;
  margin: 0 2px;
}


/* BAREVNÉ LINKY */
.divider {
  width: 3px;
  height: 40px;
  display: inline-block;
}

.divider.green {
  background: #3ddc97; /* zelená - grenn */
  transform: scaleX(1.0);
}

.divider.blue {
  background: #3b82f6;  /* modrá - blue */
  transform: scaleX(1.0);
}

/* MENU */
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.nav a {
  text-decoration: none;
  color: rgba(15,23,42,0.7);
  font-size: 14px;
}

/* KONTAKT – MINIMALISTICKÁ SKLENĚNÁ KOULE */
.nav a.btn {
  position: relative;
  width: 64px;
  height: 64px;

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

  isolation: isolate;   /* oddělí vrstvy */
  overflow: visible;

  text-decoration: none;
}

/* KOULE */
.nav a.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;

  /* DUHOVÝ LOM – holografický efekt */
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,255,255,0.95),
      rgba(255,200,255,0.45) 35%,
      rgba(180,220,255,0.35) 50%,
      rgba(180,255,220,0.25) 65%,
      rgba(255,255,200,0.18) 78%,
      rgba(255,255,255,0.08) 100%
    );

  /* skleněný okraj */
  border: 1px solid rgba(255,255,255,0.7);

  /* holografická hloubka */
  box-shadow:
    inset 0 0 1px rgba(255,255,255,1),
    inset 0 0 12px rgba(255,255,255,0.35),
    0 0 18px rgba(180,200,255,0.35),
    0 10px 26px rgba(0,0,0,0.16);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* HOVER – roste jen koule, ne lišta */
.nav a.btn:hover::before {
  transform: scale(1.15);

  box-shadow:
    inset 0 0 2px rgba(255,255,255,1),
    inset 0 0 18px rgba(255,255,255,0.45),
    0 0 26px rgba(180,220,255,0.55),
    0 14px 32px rgba(0,0,0,0.18);
}

/* TEXT NAD KOULÍ – OSTRÝ */
.nav a.btn span {
  position: relative;
  z-index: 2;
  pointer-events: none;

  color: rgba(15,23,42,0.75);
  font-weight: 600;

  mix-blend-mode: normal;
  filter: none;
}
.nav a.btn span {
  opacity: 0.7;
}

.nav a.btn:hover span {
  opacity: 0.9;
}


/* TEČKA - SCHOVAT */
.dot {

  display: none;
}

/* =========================================================
   GLASS PANEL 1 – SAMOSTATNÝ (LEVÁ STRANA)
   ========================================================= */

.glass-panel {
  max-width: 900px;
  margin: 90px auto 0 0px;
  padding: 32px 36px;

  border-radius: 5px;
  background: rgba(255,255,255,0.25);

  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);

  border: 1px solid rgba(255,255,255,0.6);

  box-shadow:
    inset 0 0 1px rgba(255,255,255,0.9),
    0 18px 40px rgba(0,0,0,0.12);
}

/* uzavře float */
.panel-content {
  overflow: hidden;
}

/* ===== FOTO – OBTÉKANÉ TEXTEM ===== */
.panel-media {
  float: right;

  width: 320px;
  height: 220px;

  margin: 42px 0 20px 28px; /* ⬅️ TOP je klíčový */

  border-radius: 5px;
  background: url("pavel1.png") center / cover no-repeat;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 18px 36px rgba(0,0,0,0.18);
}

/* ===== TEXT ===== */
.panel-text h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #0f172a;
}

.panel-text p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(15,23,42,0.8);

  text-align: justify;          /* ⬅️ zarovnání do bloku */
  hyphens: auto;                /* ⬅️ dělení slov */
}

.panel-text p:first-of-type {
  font-weight: 500;
}

/* =========================================================
   GLASS PANEL 2 – SAMOSTATNÝ (PRAVÁ STRANA)
   ========================================================= */

.glass-panel-2 {
  max-width: 900px;
  margin: 90px 0px 0 auto; /* ⬅️ vpravo */
  padding: 32px 36px;

  border-radius: 5px;
  background: rgba(255,255,255,0.25);

  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);

  border: 1px solid rgba(255,255,255,0.6);

  box-shadow:
    inset 0 0 1px rgba(255,255,255,0.9),
    0 18px 40px rgba(0,0,0,0.12);
}
.glass-panel-2 .panel-content {
  overflow: hidden;
}

.glass-panel-2 .panel-media {
  float: left;

  width: 320px;
  height: 220px;

  margin: 42px 28px 20px 0;

  border-radius: 5px;

  background: url("zamereni 1.png") center / cover no-repeat;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 18px 36px rgba(0,0,0,0.18);
}
.glass-panel-2 .panel-text h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #0f172a;
}

.glass-panel-2 .panel-text p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(15,23,42,0.8);

  text-align: justify;
  hyphens: auto;
}

.glass-panel-2 .panel-text p:first-of-type {
  font-weight: 500;
}

/* =========================================================
   GLASS PANEL 3 – SAMOSTATNÝ (PRAVÁ STRANA, POD PANEL 1)
   ========================================================= */

.glass-panel-3 {
  max-width: 900px;

  /* ⬅️ klíčové: posun dolů POD první panel */
  margin: 90px 800px 0 auto;

  padding: 32px 36px;

  border-radius: 5px;
  background: rgba(255,255,255,0.25);

  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);

  border: 1px solid rgba(255,255,255,0.6);

  box-shadow:
    inset 0 0 1px rgba(255,255,255,0.9),
    0 18px 40px rgba(0,0,0,0.12);
}

/* uzavření floatu */
.glass-panel-3 .panel-content {
  overflow: hidden;
}

/* FOTO – OBTÉKANÉ TEXTEM */
.glass-panel-3 .panel-media {
  float: right;

  width: 320px;
  height: 220px;

  margin: 42px 0 20px 28px;

  border-radius: 5px;

  background: url("praxe 1.png") center / cover no-repeat;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 18px 36px rgba(0,0,0,0.18);
}

/* TEXT */
.glass-panel-3 .panel-text h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #0f172a;
}

.glass-panel-3 .panel-text p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(15,23,42,0.8);

  text-align: justify;
  hyphens: auto;
}

.glass-panel-3 .panel-text p:first-of-type {
  font-weight: 500;
}

/* =========================================================
   GLASS PANEL 4 – SAMOSTATNÝ (LEVÁ STRANA)
   ========================================================= */

.glass-panel-4 {
  max-width: 900px;

  /* ⬅️ levá strana + vertikální rytmus */
  margin: 90px auto 0 800px;

  padding: 32px 36px;

  border-radius: 5px;
  background: rgba(255,255,255,0.25);

  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);

  border: 1px solid rgba(255,255,255,0.6);

  box-shadow:
    inset 0 0 1px rgba(255,255,255,0.9),
    0 18px 40px rgba(0,0,0,0.12);
}

/* uzavření floatu */
.glass-panel-4 .panel-content {
  overflow: hidden;
}

/* FOTO – OBTÉKANÉ TEXTEM (ZRCADLOVĚ) */
.glass-panel-4 .panel-media {
  float: left;

  width: 220px;
  height: 220px;

  margin: 42px 28px 20px 0;

  border-radius: 5px;

  background: url("pavel4.png") center / cover no-repeat;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 18px 36px rgba(0,0,0,0.18);
}

/* TEXT */
.glass-panel-4 .panel-text h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #0f172a;
}

.glass-panel-4 .panel-text p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(15,23,42,0.8);

  text-align: justify;
  hyphens: auto;
}

.glass-panel-4 .panel-text p:first-of-type {
  font-weight: 500;
}

/* =========================================================
   GLASS PANEL 5 – CENÍK (SAMOSTATNÝ, PRAVÁ STRANA)
   ========================================================= */

.glass-panel-5 {
  max-width: 900px;
  margin: 90px 800px 0 auto;
  padding: 32px 36px;

  border-radius: 5px;
  background: rgba(255,255,255,0.25);

  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);

  border: 1px solid rgba(255,255,255,0.6);

  box-shadow:
    inset 0 0 1px rgba(255,255,255,0.9),
    0 18px 40px rgba(0,0,0,0.12);
}

.glass-panel-5 .panel-content {
  overflow: hidden;
}

.glass-panel-5 h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #0f172a;
}

.glass-panel-5 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.glass-panel-5 li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(15,23,42,0.15);
  font-size: 15px;
  color: rgba(15,23,42,0.8);
}

.glass-panel-5 li span {
  float: right;
  font-weight: 500;
}
/* =========================================================
   GLASS PANEL 6 – KONTAKT (FINÁLE)
   ========================================================= */

.glass-panel-6 {
  max-width: 900px;
  margin: 90px auto 0 800px;
  padding: 36px 36px;

  border-radius: 5px;
  background: rgba(255,255,255,0.3);

  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);

  border: 1px solid rgba(255,255,255,0.65);

  box-shadow:
    inset 0 0 1px rgba(255,255,255,0.9),
    0 20px 48px rgba(0,0,0,0.14);
}

.glass-panel-6 h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #0f172a;
}

.glass-panel-6 p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(15,23,42,0.8);
}

.glass-panel-6 a {
  display: inline-block;
  margin-top: 16px;
  color: #0f172a;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(15,23,42,0.4);
}

/* ======================================================
   SCROLL BUFFER – PRO DÝCHÁNÍ STRÁNKY - VŽDY POSLEDNÍ BLOK
   ====================================================== */

.scroll-buffer {
  min-height: 20vh; /* ⬅️ nastavíš pocitový konec stránky */
}



/* ======================================================
   MOBILNÍ ZOBRAZENÍ – JEDEN SLOUPEC, CENTROVANÉ
   ====================================================== */

@media (max-width: 768px) {

  /* Horní lišta */
  .glass {
    padding: 20px 16px;
  }

  .header {
    height: auto;
    flex-direction: column;
    gap: 12px;
  }

  .nav {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* VŠECHNY GLASS PANELY – sjednocení */
  .glass-panel,
  .glass-panel-2,
  .glass-panel-3,
  .glass-panel-4,
  .glass-panel-5,
  .glass-panel-6 {

    max-width: calc(100% - 32px);
    margin: 48px auto;
    padding: 24px;

  }

  /* Obsah panelu */
  .panel-content {
    overflow: visible;
  }

  /* FOTO – vždy nahoře */
  .panel-media {
    float: none !important;
    width: 100%;
    height: 220px;
    margin: 0 0 20px 0;
    border-radius: 12px;
  }

  /* TEXT */
  .panel-text h2 {
    font-size: 20px;
  }

  .panel-text p {
    font-size: 15px;
    line-height: 1.65;
    text-align: left;
    hyphens: none;
  }

  /* CENÍK */
  .glass-panel-5 li span {
    float: none;
    display: block;
    margin-top: 4px;
    opacity: 0.8;
  }

  /* Kontakt */
  .glass-panel-6 a {
    display: block;
    margin-top: 12px;
  }

}