/* Состояния интерактивных блоков (квитирование с classes исходной версии) */

/* Стрелка FAQ — поворот при открытии */
summary::-webkit-details-marker { display: none; }
details[open] > summary .pp-faq-chevron { transform: rotate(180deg); }

/* Карточка проблемы — открытое состояние */
[data-pp-card].pp-open {
  border-color: #10b981;
  background: linear-gradient(to bottom right, #1e293b, rgba(6, 78, 59, 0.4));
  box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.1), 0 4px 6px -4px rgba(16, 185, 129, 0.1);
}
[data-pp-card].pp-open [data-pp-card-icon] { background: rgba(16, 185, 129, 0.2); color: #34d399; }
[data-pp-card].pp-open [data-pp-card-title] { color: #34d399; }
[data-pp-card].pp-open [data-pp-card-text] { color: rgba(167, 243, 208, 0.8); }
[data-pp-card].pp-open [data-pp-card-plus] { transform: rotate(45deg); background: rgba(16, 185, 129, 0.2); color: #34d399; }

/* Вариант квиза — выбранное состояние */
[data-pp-opt].pp-selected { border-color: #d4a853; background: rgba(212, 168, 83, 0.15); }
[data-pp-opt].pp-selected [data-pp-opt-icon] { background: #d4a853; color: #14263d; }

/* На всякий случай: если JS отключён — плавающие элементы не мешают */
html.no-js #pp-mobile-bar,
html.no-js #pp-float-call,
html.no-js #pp-float-top { display: none !important; }

/* Футер: три колонки на десктопе (произвольные классы Tailwind не входят
   в готовую компиляцию app.css — поэтому правило здесь) */
@media (min-width: 768px) {
  .pp-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* Секция тарифов: 5 карточек по классам автобусов */
.pp-pricing-grid { display: grid; gap: 20px; padding-top: 8px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pp-pricing-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pp-pricing-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .pp-pricing-grid > div { padding: 20px; }
  .pp-pricing-grid ul { margin-bottom: 18px; }
  .pp-pricing-grid ul li { font-size: 13.5px; padding: 10px 0; }
  .pp-pricing-grid .text-4xl { font-size: 1.75rem; }
  .pp-pricing-grid .sm\:text-5xl { font-size: 1.75rem; } }

/* ============================================================
   Фоновые фотографии блоков (доработка v3.4+)
   Фото подложено под контент карточек, сверху — затемняющий
   градиент: текст читается (контраст WCAG AA), фото не мешает.
   ============================================================ */

/* Карточка с фоновым фото */
.pp-photo-card { position: relative; overflow: hidden; }
.pp-photo-card > .pp-photo-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  transform: scale(1.001);
  transition: transform 0.6s ease;
  will-change: transform;
}
.pp-photo-card:hover > .pp-photo-img { transform: scale(1.07); }
.pp-photo-card > .pp-photo-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,18,35,0.60) 0%, rgba(11,18,35,0.84) 60%, rgba(13,20,38,0.94) 100%);
}
/* контент карточки всегда поверх фото и оверлея */
.pp-photo-card > *:not(.pp-photo-img):not(.pp-photo-overlay) { position: relative; z-index: 2; }

/* Раскрытая карточка проблемы — зелёный подтон оверлея (квитирование с pp-open) */
[data-pp-card].pp-open .pp-photo-overlay {
  background: linear-gradient(180deg, rgba(6,78,59,0.55) 0%, rgba(11,18,35,0.88) 60%, rgba(13,20,38,0.95) 100%);
}

/* Тарифы: фото-полоса сверху, прайс ниже на чистом фоне */
.pp-strip-card.pp-strip-card { padding-top: 116px; }
.pp-strip-card .pp-photo-img {
  position: absolute; top: 0; left: 0; width: 100%; height: 128px;
  object-fit: cover; z-index: 0;
  transform: scale(1.001); transition: transform 0.6s ease;
}
.pp-strip-card:hover .pp-photo-img { transform: scale(1.06); }
.pp-strip-card .pp-photo-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 128px; z-index: 1;
  background: linear-gradient(180deg, rgba(11,18,35,0.38) 0%, rgba(11,18,35,0.55) 55%, #1e293b 100%);
}
.pp-strip-card > *:not(.pp-photo-img):not(.pp-photo-overlay) { position: relative; z-index: 2; }

/* Секционные фоны (квиз, гарантии): плотнее градиент — текст по всей ширине */
.pp-section-bg > .pp-photo-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.pp-section-bg > .pp-photo-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block;
  background: linear-gradient(180deg, rgba(13,20,38,0.90) 0%, rgba(15,23,42,0.84) 50%, rgba(13,20,38,0.93) 100%);
}
/* Гарантии: фото яркое (белый автобус) — оверлей плотнее */
#guarantee.pp-section-bg > .pp-photo-overlay {
  background: linear-gradient(180deg, rgba(13,20,38,0.94) 0%, rgba(15,23,42,0.90) 50%, rgba(13,20,38,0.96) 100%);
}

/* Уважение к prefers-reduced-motion: без зума при ховере */
@media (prefers-reduced-motion: reduce) {
  .pp-photo-card:hover > .pp-photo-img,
  .pp-strip-card:hover .pp-photo-img { transform: none; }
  .pp-photo-card > .pp-photo-img, .pp-strip-card .pp-photo-img { transition: none; }
}

/* ============================================================
   Блок «Блог — последние статьи» на главной (v3.6):
   служебные классы Tailwind, не вошедшие в готовую компиляцию
   app.css (тот же принцип, что и .pp-footer-grid выше)
   ============================================================ */
.gap-x-4 { column-gap: 1rem; }
.tracking-wider { letter-spacing: .05em; }
.text-\[11\.5px\] { font-size: 11.5px; }
.text-\[13px\] { font-size: 13px; }
@media (min-width: 640px) {
  .sm\:text-\[13px\] { font-size: 13px; }
}
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:text-pp-gold { color: #d4a853; }
.group:hover .group-hover\:border-pp-gold\/50 { border-color: rgba(212, 168, 83, .5); }
@media (prefers-reduced-motion: reduce) {
  .group:hover .group-hover\:scale-105 { transform: none; }
}