/* ══════════════════════════════════════════════════════════════════════════
   bond.css — полная страница облигации
   ══════════════════════════════════════════════════════════════════════════ */

.bond-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 16px 60px;
}

/* ── Visually hidden (для SEO h2 которые не нужно показывать) ──────────── */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.bond-breadcrumbs {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0 14px;
    font-size: 13px;
    flex-wrap: wrap;
}
.bond-breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
    transition: color .15s;
}
.bond-breadcrumbs a:hover { color: var(--blue); }
.bond-breadcrumbs .sep { color: var(--border); }
.bond-breadcrumbs .current { color: var(--text); font-weight: 500; }

/* ── H1 ────────────────────────────────────────────────────────────────── */
.bond-h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 16px;
}

/* ── Hero block ────────────────────────────────────────────────────────── */
.bond-hero {
    background: var(--surface);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.bond-hero-isin-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    color: var(--blue);
    transition: color .15s;
}
.bond-hero-isin-wrap:hover .bond-hero-copy-icon { color: var(--blue); }
.bond-hero-copy-icon {
    color: var(--light);
    font-size: 12px;
    transition: color .15s;
}
.bond-hero-copied {
    color: #16a34a;
    font-weight: 600;
    display: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.bond-hero-badges {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* Эмитент в Hero — отдельной строкой под бейджами */
.bond-hero-emitter {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
    font-size: 14px;
    color: var(--text);
}
.bond-hero-emitter-label {
    color: var(--muted);
    margin-right: 6px;
}
.bond-hero-emitter a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
}
.bond-hero-emitter a:hover {
    border-bottom-color: var(--blue);
}

/* ── Intro-абзацы (SEO-описание сразу после Hero) ──────────────────────── */
.bond-intro {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    font-size: 14px;
    line-height: 1.7;
    color: #475569;
}
.bond-intro p {
    margin-bottom: 12px;
}
.bond-intro p:last-child {
    margin-bottom: 0;
}
.bond-intro strong {
    color: var(--text);
    font-weight: 600;
}

/* ── Metrics grid (карточки .metric-card живут в main.css) ─────────────── */
.metric-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
@media (max-width: 700px) {
    .metric-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.bond-section {
    background: var(--surface);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.bond-section-h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
    line-height: 1.3;
}

/* ── Params (двухколоночная сетка — для широких блоков) ────────────────── */
.bond-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
}
/* Одна колонка — для узких блоков в .bond-row-2 */
.bond-params.cols-1 {
    grid-template-columns: 1fr;
}

/* ── Ряд из двух блоков рядом ──────────────────────────────────────────── */
.bond-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.bond-row-2 .bond-section {
    margin-bottom: 0;
}
.bond-param-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
}
.bond-param-row:last-child { border-bottom: none; }
.bond-param-label { color: var(--muted); }
.bond-param-value {
    color: var(--text);
    font-weight: 600;
    text-align: right;
}
.bond-param-value.offer-soon { color: #be123c; }

/* ── SEO-text block ────────────────────────────────────────────────────── */
.bond-seo-text {
    font-size: 14px;
    color: #475569;
    line-height: 1.75;
}
.bond-seo-text p {
    margin-bottom: 14px;
}
.bond-seo-text p:last-child { margin-bottom: 0; }
.bond-seo-text strong { color: var(--text); font-weight: 600; }

/* ── Badge Т-Банк в стиле обычных бейджей ──────────────────────────────── */
.badge-tbank-flat {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde047;
    text-decoration: none;
    transition: background .15s;
}
.badge-tbank-flat:hover {
    background: #fef08a;
}

/* ── External links ────────────────────────────────────────────────────── */
.bond-ext-links {
    display: flex;
    gap: 10px;
    margin-top: 0;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.bond-ext-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all .15s;
}
.bond-ext-link:hover {
    background: var(--bg-soft);
    border-color: var(--light);
    color: var(--text);
}
.bond-ext-link.tbank {
    color: #c9a000;
    border-color: #fde68a;
    background: #fff8e7;
}
.bond-ext-link.tbank:hover {
    background: #fef3c7;
    color: #b8920a;
}
.bond-ext-link.emitter {
    color: #fff;
    border-color: #3b82f6;
    background: #3b82f6;
}
.bond-ext-link.emitter:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* ── Об эмитенте и описание облигации ──────────────────────────────────── */
.bond-emitter-about {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border-left: 3px solid #3b82f6;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
}
.bond-emitter-about-link {
    display: inline-block;
    margin-left: 8px;
    color: #3b82f6;
    text-decoration: none;
    white-space: nowrap;
}
.bond-emitter-about-link:hover {
    text-decoration: underline;
}
.bond-description {
    margin-top: 16px;
    font-size: 14px;
    color: #334155;
    line-height: 1.65;
}
.bond-description p {
    margin: 0 0 10px;
}
.bond-description p:last-child {
    margin-bottom: 0;
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .bond-row-2 { grid-template-columns: 1fr; }
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .bond-page { padding: 8px 12px 40px; }
    .bond-h1 { font-size: 18px; }
    .bond-hero { padding: 16px 18px; }
    .bond-intro { font-size: 13px; }
    .metric-cards { grid-template-columns: repeat(2, 1fr); }
    .bond-section { padding: 16px 18px; }
    .bond-section-h2 { font-size: 15px; }
    .bond-params { grid-template-columns: 1fr; gap: 0; }
    .bond-param-row { font-size: 13px; }
}