/* ==========================================================================
   program.css — раздел «Программа» (страница «Архитектура деловой программы»).
   Макет: Figma 2276:157381 (файл 7l7aBv3fBz3HXfvsqtvypK, «ФОК 10.07.26»).
   Каркас переиспользуется: крошки/hero — arrival.css, тёмный блок —
   visa.css (visa-block/__head/__title), таб-меню — page-tabs.css.
   Новое здесь: кнопка «Скачать архитектуру» в hero + аккордеон .pac.
   Полоса табов и баннер — во всю ширину окна (Figma: article и arr-hero
   x=0 w=1920, тогда как visa-block ниже — x=40 w=1840). Скоуп .prog на <main>.
   Лесенка брейкпоинтов проекта: 1920 / 1440 / 768 / 360.
   ========================================================================== */

/* ---------- Full-bleed: гасим гаттер контейнера у табов и баннера ---------- */
.prog .ptabs--flow,
.prog .arr-hero {
  margin-inline: calc(var(--gutter) * -1);
}

/* ---------- Hero: светлый коллаж, тёмный заголовок (arr-hero--light) ---------- */
/* Кнопка «Скачать архитектуру» (Figma 2276:157407: accent, h40, 8/16, r8,
   иконка 20 + текст 14/20 white). title→button = 16 (Figma Title gap). */
.arr-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-8);
  background: var(--c-accent);
  color: #fff;
  font: 400 14px/20px var(--font-text);
  transition: background .2s;
}
.arr-hero__btn:hover { background: #a82f16; }
.arr-hero__btn .icon {
  flex: none;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

/* Десктоп: геро-инна по Figma Frame 75 (x=88, снизу 76, ширина 824);
   заголовок 64/72 (не 84/90 как у прочих hero), метка →30→ заголовок. */
@media (min-width: 1024px) {
  .prog .arr-hero__inner {
    left: 88px;
    bottom: 76px;
    max-width: 824px;
  }
  .prog .arr-hero__title {
    margin-top: 30px;
    font-size: 64px;
    line-height: 72px;
  }
}

/* ---------- Тёмный блок: тело со списком аккордеонов ---------- */
/* visa-block (visa.css) даёт рамку/радиус/тень и тёмную шапку; тело — .pac-list.
   Держим макетные значения (шапка 56, заголовок 40/48) на десктопе — не
   занижаем на ступени @1919 (экран 1920 = вьюпорт ~1905 попадает в неё). */
.prog .visa-block { margin-top: 80px; }
.prog .visa-block__head { padding: 56px; }
.prog .visa-block__title {
  max-width: none;
  font-size: 40px;
  line-height: 48px;
}

.pac-list {
  padding: 32px 56px;
}

/* ---------- Аккордеон (details.pac / «accardeon») ---------- */
.pac {
  border-top: 1px solid rgba(1, 31, 39, .2);          /* Daintree 20% */
}
.pac__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 4px;
  list-style: none;
  cursor: pointer;
}
.pac__sum::-webkit-details-marker { display: none; }
.pac__sum::marker { content: ""; }

.pac__title {
  font: 400 24px/32px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}

/* Иконка +/− (26×26): две красные планки; в раскрытом состоянии вертикаль скрыта */
.pac__ic {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
}
.pac__ic::before,
.pac__ic::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--c-accent);
}
.pac__ic::before { width: 16px; height: 2px; }        /* горизонталь */
.pac__ic::after  { width: 2px; height: 16px; }        /* вертикаль (плюс) */
.pac[open] .pac__ic::after { display: none; }         /* минус */

/* Раскрытая панель: интро + 3-колоночный список тем */
.pac__panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 4px 32px;
}
.pac__intro {
  max-width: 1406px;
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-secondary);
}
.pac__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.pac__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}
.pac__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-secondary);
  cursor: pointer;
  transition: color .2s;
}
.pac__item:hover { color: var(--c-accent); }    /* Figma: наведение на тему — accent (курсор в макете) */
.pac__item::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-accent);
}
.pac__item span { min-width: 0; }

/* ==========================================================================
   ≤768 — планшет.
   ========================================================================== */
@media (max-width: 1023px) {
  .prog .visa-block { margin-top: 56px; }
  .prog .visa-block__head { padding: 32px; }
  .prog .visa-block__title { font-size: 28px; line-height: 34px; }

  .pac-list { padding: 20px 32px 24px; }
  .pac__sum { gap: 16px; padding: 24px 2px; }
  .pac__title { font-size: 20px; line-height: 26px; }
  .pac__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* ==========================================================================
   ≤360 — узкая мобила. Full-bleed выключаем: полоса и баннер — по контейнеру.
   ========================================================================== */
@media (max-width: 767px) {
  .prog .ptabs--flow,
  .prog .arr-hero { margin-inline: 0; }

  .arr-hero__btn { margin-top: 14px; }

  .prog .visa-block { margin-top: 40px; }
  .prog .visa-block__head { padding: 24px 20px; }
  .prog .visa-block__title { font-size: 22px; line-height: 28px; }

  .pac-list { padding: 12px 20px 20px; }
  .pac__sum { gap: 12px; padding: 20px 0; }
  .pac__title { font-size: 18px; line-height: 24px; }
  .pac__panel { padding: 0 0 24px; }
  .pac__cols { grid-template-columns: 1fr; gap: 8px; }
  .pac__item { font-size: 15px; }
}