/* ==========================================================================
   Postavgril – hero slider na úvodní stránce (náhrada carouselu šablony)
   HTML vytváří pg-hero.js z bannerů v #carousel. Vše izolované pod .pg-hero.
   Karty s fotkou přes celou plochu, tmavý přechod zespodu, nadpis + text +
   červené tlačítko. Desktop 3 karty, tablet 2, mobil 1 + náhled další.
   ========================================================================== */

.pg-hero {
  --pgh-primary: var(--color-primary, #cd3d2f);
  --pgh-dark: #01161e;
  --pgh-accent: #ffc807;
  --pgh-radius: 20px;
  --pgh-gap: 20px;
  --pgh-per: 3;                 /* počet karet vedle sebe */
  --pgh-ratio: 3 / 4;           /* poměr stran karty (doporučená fotka 1000×1333) */
  --pgh-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
  --pgh-shadow-hover: rgba(1, 22, 30, 0.22) 0 18px 40px;
  --pgh-ease: cubic-bezier(.2, .7, .2, 1);
  --pgh-font: var(--template-font, "Source Sans 3"), sans-serif;
  --pgh-font-head: var(--template-headings-font, "Exo 2"), sans-serif;

  position: relative;
  margin: 24px 0 8px;
  font-family: var(--pgh-font);
  text-align: left;
}
.pg-hero *,
.pg-hero *::before,
.pg-hero *::after { box-sizing: border-box; }

/* původní carousel – JS ho skryje atributem hidden, pojistka proti stylům šablony */
.pg-hero-source[hidden] { display: none !important; }

/* ---------- Dráha ---------- */
.pg-hero__viewport { position: relative; }

.pg-hero .pg-hero__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--pgh-per) - 1) * var(--pgh-gap)) / var(--pgh-per));
  gap: var(--pgh-gap);
  margin: 0;
  /* místo pro stín karet, ať ho overflow neořízne */
  padding: 4px 0 28px;
  margin-bottom: -20px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pg-hero .pg-hero__track::-webkit-scrollbar { display: none; }
.pg-hero .pg-hero__track:focus-visible { outline: 3px solid var(--pgh-primary); outline-offset: 4px; border-radius: var(--pgh-radius); }
.pg-hero .pg-hero__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.pg-hero .pg-hero__track.is-dragging .pg-hero__card { pointer-events: none; }

.pg-hero .pg-hero__item {
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
  min-width: 0;
}
.pg-hero .pg-hero__item::before { content: none !important; display: none !important; }

/* ---------- Karta ---------- */
.pg-hero .pg-hero__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  aspect-ratio: var(--pgh-ratio);
  overflow: hidden;
  border-radius: var(--pgh-radius);
  background: var(--pgh-dark);
  box-shadow: var(--pgh-shadow);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transform: translateZ(0); /* Safari: zaoblení + overflow při animaci */
  transition: box-shadow .35s var(--pgh-ease), transform .35s var(--pgh-ease);
  -webkit-user-select: none;
  user-select: none;
}
.pg-hero a.pg-hero__card:hover { box-shadow: var(--pgh-shadow-hover); transform: translateY(-3px); }
.pg-hero a.pg-hero__card:focus-visible { outline: 3px solid var(--pgh-primary); outline-offset: 3px; }

.pg-hero .pg-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
  transition: transform .9s var(--pgh-ease);
}
.pg-hero a.pg-hero__card:hover .pg-hero__img { transform: scale(1.05); }

/* tmavý přechod zespodu + jemná červená žhavá záře */
.pg-hero .pg-hero__card:not(.pg-hero__card--plain)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 55% at 0% 100%, rgba(205, 61, 47, .38), transparent 70%),
    linear-gradient(180deg, rgba(1, 22, 30, 0) 35%, rgba(1, 22, 30, .55) 62%, rgba(1, 22, 30, .94) 100%);
  transition: opacity .35s var(--pgh-ease);
}

