@media (max-width: 640px){
  :root{ --hero-overlap: calc(var(--hero-h) * 0.35); }
}

.welcome h2 {
  margin-bottom: 22px;
}

.welcome h3 {
  text-decoration: none;
  padding-left: 5px;
}

.odstavec{
  padding-top: 19px;
}

/* Hlavní obsah */
.main-content {
    max-width: 950px;
    padding: 9px 1rem;
    background-color: #000;
    border-radius: 15px; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin-top: 1.5rem;
    margin-left: 0.8rem;
    margin-right: 0.8rem;
} 

.navigator a:hover { 
    text-decoration: underline;
}

@media (min-width: 1220px) {

  .main-content {
      max-width: 950px;
      padding: 9px 1rem;
      background-color: #000;
      border-radius: 15px; 
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      margin-top: 1.5rem;
      margin-left: 0.8rem;
      margin-right: 0.8rem;
  } 

}


@media (min-width: 920px) {

    .main-content {
        margin-left: auto;
        margin-right: auto;
    }

    .navigator {
        margin-left: auto;
        margin-right: auto;
    }    

}



.main-content {
  background: #fff;
  position: relative;
  top: 100px;
  margin-bottom: 130px;

}

.container {

  position: relative;
  top: -100px;
}

.datum {
  background: #e3e3e3;
  padding-top: 3px;
  padding-left: 9px;
  padding-right: 8px;
  padding-bottom: 4px;
  border-radius: 10px;
}

h2 {
  color: #31820a;
  font-size: 22px;
}

.col4 {
  display: none !important;
}

.welcome {
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: -108px;
}

/* Titulek nad fotkou */
.page-title{
  margin: 1.25rem auto 0.75rem;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.2;
  text-wrap: balance;
}

/* HERO – užší než container, ať po stranách zůstane „malinko prázdno“ */
.hero.hero--narrow{
  max-width: 96%;
  margin: 0 auto;
  height: var(--hero-h);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  position: relative;
}
.hero.hero--narrow img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Bílá karta, která NAJEDE do fotky (záporný margin = překryv) */
.article-card{
  max-width: 100%;
  margin: calc(-1 * var(--hero-overlap)) auto 3rem;
  background: #fff;
  border-radius: 20px; 
  position: relative;
  z-index: 2;
  padding-top: 23px;
}

/* MEZERY */


.article-card p, 
.article-card div.text, .article-card div.perex {
  white-space: pre-line;   /* respektuj zalomení řádků */
  font-size: 20px;         /* základní velikost písma */
  line-height: 1.45;        /* řádkování – aby se text líp četl */
  margin-bottom: 1.2rem;     /* mezera mezi odstavci */ 
}


.article-card div.perex {
  padding-top: 15px;
  padding-bottom: 3px;
  font-weight: 600;
  font-size: 21px;
}

/* odstavec (pokud text obsahuje <p>) */
.article-card div.text p, .article-card div.perex p {
  margin-bottom: 1.2rem;     /* mezera mezi odstavci */
}

/* odrážky začínající pomlčkou (pokud zůstáváš u plain textu) */
.article-card div.text, .article-card div.perex {
  /*padding-left: 0.2rem;    /* trochu vnitřního odsazení vlevo */
}

/* pokud převádíš na <ul><li>, tak ještě hezčí: */
.article-card div.text ul, .article-card div.perex ul {
  margin: 1rem 0 1rem 1.5rem;  /* odsazení a mezery okolo seznamu */
  padding-left: 1rem;
}
.article-card div.text li, .article-card div.perex li {
  margin-bottom: 0.2rem;
}


@media (min-width: 640px){
  .article-card{
    padding-left: 55px;
    padding-right: 55px;
  }

  h2 {
    font-size: 33px;
  }

  .article-card div.perex {
    font-size: 22px;
  }

}
 
/* Volitelné: jemný přechod u spodního okraje fotky */
.hero.hero--narrow::after{
  content:"";
  position:absolute; inset: auto 0 0 0;
  height: 64px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 100%);
  pointer-events:none;
}

/* Typografie uvnitř karty */
.article-card p{ margin: 0 0 1rem; line-height: 1.7; font-size: 1.05rem; }


