/* =================================================================
   BLOG — články
   Vlastní styly pro blog/blog1.html, blog2.html a blog3.html.
   Všechny tři stránky načítají tenhle jeden soubor.

   Načítá se AŽ ZA style1.css, ze kterého přebírá barvy, písma
   a proměnné (--pink, --r-card, --line …) i společné prvky:
   hlavičku, patičku, .page-head a komponentu .blob.
   Když tady něco měníš, měníš to jen na blogu.
   ================================================================= */

/* ---------- 01 Pásek nad nadpisem: rubrika + datum ---------- */
.clanek-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.clanek-meta__stitek{
  display:inline-block;
  padding:6px 13px;
  border-radius:var(--r-card);
  background:var(--pink-pale);
  box-shadow:inset 0 0 0 1px var(--pink-soft);
  color:var(--pink-dark);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.clanek-meta__datum{
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- 02 Blok s článkem ---------- */
.clanek-blok{
  padding-block:clamp(10px,2vw,26px) clamp(48px,6vw,80px);
}
.clanek-blok .wrap{
  max-width:820px;
  margin-inline:auto;
}

/* úvodní fotka */
.clanek-foto{
  margin:0 0 clamp(26px,3.4vw,40px);
  border-radius:var(--r-img);
  overflow:hidden;
  box-shadow:var(--glow-md);
}
.clanek-foto img{
  display:block;
  width:100%;
  height:clamp(220px,34vw,420px);
  object-fit:cover;
}

/* ---------- 03 Text článku ---------- */
.clanek{
  display:grid;
  gap:clamp(20px,2.4vw,28px);
}
.clanek__perex{
  font-size:clamp(1rem,1.25vw,1.12rem);
  line-height:1.8;
  color:var(--ink);
  padding-left:18px;
  border-left:3px solid var(--pink);
}
.clanek h2{
  font-family:var(--display);
  font-size:clamp(1.02rem,1.4vw,1.16rem);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
  margin:clamp(10px,1.4vw,16px) 0 -6px;
}
.clanek p{
  font-size:.97rem;
  line-height:1.8;
  color:var(--ink-2);
  margin:0;
}
.clanek a{
  color:var(--pink-dark);
  font-weight:600;
  border-bottom:1px solid var(--pink-soft);
  transition:border-color .2s ease;
}
.clanek a:hover{border-color:var(--pink-dark)}

/* seznamy — odrážka je malé srdíčko */
.clanek ul{
  list-style:none;
  display:grid;
  gap:11px;
  margin:0;
  padding:0;
}
.clanek ul li{
  position:relative;
  padding-left:26px;
  font-size:.97rem;
  line-height:1.75;
  color:var(--ink-2);
}
.clanek ul li::before{
  content:"";
  position:absolute;left:0;top:.55em;
  width:11px;height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 176'%3E%3Cpath fill='%23FE9FD0' d='M100 168C42 124 6 92 6 56 6 27 28 8 54 8c19 0 35 11 46 26C111 19 127 8 146 8c26 0 48 19 48 48 0 36-36 68-94 112Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 04 Zvýrazněný tip uvnitř textu ---------- */
.clanek-box{
  padding:clamp(20px,2.4vw,26px) clamp(22px,2.8vw,30px);
  background:var(--pink-pale);
  border-radius:var(--r-card);
  border-left:4px solid var(--pink);
}
.clanek-box__titul{
  font-size:10px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--pink-dark);
  margin:0 0 8px;
}
.clanek-box p{
  font-size:.95rem;
  line-height:1.75;
  color:var(--ink);
  margin:0;
}

/* ---------- 05 Tlačítko zpět pod článkem ----------
   Je to blob z navigace v menší velikosti — třídy .blob
   a .blob--maly řeší style1.css, tady jen odsazení. */
.zpet-blok{
  margin-top:clamp(34px,4.4vw,52px);
  padding-top:clamp(26px,3.2vw,36px);
  border-top:1px solid var(--line);
  text-align:center;
}

/* ---------- 06 Mobil ---------- */
@media (max-width:560px){
  .clanek{gap:18px}
  .clanek__perex{padding-left:14px}
  .clanek-box{padding:18px 20px}
}