/* «Вдохновиться» — лента интерьеров /catalog/vdokhnovitsya/ (templates/inspire.php, assets/js/inspire.js), 10.11.2026.
   Как на старом сайте (inspire.css v7): колонки разной высоты, заготовки при загрузке, плавное проявление 0,4 с, значок «Примерить» слева вверху,
   карточка «двух путей» каждые 9 фото, в конце — «Вы посмотрели все интерьеры». */
.ins-head { margin: 4px 0 18px; }
.ins-head .inside_h1_title h1 { margin-bottom: 8px; padding-bottom: 0; }
.ins-sub { max-width: 900px; margin: 0 0 14px; color: #5d6767; font-size: 15px; line-height: 1.5; }
.ins-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ins-tabs a { display: inline-flex; align-items: center; gap: 4px; padding: 9px 16px; border: 1px solid #dfe3e3; border-radius: 999px; background: #fff;
  color: var(--c1); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.ins-tabs a:hover { border-color: var(--c0); color: var(--c0); }
.ins-tabs a.is-on { border-color: var(--c1); background: var(--c1); color: #fff; }
.ins-tabs-try { display: inline-flex; align-items: center; gap: 5px; color: #e9560b; }
.ins-tabs-try:before { content: ""; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9560b' stroke-width='2.4'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.ins-tabs a.is-on .ins-tabs-try { color: #ffb27a; }

/* без JS — колонки CSS; с JS (.ins-js) — свои колонки, фото уходит в самую короткую (порядок не прыгает при догрузке) */
.ins-grid { column-count: 4; column-gap: 12px; }   /* 10.11: плотнее (было 16) — подпись теперь поверх фото, как на старом сайте */
.ins-grid .ins-it { margin-bottom: 12px; break-inside: avoid; }
.ins-grid.ins-js { display: flex; align-items: flex-start; gap: 12px; column-count: auto; }
.ins-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ins-js .ins-it { margin: 0; }
@media (max-width: 1099px) { .ins-grid { column-count: 3; } }
@media (max-width: 759px) {
  .ins-grid { column-count: 2; column-gap: 8px; }
  .ins-grid .ins-it { margin-bottom: 8px; }
  .ins-grid.ins-js, .ins-col { gap: 8px; }
}

.ins-it { position: relative; }
.ins-ph { position: relative; display: block; overflow: hidden; border-radius: 14px; color: #fff; text-decoration: none; }
.ins-ph:hover { color: #fff; }
.ins-im { position: relative; display: block; overflow: hidden; border-radius: 14px; background: #e9ecec; }   /* фон-цвет фото — инлайном (insp_color) */
.ins-im img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .5s ease; }
.ins-ph:hover .ins-im img { transform: scale(1.03); }
.ins-js .ins-im img { opacity: 0; transition: opacity .4s ease, transform .5s ease; }
.ins-js .ins-im img.is-ld { opacity: 1; }
/* подпись поверх фото внизу, на затемнении (как на старом сайте: .ins-cap внутри скруглённой карточки) — фото крупнее и плотнее, 10.11 */
.ins-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: block; padding: 34px 12px 10px; line-height: 1.25; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .38) 55%, rgba(0, 0, 0, 0) 100%); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.ins-cap b { display: block; overflow: hidden; color: #fff; font-size: 14.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.ins-cap span { display: block; margin-top: 2px; overflow: hidden; color: rgba(255, 255, 255, .88); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.ins-js .ins-cap { opacity: 0; transition: opacity .4s ease; }   /* подпись проявляется вместе с фото */
.ins-js .ins-im:has(img.is-ld) + .ins-cap { opacity: 1; }
@supports not selector(:has(*)) { .ins-js .ins-cap { opacity: 1; } }

/* «Примерить» поверх фото — ссылка-соседка (не вложенная); вес выше a:active шаблона, иначе при нажатии значок «падал» под фото (08.10) */
.ins-it a.ins-try, .ins-it a.ins-try:active { position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px 6px 9px; border-radius: 14px; background: #ff8a05; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.2;
  text-decoration: none; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.ins-it a.ins-try:hover { background: #e9560b; color: #fff; }
.ins-it a.ins-try:before { content: ""; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* заготовки на время загрузки порции */
.ins-skel { border-radius: 14px; background: linear-gradient(100deg, #eceeee 30%, #f6f7f7 50%, #eceeee 70%) 0 0 / 300% 100%; animation: insSk 1.2s linear infinite; }
@keyframes insSk { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .ins-skel { animation: none; } .ins-js .ins-im img { transition: none; } }

/* карточка «двух путей» (каждые 9 фото): примерка сам / 3D-проект с дизайнером */
.ins-cta { padding: 18px 16px 16px; border: 1px solid #ffd9b0; border-radius: 14px; background: #fff7ee; }
.ins-cta-h { margin: 0 0 12px; color: #1d1d1b; font-size: 17px; font-weight: 700; line-height: 1.25; }
.ins-cta a.ins-cta-try, .ins-cta a.ins-cta-try:active, .ins-cta .ins-cta-3d { position: static; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 8px;
  padding: 10px 12px; border-radius: 12px; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background .15s; }
.ins-cta a.ins-cta-try { border: 2px solid #ff8a05; background: #ff8a05; color: #fff; }
.ins-cta a.ins-cta-try:hover { background: #f07c00; color: #fff; }
.ins-cta .ins-cta-3d { border: 2px solid var(--c0); background: #fff; color: var(--c0); }
.ins-cta .ins-cta-3d:hover { background: #eef7f6; }
.ins-cta i { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-style: normal; }
.ins-cta-try i { background: rgba(255, 255, 255, .22); }
.ins-cta-3d i { background: #e3f1f0; }
.ins-cta b { display: block; font-size: 14.5px; line-height: 1.2; }
.ins-cta small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.25; opacity: .85; }
.ins-cta-salon { display: block; margin-top: 4px; color: var(--c0); font-size: 13px; }

.ins-more { margin: 26px 0 10px; text-align: center; }
.ins-end { display: inline-block; padding: 16px 24px; border-radius: 999px; background: #f3f6f5; color: #46514f; font-size: 15px; }
.ins-end a { color: var(--c0); font-weight: 700; }

@media (max-width: 759px) {
  .ins-sub { font-size: 13.5px; }
  .ins-tabs a { padding: 8px 13px; font-size: 13px; }
  .ins-im, .ins-ph, .ins-skel, .ins-cta { border-radius: 10px; }
  .ins-cap { padding: 26px 8px 7px; }
  .ins-cap b { font-size: 13px; }
  .ins-cap span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font-size: 11px; }   /* цена не обрезается: до 2 строк */
  .ins-it a.ins-try, .ins-it a.ins-try:active { left: 7px; top: 7px; padding: 5px 9px 5px 7px; font-size: 11.5px; }
  .ins-cta { padding: 13px 10px 10px; }
  .ins-cta-h { font-size: 14.5px; }
  .ins-cta i { display: none; }
  .ins-cta b { font-size: 13px; }
  .ins-cta small { font-size: 11.5px; }
  .ins-end { border-radius: 14px; font-size: 14px; }
}