/* =====================================================================
   PILINA.CZ — styly pro HERO a sekci DVĚ CESTY (šablona Step)
   Vložit do: Vzhled a obsah → Editor vzhledu → Vlastní CSS
   ===================================================================== */

:root {
  --pl-cream:  #fdfaf4;
  --pl-sand:   #f6f0e5;
  --pl-line:   #e6dccb;
  --pl-ink:    #2c2317;
  --pl-body:   #5b4f40;
  --pl-muted:  #6b5e4c;
  --pl-green:  #3d5233;
  --pl-green-d:#2b3a24;
  --pl-gold:   #b0873f;
  --pl-serif:  'Source Serif 4', Georgia, serif;
  --pl-max:    1240px;
}

/* ---------- Tlačítka ---------- */
.plBtn {
  display: inline-block;
  padding: 15px 26px;
  border-radius: 7px;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .12s ease, background .15s ease;
}
.plBtn:hover { transform: translateY(-1px); text-decoration: none; }
.plBtn:focus-visible { outline: 2px solid var(--pl-gold); outline-offset: 3px; }
.plBtn--solid { background: var(--pl-green); color: var(--pl-cream); box-shadow: 0 2px 0 var(--pl-green-d); }
.plBtn--solid:hover { background: var(--pl-green-d); color: var(--pl-cream); }
.plBtn--ghost { background: var(--pl-cream); color: var(--pl-green); border: 1.5px solid var(--pl-green); }
.plBtn--ghost:hover { background: var(--pl-sand); color: var(--pl-green); }
.plBtn--block { display: block; text-align: center; padding: 14px 22px; }

/* ---------- HERO ---------- */
.plHero { background: var(--pl-sand); }
.plHero__inner {
  max-width: var(--pl-max);
  margin: 0 auto;
  padding: 56px 20px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.plHero__eyebrow {
  display: block;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a6636;
  margin-bottom: 14px;
}
.plHero__title {
  margin: 0 0 18px;
  font: 400 46px/1.12 var(--pl-serif);
  color: var(--pl-ink);
  text-wrap: pretty;
}
.plHero__lead {
  margin: 0 0 28px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--pl-body);
  max-width: 470px;
}
.plHero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.plHero__rating {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--pl-muted);
}
.plHero__rating strong { color: var(--pl-ink); }
.plStars { color: var(--pl-gold); font-size: 15px; letter-spacing: 1px; }
.plHero__media {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(60,44,20,.16);
}
.plHero__media img { display: block; width: 100%; height: 400px; object-fit: cover; }

/* ---------- USP pás ---------- */
.plUsp { border-top: 1px solid var(--pl-line); background: var(--pl-cream); }
.plUsp__inner {
  max-width: var(--pl-max);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.plUsp__item {
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 5px;
  border-left: 1px solid var(--pl-line);
}
.plUsp__item:first-child { border-left: 0; padding-left: 0; }
.plUsp__item strong { font: 500 21px var(--pl-serif); color: var(--pl-ink); }
.plUsp__item span { font-size: 13px; color: var(--pl-muted); }

/* ---------- DVĚ CESTY ---------- */
.plPaths { background: var(--pl-cream); padding: 70px 20px 76px; }
.plPaths__head { max-width: 700px; margin: 0 auto 38px; text-align: center; }
.plPaths__eyebrow {
  display: block;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #8a6636; margin-bottom: 12px;
}
.plPaths__title { margin: 0 0 10px; font: 400 38px/1.2 var(--pl-serif); color: var(--pl-ink); }
.plPaths__lead { margin: 0; font-size: 16px; color: var(--pl-muted); }

.plPaths__grid {
  max-width: var(--pl-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.plCard {
  background: var(--pl-sand);
  border: 1px solid var(--pl-line);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .18s ease;
}
.plCard:hover { box-shadow: 0 12px 30px rgba(60,44,20,.12); }
.plCard__img { display: block; }
.plCard__img img { display: block; width: 100%; height: 270px; object-fit: cover; }
.plCard__body {
  padding: 28px 30px 30px;
  display: flex; flex-direction: column; gap: 14px; flex: 1;
}
.plCard__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plTag {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 4px;
}
.plTag--warm  { background: #e7dcc7; color: #7a6039; }
.plTag--green { background: #e3ddc6; color: #54603a; }
.plCard__note { font-size: 13px; color: var(--pl-muted); }
.plCard__title { margin: 0; font: 500 27px/1.2 var(--pl-serif); color: var(--pl-ink); }
.plCard__desc { margin: 0; font-size: 15px; line-height: 1.6; color: var(--pl-body); }
.plCard__price {
  margin: auto 0 0; display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; color: var(--pl-muted);
}
.plCard__price strong { font: 500 24px var(--pl-serif); color: var(--pl-ink); }

/* ---------- Responzivita ---------- */
@media (max-width: 991px) {
  .plHero__inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px 44px; }
  .plHero__title { font-size: 36px; }
  .plHero__media img { height: 300px; }
  .plUsp__inner { grid-template-columns: 1fr 1fr; }
  .plUsp__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .plPaths__grid { grid-template-columns: 1fr; }
  .plPaths { padding: 48px 20px 52px; }
  .plPaths__title { font-size: 30px; }
}
@media (max-width: 543px) {
  .plHero__title { font-size: 29px; }
  .plHero__lead { font-size: 16px; }
  .plHero__cta .plBtn { flex: 1 1 100%; text-align: center; }
  .plUsp__inner { grid-template-columns: 1fr; }
  .plUsp__item { border-left: 0; padding: 16px 0; border-top: 1px solid var(--pl-line); }
  .plUsp__item:first-child { border-top: 0; }
  .plCard__body { padding: 22px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .plBtn, .plCard { transition: none; }
  .plBtn:hover { transform: none; }
}