@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900");

@import url("fontawesome-all.min.css");



/* ========== Proměnné ========== */

:root{

  /* společné rozměry obsahu sekcí */

  --section-w: clamp(420px, 50vw, 760px);

  --section-ml: 4rem;



  /* odsazení shora v #one */

  --one-top-offset: 1.5rem;



  /* barva textu pro #two */

  --two-text: #0015ff;



  /* šířky pravého obrazového praporku (můžeš změnit třeba na 40%/60%) */

  --media-w-one: 60%;

  --media-w-three: 42%;



  /* výřez fotek (object-position) – změň podle potřeby */

  --crop-one: center;      /* top | bottom | left | right | 30% 50% ... */

  --crop-three: center;

}



/* ========== Základ ========== */

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

html{ scroll-behavior:smooth; }

body{

  margin:0; min-width:320px; background:#fff; color:#39454b;

  -webkit-text-size-adjust:none; font:300 18pt/1.75 "Source Sans Pro",sans-serif;

  letter-spacing:.025em; text-decoration:none; padding-top:3em;

}

img{ max-width:100%; display:block; }

ol,ul{ margin:0 0 1em; padding:0; list-style:none; }

p,dl,table{ margin:0 0 1em; }

mark{ background:transparent; color:inherit; }

a{ color:#98c593; text-decoration:none; transition:color .2s ease-in-out; }

strong,b{ font-weight:900; }

em,i{ font-style:italic; }

h1,h2,h3,h4,h5,h6{ margin:0 0 .6em; font-weight:900; letter-spacing:-.0325em; }

h2{ font-size:2.25em; line-height:1.25; letter-spacing:-.05em; }

header p{ margin:1em 0 0; padding:0 0 .5em; }

footer{ margin-top:2em; }



/* ========== Spinner/overlay (při načítání) ========== */

@keyframes spinner-rotate{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

@keyframes spinner-show{ from{opacity:0} to{opacity:1} }

@keyframes spinner-hide{

  0%{transform:scale(1) rotate(0); color:#e5e6e7; z-index:100001}

  99%{transform:scale(.5) rotate(360deg); color:#e5e6e7; z-index:100001}

  100%{transform:scale(.5) rotate(360deg); color:#e5e6e7; z-index:-1}

}

@keyframes overlay-hide{

  0%,15%{opacity:1; z-index:100000}

  99%{opacity:0; z-index:100000}

  100%{opacity:0; z-index:-1}

}

body::before{

  animation: spinner-show 1.5s .25s ease forwards, spinner-hide .25s ease-in-out forwards;

  font-family:FontAwesome; content:'\f1ce';

  position:fixed; left:50%; top:50%; width:2em; height:2em; margin:-1em 0 0 -1em;

  line-height:2em; font-size:2em; text-align:center; color:#e5e6e7; opacity:0; z-index:-1;

}

body::after{

  animation: overlay-hide 1.5s ease-in forwards;

  content:""; position:fixed; inset:0; background:#fff; opacity:0; z-index:-1;

}

body.is-preload::before{

  animation: spinner-show 1.5s .25s ease forwards, spinner-rotate .75s linear infinite;

  z-index:100001;

}

body.is-preload::after{ animation:none; opacity:1; z-index:100000; }



/* ========== Tlačítka ========== */

.button, button, input[type=button],input[type=submit],input[type=reset]{

  appearance:none; display:inline-block; cursor:pointer; border:0; border-radius:3.5em;

  height:3.5em; line-height:3.5em; padding:0 2em; background:#98c593; color:#fff;

  transition:background-color .2s ease-in-out; text-align:center;

}

.button:hover,button:hover,input[type=button]:hover,input[type=submit]:hover,input[type=reset]:hover{ background:#a8cea4; }

.button:active,button:active,input[type=button]:active,input[type=submit]:active,input[type=reset]:active{ background:#88bc82; }



.button.style2{ background:transparent; border:2px solid #e5e6e7; color:inherit; }

.button.style2:hover{ background:rgba(229,230,231,.25); }

.button.style2:active{ background:rgba(229,230,231,.375); }

.button.down{ width:5em; height:5em; line-height:4.5em; padding:0; text-indent:-10em; overflow:hidden; background-position:center; background-repeat:no-repeat; background-image:url("images/dark-arrow.svg"); }

.button.down.anchored{ position:absolute; left:50%; bottom:0; border-bottom:0; border-radius:3em 3em 0 0; height:4.5em; margin-left:-2.5em; }



/* ========== Form ========== */

label{ display:block; }

input,select,textarea{ appearance:none; display:block; width:100%; border:2px solid #e5e6e7; border-radius:.5em; padding:.65em .75em; line-height:1.35; background:none; color:inherit; outline:0; transition:border-color .2s ease-in-out; }

input:focus,select:focus,textarea:focus{ border-color:#9ac8e9; }

textarea{ min-height:8em; }



/* ========== Ikony/obrázky ========== */

.icon{ position:relative; text-decoration:none; }

.icon::before{

  font-family:'Font Awesome 5 Free'; font-weight:400; line-height:inherit; display:inline-block;

}

.icon.solid::before{ font-weight:900; }

.icon.brands::before{ font-family:'Font Awesome 5 Brands'; }



.image{ position:relative; display:inline-block; }

.image::before{ content:""; position:absolute; inset:0; background:url("images/overlay.png"); }

.image.featured,.image.fit{ display:block; width:100%; }

.image.left{ float:left; margin:0 2em 2em 0; }



#intro {

  position: relative; /* kvůli absolutnímu pozicování uvnitř */

}



.socials {

  position: absolute;

  bottom: 2rem;          /* vzdálenost od spodku sekce */

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  justify-content: center;

  gap: 2.5rem;

}



.socials .icon img {

  width: 40px;   /* velikost ikon */

  height: auto;

}



@media (max-width:748px){

  .socials{

    bottom: 4.5rem;

  }

}  



@media (max-width:548px){

  .socials .icon img {

  width: 32px;   /* velikost ikon */

  height: auto;

  }

}



.zde{

  margin: 0;

}

/* ========== Akce/listy ========== */

ul.actions{ display:flex; gap:1em; align-items:center; }

ul.actions.stacked{ flex-direction:column; }

ul.actions.fit{ width:calc(100% + 1em); }

ul.menu li{ display:inline-block; margin-left:.5em; padding-left:.5em; border-left:1px solid #e5e6e7; line-height:1em; }

ul.menu li:first-child{ margin-left:0; padding-left:0; border-left:0; }



/* ========== Tabulka ========== */

table{ width:100%; border-collapse:collapse; }

table.default thead{ background:#39454b; color:#fff; }

table.default tfoot{ background:#e5e6e7; }

table.default td,table.default th{ padding:.5em 1em; }

table.default tbody tr:nth-child(2n){ background:rgba(229,230,231,.5); }



/* ========== Header ========== */

#header{

  position:fixed; inset:0 0 auto 0; height:3em; line-height:3em; z-index:10000;

  background:rgba(255,255,255,.95); box-shadow:0 0 .15em rgba(0,0,0,.1);

}

#header h1{ position:absolute; left:1em; top:0; height:100%; line-height:inherit; }

#header h1 a{ font-size:0.5em; } /* oprava desetinné tečky */

#header nav{ position:absolute; right:.5em; top:0; height:100%; line-height:inherit; }

#header nav ul{ margin:0; }

#header nav ul li{ display:inline-block; margin-left:.5em; font-size:.9em; }

#header nav ul li a{ display:block; padding:0 .5em; height:100%; line-height:inherit; color:inherit; }



/* ========== Sekce (layout) ========== */

.main{ display:flex; position:relative; margin:0; overflow-x:hidden; }

.main > .content{ width:45em; max-width:calc(100% - 4em); margin:0 auto; }

.main > .content > :last-child{ margin-bottom:0; }

.main.fullscreen{ min-height:100%; }



.main.style1{

  display:flex; align-items:center; justify-content:center; text-align:center; padding:3em 0;

}

.main.style1 h2{ font-size:4.25em; line-height:1; }

.main.style1 > .content{ transition:opacity 1s ease; opacity:1; margin:0; }

.main.style1.inactive > .content{ opacity:0; }



.main.style2{

  display:flex; align-items:center; justify-content:center; padding:3em 0; overflow:hidden;

}

.main.style2 > .content{

  position:relative; width:35%; margin:0; transform:translateZ(0); transition:transform 1s ease;

}

.main.style2.left{ justify-content:flex-start; }

.main.style2.right{ justify-content:flex-end; }

.main.style2.inactive.left > .content{ transform:translateX(-100%); }

.main.style2.inactive.right > .content{ transform:translateX(100%); }



.main.style3{ text-align:center; padding:6em 0; }

.main.style3 .content > header{ margin-bottom:2em; }

.main.style3.primary{ background:#fff; }

.main.style3.secondary{ background:#f5f6f7; }



.main.dark{ color:#fff; }

.main.dark a{ color:inherit; }

.main.dark .button.style2{ border-color:#fff; }

.main.dark .button.style2:hover{ background:rgba(255,255,255,.125); }

.main.dark .button.style2:active{ background:rgba(255,255,255,.25); }

.main.dark .button.style2.down{ background-image:url("images/dark-arrow.svg"); }



/* ========== Galerie ========== */

.gallery{

  display:flex; flex-wrap:wrap; width:45em; max-width:100%; margin:0 auto 2em;

}

.gallery article{ width:50%; position:relative; opacity:1; transform:translateX(0); transition:transform 1s ease, opacity 1s ease; }

.gallery article .image{ margin:0; display:block; }

.gallery.inactive article.from-left{ transform:translateX(-14em); }

.gallery.inactive article.from-right{ transform:translateX(14em); }

.gallery.inactive article.from-top{ transform:translateY(-7em); }

.gallery.inactive article.from-bottom{ transform:translateY(7em); }



/* ========== Poptrox (lightbox) ========== */

.poptrox-popup{

  box-sizing:content-box; background:#fff; padding-bottom:3em; box-shadow:0 .1em .15em rgba(0,0,0,.15);

}

.poptrox-popup .loader{

  position:absolute; left:50%; top:50%; margin:-1em 0 0 -1em; width:2em; height:2em; font-size:2em;

}

.poptrox-popup .loader::before{

  content:'\f1ce'; font-family:FontAwesome; display:block; width:2em; height:2em; line-height:2em; animation:spinner-rotate .75s linear infinite; color:#e5e6e7; text-align:center;

}

.poptrox-popup .caption{

  position:absolute; left:0; bottom:0; width:100%; height:3em; line-height:2.8em; background:#fff; text-align:center; cursor:default; z-index:1; font-size:.9em;

}

.poptrox-popup .nav-next,.poptrox-popup .nav-previous{

  position:absolute; top:0; width:50%; height:100%; opacity:0; cursor:pointer; background:rgba(0,0,0,.01); transition:opacity .2s ease-in-out;

}

.poptrox-popup:hover .nav-next, .poptrox-popup:hover .nav-previous{ opacity:.5; }

.poptrox-popup:hover .nav-next:hover, .poptrox-popup:hover .nav-previous:hover{ opacity:1; }

.poptrox-popup .nav-next{ right:0; }

.poptrox-popup .nav-previous{ left:0; transform:scaleX(-1); }

.poptrox-popup .closer{

  position:absolute; top:0; right:0; width:64px; height:64px; text-indent:-9999px; z-index:2; opacity:0; transition:opacity .2s ease-in-out;

}

.poptrox-popup .closer::before{

  content:""; position:absolute; right:16px; top:16px; width:40px; height:40px; border-radius:50%; box-shadow:inset 0 0 0 2px #fff; background:url("images/poptrox-closer.svg") center/contain no-repeat; color:#fff;

}

.poptrox-popup:hover .closer{ opacity:.5; }

.poptrox-popup:hover .closer:hover{ opacity:1; }



/* ========== Pozadí sekcí ========== */

/* Intro zůstává s fotem na pozadí */

#intro{

  background:url("images/overlay.png"), url("../../images/intro.jpg");

  background-size:256px 256px, cover; background-attachment:fixed, fixed;

  background-position:top left, bottom center; background-repeat:repeat, no-repeat;

}



/* V #one a #three používáme pro fotku PRAPOREK (ne background image).

   Necháme jen overlay, aby modrý panel fungoval stejně. */

   #one{

    /* šířka levé části = celá šířka mínus praporek s fotkou */

    --bg-w: calc(100% - var(--media-w-one));

  

    background-image: url("images/overlay.png"), url("../../images/one.jpg"); /* změň název podle svého */

    background-repeat: repeat, no-repeat;

    background-position: top left, left center;

    background-size: 256px 256px, var(--bg-w) 100%;

    background-attachment: fixed, fixed;

   }

   #two {

    /* pozadí */

    background: url("images/overlay.png"), url("../../images/two.jpg");

    background-size: 256px 256px, cover;

    background-attachment: fixed, fixed;

    background-position: top left, center;

  

    /* text – barva z proměnné */

    color: var(--two-text);

  }

  

  #two h2,

  #two p {

    color: var(--two-text);

  }

  

#three{

  --bg-w: calc(100% - var(--media-w-three));



  background-image: url("images/overlay.png"), url("../../images/three.jpg"); /* změň název podle svého */

  background-repeat: repeat, no-repeat;

  background-position: top left, left center;

  background-size: 256px 256px, var(--bg-w) 100%;

  background-attachment: fixed, fixed;

}



#four{

  background:url("images/overlay.png"), url("../../images/four.jpg");

  background-size:256px 256px, cover; background-attachment:fixed, fixed;

  background-position:top left, center;

}



/* ========== Sdílené úpravy sekcí #one–#four (statické, vlevo, bez rámečku) ========== */

#one.main.style2,#two.main.style2,#three.main.style2,#four.main.style2{ justify-content:flex-start; }

#one.main.style2 > .content,#two.main.style2 > .content,#three.main.style2 > .content,#four.main.style2 > .content{

  width:var(--section-w); margin-left:var(--section-ml); margin-right:0; text-align:left;

  background:transparent; border:0; box-shadow:none; padding:0;

  transform:none !important; transition:none !important;

}



/* kotvy pro fixní header */

#intro,#one,#two,#three,#four,#work{ scroll-margin-top:3.5em; }



/* ========== Specifické sekce ========== */

/* #one – text nahoře + užší sloupec */

#one.main.style2{

  position:relative; overflow:hidden; align-items:flex-start;

}

#one.main.style2 > .content{

  max-width:400px; margin-left:4rem; line-height:1.7;

  padding-top:var(--one-top-offset);

}



/* #three – větší mezera nad šipkou + výška sekce */

#three.main.style2 {

  position: relative;

  overflow: hidden;

  align-items: flex-start;

  min-height: 100vh;   /* přidáno: sekce má vždy výšku celého okna */

  display: flex;

  flex-direction: column;

  justify-content: space-between; /* text nahoře, šipka dole */

}



#three .content {

  padding-bottom: 8rem; /* rezerva mezi textem a šipkou */

}



#three .content > p:last-of-type{ margin-bottom:4rem; }



/* PRAVÝ PRAPOREK – fotky pouze do části šířky sekce (půlka) */

#one .side-media,

#three .side-media{

  position:absolute; top:0; right:0; bottom:0;

  width:var(--media-w-one);  /* pro #one – níže přepíšeme #three */

  margin:0 !important; border-radius:0 !important; box-shadow:none !important;

  overflow:hidden; z-index:1;

}

#three .side-media{ width:var(--media-w-three); }



#one .side-media img,

#three .side-media img{

  display:block; width:100%; height:100% !important;

  object-fit:cover;

  object-position:var(--crop-one); /* níže přepíšeme pro #three */

  border-radius:0 !important; box-shadow:none !important;

}

#three .side-media img{ object-position:var(--crop-three); }



/* ========== Footer ========== */

#footer{

  display:flex; align-items:center; justify-content:space-between; line-height:1em;

  padding:1.5em; background:#39454b; color:rgba(185,186,187,.5);

}

#footer a{ color:inherit; }

#footer a:hover{ color:#b9babb; }

#footer ul.menu li{ border-left-color:rgba(185,186,187,.2); font-size:.9em; }



/* ========== Responsivita ========== */

@media (max-width:1920px){

  body{ font-size:17pt; }

}

@media (max-width:1680px){

  body{ font-size:15pt; }

}

@media (max-width:1280px){

  body{ font-size:13pt; }

  #one.main.style2 > .content,#two.main.style2 > .content,#three.main.style2 > .content,#four.main.style2 > .content{

    width:clamp(360px,60vw,680px); margin-left:2.5rem;

  }

}

