/* =========================================================
   ARTICLE TEMPLATE (Shoptet)
========================================================= */

.art-container,
.art-container * { box-sizing: border-box; }

.art-container{
  font-family: Arial, sans-serif !important;
  line-height: 1.8 !important;
  font-size: 18px !important;
  color: #222;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 0 40px 0;
}

/* Nadpisy */
.art-container h1{
  font-size: 34px !important;
  margin: 0 0 20px 0;
}
.art-container h2{
  font-size: 26px !important;
  margin: 40px 0 15px 0;
  color: #111;
}
.art-container h3{
  font-size: 22px !important;
  margin: 30px 0 10px 0;
  color: #111;
}

.art-container p,
.art-container li{
  font-size: 18px !important;
}

.art-container ul{ padding-left: 20px; }

/* Obrázky */
.art-container img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px !important; /* sjednoceno */
}

/* =========================================================
   Split (obrázek + text)
   - desktop: vedle sebe, obrázek vertikálně na střed vůči textu
   - mobil: obrázek a pod ním text
========================================================= */
.art-split{
  display: flex;
  gap: 30px;
  align-items: center;  /* vertikální centrování vůči textu */
  margin: 35px 0;
}

.art-split__media{ flex: 1 1 45%; }
.art-split__content{ flex: 1 1 55%; min-width: 0; }

.art-split--img-right .art-split__media{ order: 2; }
.art-split--img-right .art-split__content{ order: 1; }

/* =========================================================
   Boxy (hranaté zvýraznění)
========================================================= */
.art-box{
  padding: 20px 25px;
  margin: 30px 0;
  border-radius: 0 !important; /* hranaté */
  background: #f3f7f6;
  border-left: 6px solid #1b6b5b;
}

.art-box--green{
  background: #f3f7f6;
  border-left-color: #1b6b5b;
}

.art-box--red{
  background: #fff5f5;
  border-left-color: #c0392b;
}

.art-box strong{ font-size: 20px; }

.art-quote{
  margin: 30px 0;
  padding: 18px 22px;
  border-radius: 0 !important;
  background: #f3f7f6;
  border-left: 6px solid #1b6b5b;
  font-style: italic;
  color: #555;
}

/* =========================================================
   Produkt box (klikací) — hranatý
========================================================= */
.art-product{
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
  margin: 35px 0;
  padding: 16px;
  border-radius: 0 !important;
  background: #f6f6f6;
  border: 1px solid #e6e6e6;
  text-decoration: none;
  color: inherit;
}

.art-product__img{
  width: 140px;
  height: auto;
  max-width: 100%;
  border-radius: 12px !important;
  flex: 0 0 auto;
}

.art-product__info{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.art-product__name{
  font-weight: 700;
  font-size: 18px;
  color: #111;
}

/* Tlačítko – hover "lehce zvětšit" */
.art-product__btn{
  display: inline-block;
  padding: 9px 14px;
  border-radius: 0 !important;
  background: #1b6b5b;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  transform: scale(1);
  transition: transform .15s ease, filter .15s ease;
}

.art-product__btn:hover{
  transform: scale(1.05);
  filter: brightness(1.03);
}
/* =========================================================
   Autor
========================================================= */
.art-author{
  margin-top: 70px;
  padding-top: 30px;
  border-top: 1px solid #ddd;
}

.art-author__row{
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.art-author__photo{
  width: 130px;
  max-width: 100%;
  border-radius: 12px !important;
}

.art-author p,
.art-author strong{
  font-size: 18px !important;
  line-height: 1.8 !important;
}

/* =========================================================
   Mobil
========================================================= */
@media (max-width: 768px){
  .art-container{
    font-size: 17px !important;
    line-height: 1.7 !important;
    padding: 0 15px 40px 15px !important;
  }

  .art-container h1{ font-size: 26px !important; }
  .art-container h2{ font-size: 22px !important; }
  .art-container h3{ font-size: 20px !important; }

  /* Split: obrázek -> text */
  .art-split{
    flex-direction: column !important;
    gap: 18px !important;
    align-items: stretch !important;
  }
  .art-split__media{ order: 1 !important; }
  .art-split__content{ order: 2 !important; }

  /* Produkt box */
  .art-product{
    flex-direction: column;
    align-items: stretch;
  }
  .art-product__img{
    width: 100%;
  }

  /* Autor */
  .art-author__row{
    flex-direction: column;
  }
}