.bloky {
  display:flex;
  flex-direction: column;
  gap:100px;
}

.bloky h2, .bloky h3 {
  all: unset;
}

.bloky h2 {
    color: var(--main-font-color_vyrazna);
}

.blok, .blok_prepinaci {
  display:flex;
  gap:calc(30px * var(--scale));
}

.blok .podblok {
  display:flex;
  gap:calc(25px * var(--scale));;
  flex-direction: column;
}


.blok .podblok:empty {
  display:none;
}

.blok:last-of-type {
  margin-bottom:calc(100px * var(--scale));;
}


.bloky .blok .nadpis {
  font-size:calc(39px * var(--scale));;
  font-weight:250;
  margin-bottom:0px;
}

.bloky .blok .podnadpis {
  font-size:calc(21px * var(--scale));;
  font-weight:500;
}

.bloky .blok .text {
  font-weight:300;
  line-height:29px;
}

.bloky .blok .nadpis,
.bloky .blok .podnadpis
.bloky .blok .text,
.bloky .blok .podblok {
  text-align: center;
}

.blok .text p {
  margin-top:0px;
  margin-bottom:calc(15px * var(--scale));;
}

.blok .text p:last-of-type {
  margin-bottom:0px;
}


.podblok .button {
  margin-top:0px;
}

/*************************************
clanek
*************************************/

.blok.clanek, .blok_prepinaci {
  gap:calc(50px * var(--scale));;
  align-items: center;
  justify-content: center;
}

.blok.clanek.leva, .blok_prepinaci.leva {
  flex-direction: row-reverse;
}

.blok.clanek .podblok, .blok_prepinaci .podblok {
  /* min-width: calc(50% - 50px); */
}

.blok.clanek.prava .podblok, .blok_prepinaci.prava .podblok  {
  text-align: right;
}

.bloky .blok.leva .nadpis,
.bloky .blok.leva .podnadpis,
.bloky .blok.leva .text,
.blok.clanek.leva .podblok,
.blok_prepinaci.leva .nadpis,
.blok_prepinaci.leva .podnadpis,
.blok_prepinaci.leva .text,
.blok_prepinaci.leva .podblok {
  text-align: left;
}

.bloky .blok.prava .nadpis,
.bloky .blok.prava .podnadpis,
.bloky .blok.prava .text,
.blok.clanek.prava .podblok,
.blok_prepinaci.prava .nadpis,
.blok_prepinaci.prava .podnadpis,
.blok_prepinaci.prava .text,
.blok_prepinaci.prava .podblok {
  text-align: right;
}

.blok .podblok .text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blok .podblok .text ul li {
  position: relative;
  padding-left: 0;
  margin-bottom: 15px;
  line-height: 20px;
}

.blok .podblok .text ul li::before  {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url('/zdroje/trojuh_univerzal_ostry3.svg') no-repeat center center;
  background-size: contain;
  margin-right: 7px;
  margin-top: -2px;
  vertical-align: middle;
}

/*************************************
fotky u článku a přepínacích článků
*************************************/
.blok.clanek .files_cont, .blok_prepinaci .files_cont  {
  --blok_files_w: 604px;
  --blok_files_h: 550px;
  position: relative;
  width: var(--blok_files_w);
  height: var(--blok_files_h);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  overflow: hidden;
}

.blok.clanek .files_cont > svg, .blok_prepinaci .files_cont > svg { /*podkladové svg*/
  position: absolute;
  inset: 0;
  top:11px;
  width: 100%;
  height: 100%;
  z-index: 0;
  fill: none;
  stroke: #454545;
  stroke-width: 2.2;
  pointer-events: none;
  transform: rotate(180deg);
  transform-origin: center;
}


.blok.clanek .files_cont .lister, .blok_prepinaci .files_cont .lister{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  z-index: 1;
}

.blok.clanek .files_cont .lister .list, .blok_prepinaci .files_cont .lister .list {
  position: relative;
  width: 20px;
  height: 22px;
  display: flex;
  justify-content: center;
  z-index: 1;
  overflow: hidden;
  cursor:pointer;
  margin:43px 18px 0px 18px;
}

