/* =========================================================
   Šiklo – siklo-patch.css
   Patch: HOMEPAGE "Nové články" = 5 bloků
   1 velký vlevo + 4 dlaždice vpravo (2 nahoře, 2 dole)
   ========================================================= */


/* =========================================================
   HOMEPAGE – blok "Nové články"
   Wrapper: .homepage-blog-wrapper.row.blog-wrapper
   Uvnitř: 1x .homepage-group-title + N x .news-item
   ========================================================= */

/* 0) ZABIJ pseudo-elementy, které dělají „nesmyslné bloky“ */
.homepage-blog-wrapper.row.blog-wrapper::before,
.homepage-blog-wrapper.row.blog-wrapper::after{
  content: none !important;
  display: none !important;
}

/* 1) Grid jen pro wrapper článků */
.homepage-blog-wrapper.row.blog-wrapper{
  display: grid !important;

  /* 1 velký vlevo (2fr) + vpravo 2 sloupce (1fr + 1fr) */
  grid-template-columns: 2fr 1fr 1fr;

  /* řádky: nadpis + 2 řádky obsahu */
  grid-template-rows: auto minmax(240px, 1fr) minmax(240px, 1fr);

  /* přesné rozvržení bez děr */
  grid-template-areas:
    "title title title"
    "main  a     b"
    "main  c     d";

  gap: 18px;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
  clear: both !important;

  /* jistota proti divným výškám */
  align-items: stretch;
}

/* 2) Nadpis přes celou šířku */
.homepage-blog-wrapper.row.blog-wrapper > .homepage-group-title{
  grid-area: title;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}

/* 3) Mapování 5 článků – POZOR: používáme nth-child, protože 1. child je title */
.homepage-blog-wrapper.row.blog-wrapper > .news-item{
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100%;

  position: relative;
  border-radius: 18px;
  overflow: hidden;

  /* aby se karta nesnažila držet minimální obsah a nedeformovala grid */
  min-height: 0;
}

/* 1. článek (nejnovější) = velký vlevo */
.homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(2){
  grid-area: main;
}

/* 4 dlaždice vpravo */
.homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(3){ grid-area: a; }
.homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(4){ grid-area: b; }
.homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(5){ grid-area: c; }
.homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(6){ grid-area: d; }

/* vše nad 5 článků pryč (ať se to nikdy nerozbije) */
.homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(n+7){
  display: none !important;
}

/* 4) Klikací plocha přes celou kartu */
.homepage-blog-wrapper.row.blog-wrapper > .news-item > a,
.homepage-blog-wrapper.row.blog-wrapper > .news-item > a.link{
  display: block;
  height: 100%;
}

/* 5) Obrázky = cover, žádné rozmazání z resize kontejneru */
.homepage-blog-wrapper.row.blog-wrapper .news-item .image{
  height: 100%;
}

.homepage-blog-wrapper.row.blog-wrapper .news-item .image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 6) Text overlay */
.homepage-blog-wrapper.row.blog-wrapper .news-item .text{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  width: auto !important;
  padding: 18px !important;

  color: #fff;
  z-index: 2;
}

.homepage-blog-wrapper.row.blog-wrapper .news-item .title{
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 6px 0;
}

.homepage-blog-wrapper.row.blog-wrapper .news-item .description{
  line-height: 1.25;
  opacity: .95;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px){
  .homepage-blog-wrapper.row.blog-wrapper{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "title title"
      "main  main"
      "a     b"
      "c     d";
    grid-auto-rows: minmax(220px, auto);
  }
}

@media (max-width: 640px){
  .homepage-blog-wrapper.row.blog-wrapper{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "main"
      "a"
      "b"
      "c"
      "d";
    gap: 14px;
    grid-auto-rows: minmax(200px, auto);
  }
}

/* BLOG / ČLÁNKY – zvětšení šířky kontejneru (globálně) */
:root{
  --siklo-article-max: 1120px; /* změň třeba na 1240px */
}

