/* Программа экскурсии — новый вид (inc/program.php).
   Строки без рамок: слева иконка и заголовок, справа содержимое. Колонки те
   же у всех строк, поэтому заголовки стоят в одну линию, текст — в другую,
   и страница читается сверху вниз как оглавление с ответами. */

.pg { padding: 72px 48px 0; }
.pg-in { max-width: 1280px; margin: 0 auto; border-bottom: 1px solid #E7DFD5; }

.pg-row {
  display: grid; grid-template-columns: minmax(0, 392px) minmax(0, 1fr);
  gap: 72px; align-items: start;
  padding: 44px 0; border-top: 1px solid #E7DFD5;
  scroll-margin-top: 96px;
}

/* Раздел без заголовка в админке — продолжение предыдущего: прижат к нему,
   без линии между ними. */
.pg-row--cont { border-top: 0; padding-top: 0; margin-top: -16px; }

/* --- левая колонка: иконка и заголовок -------------------------------- */
/* Заголовок едет вместе с длинным перечнем: пока читаешь двенадцать пунктов,
   видно, к чему они относятся. */
.pg-head {
  display: flex; align-items: center; gap: 20px;
  position: sticky; top: 104px;
}
.pg-title {
  font-family: 'Geologica', sans-serif; font-size: 27px; font-weight: 600;
  line-height: 1.14; letter-spacing: -.032em; margin: 0; color: #3B2A1D;
  text-wrap: balance;
}

.pg-ico { flex: 0 0 auto; width: 76px; height: 76px; color: #3B2A1D; }
.pg-ico svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pg-blob { stroke: none; fill: #F9DCCB; }
.pg-ico--b .pg-blob { fill: #F7E4B4; transform: rotate(74deg); transform-origin: 24px 24px; }
.pg-ico--c .pg-blob { fill: #E3E8D2; transform: rotate(-112deg); transform-origin: 24px 24px; }
.pg-acc { fill: #EE7B52; }
.pg-sun { fill: #F8CD62; }
.pg-ray { stroke: #EE7B52; }
/* На персиковом пятне лучи того же тона теряются — берём потемнее. */
.pg-ico--a .pg-ray { stroke: #C4653A; }

/* --- правая колонка ---------------------------------------------------- */
.pg-body { font-size: 17px; line-height: 1.7; color: #463F3A; min-width: 0; }
.pg-body > p { margin: 0 0 14px; max-width: 760px; text-wrap: pretty; }
.pg-body > :last-child { margin-bottom: 0; }
.pg-body strong, .pg-body b { font-weight: 600; color: #3B2A1D; }
.pg-body a { color: #C4653A; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.pg-body a:hover { color: #A94F28; }
.pg-row:first-child .pg-body > p { font-size: 18px; line-height: 1.72; color: #3F3125; }

.pg-body > p + .pg-list, .pg-body > p + .pg-steps, .pg-body > p + .pg-chips { margin-top: 20px; }
.pg-list + p, .pg-steps + p, .pg-chips + p { margin-top: 24px; }

/* Подпись к перечню: «Входит», «Занятие в группе». */
.pg-label {
  font-family: 'Geologica', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: #8A8178;
  margin: 0 0 14px;
}
.pg-list + .pg-label, .pg-body > p + .pg-label { margin-top: 28px; }
.pg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* --- перечень ---------------------------------------------------------- */
.pg-list { list-style: none; margin: 0; padding: 0; }
.pg-item { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 15px; break-inside: avoid; }
.pg-item:last-child { margin-bottom: 0; }
.pg-item-body { min-width: 0; }
/* Часть пунктов в админке набрана с абзацем внутри (<li><p>…</p></li>):
   отступ абзаца сталкивал текст ниже значка. Внутри пункта абзацы — встык. */
.pg-item-body p, .pg-step-body p, .pg-chip p { margin: 0; }
.pg-item-body p + p, .pg-step-body p + p { margin-top: 6px; }
.pg-list--cols { columns: 2; column-gap: 48px; }
/* В колонках последний пункт первой колонки не должен терять отступ. */
.pg-list--cols .pg-item { margin-bottom: 0; padding-bottom: 15px; }

.pg-lead {
  display: block; font-family: 'Geologica', sans-serif; font-weight: 600;
  font-size: 17px; line-height: 1.35; letter-spacing: -.015em; color: #3B2A1D;
}
.pg-lead + .pg-text { display: block; margin-top: 4px; font-size: 16px; line-height: 1.6; color: #5A524B; }
.pg-text + .pg-text { display: block; margin-top: 4px; font-size: 16px; line-height: 1.6; color: #5A524B; }
.pg-list--leads .pg-item { margin-bottom: 20px; }
/* Пункты с заголовком в колонках — сеткой, а не columns: три пункта
   встают в ряд, а не «два слева, один справа». */
.pg-list--cols.pg-list--leads {
  columns: auto; display: grid; gap: 22px 40px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pg-list--cols.pg-list--leads .pg-item { margin: 0; padding: 0; }

/* Значок пункта: свой у каждого вида блока. Кружок 26px держит строку ровно,
   какой бы знак в нём ни стоял. */
.pg-mk {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1.5px; border-radius: 50%;
  background: #F6E9DD no-repeat center / 15px 15px;
}
.pg-mk--dot { background: none; position: relative; width: 14px; }
.pg-mk--dot::before { content: ''; position: absolute; left: 3px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: #D99B77; }
.pg-mk--check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4653A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.5 17 4 11.5'/%3E%3C/svg%3E"); }
.pg-mk--pin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EE7B52' stroke='%23C4653A' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M19 10c0 5-7 11.5-7 11.500S5 15 5 10a7 7 0 0 1 14 0z'/%3E%3Ccircle cx='12' cy='10' r='2.4' fill='%23fff' stroke='none'/%3E%3C/svg%3E"); }
.pg-mk--spark { background-color: #FAECC4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E0A21B'%3E%3Cpath d='M12 1.500c.9 5.6 3.9 8.6 9.5 9.500v2c-5.6.9-8.6 3.9-9.5 9.500h-0c-.9-5.6-3.9-8.6-9.5-9.500v-2c5.6-.9 8.6-3.9 9.5-9.500z'/%3E%3C/svg%3E"); }
.pg-mk--box { border-radius: 8px; background-color: #fff; box-shadow: inset 0 0 0 1.5px #E2C9B4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4653A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.5 17 4 11.5'/%3E%3C/svg%3E"); }
.pg-mk--minus { background-color: #EFEAE4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8178' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }

/* Эмодзи автора — тот же кружок, чтобы пункты с эмодзи и без стояли одинаково. */
.pg-emo {
  flex: 0 0 auto; width: 34px; height: 34px; margin-top: -3px; border-radius: 50%;
  background: #F6EEE4; display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
}

/* --- плашки: короткие названия ---------------------------------------- */
.pg-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pg-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 17px 8px 9px; border-radius: 100px;
  background: #fff; border: 1px solid #E9DFD3;
  font-size: 15.5px; font-weight: 500; line-height: 1.3; color: #3B2A1D;
}
.pg-chip .pg-mk { margin-top: 0; }
.pg-chip .pg-mk--dot { width: 12px; }
.pg-chip .pg-mk--dot::before { left: 5px; }
.pg-chip-emo {
  width: 30px; height: 30px; border-radius: 50%; background: #F6EEE4;
  display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1;
}
.pg-chip a { color: inherit; text-decoration: none; }
.pg-chip a:hover { color: #C4653A; }
/* Точки маршрута идут по порядку — у плашки номер вместо значка. */
.pg-chips--num { counter-reset: pgc; }
.pg-chips--num .pg-chip { counter-increment: pgc; }
.pg-chips--num .pg-chip::before {
  content: counter(pgc); width: 30px; height: 30px; border-radius: 50%;
  background: #F9DCCB; color: #A94F28; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geologica', sans-serif; font-size: 13.5px; font-weight: 600;
}

/* --- шаги -------------------------------------------------------------- */
.pg-steps { list-style: none; margin: 0; padding: 0; counter-reset: pgs; max-width: 760px; }
.pg-step {
  counter-increment: pgs; position: relative;
  display: flex; gap: 18px; align-items: flex-start; padding-bottom: 24px;
}
.pg-step:last-child { padding-bottom: 0; }
.pg-step::before {
  content: counter(pgs); flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: #FCF8F3; box-shadow: inset 0 0 0 1.5px #E6B79C; color: #C4653A;
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
  font-family: 'Geologica', sans-serif; font-size: 15px; font-weight: 600;
}
/* Пунктир между номерами — тот же, что на карте в иконке маршрута. */
.pg-step:not(:last-child)::after {
  content: ''; position: absolute; left: 17px; top: 42px; bottom: 6px;
  border-left: 2px dotted #E0C3AE;
}
.pg-step-body { padding-top: 5px; min-width: 0; }

/* Предупреждение автора. */
.pg-note {
  margin: 20px 0 0; padding: 14px 18px; max-width: 760px;
  background: #FFF6EC; border-radius: 14px; font-size: 16px; color: #4A4239;
}

/* В режиме правки поле выводится как есть. */
.pg-body .ex-prose { font-size: 17px; max-width: 760px; }

/* --- планшет ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .pg-row { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 44px; }
  .pg-ico { width: 64px; height: 64px; }
  .pg-title { font-size: 24px; }
  .pg-head { gap: 16px; }
  .pg-list--cols { column-gap: 32px; }
}

/* --- телефон: заголовок над содержимым -------------------------------- */
@media (max-width: 900px) {
  .pg { padding: 44px 18px 0; }
  .pg-row { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 30px 0; }
  .pg-row--cont { padding-top: 0; gap: 0; margin-top: -8px; }
  .pg-head { position: static; gap: 14px; }
  .pg-ico { width: 56px; height: 56px; }
  .pg-title { font-size: 22px; }
  .pg-body, .pg-body .ex-prose { font-size: 16.5px; }
  .pg-row:first-child .pg-body > p { font-size: 17px; }
  .pg-list--cols { columns: 1; }
  .pg-list--cols.pg-list--leads { grid-template-columns: minmax(0, 1fr); }
  .pg-pair { grid-template-columns: 1fr; gap: 26px; }
  .pg-lead { font-size: 16.5px; }
  .pg-chips { gap: 8px; }
  .pg-chip { font-size: 15px; padding: 7px 15px 7px 8px; }
  .pg-step { gap: 14px; }
}
@media (max-width: 560px) {
  .pg { padding-left: 16px; padding-right: 16px; }
}