@media (max-width:1000px){

  body{ font-size:13pt; }

}

@media (max-width:736px){

  body{ font-size:12pt; line-height:1.5; padding-top:2.5em; }

  #header{ height:2.5em; line-height:2.5em; }

  #header h1{ position:relative; left:0; text-align:center; height:2.5em; line-height:2.5em; }

  #header h1 a{ font-size:1em; }

  #header nav{ display:none; }



  .main.fullscreen{ height:auto !important; }

  .main.style1{ padding:4em 15px; }

  .main.style1 h2{ font-size:3em; }



  .main.style2{ padding:6em 15px; }

  .main.style2 .button.anchored{ display:none; }



  /* na mobilu dáme fotku pod text a omezíme její výšku */

  #one .side-media,

  #three .side-media{

    position:relative; top:auto; right:auto; bottom:auto; left:auto;

    width:100%; height:50vh; margin-top:1rem;

  }

  #one .side-media img,

  #three .side-media img{

    height:100% !important; object-fit:cover;

  }



  #one.main.style2 > .content,#two.main.style2 > .content,#three.main.style2 > .content,#four.main.style2 > .content{

    width:100%; margin:0 1.25rem;

  }

}



@media (max-width:480px){

  .main > .content{ max-width:calc(100% - 1.5em); }

}