/* Shoptet typicky omezuje článek přes .container-narrow */
body.in-blog .container-narrow,
body.type-post .container-narrow,
body.type-article .container-narrow{
  max-width: var(--siklo-article-max) !important;
  width: calc(100% - 32px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* pojistka: ať se ti nic “nelepí” na okraje na mobilu */
@media (max-width: 480px){
  body.in-blog .container-narrow,
  body.type-post .container-narrow,
  body.type-article .container-narrow{
    width: calc(100% - 24px) !important;
  }
}


/* =========================================================
   BLOG NA HP ŠIKLO
   - 1. velký článek (nth-child(2)) = nadpis + popis
   - ostatní dlaždice = jen nadpis
   - na mobilu stejně
   - "Číst článek" na mobilu schovat úplně
========================================================= */

/* MALÉ DLAŽDICE – schovat popis i "Číst článek" */
.homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(n+3) .description,
.homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(n+3) .read-article{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* VELKÝ ČLÁNEK – nechat popis */
.homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(2) .description{
  display: block !important;
  visibility: visible !important;
  opacity: .95 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin-top: 6px !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  font-size: inherit !important;
}

/* VELKÝ ČLÁNEK – desktop/tablet může mít "Číst článek" */
.homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(2) .read-article{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin-top: 6px !important;
  padding: 0 !important;
  line-height: normal !important;
  font-size: inherit !important;
}

/* MALÉ DLAŽDICE – hezké odsazení titulku */
.homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(n+3) .title{
  display: block !important;
  margin: 0 !important;
  padding: 0 12px 12px 12px !important;
  line-height: 1.12 !important;
  box-sizing: border-box !important;
}

/* VELKÝ ČLÁNEK – normální overlay */
.homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(2) .text{
  padding: 18px !important;
  box-sizing: border-box !important;
}

.homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(2) .title{
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
}

/* MOBIL */
@media (max-width: 767px){

  /* malé dlaždice stále bez popisu */
  .homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(n+3) .description,
  .homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(n+3) .read-article{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
  }

  /* první velký článek – popis nechat */
  .homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(2) .description{
    display: block !important;
    visibility: visible !important;
    opacity: .95 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 6px !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    font-size: inherit !important;
  }

  /* první velký článek – na mobilu schovat "Číst článek" */
  .homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(2) .read-article{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
  }

  /* titulek u malých dlaždic */
  .homepage-blog-wrapper.row.blog-wrapper > .news-item:nth-child(n+3) .title{
    padding: 0 12px 12px 12px !important;
    margin: 0 !important;
    line-height: 1.12 !important;
  }
}

/* =========================================================
   ČLÁNKY – spodní navigace Předchozí / Další
   jednotný vzhled pro desktop i mobil
========================================================= */

.next-prev.text-center{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin: 28px 0 0 0 !important;
}

.next-prev.text-center a.btn.btn-default,
.next-prev.text-center a.btn.btn-default.inline-block{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 190px !important;
  min-height: 48px !important;
  padding: 0 18px !important;

  background: #f6f1e8 !important;
  background-color: #f6f1e8 !important;
  color: #222 !important;
  border: 1px solid #ddd3c3 !important;
  border-radius: 999px !important;

  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  transition: all .2s ease !important;
}

.next-prev.text-center a.btn.btn-default:hover,
.next-prev.text-center a.btn.btn-default:focus,
.next-prev.text-center a.btn.btn-default:active,
.next-prev.text-center a.btn.btn-default.inline-block:hover,
.next-prev.text-center a.btn.btn-default.inline-block:focus,
.next-prev.text-center a.btn.btn-default.inline-block:active{
  background: #efe7da !important;
  background-color: #efe7da !important;
  color: #111 !important;
  border-color: #d3c7b3 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

/* mobil – jen lehce upravit velikost, design zůstává stejný */
@media (max-width: 767px){
  .next-prev.text-center{
    gap: 10px !important;
    margin-top: 24px !important;
  }

  .next-prev.text-center a.btn.btn-default,
  .next-prev.text-center a.btn.btn-default.inline-block{
    min-width: 150px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }
}

/* =========================================================
   ŠIKLO – HEADER KONTAKT (doporučená verze)
========================================================= */

@media (min-width: 1561px) {
  #header .contact-box-header,
  #header [data-testid="contactbox"] {
    margin-left: 28px !important;
  }

  #header .contact-box-header ul li,
  #header .contact-box-header ul li span,
  #header .contact-box-header ul li a,
  #header [data-testid="contactbox"] ul li,
  #header [data-testid="contactbox"] ul li span,
  #header [data-testid="contactbox"] ul li a {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

@media (max-width: 1480px) {
  #header .contact-box-header,
  #header [data-testid="contactbox"] {
    display: none !important;
  }
}