/* ============================================================
   SPOLECNE CSS pro vsechny stranky unikovahratrutnov.cz
   Ver. dle ORIGINALU: bublina = news.svg (#DAD300), 432x392,
   obsah natoceny -10 stupnu. Bublina je SOUCASTI ramce postavy
   (uvnitr .gfx-inner) -> drzi s postavou pri zmene okna.

   KLIC k stabilite: postava i bublina se skaluji podle MIN(vh,vw).
   Pres CSS promennou --u (= postava-jednotka) - 1 jednotka je
   konzistentni bez ohledu na pomer stran okna.
   ============================================================ */




   .link-jdou,
   .link-jdou:link,
   .link-jdou:visited,
   .link-jdou:hover,
   .link-jdou:active {
    color: #c13636;
       text-decoration: none; /* nebo none, podle vkusu */
   }  

   .room-block {
    display: block;
    height: 200px;
    height: 320px;
    height: 260px;
    margin-bottom: 120px;
    padding-bottom: 120px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 5px solid #c13636;
    border-bottom: 0 none;
}

.room-block:first-child {
    margin-top: 60px;
}

.room-block:last-child {
    border-bottom: 0 none;
}

.room-block.even .RB-content,
.room-block.even .RB-img {
    float: left;
}

.room-block.even .RB-img {
    margin-top: -1em;
}

.room-block.odd .RB-content,
.room-block.odd .RB-img {
    float: right;
}

.RB-content {
    /*display: block;*/
    width: calc(100% - 360px);
    width: calc(100% - 240px);
    width: calc(100% - 200px);
    
    
    height: 200px;
}

.RB-content .RBC-text {
    height: 110px;
    height: 85px;
    width: calc(100% - 30px);
    margin-right: 30px;
}

/*.room-block.odd .RB-content .RBC-text {*/
.room-block.even .RB-content .RBC-text {
    margin-right: 0;
    margin-left: 30px;
}

/*.room-block.odd .RB-content .RBC-buttons {*/
.room-block.even .RB-content .RBC-buttons {
    width: calc(100% - 30px);
    margin-left: 30px;
}

.room-block.even .RB-content .RBC-buttons {
    margin-top: -0.5em;
}

.RB-content .RB-btn {
    padding: 0.6em;
    margin: 20px 0;
    display: inline-block;
    border: solid 0.1em #c13636;
    color: #c13636;
    font-size: 1.6em;
    line-height: 1.1;
    transform: rotate(-2deg);
    text-decoration: none !important;
}

.RB-content .RB-btn.RB-more-btn {
   /* color: #fff;
    border-color: #fff;*/
    margin-right: 80px;
}

.RB-img{
  background-image: url(./imgs/jdou_i_po_tobe.jpg);
  height: 200px;
  width: 200px;
  background-position: center;
  border-radius: 100%;
  background-size: cover;
 }