/* ========== Contact box animace (ponecháno) ========== */

#contact{ overflow:hidden; padding-bottom:0; }

#contact .box{ transform:translateY(0); transition:transform 1s ease; position:relative; }

#contact.inactive .box{ transform:translateY(100%); }



/* ========== Utility ========== */

.box{ background:#fff; color:#39454b; padding:2em; }

.box > :last-child{ margin-bottom:0; }

.box.style2{ padding:3.5em 2.5em; }

hr{ border:0; border-top:1px solid #e5e6e7; }

blockquote{ border-left:.5em solid #e5e6e7; padding:1em 0 1em 2em; font-style:italic; }

sub{ position:relative; top:.5em; font-size:.8em; }

sup{ position:relative; top:-.5em; font-size:.8em; }



#one .button.down,

#three .button.down {

  position: absolute;

  bottom: 1rem;

  left: 50%;

  transform: translateX(-50%);

  z-index: 3; /* nad fotkou i nad overlay */

}



/* #one a #three: žádná spodní vnitřní mezera sekce,

   ať může být šipka úplně u spodního okraje */

   #one.main.style2,

   #three.main.style2{

     padding-bottom: 0;

     position: relative; /* jistota pro absolutní pozicování šipky */

   }

   

   /* Šipka: skutečné vycentrování a přitažení ke spodku + nad fotku */

   #one .button.down.anchored,

   #three .button.down.anchored{

     position: absolute;

     left: 50%;

     bottom: 0;                 /* úplně ke spodní hraně sekce */

     transform: translateX(-50%);

     margin-left: 0;            /* vypnout staré centrování přes margin */

     z-index: 5;                /* nad pravým obrazovým praporkem */

   }

   

   /* Rezerva mezi textem a šipkou jen v sekci #three */