/* Jedna responzivní mřížka */
.gallery { margin-top: 15px; }
.gallery-grid {
  display: grid;
  gap: 8px;
  grid-auto-rows: 160px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* Dlaždice */
.tile {
  position: relative;
  width: 160px; height: 160px;
  padding: 0; border: 0; background: none; cursor: pointer;
  overflow: hidden; border-radius: 12px;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* “+více” */
.tile--more { display: none; } /* JS zapne */
.tile--more .tile-more {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.6rem;
  background: rgba(0,0,0,0.45); color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Když je otevřená velká galerie, schovej náhledy */
.gallery.is-open .gallery-grid { display: none; }

/* Velká galerie – zůstává tvoje */
.gallery-all{ margin-top:1rem; position:relative; }
.gallery-all-grid{ display:grid; gap:12px; } 

.photo{ position:relative; }
.photo-close{
  position:absolute; top:6px; right:6px;
  width:28px; height:28px; line-height:26px; text-align:center;
  border:0; border-radius:999px; background:rgba(0,0,0,.55); color:#fff;
  font-size:18px; font-weight:700; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.photo-close:hover{ background:rgba(0,0,0,.7); }

/* smooth scroll bez kolize s Latte */
html { scroll-behavior: smooth; }

.tile {
  position: relative;
  width: 160px; height: 160px;
  padding: 0; border: 0; background: none; cursor: pointer;
  overflow: hidden; border-radius: 12px;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tile--more .tile-more {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.6rem;
  background: rgba(0,0,0,0.45); color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Rozbalený přehled */
.gallery-all { margin-top: 1rem; }
.gallery-all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill);
  gap: 16px;
}
.gallery-all .photo {
  margin: 0; 
}

.gallery-all li {
  width: 100%;
}

.gallery-all .photo img {
  width: 100%; height: auto; display: block; border-radius: 8px;
  background: #ddd; /* placeholder */
}
.gallery-all .photo figcaption {
  font-size: .9rem; color: #666; text-align: center; margin-top: .25rem;
}
.btn-hide {
  margin-top: 12px; padding: 8px 12px; border-radius: 8px; border: 1px solid #ccc;
  cursor: pointer;
  background: #e0e0e0;
  color: #111;
  border: 0;
  padding: .5rem .9rem;
  border-radius: .5rem;
  cursor: pointer;
  font-family: Lexend, Fira Sans, sans-serif;
  font-size: 18px;
}

/* malé vylepšení focusu */
.tile:focus-visible, .btn-hide:focus-visible {
  outline: 2px solid var(--brand, #0066cc);
  outline-offset: 2px;
}

/* 160×160 grid */
.gallery-all-grid.grid-160 {
  display: grid; 
  gap: 12px;
}
.gallery-all-grid.grid-160 .photo { 
  margin: 0; padding: 0; border-radius: 12px; overflow: hidden;
  background: #f0f0f0;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  position: relative;
}
.gallery-all-grid.grid-160 .photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.gallery-all-grid.grid-160 .photo figcaption {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(0,0,0,.45); color: #fff;
  padding: 2px 6px; border-radius: 8px; font-size: .8rem;
}

.photo { position: relative; }
.photo-close{
  position:absolute; top:6px; right:6px;
  width:28px; height:28px; line-height:26px; text-align:center;
  border:0; border-radius:999px; background:rgba(0,0,0,.55); color:#fff;
  font-size:18px; font-weight:700; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.photo-close:hover{ background:rgba(0,0,0,.7); }
.photo-close:focus-visible{ outline:2px solid var(--brand,#0a6cff); outline-offset:2px; }

/* horní lišta v galerii */
.gallery-all { position: relative; }
.gallery-toolbar {
  position: sticky; top: 0; z-index: 2;
  padding: 8px 0;
  background: linear-gradient(#fff, rgba(255, 255, 255, 0.13));
}

/* hlavní zavírací tlačítko */
.gallery-close, .gallery-close-bottom {
background: #e0e0e0;
  color: #111;
  border: 0;
  padding: .5rem .9rem;
  border-radius: .5rem;
  cursor: pointer;
  font-family: Lexend, Fira Sans, sans-serif;
}
.gallery-close:hover, .gallery-close-bottom:hover { background: #f3f3f3; }
.gallery-close:focus-visible, .gallery-close-bottom:focus-visible {
  outline: 2px solid var(--brand, #0a6cff); outline-offset: 2px;
}

/* X na každé fotce */
.photo { position: relative; }
.photo-close{
  position:absolute; top:6px; right:6px;
  width:28px; height:28px; line-height:26px; text-align:center;
  border:0; border-radius:999px; background:rgba(0,0,0,.55); color:#fff;
  font-size:18px; font-weight:700; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  padding-bottom: 3px;
  padding-left: 0px;
}
.photo-close:hover{ background:rgba(0,0,0,.7); }
.photo-close:focus-visible{ outline:2px solid var(--brand,#0a6cff); outline-offset:2px; }

.gallery.is-open .gallery-grid { 
  display: none !important; 
}

.gallery-all ul {
  list-style: none;
  padding: 0;
  margin: 0;
}