.blok.clanek .files_cont .lister .file, .blok_prepinaci .files_cont .lister .file {
  z-index: 1;
  border-radius: 20px;
}

.blok.clanek .files_cont .lister .file img, .blok_prepinaci .files_cont .lister .file img {
  width: 470px;
  height: 470px;
  object-fit: cover;
  border-radius: 18px;
  display:inline-block;
}

.blok.clanek .files_cont .number, .blok_prepinaci .files_cont .number {
  display:flex;
  flex-direction: column;
  gap:3px;
  margin-top:10px
}

.blok.clanek .files_cont .number span, .blok_prepinaci .files_cont .number span {
  text-align: center;
}


.blok.clanek .files_cont .number span:first-of-type, .blok_prepinaci .files_cont .number span:first-of-type {
  font-weight:300;
  font-size:24px;
}

.blok.clanek .files_cont .number span:last-of-type, .blok_prepinaci .files_cont .number span:last-of-type {
  font-weight:500;
  font-size:13px;
  color:#9d9d9d;
}


.blok.clanek .files_cont .files, .blok_prepinaci .files_cont .files{
  position: relative;       /* aby šlo .file absolutně vystředit */
  width: 470px;
  height: 470px;
  overflow: hidden;         /* schovat zbytek obrázků */
}

.blok.clanek .files_cont .file, .blok_prepinaci .files_cont .file {
  position:absolute;
  inset:0;
  /* výchozí stav – neviditelný a nekliknutelný */
  opacity:0;
  pointer-events:none;
  transform:scale(.94);
  transition:opacity .45s ease, transform .45s ease;
  /* aby aktivní snímek ležel navrchu při překryvu */
  z-index:0;
}

/* (2) – právě zobrazený obrázek */
.blok.clanek .files_cont .file.active, .blok_prepinaci .files_cont .file.active {
  opacity:1;
  pointer-events:auto;
  transform:scale(1);
  z-index:1;
}



/*************************************
přepínací
*************************************/

/* .blok.prepinaci {
  position:relative;
  border: 1px solid #707070;
  border-radius: 24px;
  background: #1C1D1D;
  padding: calc(44px * var(--scale)) calc(51px * var(--scale)) calc(46px * var(--scale)) calc(51px * var(--scale));
} */

.blok.prepinaci  {
  flex-direction:column;
}

.blok_prepinaci .podblok .nadpis {
  font-size:calc(24px * var(--scale));
  font-weight:600;
}

.blok_prepinaci .podblok .podnadpis {
  font-size:calc(20px * var(--scale));
  font-weight:500;
}

.blok_prepinaci .podblok .text {
  font-weight:300;
  max-width:600px;
}

.blok.prepinaci .prepinace {
  display:flex;
  justify-content: center;
  gap:30px;
  margin-bottom: calc(30px * var(--scale))
}

.blok.prepinaci .prepinace .prepinac {
  color:red;
}

.blok.prepinaci .prepinace .prepinac.selected {
  background-color: #750414;
  border-color: #750414;
  color: #ffffff;
}



/*************************************
zpráva
*************************************/

.blok.zprava {
  position:relative;
  border: 1px solid #707070;
  border-radius: 24px;
  background: #1C1D1D;
  padding: calc(44px * var(--scale)) calc(51px * var(--scale)) calc(46px * var(--scale)) calc(51px * var(--scale));
}

.blok.zprava.s_ikonou {
  margin-top: calc(30px * var(--scale));;
}

.blok.zprava .podblok{
  gap:calc(20px * var(--scale));
}

.blok.zprava .nadpis{
  font-size:calc(24px * var(--scale));
  font-weight:600;
  text-align: left;
}

.blok.zprava .podnadpis {
  font-size:calc(20px * var(--scale));
  font-weight:500;
  text-align: left;
}

.blok.zprava .text {
  font-size:15px;
  font-weight:300;
  text-align: left;
}

/*************************************
ikona u zprávy
*************************************/

