/*-----------------------------------------------------------------------------------
 
  Theme Name: CHARITA 1.8
  Theme URI: 
  Description: 
  Author: 
  Author URI: 
  License: GNU General Public License version 3.0
  License URI: http://www.gnu.org/licenses/gpl-3.0.html
  Version: 1
 
 Designed & Handcrafted by 
 All files, unless otherwise stated, are released under the GNU General Public License
 version 3.0 (http://www.gnu.org/licenses/gpl-3.0.html)
 
-----------------------------------------------------------------------------------*/

:root{
  /* Brand */
  --red:        #B81414;   /* červená */
  --red-dark:   #930E0E;   /* tmavá červená (hover/active) */
  --red-light:	#fcecec;	/* světlá červená */

  /* Gray scale */
  --gray-light:     #f4f4f4;   /* nejjemnější plochy (cards, details bg) */
  --gray-frame:     #dedede;   /* jemné rámečky/oddělovače */
  --gray-dark:		#666666;	/* tmavě šedá - footer */

  /* Texty */
  --text-base:    #333333;   /* základní text - téměř černá */
  --text-mid:   #666666;   /* sekundární text - tmavě šedá */
  --text-invert:  #ffffff;	/* bílá */

  /* Efekty */
  --shadow-sm:    rgba(0,0,0,.08);
  --shadow-md:    rgba(0,0,0,.10);
  --overlay:      rgba(245,245,247,.95);
  --overlay-lite: rgba(255,255,255,.80);
}


body {
	font-family: Montserrat, sans-serif;
	margin: 0;
	padding: 0;
	color: var(--text-base); 
	padding-top: 100px; /* Kompenzace výšky fixního menu */
	
}

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

body {	
	padding-top: 80px;
	font-size: clamp(1rem, 1.2vw, 1.125rem); /* 16px až 18px */	
}	
}
	
.content-wrap {
  background-color:white;
	
}

h1 { font-size: clamp(1.2rem, 2vw, 1.5rem); /* cca 19–24px */
	font-weight: 600; color: var(--text-mid);
	margin-top:15px;
	margin-bottom: 30px;
  text-transform: none;
	}
	
	
h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); /* 22.4px až 28px */
	font-weight: 500;}

h4 { font-size: clamp(1rem, 1.2vw, 1.125rem); /* 16px–18px */
	font-weight: 600;}

p  { font-size: clamp(1rem, 1.2vw, 1.125rem); /* 16px–18px */
	line-height: 1.6;}

ul { }

a {color:var(--red); text-decoration:none}
a:hover{color:var(--red-dark);text-decoration:underline}
a:focus {outline: none;}
a:focus-visible{outline:2px solid var(--red-dark); outline-offset:2px}


/* Obsahové seznamy (Gutenberg + šablony) */
.entry-content ul,
.entry-content ol,
.base-page ul,
.base-page ol,
.home-page ul,
.home-page ol,
.sluzby-obsah ul,
.sluzby-obsah ol,
.wp-block-list {
  font-size: clamp(1rem, 1.2vw, 1.125rem); /* stejné jako p */
  line-height: 1.4;
  padding-left: 1.5em;
  margin: 1em 0 1.5em;
}

.entry-content li,
.base-page li,
.home-page li,
.sluzby-obsah li,
.wp-block-list li {
  margin: 0.4em 0;
}

/* Zvýraznění odrážek/čísel */
.entry-content li::marker,
.base-page li::marker,
.home-page li::marker,
.sluzby-obsah li::marker,
.wp-block-list li::marker {
  font-size: 1.1em;     /* lehce větší než text */
 
}

/* Vnořené seznamy ať nejsou “moc daleko” */
.entry-content li > ul,
.entry-content li > ol,
.base-page li > ul,
.base-page li > ol,
.home-page li > ul,
.home-page li > ol,
.sluzby-obsah li > ul,
.sluzby-obsah li > ol {
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}



/* dulezite - jinak jsou obrázky moc velké*/
img  {  
	display: inline-block;
    max-width: 100%;
    height: auto;		  
}

.header-logo { 
	width:200px; height:75px;  /* width:220px; height:82px; */
	background-image: url('img/charita_odry_logo_barevne_web.png');
	background-size: 200px 75px;
	transition: all 0.3s ease;  
}

