/* ==========================================================================
   Postavgril – sekce „O nás“ na úvodní stránce (uvítací text Shoptetu)
   HTML se vkládá do uvítacího textu, tento soubor jen stylují.
   Světlý, teplý design. Navazuje na widget pg-reviews pod ní:
   bílý pás výhod „přetéká“ přes horní hranu tmavé sekce recenzí.
   ========================================================================== */

.pg-about {
  --pga-primary: var(--color-primary, #cd3d2f);
  --pga-dark: #01161e;
  --pga-text: #1f1f1f;
  --pga-muted: #5c5c5c;
  --pga-warm: #fff5ec;
  --pga-accent: #ffc807;
  --pga-radius: 20px;
  --pga-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
  --pga-font: var(--template-font, "Source Sans 3"), sans-serif;
  --pga-font-head: var(--template-headings-font, "Exo 2"), sans-serif;

  position: relative;
  font-family: var(--pga-font);
  color: var(--pga-text);
  text-align: left;
}
.pg-about *,
.pg-about *::before,
.pg-about *::after { box-sizing: border-box; }

/* ---------- Napojení na okolí (jen když je sekce na stránce) ---------- */
.welcome-wrapper:has(.pg-about) {
  position: relative;
  z-index: 2;
  padding-bottom: 0 !important;
  margin-bottom: -64px;        /* pás výhod zasahuje do recenzí */
}
.welcome-wrapper:has(.pg-about) .welcome > div { padding: 0 !important; }
body:has(.pg-about) .pg-reviews { padding-top: 136px; }

/* ---------- Karta ---------- */
.pg-about__card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
  padding: 24px 48px 24px 24px;
  border-radius: var(--pga-radius);
  background: #fff;
  box-shadow: var(--pga-shadow);
}

/* ---------- Fotka na „žhavém“ podkladu ---------- */
.pg-about__media {
  position: relative;
  isolation: isolate;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 380px;
  border-radius: 16px;
  background-color: var(--pga-warm);
  background-image:
    radial-gradient(420px 320px at 10% 100%, rgba(205, 61, 47, 0.16), transparent 70%),
    radial-gradient(360px 260px at 100% 0%, rgba(255, 200, 7, 0.22), transparent 70%),
    linear-gradient(170deg, #fffaf5 0%, #ffeedd 100%);
  overflow: hidden;
}
/* tečková textura (rošt) – stejná jako v recenzích */
.pg-about__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(205, 61, 47, 0.16) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}
/* záře za postavou */
.pg-about__media::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30%;
  z-index: -1;
  width: 90%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 170, 60, 0.35), rgba(255, 200, 7, 0.12) 45%, transparent 70%);
}
.pg-about__photo {
  display: block;
  flex: 0 0 auto;
  width: 118%;
  max-width: none !important;
  height: auto;
  margin: 56px 0 0;
  filter: drop-shadow(0 16px 24px rgba(120, 60, 20, 0.18));
}

.pg-about__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--pga-shadow);
  color: var(--pga-muted);
  line-height: 1.1;
}
.pg-about__badge span {
  order: -1;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pg-about__badge strong {
  font-family: var(--pga-font-head);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pga-primary);
}

/* ---------- Text ---------- */
.pg-about__body { padding: 24px 0; }

.pg-about__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(205, 61, 47, 0.25);
  background: rgba(205, 61, 47, 0.07);
  color: var(--pga-primary);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pg-about__eyebrow::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 3.5-1.5 5-1.5 8 0 1.4 1 2.5 2.2 2.5 1.4 0 2.3-1.1 2.3-2.6 0-.9-.3-1.7-.6-2.4C17 9 19 11.8 19 15a7 7 0 01-14 0c0-4.6 3.6-7.4 7-13z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 3.5-1.5 5-1.5 8 0 1.4 1 2.5 2.2 2.5 1.4 0 2.3-1.1 2.3-2.6 0-.9-.3-1.7-.6-2.4C17 9 19 11.8 19 15a7 7 0 01-14 0c0-4.6 3.6-7.4 7-13z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pg-about .pg-about__title {
  margin: 16px 0 0 !important;
  padding: 0 !important;
  font-family: var(--pga-font-head);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pga-dark) !important;
  text-align: left !important;
}
.pg-about .pg-about__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--pga-primary), #ff8a00);
}
.pg-about .pg-about__lead {
  margin: 20px 0 0 !important;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--pga-text);
}
.pg-about .pg-about__text {
  margin: 12px 0 0 !important;
  font-size: 16px;
  line-height: 1.65;
  color: var(--pga-muted);
}

/* kategorie jako „štítky“ */
.pg-about .pg-about__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.pg-about .pg-about__cats li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.pg-about .pg-about__cats li::before { content: none !important; display: none !important; }
.pg-about .pg-about__cats a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #e6e6e6;
  background: #fafafa;
  color: var(--pga-text) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.pg-about .pg-about__cats a::after {
  content: "\2192";
  color: var(--pga-primary);
  transition: transform .25s ease;
}
.pg-about .pg-about__cats a:hover {
  border-color: rgba(205, 61, 47, 0.35);
  background: rgba(205, 61, 47, 0.06);
  color: var(--pga-primary) !important;
}
.pg-about .pg-about__cats a:hover::after { transform: translateX(3px); }

