/* ============================================================================
   home.css — компоненты главной страницы. Подключается только на главной.

   Иконки, монограммы банков и иллюстрации живут здесь, а не в тексте
   страницы: контент в базе остаётся чистой семантикой, оформление —
   в теме. Ни одной картинки-файла, всё SVG в data-URI.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Герой: текст слева, калькулятор справа
   -------------------------------------------------------------------------- */

.eoc-hero--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--eoc-s4);
    align-items: start;
}

.eoc-hero--split .eoc-hero__lead { padding-top: 4px; }

/* ----------------------------------------------------------------------------
   2. Быстрый калькулятор
   -------------------------------------------------------------------------- */

.eoc-quickcalc {
    background: #fff;
    border-radius: var(--eoc-r-md);
    padding: var(--eoc-s3);
    box-shadow: var(--eoc-shadow);
}

.eoc-quickcalc__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--eoc-s2);
    margin-bottom: 8px;
}

.eoc-quickcalc__row label {
    font-size: 14px;
    color: var(--eoc-muted);
    margin: 0;
}

.eoc-quickcalc output {
    font-size: 19px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.eoc-quickcalc input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    margin: 0 0 var(--eoc-s3);
    border-radius: 4px;
    background: var(--eoc-tint-2);
    outline: none;
}

.eoc-quickcalc input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid var(--eoc-blue);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(27, 77, 255, .3);
    cursor: pointer;
}

.eoc-quickcalc input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 2px solid var(--eoc-blue);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.eoc-quickcalc__result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--eoc-s2);
    padding: 14px var(--eoc-s2);
    margin-bottom: var(--eoc-s2);
    border-radius: var(--eoc-r-sm);
    background: var(--eoc-tint);
}

.eoc-quickcalc__result span { font-size: 14px; color: var(--eoc-muted); }

.eoc-quickcalc__result strong {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.eoc-btn--wide { display: flex; width: 100%; }

.eoc-quickcalc__note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--eoc-muted);
}

/* ----------------------------------------------------------------------------
   3. Быстрые действия
   -------------------------------------------------------------------------- */

.eoc-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--eoc-s2);
    margin: var(--eoc-s3) 0 0;
}

.eoc-quick__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--eoc-s2) var(--eoc-s2) var(--eoc-s2) 66px;
    position: relative;
    min-height: 76px;
    justify-content: center;
    border-radius: var(--eoc-r-md);
    background: var(--eoc-tint);
    color: var(--eoc-ink) !important;
    text-decoration: none !important;
    transition: background .15s, transform .15s;
}

.eoc-quick__item:hover { background: var(--eoc-tint-2); transform: translateY(-2px); }

.eoc-quick__item::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff var(--eoc-icon) center / 20px 20px no-repeat;
}

.eoc-quick__title { font-size: 15px; font-weight: 500; line-height: 1.25; }
.eoc-quick__hint { font-size: 13px; color: var(--eoc-muted); }

.eoc-quick__item--calc {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4DFF' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='2.5' width='16' height='19' rx='2.5'/%3E%3Cpath d='M8 7h8M8.5 12h.01M12 12h.01M15.5 12h.01M8.5 16h.01M12 16h.01M15.5 15v3'/%3E%3C/svg%3E");
}

.eoc-quick__item--loan {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4DFF' stroke-width='1.8'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2.5'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
}

.eoc-quick__item--rate {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4DFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l5-6 4 3 7-8'/%3E%3Cpath d='M20 6v5h-5'/%3E%3C/svg%3E");
}

.eoc-quick__item--doc {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4DFF' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 13h6M9 17h4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
   4. Иконки у карточек продуктов
   -------------------------------------------------------------------------- */

.eoc-product { padding-top: 76px !important; position: relative; }

.eoc-product::before {
    content: "";
    position: absolute;
    left: var(--eoc-s3);
    top: var(--eoc-s3);
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--eoc-tint) var(--eoc-icon) center / 22px 22px no-repeat;
}

