/* ══════════════════════════════════════════════════════════════════════
   НУЖНЫДЕНЬГИ — СТРУКТУРНЫЙ СЛОЙ (1-й слой CSS)
   Только структура/компоновка блоков страниц: hero, карточка оффера,
   условия, плюсы/минусы, калькулятор-каркас, текстовые блоки.
   Визуальный язык (цвета, кнопки, таблицы, секции) задаёт
   design-system.css — этот файл не дублирует его правила.
   ══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   ОБЁРТКИ СТРАНИЦ
   ─────────────────────────────────────────────────────────────────────── */
.content-wrapper { display: block; }

section.mb-5 { margin-bottom: 40px; }

/* ───────────────────────────────────────────────────────────────────────
   HERO СТРАНИЦЫ ОФФЕРА / РАЗДЕЛА (классический, не главная)
   ─────────────────────────────────────────────────────────────────────── */
.hero-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 320px at 12% 0%, rgba(18,148,106,.28), transparent 62%),
        linear-gradient(150deg, var(--nd-emerald-950) 0%, var(--nd-graphite-950) 100%);
    color: var(--nd-text-invert);
    padding: 54px 0 58px;
    border-bottom: 1px solid rgba(243,247,245,.08);
}
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(243,247,245,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(243,247,245,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 85%);
    pointer-events: none;
}
.hero-section .container { position: relative; z-index: 1; }
.hero-section h1 {
    color: var(--nd-text-invert);
    font-size: var(--nd-fs-display);
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: .4em;
}
.hero-section .lead {
    font-size: var(--nd-fs-md);
    color: var(--nd-text-invert-mute);
    line-height: 1.7;
    max-width: 640px;
    margin-bottom: 0;
}


.hero-content { max-width: 720px; }




.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(243,247,245,.14);
}
.hero-stats .stat-item strong { color: var(--nd-accent-on-dark); }
.hero-stats .stat-item span,
.hero-stats .stat-item small { color: var(--nd-text-invert-mute); }




/* Мобильный листинг внутри hero */



/* ───────────────────────────────────────────────────────────────────────
   КАРТОЧКА ОФФЕРА (offer.php, category_offers.php)
   ─────────────────────────────────────────────────────────────────────── */
.offer-card {
    background: var(--nd-surface);
    border: 1px solid var(--nd-line);
    border-radius: var(--nd-r-lg);
    box-shadow: var(--nd-shadow-md);
    overflow: hidden;
    transition: border-color var(--nd-t) var(--nd-ease), box-shadow var(--nd-t) var(--nd-ease);
}
.offer-card:hover { border-color: var(--nd-platinum-500); box-shadow: var(--nd-shadow-lg); }

.offer-card-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: linear-gradient(180deg, var(--nd-surface-2) 0%, var(--nd-surface) 100%);
    border-bottom: 1px solid var(--nd-line);
}