#three .content {

  padding-bottom: 2rem; /* původně 6rem, zvětšil jsem */

}



#three .button.down.anchored {

  bottom: -4rem;          /* můžeš si klidně dát 2rem pokud chceš ještě víc odsazení od spodku */

}



/* #three – šipka přesně uprostřed LEVÉ části + větší mezera od textu */

#three .button.down.anchored {

  position: absolute;

  bottom: 0rem;      /* mezera od spodku */

  left: 50%;           /* přesný střed stránky */

  transform: translateX(-50%);

  margin-left: 0;

  z-index: 5;

}



#three .content{

  padding-bottom: 12rem !important;  /* víc místa mezi textem a šipkou */

}



/* Schovat popisek v rozkliknuté fotce (lightbox) */

.poptrox-popup .caption { 

  display: none !important; 

  height: 0 !important; 

  padding: 0 !important; 

}



/* === Velikost nadpisu v horní liště (desktop) === */

#header h1{

  font-size: 1rem;   /* uprav si: např. 0.9rem, 0.85rem, 1.1rem... */

  margin: 0;

  letter-spacing: 0;

}



/* === Menší na mobilech (volitelné) === */

@media (max-width: 736px){

  #header h1{

    font-size: 0.95rem;  /* klidně 0.9rem nebo 0.85rem */

  }

}