.header-logo.scrolled { 
  width:100px; height:37px;  /* width:220px; height:82px; */
  background-image: url('img/charita_odry_logo_barevne_web.png');
  background-size: 100px 37px;
}
		  
.header-scroll { 
	padding: 15px 70px;
	display: flex;
    justify-content: space-between; /* Rozloží obsah rovnoměrně s maximálním rozestupem */
    align-items: center; /* Vyrovná obsah vertikálně na střed */
    top: 0;
    left: 0;
    width: 100%;
    position:fixed;  
	background-color:white;
	z-index: 1000;
	box-sizing: border-box;
	font-size: 16px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.header-scroll.scrolled { 
	padding: 5px 80px;   
	font-size: 13px;
	font-weight:bold;
}


/* Kontejner pro menu */
.header-menu {
    
    display: flex;
    justify-content: center;
	
}

/* Odkazy v menu */
.header-menu a {
    color: var(--text-base);
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 10px;
    line-height: 40px;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Položky seznamu */
.header-menu ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.header-menu li {
    display: inline-block;
    text-align: center;
    border-right: 1px solid var(--gray-frame);
    transition: background-color 0.3s ease;
    width: 220px;
	
}


/* Poslední položka - speciální tlačítko */
.header-menu li:last-child a {
    outline: 2px solid var(--red);
    border-radius: 5px;
	padding-left:20px;
	padding-right:20px;
	width: 220px;
	box-sizing: border-box;
	
	
}

/* ------Hover a aktivní stav------ */
.header-menu li a:hover, 
.header-menu li a.active {
    font-weight: bold;
    color: var(--red);
	
}

/* ----Skrytí posledního borderu---- */
.header-menu li:last-child {
    border-right: none;	
}

.mobile-menu-button {display: none;}
.mobile-menu {display: none;}


/* ---Tablet view--- */
@media only screen and (max-width: 1200px) {
  .header-logo {
    width: 150px;
    height: 56px;
    background-size: 150px 56px;
	
  }
  
  .header-logo.scrolled {
    width: 150px;
    height: 56px;
    background-size: 150px 56px;
  }
  
  .header-scroll {
    padding-top: 22px;
	padding-bottom: 22px;
	padding-left: 20px;
	padding-right: 80px;
    font-size: 14px;
	
  }
  
  .header-scroll.scrolled {
    padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 80px;
    font-size: 14px;
  }
  
  .header-menu {
	padding-right: 50px;  
  }
  
  .header-menu li {
   max-width:125px;
   padding: 0px 5px;	
  }
  
  .header-menu li:last-child a {
    outline: 2px solid var(--red);
    border-radius: 5px;	
	width:195px;
	box-sizing: border-box;
}
  
}

/* ---Mobile view--- */
@media only screen and (max-width: 830px) {
 
 .header-logo {
    width: 120px;
    height: 45px;
	margin-left:20px;
    background-size: 120px 45px;
  }
  
  .header-logo.scrolled {
    width: 120px;
    height: 45px;
	margin-left:20px;
    background-size: 120px 45px;
  }
  
  .header-scroll {
	padding: 10px 20px;
    font-size: 14px;
  }
  
  .header-scroll.scrolled {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  
  .header-menu {
    display: none !important;
	height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  
  .mobile-menu {
	position: fixed;
	display:block;
	box-sizing: border-box;
	top: 0;
	right: 0;
	width: 80%;
	max-width: 320px;
	height: 100dvh;
	background-color: rgba(245, 245, 247, 0.95);
	box-shadow: -2px 0 5px rgba(0,0,0,0.5);
	transition: transform 0.3s ease;
	transform: translateX(100%);
	z-index: 1100;
	padding-top:50px;
	padding-bottom: max(16px, env(safe-area-inset-bottom)); /* rezerva dole */
	list-style-type: none;
	overflow-y: auto;              /* ← scrolluje panel, ne stránka */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;  /* nepropadne scroll do podkladu */
  pointer-events: none;
}

.mobile-menu summary {
	font-weight: bold;
	padding: 12px 20px;
	cursor: pointer;
	list-style: none;
}

.mobile-menu a:hover { 
}

.mobile-menu details[open] > summary {
	
}


.mobile-menu.active {
	transform: translateX(0); /* Při přidání třídy 'active' se menu posune do zorného pole */
	display: block;
	pointer-events: auto;
}

.mobile-menu ul {
	 list-style-type: none;
	 margin: 0;
	 padding-left: 20px;
	
	}

.mobile-menu ul li a{
  
	padding: 0px 0 22px 0px;
	border:none;
	white-space: nowrap;
	width:200px;
	color: var(--text-mid);
	font-size: 15px; 
	line-height:28px;
	font-size: 1rem; 
	font-weight: 600;
	text-transform:uppercase; 
	list-style-type: none;
	display:block;
}


.mobile-menu ul li ul li a{ 
  font-size: 14px; 
  text-transform:capitalize;
  line-height:20px;

}


/*rozbalovatelné podmenu s animovanou šipkou*/

.mobile-menu li.menu-item-has-children > ul {
  display: none;
  padding-left: 10px;
  color: var(--text-mid);
}

.mobile-menu li.menu-item-has-children.submenu-open > ul {
  display: block;
}

.mobile-menu li.menu-item-has-children > a {
  position: relative;
  padding-right: 35px; /* víc místa na větší šipku */

}

.mobile-menu li.menu-item-has-children > a::after {
  content: "\25B6"; /* ▶ */
  position: absolute;
  right: 80px;
  top: 24%;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.3s ease;
  font-size: 1.2em; /* zvětšení šipky */
  color: var(--text-mid);
  line-height: 1;
}

.mobile-menu li.menu-item-has-children.submenu-open > a::after {
  transform: translateY(-50%) rotate(270deg); /* otočená šipka */
}

/*____________*/  

  
  .mobile-menu-button {
	display: flex;
	justify-content: center;
    align-items: center;
	height:60px;
	width:35px;
    margin-right: 20px;
	background-color: transparent; /* Odebere pozadí tlačítka */
	border: none; /* Odebere rámeček tlačítka */
	cursor: pointer; /* Změní kurzor na ukazatel při najetí myši */
	padding: 10px 15px; /* Přidá padding pro lepší klikatelnost */
	position: relative; /* Používá se pro umístění pseudoelementů */
	z-index: 1201;
}

.mobile-menu-button:focus {
  outline: none; /* Odebere obrys při fokusu (kliknutí) */
}

.mobile-menu-button span,
.mobile-menu-button::before,
.mobile-menu-button::after {
  background-color: var(--red); /* Barva čar */
  content: "";
  display: block;
  height: 4px;
  border-radius: 1px;
  position: absolute;
  left: 0;
  width: 100%;
  transition: 0.3s;
}

.mobile-menu-button span {
  top: 50%;
  transform: translateY(-50%);
}

.mobile-menu-button::before {
  top: 30%;
}

.mobile-menu-button::after {
  top: 70%;
}

/* Toto skryje text 'Menu' uvnitř tlačítka, ale ponechá čáry */
.mobile-menu-button {
  color: transparent; /* Skryje text tlačítka */
}
    
.mobile-menu-button.active span {
  opacity: 0;
}

/* Srovnáme horní a dolní čáru do středu a otočíme je */
.mobile-menu-button.active::before,
.mobile-menu-button.active::after {
  top: 50%;
  transform: translateY(-50%);
}

.mobile-menu-button.active::before {
  transform: translateY(-50%) rotate(45deg);
}

.mobile-menu-button.active::after {
  transform: translateY(-50%) rotate(-45deg);
}  
 
}


/* home page */

.gray-backg-full {
	background-color: var(--gray-light);
}

.menu-sluzby-grid {
	
	margin: 0 auto;
	padding-top:50px;
	padding-bottom:50px;
	padding-left:60px;
	padding-right:60px;
    display: grid;
    gap: 20px;
	grid-template-columns:repeat(4, 1fr);
	max-width:1500px;
	width:90%;		
}

.menu-sluzby-item {
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    align-items: center;
    background-color: white;
    text-decoration: none;
    color: var(--text-mid);
    border: 4px solid white;
    border-radius: 4px;
    transition: background-color 0.2s, transform 0.4s;
    text-align: center;
		
}

.menu-sluzby-item:hover {
    background-color: var(--red);
    color: white;
    transform: scale(1.01);
	text-decoration: none;
}

.menu-sluzby-item p {
	font-size: clamp(1rem, 1.8vw, 1.125rem); /* 16px až 18px */
	text-transform:uppercase;
	font-weight:bold;
	/*font-family:minion pro;*/
	margin-top:10px;
	margin-bottom:10px;
	
}


@media only screen and (max-width: 830px) {
  .menu-sluzby-grid {
    padding: 20px;
    grid-template-columns:repeat(2, 1fr);
  }
  
  .menu-sluzby-item p {
    font-size: 16px;
  }
}

@media only screen and (max-width: 1200px) {
  .menu-sluzby-grid {
    padding: 30px;
    grid-template-columns: repeat(2, 1fr);
  }
}







/* Template-služby */


.sluzby-page {
	display: flex;
	align-items: flex-start;
	gap: clamp(16px, 2vw, 24px); /* místo space-between použij gap */
	padding: 10px 0 40px 0;
	max-width:1300px;
	width:95%;
	margin: 0 auto;
	
}



.sluzby-obsah{
	padding-right:20px;
	flex: 7 1 0;
	min-width:0;
	box-sizing: border-box;
}


.sluzby-sidebar{		/*jako prázdný neformátovaný blok - je možné použít na vice věcí než jen kontakty*/
	margin-top:40px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	min-width:0;
	flex: 3 1 0;
	box-sizing: border-box;
}


.sidebar-kontaky {		/* šedý blok formátovaný k použití pro kontakty u jednotlivých služeb*/
      background-color: var(--gray-light);
      padding: 20px 40px 50px 25px;
	  border-radius: 5px;
	  width: 100%;
	  box-sizing: border-box;
	  
}

.sidebar-kontaky p {
	font-size: clamp(0.875rem, 1vw, 1.125rem);

}


/* Mobile view */
@media only screen and (max-width: 830px) {


.sluzby-page {
	width:85%;
}

.sluzby-obsah{
	padding-right:0px;
	flex-grow: 1;
}

.sluzby-sidebar{
	display: none;
}

 }


/* FOOTER */

.footer { 
	list-style:none;
	background-color:var(--gray-dark);
	color:var(--text-invert);
	font-size:15px;
	margin: 0 auto;
	padding-left: 50px;
	display: flex;
	justify-content: space-between; 
}

 
.footer > div {
  flex: 1;
  box-sizing: border-box; /* zajistí, že padding a margin se započítají do šířky */
  /* případně přidat margin, např. margin: 0 10px; */
} 
 
.footer > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: center; /* vystředí horizontálně */
} 
 
    
.footer ul  {  
     list-style:none;
	 margin: 0;
	 padding: 10px 0px 0px 0px;	
}
 
.footer a,
.footer ul li a, 
.footer ul li.pagenav {  	
   
  line-height:30px;
  
}

.footer ul li.current-menu-item a,
.footer ul li a:hover, 
.footer ul li a.active, 
.footer ul li.pagenav:hover { 
  text-decoration:underline; 
}
 
.footer ul li ul{
  display:none;
}

.foot-block {
	background-color:var(--gray-dark);
	padding: 50px 0px 50px 0px;
		
}

.foot-block a,
.foot-block p {
	color:var(--text-invert);
	font-size:15px;
}


.foot-block-last {
	background-color: var(--red-dark);
	font-size:12px;
	padding:65px 20px 20px 30px;
	
}

.foot-block-last a {
	color:var(--text-invert);
	font-size:12px;
}


.soc-logo img { 
	padding:40px 30px 0 0 ;
    height: 40px;
	width: auto;	
}


@media only screen and (max-width: 830px) {
  .footer {
    flex-direction: column;
    align-items: center; 
	padding-left:0px;
  }
  
.footer > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
  } 
 
  
.footer ul  {   
	 margin: 0;
	 padding: 0;	
}    
  
.foot-block {
	text-align: center;
	padding: 30px 0px 0px 0px;
	
} 
 
.foot-block-last {
	display:block;
	padding:65px 20px 20px 30px;
	margin-top:30px;	
} 
 
.footer > div:nth-child(4) {
  display: block;
  align-items: flex-start;
  text-align: left;
}


}

 
/* Aktuality - OK  */ 

.aktuality-index {
	padding: 10px 0 40px 0;
	max-width:1500px;
	width:90%;
	margin:0 auto;
}

.aktuality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px; /* Mezery mezi řádky i sloupci */
  margin-top: 30px;
}

.aktualita-box {
  background-color: var(--gray-light);
  padding: 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
  min-height: 100px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.aktualita-img {
  margin-bottom: 15px;
  overflow: hidden;
  border-radius: 4px;
  max-height: 200px;
}

.aktualita-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 200px;
}

.aktualita-date {
  font-size: 14px;
  color: var(--text-mid);
  margin-bottom: 5px;
}

.aktualita-title {
  font-size: 20px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.aktualita-title a {
  color: var(--red);
  text-decoration: none;
}

.aktualita-title a:hover {
  color: var(--red-dark);
  text-decoration: underline;
}

.aktualita-excerpt {
  font-size: 15px;
  color: var(--text-base);
  line-height: 1.6;
  margin-top: 5px;
  margin-bottom: 0; /* nebo víc, pokud chceš větší rozestup dolů */
}

.aktuality-pagination {
  margin-top: 50px;
  text-align: center;
}

.aktuality-pagination .page-numbers {
  display: inline-block;
  padding: 8px 12px;
  margin: 0 5px;
  border: 1px solid var(--red);
  color: var(--red);
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.aktuality-pagination .page-numbers:hover,
.aktuality-pagination .current {
  background-color: var(--red);
  color: var(--text-invert);
}


/* menu - tlačítka  v šedém sidebaru - dodelat nebo zrušit */

.menu1 a {
	background-color: white;
	height:40px;
	width:280px;
	border-radius: 0px;
	margin-bottom:10px;
}

.menu1 a, 
.menu1 .pagenav {  
  color: var(--text-base);
  font-size: 14px; 
  font-weight:700;
  text-transform:none;      
}     

.menu1 a:hover,    
.menu1 a.active,   
.menu1 .pagenav:hover {
  background-color:#b3b3b3;
  text-decoration:none;        
}


.navigation    {margin-top:50px; } 
.prev-post    {float:left;  padding: 5px 10px 5px 10px;   border-style: solid; border-width: 2px; border-color: var(--red); }
.next-post    {float:right; padding: 5px 10px 5px 10px;   border-style: solid; border-width: 2px; border-color: var(--red); }          


/*navigace na jednotlivem prispevku*/

.post-navigation {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.nav-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--gray-light);
  color: var(--red);
  border-radius: 8px;
  text-decoration: none;
  border: 2px solid var(--red);
  max-width: 45%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-link:hover {
  background-color: var(--red);
  color: var(--text-invert);
  border-color: var(--red-dark);
}


/* jednotlivé příspěvky */


.aktuality-page {
	padding: 10px 0 40px 0;
	max-width:1000px;
	width:80%;
	margin:0 auto;
}

.entry-meta{
  margin-bottom:10px;
}

.entry-content { }


/*zakladni stranky*/ 

.base-page {
	padding: 10px 0 40px 0;
	max-width:1300px;
	width:90%;
	margin:0 auto;
}

.base-page ul {
  margin-top: 1em;
  margin-bottom: 1.5em;
  padding-left: 1.5em;
  line-height: 1.8;
  list-style-type: disc;
}

.base-page li {
  margin-bottom: 0.5em;
  
}


/* Globální styl pro bloky s barevným pozadím --upravující zkladní stylování wordpressu -- */

.has-background {
    padding: 10px 30px 10px 30px; /* Přidá odsazení uvnitř bloku */
    border-radius: 5px; /* Kulaté rohy pro lepší vzhled */
    box-sizing: border-box; /* Zajistí správné chování odsazení */
}


/* styl bloku gutenbergu - podrobnosti - rozablovací text */

.wp-block-details {
  border: 1px solid var(--gray-frame);
  padding: 10px 15px;
  border-radius: 8px;
  background-color: var(--gray-light);
  transition: all 0.3s ease;
  margin-bottom: 20px;
  margin-left:3%;
  margin-right:10%;
}

.wp-block-details:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.wp-block-details[open] {
  border-color: var(--red);
  background-color: var(--red-light);
}

.wp-block-details summary {
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  padding: 8px 10px 8px 10px;
  position: relative;
  list-style: none;
  gap: 20px;
  display: flex;
  align-items: center;
  
}

.wp-block-details summary::after {
  content: "\25BC"; /* ▼ */
  margin-left: auto; /* šipka bude vždy úplně vpravo */
  color: var(--red);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.wp-block-details[open] summary::after {
  transform: rotate(180deg);
}

.wp-block-details > *:not(summary) {
  animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}


/*pro odkazování na části stránky*/
.anchor {
    height: 0px;
    visibility: hidden;
    position: absolute;
	
}

.anchor:target {
    scroll-margin-top: 120px; /* Přizpůsob výšce menu */
}


/* obecná třída pro skrytí toho co má být jen pro mobil */	
.mobile-only {
    display: none !important;
	
}	
.mobile-only.wp-block-spacer {
    height: 0 ;
    margin: 0 ;
    padding: 0 ;
  }


@media only screen and (max-width: 830px) {
    .mobile-only {
        display: block !important;
    }
	
}


/* základní box */
.contact-card {
  background: var(--gray-light);   
  padding: 20px;      
  border-radius: 5px;         
}

.contact-card p {
  display: block;
  line-height: 1.5;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
  margin: 0; /* zruší výchozí mezery */
}

.contact-card p + p {
  margin-top: 25px;      /* větší mezera jen mezi dvěma odstavci */
}


/* menší úprava obrázku (když je uvnitř bloku) */
.contact-card img {
  display: block;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
}

.contact-card H2 {
	margin-top: 5px !important; 
    margin-bottom: 20px !important;
	}
	

/*obecne okraje*/
.odsazeni1 {
	margin-left:300px;
	margin-right:300px;
}	

/*pro mapu v kontaktech vlozenou jako iframe*/
.responsive-iframe {
  position: relative;
  width: 100%;
  padding-bottom: 51.43%; /* Poměr stran 700 / 360 ≈ 1.944 → 100 / 1.944 = 51.43% */
  height: 0;
  overflow: hidden;
  margin: 20px 0; /* volitelné odsazení */
}

.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 404 page style*/
.not-found-page {
    text-align: center;
    padding: 60px 20px;
}

.not-found-page h1 {
    font-size: 36px;
    color: var(--red);
    margin-bottom: 20px;
}

.not-found-page p {
    font-size: 18px;
    margin-bottom: 15px;
}

.btn-back-home {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--red);
    color: var(--text-invert);
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.btn-back-home:hover {
    background-color: var(--red-dark);
}




/* --- Linková galerie (dlaždice z podstránek) --- */
.link-gallery-section { margin: 30px auto; max-width: 1300px; width: 90%; }
.link-gallery-title { margin: 10px 0 18px 0; }

.link-gallery-grid { display: grid; gap: 18px; }
.link-gallery-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.link-gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.link-gallery-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.link-gallery-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.link-gallery-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
  .link-gallery-grid.cols-5,
  .link-gallery-grid.cols-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 830px) {
  .link-gallery-grid.cols-4,
  .link-gallery-grid.cols-5,
  .link-gallery-grid.cols-6 { grid-template-columns: repeat(2, 1fr); }
}

.link-gallery-item {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 4px solid #fff;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
}
.link-gallery-item:hover {
  transform: scale(1.01);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  background: #A8161E;
  color: #fff;
}

.link-gallery-figure { margin: 0; position: relative; }
.link-gallery-figure img {
  display: block;
  width: 100%;
  height: 210px;           /* změň podle potřeby */
  object-fit: cover;
}
.link-gallery-caption {
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  padding: 12px 10px;
}


/* --- TKS šablona --- */

.tks {
	color: #13365B;
		
}


.tks-font {
	font-family: DK Cool Crayon, sans-serif;	
}

.tks1 {
	background-color: #13365b;	
}