.blok.zprava .ikona {
  position: absolute;
  top: calc(-65px * var(--scale));;
  right: calc(55px * var(--scale));;
  width: calc(117px * var(--scale));
  height: calc(105px * var(--scale));
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  overflow: hidden;
}

.blok.zprava .ikona svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  fill: #2c2c2c;
  stroke: #ff0808;
  stroke-width: 4.3;
  pointer-events: none;
}

.blok.zprava .ikona i {
  font-size: calc(40px * var(--scale));
  margin-top:20px;
  color: white;
  z-index: 1;
  position: absolute;
}


/*************************************
button u zprávy
*************************************/


.blok.zprava .button {
  position: absolute;
  bottom: calc(-28px * var(--scale));
  right: calc(83px * var(--scale));
  width: calc(58px * var(--scale));
  height: calc(50px * var(--scale));
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  overflow: hidden;
  border:0px;
  padding:0px;
  border-radius: 0px;
}

.blok.zprava .button:hover {
  background-color: inherit;
  border-color: inherit;
  color: inherit;
  transform: scale(120%);
}

.blok.zprava .button:hover svg {
  fill: #ff0808;
}


.blok.zprava .button svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  fill: #860404;
  stroke: #860404;
  stroke-width: 4.3;
  pointer-events: none;
  transform: rotate(180deg);
  transform-origin: center;
  transition: fill .25s ease, stroke .25s ease;
}


.blok.zprava .button i {
  font-size: calc(19px * var(--scale));
  margin-top:-10px;
  margin-left:1px;
  color: white;
  z-index: 1;
  position: absolute;
  font-style: normal;
}

/*************************************
ikony
*************************************/


.blok.ikony {
  gap:80px;
  flex-direction:column;
}

.blok.ikony .podblok:last-of-type  {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: center;
  gap:calc(100px * var(--scale)) calc(70px * var(--scale));
}

.blok.ikony .ikona{
  display:flex;
  flex-direction:column;
  width:300px;
  gap:calc(20px * var(--scale));
  text-align: center;
  align-items: center;
  transition: transform .25s ease;
}

.blok.ikony .ikona .ikona_font{
  font-size:calc(77px * var(--scale));
}

.blok.ikony .ikona .ikona_font, .blok.ikony .ikona .ikona_svg_tmava {
  margin-bottom: calc(30px * var(--scale))
}

.blok.ikony .ikona .nazev{
  font-size:calc(25px * var(--scale));
  font-weight:300;
}


.blok.ikony a {
  color:var(--main-font-color);
  transition: color .05s ease;
}

.blok.ikony a:hover, .blok.ikony a:hover .ikona_svg_tmava {
  color:#ff0808;
}

.blok.ikony a:hover .ikona {
  transform: scale(110%);
}

.ikona_svg {
  width: 73px;
  height: 73px;
  display: inline-block;
}

/* světlé pozadí = černé ikony */
.ikona_svg_svetla { color: #111; }

/* tmavé pozadí = bílé ikony (negativ) */
.ikona_svg_tmava  { color: var(--main-font-color_vyrazna); }

/* pro stroke ikony lze globálně doladit tloušťku */
.ikona_svg_stroke { stroke-width: 1.5; }

/*************************************
fotogalerie
*************************************/


.blok.galerie {
  gap:calc(20px * var(--scale));
  flex-direction:column;
}

.blok.galerie .for_blok .cont {
  justify-content: center;
  gap: 0px calc(15px * var(--scale));
}


.blok.galerie .fotgal_cont{
  margin-bottom: 0px;
}

.blok.galerie .fotgal_cont .cont{
  margin-top: 0px;
}



/*************************************
responzivita
*************************************/

@media screen and (max-width: 1460px) {


    .blok.clanek .files_cont {
      transform:scale(0.8);
      margin:calc(var(--blok_files_w) * -0.1) calc(var(--blok_files_h) * -0.1);
    }

}

@media screen and (max-width: 1250px) {

  .blok.clanek .files_cont {
    transform:scale(0.7);
    margin:calc(var(--blok_files_w) * -0.15) calc(var(--blok_files_h) * -0.15);
  }

}