.news-block {
  font-family: var(--mth-font-body);
  color: var(--mth-ink);
  padding: 60px 0 0;
}
.news-block *,
.news-block *::before,
.news-block *::after {
  box-sizing: border-box;
}

/* --------------------------------- nadpis ------------------------------- */
.news-block .homepage-group-title {
  margin: 0 0 40px;
  font-family: var(--mth-font-head);
  font-weight: 400;
  font-size: 35px;
  line-height: 1.15;
  color: var(--mth-ink);
  text-align: center;
  text-transform: none;
}
.news-block .homepage-group-title::before {
  content: "PŘEČTĚTE SI";
  display: block;
  margin-bottom: 0;
  font-family: var(--mth-font-body);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--mth-orange);
}

.news-block .container {
  width: 100%;
  max-width: var(--mth-container);
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------------- mrizka ------------------------------- */
/* !important kvuli sablone Shoptetu, ktera .news-wrapper stavi na float/flex
   a rozbiji tim stejnou vysku karet */
.news-block .news-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  float: none;
}
/* Maketa pocita se 3 clanky. Po nastaveni "Pocet clanku na HP = 3"
   muzete nasledujici radek smazat. */
.news-block .news-item:nth-child(n + 4) {
  display: none;
}

/* Nektere sablony Shoptetu obaluji .news-item jeste jednou vrstvou
   (napr. .col-sm-6). Roztazeni pak skonci na obalu a karta uvnitr zustane
   nizka. Vynucujeme proto stretch na kazde urovni - pokud zadny obal
   neexistuje, druhe pravidlo nic nechyti a nic se nerozbije. */
.news-block .news-wrapper > * {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
}
.news-block .news-wrapper > * > .news-item {
  flex: 1 1 auto !important;
  height: auto !important;
}

.news-block.homepage-blog-wrapper > div.text-center {
  display: none;
}

/* --------------------------------- karta -------------------------------- */
.news-block .news-item {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch;
  height: 100%;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mth-line);
  border-radius: var(--mth-radius);
  background: #fff;
  overflow: hidden;
}
.news-block .news-item .image {
  margin: 0;
  display: block;
  flex: 0 0 auto;
  height: auto;
}
.news-block .news-item .image a {
  display: block;
}
.news-block .news-item .image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 406 / 320;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.news-block .news-item:hover .image img {
  transform: scale(1.04);
}

/* .text musi vyplnit zbytek karty, jinak tlacitko "plave" podle delky perexu */
.news-block .news-item .text {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0;
  padding: 25px 32px 32px;
  text-align: left;
}
/* Nadpis ma pevne misto na 2 radky, aby perexy zacinaly na stejne lince.
   Kdyz jsou vsechny nazvy jednoradkove, min-height muzete smazat. */
.news-block .news-item .text .title {
  flex: 0 0 auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 48px;
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #000;
  text-decoration: none;
}
.news-block .news-item .text .title:hover {
  color: var(--mth-brown);
}

/* datum v maketu neni */
.news-block .news-item .text time {
  display: none;
}

/* Perex roztahne volne misto (tlacitko sedne na spodni hranu karty) a zaroven
   ma pevnou vysku 4 radku - tim tlacitka drzi jednu linku i tehdy, kdyby
   sablona roztazeni karet prebila. */
.news-block .news-item .description {
  flex: 1 1 auto;
  margin: 0 0 22px;
  min-height: 92px;
}
.news-block .news-item .description p {
  margin: 0;
  font-size: 16px;
  line-height: 23px;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------- tlacitka ------------------------------- */
.news-block .news-item .text-center {
  flex: 0 0 auto;
  margin-top: auto !important;
  text-align: left;
  position: static;
  transform: none;
}
.news-block .news-item .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--mth-brown);
  color: #fff;
  font-family: var(--mth-font-body);
  font-size: 18px;
  line-height: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  text-decoration: none;
}
.news-block .news-item .btn.btn-primary:hover {
  background: var(--mth-brown-dark);
  color: #fff;
}

.news-block > .text-center {
  margin-top: 34px;
  text-align: center;
}
.news-block .btn.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 12px 34px;
  border: 1px solid var(--mth-brown);
  border-radius: 999px;
  background: transparent;
  color: var(--mth-brown);
  font-family: var(--mth-font-body);
  font-size: 18px;
  line-height: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  text-decoration: none;
}
.news-block .btn.btn-secondary:hover {
  background: var(--mth-brown);
  color: #fff;
}

@media (max-width: 991px) {
  .news-block .homepage-group-title {
    font-size: 28px;
  }
  .news-block .homepage-group-title::before {
    font-size: 18px;
  }
  .news-block .news-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .news-block .news-item .text {
    padding: 20px 24px 24px;
  }
}

@media (max-width: 639px) {
  .news-block .homepage-group-title {
    font-size: 24px;
  }
  .in-index .news-item:first-child {
    margin-left: 0px;
  }
  .news-block .news-wrapper {
    grid-template-columns: 1fr;
  }
  .news-block .news-item:nth-child(n + 4) {
    display: flex;
  }
}