.eoc-product--express {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4DFF' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");
}
.eoc-product--nodoc {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4DFF' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M7 10h6M7 14h4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.eoc-product--loan {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4DFF' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v10M9.5 9.5h5M9.5 14.5h5'/%3E%3C/svg%3E");
}
.eoc-product--card {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4DFF' stroke-width='1.8'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='3'/%3E%3Cpath d='M2.5 9.5h19'/%3E%3C/svg%3E");
}
.eoc-product--home {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4DFF' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-6 8 6v8a2 2 0 01-2 2H6a2 2 0 01-2-2z'/%3E%3C/svg%3E");
}
.eoc-product--auto {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4DFF' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 15l1.6-5A2 2 0 017.5 8.6h9A2 2 0 0118.4 10L20 15M4 15h16v3.5h-3V15M4 15v3.5h3V15'/%3E%3C/svg%3E");
}
.eoc-product--business {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4DFF' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M5 20V9l7-5 7 5v11M10 20v-5h4v5'/%3E%3C/svg%3E");
}
.eoc-product--debt {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4DFF' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 13h6M9 17h4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.eoc-product--credit {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4DFF' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 3v18M8 7.5h6.5a2.5 2.5 0 010 5h-5a2.5 2.5 0 000 5H16'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
   5. Карточки банков: монограмма и крупные первые две метрики
   -------------------------------------------------------------------------- */

.eoc-offer { padding-top: 76px !important; position: relative; }

.eoc-offer::before {
    content: attr(data-logo);
    position: absolute;
    left: var(--eoc-s3);
    top: var(--eoc-s3);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--eoc-logo-bg, var(--eoc-blue));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.eoc-offer .eoc-card__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px var(--eoc-s2);
}

/* Первые две метрики — главные, их читают за секунду */
.eoc-offer .eoc-metric:nth-child(-n+2) strong {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.eoc-offer .eoc-metric span {
    display: block;
    font-size: 13px;
    color: var(--eoc-muted);
}

/* ----------------------------------------------------------------------------
   6. Промо-карточки с иллюстрацией
   -------------------------------------------------------------------------- */

.eoc-promo { padding-top: 0 !important; overflow: hidden; }

.eoc-promo::before {
    content: "";
    display: block;
    height: 150px;
    margin: 0 calc(-1 * var(--eoc-s3)) var(--eoc-s3);
    background: var(--eoc-tint-2) var(--eoc-icon) center / auto 86px no-repeat;
}

/* В макете бейдж стоит отдельной плашкой над заголовком, а не мелким
   текстом справа от него. Порядок меняем через column-reverse, чтобы
   не трогать разметку в контенте страницы. */
.eoc-promo .eoc-card__top {
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.eoc-promo .eoc-badge {
    padding: 7px 14px;
    background: var(--eoc-tint);
    font-size: 13px;
    font-weight: 500;
}

.eoc-promo--cards {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='86' viewBox='0 0 120 86'%3E%3Crect x='14' y='20' width='80' height='50' rx='8' fill='%231B4DFF' opacity='.9'/%3E%3Crect x='30' y='34' width='80' height='50' rx='8' fill='%23fff' stroke='%231B4DFF' stroke-width='2'/%3E%3Crect x='38' y='44' width='26' height='8' rx='4' fill='%23D9E4FB'/%3E%3Crect x='38' y='60' width='48' height='6' rx='3' fill='%23D9E4FB'/%3E%3C/svg%3E");
}

.eoc-promo--zero {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='86' viewBox='0 0 120 86'%3E%3Ccircle cx='60' cy='43' r='30' fill='%231B4DFF' opacity='.9'/%3E%3Ctext x='60' y='53' text-anchor='middle' font-family='Arial,sans-serif' font-size='26' font-weight='700' fill='%23fff'%3E0%25%3C/text%3E%3Ccircle cx='99' cy='20' r='9' fill='%23fff' stroke='%231B4DFF' stroke-width='2'/%3E%3C/svg%3E");
}

.eoc-promo--osago {
    --eoc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='86' viewBox='0 0 120 86'%3E%3Cpath d='M20 56l4-14a8 8 0 017.6-5.6h56A8 8 0 0195 42l4 14z' fill='%231B4DFF' opacity='.9'/%3E%3Crect x='20' y='56' width='79' height='12' rx='4' fill='%23fff' stroke='%231B4DFF' stroke-width='2'/%3E%3Ccircle cx='36' cy='68' r='7' fill='%23fff' stroke='%231B4DFF' stroke-width='3'/%3E%3Ccircle cx='84' cy='68' r='7' fill='%23fff' stroke='%231B4DFF' stroke-width='3'/%3E%3C/svg%3E");
}

/* Плашки-советы оформлены в style.css: белая карточка плюс цветная
   галочка в списке. Отдельных фонов у --good и --warn больше нет. */

/* ----------------------------------------------------------------------------
   8. Адаптив
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .eoc-hero--split { grid-template-columns: 1fr; }
    .eoc-quick { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .eoc-quick { grid-template-columns: 1fr; }
    .eoc-offer .eoc-card__meta { grid-template-columns: 1fr 1fr; }
    .eoc-promo::before { height: 128px; background-size: auto 72px; }
}