@media (max-width: 720px) {
    
    .room-block {
        height: auto;
    }
    
    .room-block .RB-img, 
    .room-block .RB-content {
        float: none !important;
        display: block;
    }
    
    .room-block .RB-content {
        width: auto;
        height: auto;
        
    }
    
    .room-block .RB-content .RBC-text, 
    .room-block .RB-content .RBC-text * {
        text-align: center !important;
    }
    
    .room-block .RB-content .RBC-buttons {
        text-align: center;
    }
    
    .room-block .RB-img {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 40px;
    }
    
    
    .room-block.even .RB-content .RBC-text, 
    .room-block.even .RB-content .RBC-buttons, 
    .room-block.odd .RB-content .RBC-text, 
    .room-block.odd .RB-content .RBC-buttons {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

}



.overlay_left{
  position: fixed;   /* změna z absolute */
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;  /* jak daleko doleva černá zasahuje */
  z-index: 1;        /* nad .bg (z-index 0), pod .grafika (z-index 2) */
  background: linear-gradient(
    to right,
    rgb(0, 0, 1) 0%,
    rgb(0, 0, 1) 40%,   /* do 30% zůstává plná černá */
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;  /* aby se přes to dalo klikat na obsah pod */
}
   .overlay {
    position: fixed;   /* změna z absolute */
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    width: 60%;  /* jak daleko doleva černá zasahuje */
    z-index: 1;        /* nad .bg (z-index 0), pod .grafika (z-index 2) */
    background: linear-gradient(
      to left,
      rgb(0, 0, 1) 0%,
      rgb(0, 0, 1) 80%,   /* do 30% zůstává plná černá */
      rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;  /* aby se přes to dalo klikat na obsah pod */
  }
  /*
.sccz-widget{
  height: 600px!important;
}
  */
  .widget-container{
    height: 600px;
    width: 100%!important; 
    max-width: 500px!important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    display: block;

  }

   :root {
    --red:#c13636; --red-hi:#ff4f4f; --green:#4e832e; --dark:#080808;
  
    /* --u = univerzalni "postava-jednotka". Skaluje se s mensim
       rozmerem okna -> postava nikdy nevyleze za okraj pri zmene
       pomeru stran. Vychozi: 1u = 1% z mensi dimenze (vh nebo vw*0.74).
       Pomer 0.74 = pomer vyska/sirka pri kterem postava prestane
       dominovat svisle a zacne se omezovat horizontalne.            */
    --u: min(1vh, 0.74vw);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html, body { height:100%; }
  body {
    font-family:'Anton',sans-serif; color:#fff; background:var(--dark);
    line-height:1.6; font-weight:300; overflow-x:hidden;
    min-height:100dvh; position:relative;
  }
  
  /* ---------- POZADI (dve vrstvy: zakladni + efektova pro blikani) ----------
     parallax: JS nastavuje --px/--py; scale necha prostor pro posun       */
  .bg, .bg-eff {
    position:fixed; inset:0; z-index:0;
    background-repeat:no-repeat; background-size:cover; background-position:center center;
    transform:translate(var(--px,0), var(--py,0)) scale(1.08);
    will-change:transform;
  }
  .bg-eff { opacity:0; }
  @keyframes blik {
    0%{opacity:0} 50%{opacity:.3} 62.1%{opacity:.5} 62.2%{opacity:0}
    62.3%{opacity:1} 62.5%{opacity:0} 62.6%{opacity:1} 62.8%{opacity:0}
    63%{opacity:.5} 73.2%{opacity:0} 75%{opacity:.3} 90%{opacity:0}
    90.3%{opacity:1} 90.4%{opacity:0} 91%{opacity:.5} 95%{opacity:1} 100%{opacity:0}
  }
  body.flicker .bg-eff { animation:blik 10s infinite; }
  
  /* ---------- POSTAVA + BUBLINA (jeden ramec) ----------
     Vyska postavy = 94 * --u. V sirokem okne --u=1vh -> 94vh.
     V uzkem okne --u zacne klesat (omezeno sirkou) -> postava
     se zmensi a NEVYLEZE za okraj. Vse uvnitr (vcetne bubliny)
     se skaluje stejnou jednotkou -> drzi spolu pri zmene pomeru.   */
  .grafika {
    position:fixed; bottom:0; z-index:2; pointer-events:none;
    height:calc(var(--u) * 80);
    max-height:940px;
    opacity:0; transition:opacity 1s ease, transform 1s ease;
  }
  /* VYCHOZI POLOHA: right/left = 0 (postava u kraje).
     Chces postavu vic ven? dej napr. right:calc(var(--u) * -5).
     Vic dovnitr? right:calc(var(--u) * 5).                         */
  .grafika.right { right:-120px; bottom: -150px; transform:translateX(40px); }
  .grafika.left  { left:0; bottom: -200px; transform:translateX(-40px); }
  body.ready .grafika { opacity:1; transform:translateX(0); }
  
  .grafika .gfx-inner {
    position:relative;
    height:80%; width:auto;
    transform:translate(var(--px,0), var(--py,0));
    will-change:transform;
  }
  .grafika img { height:100%; width:auto; display:block; }
  
  /* BUBLINA - dite .gfx-inner, jednotky odvozene z --u
     (stejna skala jako postava). Drzi s postavou pri ZMENE POMERU
     STRAN okna. Original news.svg pomer 432x392.
     --- LADENI POLOHY BUBLINY: ---
     left  = vodorovne (mensi/zapornejsi = vic doleva od postavy)
     top   = svisle (mensi = vys)
     width = velikost bubliny                                       */
  .bubble {
    position:absolute;
    left:calc(var(--u) * -4);
    top:calc(var(--u) * 38);
    width:calc(var(--u) * 25);
    aspect-ratio:432 / 392;
    z-index:3; pointer-events:auto;
    opacity:0; transform:scale(.3);
    transition:opacity .7s ease .5s, transform .7s ease .5s;
  }
  body.ready .bubble { opacity:1; transform:scale(1); }
  .bubble .bub-inner {
    width:100%; height:100%;
    background-image:url('news.svg');
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-position:center center;
    display:flex; align-items:center; justify-content:center;
  }
  /* vnitrni obsah natoceny -10deg jako original */
  .bubble .bub-text {
    transform:rotate(-10deg);
    text-align:center;
    padding:14% 30% 16% 11%;
    width:100%;
  }
  .bubble .bub-text p {
    color:#000; font-size:calc(var(--u) * 2.3);
    line-height:1.2; margin-bottom:.5em; text-shadow:none;
  }
  .bubble .bub-text .btn {
    margin-top:.1em; padding:.5em 1em;
    font-size:calc(var(--u) * 1.7);
    box-shadow:3px 3px 0 0 rgba(0,0,0,.4);
  }
  
  /* ---------- HLAVICKA ---------- */
  header {
    position:fixed; top:0; left:0; width:100%; z-index:40;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 0 18px 30px; pointer-events:none;
  }
  header > * { pointer-events:auto; }
  #logo img { width:330px; height:auto; max-width:50vw; display:block; margin: 5px; }
  #phone {
    color:var(--red); text-decoration:none; font-size:1.15em;
    text-transform:uppercase; text-shadow:2px 2px 0 #000;
  }
  #phone a:hover { color:var(--red-hi); }
  nav { display:flex; gap:0; }
  nav a {
    color:#fff; text-decoration:none; font-size:1.1em; padding:8px 16px;
    text-transform:uppercase; text-shadow:2px 2px 0 #000; transition:color .3s;
  }
  nav a:hover, nav a.active { color:var(--red-hi); }
  .burger { display:none; background:none; border:none; cursor:pointer; padding:8px; }
  .burger span { display:block; width:28px; height:2px; background:#fff; margin:5px 0; border-radius:2px; }
  
  /* ---------- OBSAH ---------- */
  
  .wrap {
    scrollbar-width: none;
    /*scrollbar-width: none;*/
    position: fixed;           /* ukotvit k viewportu */
    top: 60px;                 /* výška hlavičky */
    bottom: 70px;              /* výška patičky */
    left: 0;
    right: 0;
    width: 100%;
    min-height: 0;             /* zrušit původní min-height: 100dvh */
    overflow-y: auto;          /* vlastní scroll uvnitř */
    z-index: 10;
    display: flex;
    align-items: safe center;
    padding: 50px 40px 20px 90px;  /* zmenšený padding - top/bottom uz nepotrebujes 120/60 */
  }

  .content { width:100%; max-width:50%; margin-left: 5%;}
  .content.right { 
    margin-left:auto; text-align:left; }
  .main_title h1, .main_title h2 {
    display:inline-block; padding:.5em .8em; margin: 0 0 10% 10%;   /* top right bottom left */
    border:solid .1em var(--red); color:var(--red);
    font-size:3.3em; line-height:1.1; transform:rotate(-2deg); text-shadow:none;


  }
  body.green-theme .main_title h1, body.green-theme .main_title h2 {
    border-color:var(--green); color:var(--green);
  }
  .main_content p { font-size:1.15em; margin-bottom:.8em; text-shadow:2px 2px 0 #000; }
  .main_content table {
    width:100%; max-width:420px; margin:1.2em 0; border-collapse:collapse;
  }
  .content.right .main_content table { margin-left:auto; }
  .main_content th, .main_content td {
    text-align:left; padding:10px 14px; border:1px solid #080808;
    background:rgba(244,244,244,.9); color:#080808; font-size:.95em;
  }
  .main_content th { background:rgba(244,244,244,.97); }
  .main_content .legal {
    font-size:.82em; line-height:1.3; opacity:.7; margin-top:1.4em;
    text-shadow:1px 1px 0 #000;
  }
  .btn {
    display:inline-block; margin-top:1em; padding:.8em 1.4em;
    background:var(--red); color:#fff; text-decoration:none;
    text-transform:uppercase; font-size:1.1em; transform:rotate(-2deg);
    box-shadow:4px 4px 0 0 #000; transition:background .4s;
  }
  .btn:hover { background:var(--red-hi); }
  body.green-theme .btn { background:var(--green); }
  body.green-theme .btn:hover { background:#719f55; }
  
  /* vstupni animace obsahu */
  .content > * { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
  body.ready .content > * { opacity:1; transform:translateY(0); }
  body.ready .content > *:nth-child(2) { transition-delay:.12s; }
  body.ready .content > *:nth-child(3) { transition-delay:.24s; }
  body.ready .content > *:nth-child(4) { transition-delay:.36s; }
  
  /* ---------- FOOTER ---------- */
  footer {
    position:fixed; bottom:0; left:0; width:100%; z-index:40;
    display:flex; align-items:flex-end; justify-content:space-between;
    padding:18px 30px; pointer-events:none;
  }
  footer > * { pointer-events:auto; }
  .social { display:flex; gap:12px; }
  .social a {
    width:42px; height:42px; display:block;
    background-size:42px 42px; background-repeat:no-repeat; background-position:center;
  }
  .social .fcb   { background-image:url('imgs/facebook.svg'); }
  .social .insta { background-image:url('imgs/instagram.svg'); }
  #copy p { font-size:.85em; line-height:1.4; text-align:left; opacity:.8; }
  #copy p a { color:inherit; text-decoration:none; }
  

  @media (max-width:1200px) {
    nav {
      position:fixed; inset:0; background:rgba(0,0,0,.96);
      flex-direction:column; align-items:center; justify-content:center;
      gap:10px; display:none;
    }
    .grafika { display:none; }
    nav.open { display:flex; }
    nav a { font-size:1.5em; padding:14px; }
    .burger { display:block; }
    .wrap { padding:100px 0px 90px; }
    .content, .content.right { text-align:left; margin:0;max-width:100%;  }
    .content.right .main_content table { margin-left:auto; }
    .main_content {margin-left: 22px; margin-bottom: 60px; }
    .main_title h1, .main_title h2 { font-size:1.7em; margin-left: 22px;  }
    #logo img { width:210px; margin-left: 40px;}
    #phone { display:none; }
    #copy p { font-size:.7em; }
    .widget-container {
      max-width: 100% !important;
    }
    .overlay {visibility:hidden;}
    .overla_left {visibility:hidden;}

    .widget-container {
      position: relative;
      isolation: isolate;  /* nový stacking context, drží z-index -1 v mezích */
    }
    
    .widget-container::before {
      content: '';
      position: absolute;
      top: -120px;       /* přesah nahoru */
      bottom: -120px;    /* přesah dolů */
      left: 0;
      right: 0;
      background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.9) 120px,                    /* plně černá v místě, kde začíná widget */
        rgba(0, 0, 0, 0.9) calc(100% - 120px),       /* plně černá v místě, kde končí widget */
        transparent 100%
      );
      pointer-events: none;
      z-index: -1;
    }
  }