/* family · sections/special.css
   B18 — спецпредложения: статичные карточки конкретных квартир */

.special-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:.75rem;overflow:hidden;}

/* медиа-область карточки: план / фото / видео */
.special-media{position:relative;overflow:hidden;}

/* тело карточки тянется, кнопка прижата к низу при разной высоте текста */
.special-body{display:flex;flex-direction:column;flex:1;padding:1.25rem;}
.special-body .btn{margin-top:auto;}

/* плашка-метка типа предложения поверх медиа */
.special-pill{position:absolute;left:.7rem;top:.7rem;z-index:2;display:inline-flex;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--brass);color:var(--ink);font-weight:600;padding:.34rem .7rem;border-radius:99px;}
/* белый текст на латуни давал 3.22:1 и плашку было плохо видно; тёмный на латуни — 4.99:1 */
.special-pill.is-pine{background:var(--pine);color:#fff;}
.special-pill.is-hot{background:var(--brass-light);color:var(--ink);}

/* старая цена — зачёркнута */
.price-old{font-family:'JetBrains Mono',monospace;font-size:.9rem;color:rgba(23,36,29,.58);text-decoration:line-through;}
/* colorize: цена со скидкой — латунью, тем же цветом, что и плашка предложения */
.price-new{font-weight:600;color:var(--brass-text);}

/* мини-галерея в карточке (2+ фото).
   Размеры задаём CSS сверху вниз, а не замером Swiper JS: он на старте мерил
   контейнер как 0×0 (грид ещё не разложен Tailwind CDN) и слайд оставался нулевым.
   Теперь высота приходит от aspect-ratio обёртки, а слайд/.ph просто её наследуют. */
/* width:100% обязателен: Swiper ставит себе margin-left/right:auto, а карточка —
   флекс-колонка. Авто-отступы во флексбоксе отменяют stretch, контейнер
   схлопывался в 0 по ширине и утягивал за собой слайды и картинку. */
.special-media.proof-swiper{width:100%;aspect-ratio:4/3;}
.special-media.proof-swiper .swiper-wrapper{height:100%;}
.special-media.proof-swiper .swiper-slide{width:100%;height:100%;}
.special-media.proof-swiper .ph{width:100%;height:100%;border-radius:0;}
/* планировки — на белом фоне, поэтому стрелки тут контрастнее, чем общий
   вариант из components.css (он рассчитан на тёмные фото в B13) */
.special-media.proof-swiper .proof-arrow{background:rgba(30,58,47,.82);border-color:rgba(255,255,255,.28);}
.special-media.proof-swiper .proof-arrow:hover{background:var(--brass);border-color:var(--brass);}

/* на мобилке плашка-метка мельче видимого текста — поднимаем */
@media (max-width:640px){
  .special-pill{font-size:.78rem;letter-spacing:.06em;padding:.4rem .8rem;}
}

/* animate: карточки предложений выходят волной, потолок задержки — 0.3 с */
.special-card.reveal:nth-child(1){transition-delay:0s;}
.special-card.reveal:nth-child(2){transition-delay:.05s;}
.special-card.reveal:nth-child(3){transition-delay:.10s;}
.special-card.reveal:nth-child(4){transition-delay:.15s;}
.special-card.reveal:nth-child(5){transition-delay:.20s;}
.special-card.reveal:nth-child(6){transition-delay:.25s;}
.special-card.reveal:nth-child(n+7){transition-delay:.30s;}

@media (prefers-reduced-motion: reduce){
  .special-card.reveal{transition-delay:0s!important;}
}

/* Спец-карточки: не дублировать подпись поверх фото — она уже есть в описании под картинкой. */
.special-media.ph::after,
.special-media .ph::after{display:none;}

/* Цена не должна разрываться (знак $ не переносится на новую строку),
   даже когда рядом длинный текст рассрочки. */
.special-body .price-new,
.special-body .price-old{white-space:nowrap;}