/* ============================================================
mod-readiness — «Шкали готовності» (SVG-кільця по корпусах)
Модуль-доповнення до головної сторінки Emirates (.ev2).
Слот, який заповнює assets/js/mod-readiness.js:
ПРАВИЛО: усередині .ev2 будь-яке правило з margin/padding має
мати мінімум 2 класи в селекторі (обхід `.ev2 * { margin:0 }`).
============================================================ */
.ev2 .em-ready { display: block; }
/* C1: percent===null у ВСІХ корпусах (і нема ?demo=readiness) — секцію ховає
JS через root.hidden, але базове правило вище (display:block, 2 класи)
переважило б над стандартним [hidden]{display:none}, тож тут — власний
клас із вищою специфічністю, який дійсно ховає. */
.ev2 .em-ready.em-ready--hidden { display: none; }
/* --- заголовок секції --- */
.ev2 .em-ready__head { text-align: center; margin-bottom: clamp(36px, 6vw, 56px); }
.ev2 .em-ready__head .eyebrow { display: block; margin-bottom: 14px; }
/* C1: позначка "демо-дані" для власника (?demo=readiness) */
.ev2 .em-ready__demo-badge {
display: inline-block;
margin-top: 10px;
font-family: var(--font-ui);
font-size: 11px;
color: var(--ink-faint);
border: 1px solid var(--line);
border-radius: 999px;
padding: 2px 8px;
}
/* --- групи (Таунхауси / Квартири) --- */
.ev2 .em-ready__groups { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 64px); }
.ev2 .em-ready__group-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(20px, 2.4vw, 26px);
line-height: 1.2;
color: var(--ink);
text-align: center;
letter-spacing: .01em;
margin-bottom: clamp(24px, 4vw, 32px);
}
/* --- сітка кілець --- */
.ev2 .em-ready__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: clamp(20px, 3vw, 40px);
}
.ev2 .em-ready__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
}
.ev2 .em-ready__ring { width: 112px; height: 112px; overflow: visible; }
.em-ready__track {
fill: none;
stroke: var(--line-soft);
stroke-width: 6;
}
.em-ready__fill {
fill: none;
stroke: var(--accent);
stroke-width: 6;
stroke-linecap: round;
/* C3: 1400ms EXPO, синхронно з лічильником цифр у mod-readiness.js */
transition: stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1);
}
.em-ready__fill--unknown { stroke: var(--line); }
.em-ready__num {
font-family: var(--font-ui);
font-weight: 500;
font-size: 18px;
fill: var(--ink);
}
.em-ready__num--unknown {
font-family: var(--font-display);
font-size: 22px;
fill: var(--ink-faint);
}
.ev2 .em-ready__name {
font-family: var(--font-ui);
font-weight: 400;
font-size: 14px;
letter-spacing: .02em;
color: var(--ink);
}
.ev2 .em-ready__stage {
font-family: var(--font-ui);
font-size: 12px;
color: var(--ink-soft);
}
.ev2 .em-ready__note {
font-family: var(--font-ui);
font-size: 11px;
font-style: italic;
color: var(--ink-faint);
}
/* --- планшет / 768px --- */
@media (max-width: 768px) {
.ev2 .em-ready__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ev2 .em-ready__ring { width: 88px; height: 88px; }
.em-ready__num { font-size: 14px; }
.em-ready__num--unknown { font-size: 17px; }
.ev2 .em-ready__name { font-size: 12.5px; }
}
/* --- мобільна / 375px --- */
@media (max-width: 420px) {
.ev2 .em-ready__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ev2 .em-ready__ring { width: 78px; height: 78px; }
.em-ready__num { font-size: 13px; }
.em-ready__num--unknown { font-size: 16px; }
}
/* --- prefers-reduced-motion: без анімації, миттєвий фінальний стан --- */
@media (prefers-reduced-motion: reduce) {
.em-ready__fill { transition: none; }
}
/* --- уникнення легасі-маскота «Шейх» ---
assets/js/mod-readiness.js ставить/знімає цей клас на , коли кільця
готовності чи статистичні картки потрапляють у смугу внизу вʼюпорту, де
ходить .sheikh (assets/js/sheikh.js, чіпати не можна). !important і потрійна
специфічність — бо базовий стиль .sheikh вставляється власним