/* === MOBILE FIX pro #one a #three ===================================== */

@media (max-width: 736px){



  /* Pozadí: žádné 'fixed', vyplnit celou stránku */

  #one,

  #three{

    min-height: 100vh;

    background-attachment: scroll, scroll !important;

    background-size: 256px 256px, cover !important;

    background-position: top left, center !important;

  }



  /* ---- #one: obraz vpravo vedle textu (dvě kolony) ---- */

  #one{

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

    align-items: stretch;

  }



  /* ať content nepřepisuje grid šířkou/margins */

  #one.main.style2 > .content{

    width: auto !important;

    margin: 0 0 0 1.25rem !important;

  }



  /* vypnout původní "praporek pod text" a výšky */

  #one .side-media{

    position: static !important;

    width: 100% !important;

    height: auto !important;      /* přepíše dřívější 50vh */

    margin: 0 !important;

    align-self: stretch;

  }

  #one .side-media img{

    width: 100%;

    height: 100% !important;      /* drží stejnou výšku jako textový sloupec */

    object-fit: cover;

    display: block;

  }



  /* ---- #three: fotka POD textem, bez ořezu ---- */

  #three{ display: block; }



  #three.main.style2 > .content{

    width: calc(100% - 2.5rem) !important;

    margin: 0 1.25rem !important;

  }



  #three .side-media{

    position: static !important;

    width: 100% !important;

    height: auto !important;      /* přepíše dřívější 50vh */

    margin: 1rem 1.25rem 0 !important;

  }

  #three .side-media img{

    width: 100%;

    height: auto !important;

    object-fit: contain !important; /* neořezávat */

    display: block;

  }

}

