/* ============================================================
   _painting.css — painting-разделители: полноширинная картина
   с тёмным overlay, цитатой PT Serif и подписью художника.
   Используется через partials/_painting_break.html.

   Зависит от _base.css (--font-serif, --dark-2).
   ============================================================ */

.painting-break {
  height: 480px; position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.painting-break img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
  filter: contrast(1.05) saturate(0.9);
  animation: paintingPulse 14s ease-in-out infinite;
}
@keyframes paintingPulse {
  0%, 100% { transform: scale(1.0); }
  50%      { transform: scale(1.06); }
}
.painting-break-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,9,11,0.68) 0%, rgba(9,9,11,0.50) 50%, rgba(9,9,11,0.68) 100%);
}
.painting-break-content {
  position: relative; z-index: 1;
  max-width: 740px; margin: 0 auto; padding: 0 48px;
  width: 100%;
  text-align: left;
}
.painting-break-quote {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.2vw, 44px); font-weight: 400;
  letter-spacing: -0.005em; line-height: 1.3;
  color: #fff;
}
.painting-break-quote em {
  font-style: italic;
  background: linear-gradient(135deg, #F5C06A, #E8843C);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.painting-break-credit {
  display: inline-block;
  margin-top: 22px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  padding: 5px 12px; border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.12);
}

/* Заглушка когда картина не загрузилась (site_painting_fallback.js) */
.painting-break.no-img {
  background: var(--dark-2);
  height: 120px;
}

/* ── Атмосферный painting — картина без overlay-цитаты ───── */
.painting-atmosphere {
  height: 420px;
  position: relative;
  overflow: hidden;
}
.painting-atmosphere img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
  filter: contrast(1.05) saturate(0.9);
  animation: paintingPulse 14s ease-in-out infinite;
}
.painting-atmosphere::after {
  /* Лёгкий нижний градиент к фону страницы — плавный переход */
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(244,239,230,0.35));
  pointer-events: none;
}
.painting-atmosphere-caption {
  background: var(--bg-alt);
  text-align: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint);
  padding: 18px 24px;
}

@media (max-width: 900px) {
  .painting-atmosphere { height: 360px; }
}
@media (max-width: 640px) {
  .painting-atmosphere { height: 280px; }
  .painting-atmosphere-caption {
    font-size: 10px; letter-spacing: 0.06em;
    padding: 12px 16px 0;
  }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .painting-break { height: 420px; }
  .painting-break-quote { font-size: 26px; padding: 0 24px; }
  .painting-break-credit { font-size: 11px; }
}

@media (max-width: 640px) {
  .painting-break { height: 380px; min-height: 320px; }
  /* Центрируем композицию — у заседания важная часть в центре кадра */
  .painting-break img { object-position: 30% center; }
  .painting-break-content { padding: 0 28px; }
  .painting-break-quote { font-size: 20px; padding: 0; line-height: 1.3; }
  .painting-break-credit {
    font-size: 8px; margin-top: 14px;
    letter-spacing: 0.05em; padding: 3px 8px;
  }
}