/* tlačítka */
.pg-about .pg-about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0 !important;
}
.pg-about .pg-about__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 10px;
  border: 2px solid transparent;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none !important;
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .2s ease;
}
.pg-about .pg-about__btn--primary {
  background: var(--pga-primary);
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(205, 61, 47, 0.3);
}
.pg-about .pg-about__btn--primary::after {
  content: "\2192";
  transition: transform .3s ease;
}
.pg-about .pg-about__btn--primary:hover {
  background: var(--pga-dark);
  box-shadow: 0 10px 24px rgba(1, 22, 30, 0.3);
}
.pg-about .pg-about__btn--primary:hover::after { transform: translateX(4px); }
.pg-about .pg-about__btn--ghost {
  border-color: var(--pga-dark);
  color: var(--pga-dark) !important;
  background: transparent;
}
.pg-about .pg-about__btn--ghost:hover {
  background: var(--pga-dark);
  color: #fff !important;
}
.pg-about .pg-about__btn:active { transform: translateY(1px); }
.pg-about .pg-about__btn:focus-visible,
.pg-about .pg-about__cats a:focus-visible {
  outline: 3px solid var(--pga-accent);
  outline-offset: 2px;
}

/* ---------- Pás výhod – přechod do sekce recenzí ---------- */
.pg-about .pg-about__features {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 32px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border-radius: var(--pga-radius);
  background: #fff;
  box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px, 0 24px 48px rgba(1, 22, 30, 0.18);
  color: var(--pga-text);
  overflow: hidden;
}
/* žhavá linka nahoře – stejná jako u recenzí */
.pg-about .pg-about__features::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--pga-primary) 25%, #ff8a00 50%, var(--pga-primary) 75%, transparent);
  opacity: .85;
}
.pg-about .pg-about__feature {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  margin: 0 !important;
  padding: 26px 24px !important;
  list-style: none !important;
}
.pg-about .pg-about__feature + .pg-about__feature {
  border-left: 1px solid #eee;
}
.pg-about .pg-about__feature::before {
  content: "";
  grid-row: 1 / 3;
  position: static !important;
  margin: 0 !important;        /* šablona dává odrážkám li::before záporný margin */
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: var(--pga-warm);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}
.pg-about .pg-about__feature strong {
  align-self: end;
  font-family: var(--pga-font-head);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--pga-dark);
}
.pg-about .pg-about__feature span {
  align-self: start;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--pga-muted);
}

/* ikony (primární červená #cd3d2f) */
.pg-about .pg-about__feature--family::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cd3d2f'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.6 4.5c2 0 3.4 1.1 5.4 3 2-1.9 3.4-3 5.4-3 3.6 0 5.7 3.9 4.2 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}
.pg-about .pg-about__feature--made::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cd3d2f'%3E%3Cpath d='M12 2c1 3.5-1.5 5-1.5 8 0 1.4 1 2.5 2.2 2.5 1.4 0 2.3-1.1 2.3-2.6 0-.9-.3-1.7-.6-2.4C17 9 19 11.8 19 15a7 7 0 01-14 0c0-4.6 3.6-7.4 7-13z'/%3E%3C/svg%3E");
}
.pg-about .pg-about__feature--cnc::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cd3d2f' fill-rule='evenodd'%3E%3Cpath d='M10.3 2h3.4l.5 2.6 1.7.7 2.2-1.5 2.4 2.4-1.5 2.2.7 1.7 2.6.5v3.4l-2.6.5-.7 1.7 1.5 2.2-2.4 2.4-2.2-1.5-1.7.7-.5 2.6h-3.4l-.5-2.6-1.7-.7-2.2 1.5-2.4-2.4 1.5-2.2-.7-1.7L2 13.7v-3.4l2.6-.5.7-1.7-1.5-2.2 2.4-2.4 2.2 1.5 1.7-.7zM12 8.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z'/%3E%3C/svg%3E");
}
.pg-about .pg-about__feature--custom::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cd3d2f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16.5L16.5 3 21 7.5 7.5 21z'/%3E%3Cpath d='M7.5 12l2 2M10.5 9l1.5 1.5M13.5 6l2 2'/%3E%3C/svg%3E");
}

/* ---------- Responzivita ---------- */
@media (max-width: 1199px) {
  .pg-about__card { gap: 36px; padding-right: 36px; }
  .pg-about .pg-about__title { font-size: 36px; }
  .pg-about .pg-about__feature { padding: 22px 18px !important; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
  .pg-about .pg-about__feature::before { width: 44px; height: 44px; }
}

@media (max-width: 991px) {
  .pg-about__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 16px 16px 8px;
  }
  .pg-about__media { min-height: 0; max-height: 380px; }
  .pg-about__photo { width: auto; max-height: 340px; margin-top: 40px; }
  .pg-about__body { padding: 20px 12px 24px; }
  .pg-about .pg-about__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-about .pg-about__feature + .pg-about__feature { border-left: 0; }
  .pg-about .pg-about__feature:nth-child(even) { border-left: 1px solid #eee; }
  .pg-about .pg-about__feature:nth-child(n+3) { border-top: 1px solid #eee; }
}

@media (max-width: 767px) {
  .welcome-wrapper:has(.pg-about) { margin-bottom: -48px; }
  body:has(.pg-about) .pg-reviews { padding-top: 104px; }
  .pg-about__badge { top: 12px; left: 12px; padding: 10px 13px; }
  .pg-about__badge strong { font-size: 28px; }
  .pg-about__photo { max-height: 300px; }
  .pg-about .pg-about__title { font-size: 30px; }
  .pg-about .pg-about__lead { font-size: 17px; }
  .pg-about .pg-about__text { font-size: 15.5px; }
  .pg-about .pg-about__actions { display: grid; }
  .pg-about .pg-about__features { grid-template-columns: minmax(0, 1fr); margin-top: 20px !important; }
  .pg-about .pg-about__feature:nth-child(even) { border-left: 0; }
  .pg-about .pg-about__feature + .pg-about__feature { border-top: 1px solid #eee; }
  .pg-about .pg-about__feature { padding: 18px 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-about *,
  .pg-about *::before,
  .pg-about *::after { transition: none !important; }
}