/* === MOBILE doladění #one a #three =================================== */

@media (max-width: 736px){



  /* --- #one: fotka od horního po dolní okraj sekce --- */

  /* vezmeme vertikální padding ze sekce pryč a dáme ho jen textu */

  #one.main.style2{ padding-top: 0; padding-bottom: 0; }



  #one{

    display: grid;

    grid-template-columns: 1fr 1fr;  /* text | fotka */

    gap: 1rem;

    align-items: stretch;            /* ať se pravý sloupec vytáhne na celou výšku */

  }



  #one.main.style2 > .content{

    width: auto !important;

    margin: 0 0 0 1.25rem !important;

    padding-top: 3.5rem;             /* prostor nad textem (klidně uprav) */

    padding-bottom: 1.25rem;

  }



  #one .side-media{

    position: static !important;

    margin: 0 !important;

    height: auto !important;

    align-self: stretch;             /* klíčové: vyplní celou výšku řádku */

  }

  #one .side-media img{

    width: 100%;

    height: 100% !important;         /* sahá až k dolnímu i hornímu okraji sekce */

    object-fit: cover;

    display: block;

  }



  /* --- #three: menší mezera a obrázek od levého do pravého kraje --- */

  #three.main.style2{ padding-bottom: 0; }

  #three .content{

    padding-bottom: 1.25rem !important;  /* menší mezera nad obrázkem */

  }



  /* full-bleed přes vnitřní 15px padding sekce */

  #three .side-media{

    position: static !important;

    width: calc(100% + 30px) !important;

    margin: 0.5rem -15px 0 !important;   /* minus vnitřní padding sekce */

    height: auto !important;

  }

  #three .side-media img{

    width: 100%;

    height: auto !important;

    object-fit: contain !important;      /* bez ořezu; dej cover, pokud chceš plné vyplnění i za cenu řezu */

    display: block;

  }

}

/* === MOBILE: #one fotka až k pravému okraji ========================== */

@media (max-width: 736px){

  /* přetažení přes vnitřní 15px padding sekce */

  #one .side-media{

    width: calc(100% + 15px) !important;

    margin-right: -15px !important;   /* zruší vnitřní mezeru vpravo */

    height: auto !important;

    align-self: stretch;

  }

  #one .side-media img{

    width: 100%;

    height: 100% !important;

    object-fit: cover;

    display: block;

  }

}



/* === MOBILE FIX: #intro – ukaž fotku i v iOS Safari =================== */

@media (max-width: 736px){

  #intro{

    min-height: 100vh;

    background-attachment: scroll, scroll !important; /* místo fixed */

    background-size: 256px 256px, cover !important;

    background-position: top left, center !important;

    background-repeat: repeat, no-repeat !important;

  }

}





/* Speciální úprava jen pro sekci #two */

#two.main.style2 {

  justify-content: center;    /* vycentrování vodorovně */

  align-items: center;        /* vycentrování svisle */

  text-align: center;         /* text na střed */

}



#two.main.style2 > .contents {

  max-width: 800px;           /* omezená šířka textu */

  margin: 0 auto;

  padding: 2rem;

  color: #000;                /* černý text jen v této sekci */

  background: rgba(255, 255, 255, 0.9); /* volitelné: bílý podklad */

  border-radius: 12px;        /* volitelné: zaoblení boxu */

}