/* ---------- Texty ---------- */
.pg-hero .pg-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 26px 26px;
}
.pg-hero .pg-hero__badge {
  margin-bottom: 4px;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--pgh-accent);
  color: var(--pgh-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pg-hero .pg-hero__title {
  font-family: var(--pgh-font-head);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(1, 22, 30, .45);
}
.pg-hero .pg-hero__text {
  font-size: 16px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .86);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pg-hero .pg-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  min-height: 46px;
  padding: 0 20px 0 22px;
  border-radius: 10px;
  background: var(--pgh-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(205, 61, 47, .35);
  transition: background .25s ease, box-shadow .25s ease;
}
.pg-hero .pg-hero__btn svg { flex: none; transition: transform .3s var(--pgh-ease); }
.pg-hero a.pg-hero__card:hover .pg-hero__btn { background: #b8331f; box-shadow: 0 10px 26px rgba(205, 61, 47, .5); }
.pg-hero a.pg-hero__card:hover .pg-hero__btn svg { transform: translateX(4px); }

/* ---------- Šipky ---------- */
.pg-hero .pg-hero__arrow {
  position: absolute;
  top: calc(50% - 12px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--pgh-dark);
  box-shadow: rgba(1, 22, 30, .18) 0 8px 24px;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .25s ease, color .25s ease, opacity .25s ease, transform .25s var(--pgh-ease);
}
.pg-hero .pg-hero__arrow--prev { left: -26px; }
.pg-hero .pg-hero__arrow--prev svg { transform: scaleX(-1); }
.pg-hero .pg-hero__arrow--next { right: -26px; }
.pg-hero .pg-hero__arrow:hover { background: var(--pgh-primary); color: #fff; transform: translateY(-50%) scale(1.06); }
.pg-hero .pg-hero__arrow:focus-visible { outline: 3px solid var(--pgh-primary); outline-offset: 3px; }
.pg-hero .pg-hero__arrow:disabled { opacity: 0; pointer-events: none; }

/* ---------- Tečky ---------- */
.pg-hero .pg-hero__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  min-height: 8px;
}
.pg-hero .pg-hero__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(1, 22, 30, .18);
  cursor: pointer;
  transition: width .35s ease, background .35s ease;
}
.pg-hero .pg-hero__dot:hover { background: rgba(1, 22, 30, .4); }
.pg-hero .pg-hero__dot[aria-selected="true"] { width: 28px; background: linear-gradient(90deg, var(--pgh-primary), #ff8a00); }

.pg-hero--static .pg-hero__arrow,
.pg-hero--static .pg-hero__dots { display: none; }

/* ---------- Animace při zobrazení ---------- */
.pg-hero.is-ready .pg-hero__item {
  animation: pgh-fade-up .6s var(--pgh-ease) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes pgh-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Responzivita ---------- */
@media (max-width: 1439px) {
  .pg-hero .pg-hero__arrow--prev { left: -18px; }
  .pg-hero .pg-hero__arrow--next { right: -18px; }
}
@media (max-width: 1199px) {
  .pg-hero { --pgh-gap: 16px; }
  .pg-hero .pg-hero__title { font-size: 23px; }
  .pg-hero .pg-hero__body { padding: 24px 22px 22px; }
}
@media (max-width: 991px) {
  .pg-hero { --pgh-per: 2; }
  .pg-hero .pg-hero__arrow { width: 46px; height: 46px; }
  .pg-hero .pg-hero__arrow--prev { left: -12px; }
  .pg-hero .pg-hero__arrow--next { right: -12px; }
}
@media (max-width: 767px) {
  .pg-hero {
    --pgh-gap: 12px;
    --pgh-per: 1.18; /* kousek další karty naznačí, že se dá posouvat */
    margin-top: 16px;
  }
  .pg-hero .pg-hero__track { scroll-padding-left: 0; }
  .pg-hero .pg-hero__arrow { display: none; }
  .pg-hero .pg-hero__title { font-size: 22px; }
  .pg-hero .pg-hero__text { font-size: 15px; }
  .pg-hero .pg-hero__btn { min-height: 44px; }
  .pg-hero a.pg-hero__card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-hero *,
  .pg-hero *::before,
  .pg-hero *::after { animation: none !important; transition: none !important; }
  .pg-hero .pg-hero__track { scroll-behavior: auto; }
}