.offer-header { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.offer-logo{
    width: 76px;
    height: 52px;
    object-fit: contain;
    background: var(--nd-surface);
    border: 1px solid var(--nd-line);
    border-radius: var(--nd-r-md);
    padding: 6px;
    flex-shrink: 0;
}


.offer-title {
    font-size: var(--nd-fs-lg);
    font-weight: 700;
    color: var(--nd-text);
    margin: 0 0 4px;
}
.offer-slogan { font-size: var(--nd-fs-sm); color: var(--nd-text-muted); margin: 0; }
.offer-rating { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

.offer-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 20px 24px;
    background: var(--nd-ice-100);
    border-bottom: 1px solid var(--nd-line);
}
.offer-details .rate,
.offer-details .approve {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.offer-details .rate strong,
.offer-details .approve strong { color: var(--nd-text); font-size: var(--nd-fs-base); }
.offer-details span { font-size: var(--nd-fs-xs); color: var(--nd-text-muted); text-transform: uppercase; letter-spacing: .05em; }

.offer-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.offer-info strong { color: var(--nd-text); }

.offer-info-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.offer-actions { display: flex; gap: 12px; flex-wrap: wrap; padding: 22px 24px; }

/* Превью списка офферов */


.offers-list { display: flex; flex-direction: column; gap: 10px; }




/* Альтернативы */



/* ───────────────────────────────────────────────────────────────────────
   КЛЮЧЕВЫЕ УСЛОВИЯ / КАРТОЧКИ ПАРАМЕТРОВ
   ─────────────────────────────────────────────────────────────────────── */
.key-conditions { margin-top: 34px; }

.condition-card,
.credit-condition-card {
    background: var(--nd-surface);
    border: 1px solid var(--nd-line);
    border-radius: var(--nd-r-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color var(--nd-t) var(--nd-ease), box-shadow var(--nd-t) var(--nd-ease);
}
.condition-card:hover { border-color: var(--nd-accent-line); box-shadow: var(--nd-shadow-md); }




.credit-condition-card__label, .meta-label{
    font-size: var(--nd-fs-sm);
    color: var(--nd-text-muted);
    flex-shrink: 0;
}
.condition-value,
.credit-condition-card__value,
.meta-value {
    font-size: var(--nd-fs-base);
    font-weight: 700;
    color: var(--nd-text);
    text-align: right;
}
.condition-card h3 { font-size: var(--nd-fs-base); margin: 0; }
.condition-icon { color: var(--nd-accent); display: inline-flex; margin-bottom: 6px; }

.param {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    background: var(--nd-ice-100);
    border-radius: var(--nd-r-sm);
    font-size: var(--nd-fs-sm);
    transition: background var(--nd-t) var(--nd-ease);
}
.param:hover { background: var(--nd-ice-200); }
.param strong { color: var(--nd-text); }

/* ───────────────────────────────────────────────────────────────────────
   ПЛЮСЫ / МИНУСЫ, ТРЕБОВАНИЯ, ЮРИДИЧЕСКИЕ БЛОКИ
   ─────────────────────────────────────────────────────────────────────── */
.pros-cons .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.pros-container,
.cons-container {
    background: var(--nd-surface);
    border: 1px solid var(--nd-line);
    border-radius: var(--nd-r-lg);
    padding: 24px;
}
.pros-container { border-top: 3px solid var(--nd-accent); }
.cons-container { border-top: 3px solid var(--nd-platinum-700); }

.pros-title,
.cons-title {
    font-size: var(--nd-fs-base);
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--nd-text);
}

.pros-list,
.cons-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pros-list li,
.cons-list li {
    position: relative;
    padding-left: 28px;
    font-size: var(--nd-fs-sm);
    line-height: 1.65;
    color: var(--nd-text-secondary);
}
.pros-list li:last-child,
.cons-list li:last-child { margin-bottom: 0; }
.pros-list li::before,
.cons-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}
.pros-list li::before {
    background-color: var(--nd-accent-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4L4.6 9 10 3.4' fill='none' stroke='%230D7654' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cons-list li::before {
    background-color: var(--nd-ice-200);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='%237C8A85' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.requirements-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.requirements-list li {
    position: relative;
    padding: 12px 16px 12px 42px;
    background: var(--nd-surface);
    border: 1px solid var(--nd-line);
    border-radius: var(--nd-r-md);
    font-size: var(--nd-fs-sm);
    color: var(--nd-text-secondary);
}
.requirements-list li::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    width: 15px;
    height: 15px;
    margin-top: -7px;
    border-radius: 50%;
    background-color: var(--nd-accent-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4L4.6 9 10 3.4' fill='none' stroke='%230D7654' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px;
}
.requirements-list li strong { color: var(--nd-text); font-weight: 600; }

/* Контакты / правовая информация */
.contact-info p,
.legal-info p { color: var(--nd-text-secondary); font-size: var(--nd-fs-sm); line-height: 1.75; margin-bottom: .7em; }
.contact-info strong,
.legal-info strong { color: var(--nd-text); font-weight: 600; }

.legal-item {
    background: var(--nd-surface);
    border: 1px solid var(--nd-line);
    border-radius: var(--nd-r-md);
    padding: 18px 20px;
}

/* Информационный блок (страницы-контенты) */
.info-block,
.info-block-body,
.detailed-description {
    background: var(--nd-surface);
    border: 1px solid var(--nd-line);
    border-radius: var(--nd-r-lg);
    padding: 26px;
}
.info-block p,
.info-block li,
.info-block h3,
.info-block h4,
.info-block-body p,
.info-block-body li,
.info-block-body h3,
.detailed-description p,
.detailed-description li { color: var(--nd-text-secondary); line-height: 1.8; font-size: var(--nd-fs-sm); }

/* Блок-призыв на страницах разворачивания */
.cta-box {
    background: linear-gradient(150deg, var(--nd-emerald-900) 0%, var(--nd-emerald-950) 100%);
    color: var(--nd-text-invert);
    border-radius: var(--nd-r-xl);
    padding: 34px 32px;
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.cta-box h2,
.cta-box h3 { color: var(--nd-text-invert); margin-bottom: .3em; }
.cta-box p { color: var(--nd-text-invert-mute); margin: 0; }
/* Светлый текст на тёмном градиенте бокса: `.seo-content h3/p` (cards.css,
   credit-calculator.css) и `.container :where(...)` гасили цвет до
   #111817/#7C8A85 (контраст ~1.7:1 и ~2.9:1). Специфичность (0,2,1) выше
   (0,1,1) у .seo-content h3 — победа не зависит от порядка загрузки файлов. */
.container .cta-box h2,
.container .cta-box h3,
.seo-content .cta-box h2,
.seo-content .cta-box h3 { color: var(--nd-text-invert); }
.container .cta-box p,
.container .cta-box li,
.seo-content .cta-box p,
.seo-content .cta-box li { color: var(--nd-text-invert-mute); }
.cta-box .btn-primary {
    background: var(--nd-accent-on-dark);
    color: var(--nd-emerald-950);
    box-shadow: 0 14px 34px -16px rgba(0,0,0,.8);
}
.cta-box .btn-primary:hover { background: #57cea3; color: var(--nd-emerald-950); }

/* ───────────────────────────────────────────────────────────────────────
   КАРКАС КАЛЬКУЛЯТОРА (детали лежат в *-calculator.css)
   ─────────────────────────────────────────────────────────────────────── */
.calculator-wrapper { display: block; }






/* Секция калькулятора — графитовая панель, светлые карточки внутри */
.calculator-section {
    scroll-margin-top: calc(var(--nd-header-h) + 16px);
    background:
        radial-gradient(900px 340px at 8% -30%, rgba(13,118,84,.34), transparent 62%),
        linear-gradient(165deg, var(--nd-graphite-900) 0%, var(--nd-graphite-950) 100%);
    border: 1px solid rgba(243,247,245,.08);
    border-radius: var(--nd-r-xl);
    padding: 34px 30px;
    box-shadow: var(--nd-shadow-dark);
    margin-top: 56px;
}
.calculator-section > .container {
    max-width: none;
    padding-inline: 0;
}
.calculator-section .calculator-title,
.calculator-section .sidebar-offers-title { color: var(--nd-text-invert); }
.calculator-section .subtitle { color: var(--nd-text-invert-mute); }
.calculator-section .return-date { color: var(--nd-text-invert-mute); }
.calculator-section .return-date strong { color: var(--nd-accent-on-dark); }
.calculator-section .disclaimer { color: rgba(243,247,245,.5); }

/* Премиум-полоса ТОП-3 под hero: платиновая панель с серебряной кромкой */
.offers.offers--premium {
    margin-top: 30px;
    padding: 30px 26px 26px;
    background: linear-gradient(180deg, #FCFDFD 0%, var(--nd-ice-100) 100%);
    border: 1px solid var(--nd-silver-300);
    border-radius: var(--nd-r-xl);
    box-shadow: var(--nd-shadow-silver);
}
.offers-band-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--nd-silver-300);
    font-size: 13.5px;
}
.offers-band-foot a {
    font-weight: 700;
    color: var(--nd-emerald-800);
    text-decoration: none;
    white-space: nowrap;
}
.offers-band-foot a:hover { color: var(--nd-emerald-900); }

/* ───────────────────────────────────────────────────────────────────────
   ПСИХОЛОГИЧЕСКИЕ ТРИГГЕРЫ / ФИКС. CTA
   ─────────────────────────────────────────────────────────────────────── */



/* ───────────────────────────────────────────────────────────────────────
   АДАПТИВ
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .calculator-offers-layout { grid-template-columns: 1fr; }
    .offer-card-header { padding: 20px; }
}

@media (max-width: 968px) {
    .offer-details { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .offer-actions { flex-direction: column; }
    .offer-actions > * { width: 100%; }
}

@media (max-width: 768px) {
    .hero-section { padding: 38px 0 42px; }
    .hero-section h1 { font-size: 1.85rem; }
    .hero-stats { gap: 18px; }

    .offers.offers--premium { margin-top: 22px; padding: 24px 16px 20px; }
    .offers-band-foot { justify-content: flex-start; margin-top: 16px; }

    .offer-card-header { flex-direction: column; align-items: flex-start; gap: 14px; }
    .offer-details { grid-template-columns: 1fr 1fr; padding: 16px; }
    .offer-info-actions { width: 100%; }
    .offer-info-actions > * { flex: 1 1 auto; }

    

    .cta-box { padding: 26px 20px; }
    .cta-box .btn-primary { width: 100%; }

    .pros-container,
    .cons-container,
    .info-block,
    .info-block-body,
    .detailed-description { padding: 20px 18px; }
}

@media (max-width: 480px) {
    .offer-details { grid-template-columns: 1fr; }
    
    .condition-value,
    .meta-value { text-align: left; }
}