/* ═══════════════════════════════════════════════════════════════
   BUMAGA ABOUT — Page-specific Styles v1.0
   Location: /assets/css/about.css
   ═══════════════════════════════════════════════════════════════

   Содержит только уникальные блоки страницы About:
     • Ecosystem grid (5 cards)
     • Principles grid (5 cards с SVG-иконками)
     • Stats layout (big Escrow card + 2×2 grid) — 1:1 с index.php
     • Use-cases grid (4 cards с тэгами)
     • Contact CTA button

   Общие стили (hero, TOC, sections, cards, callouts, tables,
   cross-links, back-to-top) — в /assets/css/legal-pages.css.

   Namespace: ab-*
   Dependencies: tokens.css, legal-pages.css (обязательны ОБА)
   ═══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   §2 ECOSYSTEM GRID (5 cards)
   ══════════════════════════════════════════════════════════════ */
.ab-eco-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin-top:24px; }
.ab-eco-card { background:var(--bp-card); border:1px solid var(--bp-border); border-radius:var(--bp-radius); padding:20px 22px; transition:all var(--bp-transition); }
.ab-eco-card:hover { border-color:var(--bp-accent-border-strong); background:var(--bp-card-hover); transform:translateY(-2px); }
.ab-eco-card-name { font-size:1rem; font-weight:700; color:var(--bp-text); margin-bottom:8px; letter-spacing:-0.01em; }
.ab-eco-card-desc { font-size:0.88rem; color:var(--bp-text-secondary); line-height:1.55; margin:0; }


/* ══════════════════════════════════════════════════════════════
   §3 PRINCIPLES GRID (5 cards с SVG-иконками)
   ══════════════════════════════════════════════════════════════ */
.ab-pri-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; margin-top:24px; }
.ab-pri-card { background:var(--bp-card); border:1px solid var(--bp-border); border-radius:var(--bp-radius); padding:22px; transition:border-color var(--bp-transition); }
.ab-pri-card:hover { border-color:var(--bp-accent-border); }

.ab-pri-icon { width:40px; height:40px; border-radius:var(--bp-radius-sm); background:var(--bp-accent-dim); color:var(--bp-accent); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.ab-pri-icon svg { width:20px; height:20px; }

.ab-pri-name { font-size:1rem; font-weight:700; color:var(--bp-text); margin-bottom:8px; }
.ab-pri-desc { font-size:0.88rem; color:var(--bp-text-secondary); line-height:1.6; margin:0; }


/* ══════════════════════════════════════════════════════════════
   §4 STATS LAYOUT — big Escrow card + 2×2 grid (1:1 с index.php)
   ══════════════════════════════════════════════════════════════ */
.ab-stats-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:16px; margin-top:24px; }

/* ── Big card: Escrow volume (clickable → /escrow) ── */
.ab-stat-main { background:linear-gradient(135deg, var(--bp-accent-dim) 0%, var(--bp-card) 100%); border:1px solid var(--bp-accent-border); border-radius:var(--bp-radius); padding:28px; display:flex; flex-direction:column; justify-content:space-between; text-decoration:none; transition:all var(--bp-transition); min-height:200px; position:relative; overflow:hidden; }
.ab-stat-main::before { content:''; position:absolute; top:0; right:0; width:180px; height:180px; background:radial-gradient(circle at center, var(--bp-accent-glow) 0%, transparent 70%); opacity:0.5; pointer-events:none; }
.ab-stat-main:hover { border-color:var(--bp-accent-border-strong); transform:translateY(-2px); box-shadow:var(--bp-shadow-accent); }
.ab-stat-main-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--bp-accent); margin-bottom:8px; position:relative; }
.ab-stat-main-value { font-size:2.6rem; font-weight:900; color:var(--bp-text); line-height:1; letter-spacing:-0.02em; margin-bottom:12px; position:relative; }
.ab-stat-main-sub { display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--bp-text-secondary); flex-wrap:wrap; position:relative; }
.ab-stat-main-sub .ab-stat-main-sep { color:var(--bp-text-muted); }
.ab-stat-main-cta { margin-top:16px; display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:600; color:var(--bp-accent); position:relative; }
.ab-stat-main-cta::after { content:'→'; transition:transform var(--bp-transition); }
.ab-stat-main:hover .ab-stat-main-cta::after { transform:translateX(3px); }

/* ── Grid 2×2: Labels / Audience / Reviews / Calls ── */
.ab-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ab-stat { background:var(--bp-card); border:1px solid var(--bp-border); border-radius:var(--bp-radius-sm); padding:18px 20px; display:flex; flex-direction:column; justify-content:center; transition:border-color var(--bp-transition); }
.ab-stat:hover { border-color:var(--bp-border-hover); }
.ab-stat-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--bp-text-muted); margin-bottom:6px; }
.ab-stat-value { font-size:1.5rem; font-weight:800; color:var(--bp-text); line-height:1.1; letter-spacing:-0.01em; }


/* ══════════════════════════════════════════════════════════════
   §5 USE-CASES GRID (4 cards)
   ══════════════════════════════════════════════════════════════ */
.ab-uc-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; margin-top:24px; }
.ab-uc-card { background:var(--bp-card); border:1px solid var(--bp-border); border-radius:var(--bp-radius); padding:22px; display:flex; flex-direction:column; gap:10px; transition:border-color var(--bp-transition); }
.ab-uc-card:hover { border-color:var(--bp-accent-border); }
.ab-uc-name { font-size:1rem; font-weight:700; color:var(--bp-text); }
.ab-uc-desc { font-size:0.88rem; color:var(--bp-text-secondary); line-height:1.55; margin:0; flex:1; }
.ab-uc-tags { font-size:0.78rem; color:var(--bp-text-muted); font-family:var(--bp-mono); padding-top:10px; border-top:1px solid var(--bp-border-light); }


/* ══════════════════════════════════════════════════════════════
   §7 CONTACT CTA BUTTON
   ══════════════════════════════════════════════════════════════ */
.ab-contact-cta { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background:var(--bp-accent); color:#fff; border:none; border-radius:var(--bp-radius-sm); font-size:0.95rem; font-weight:600; text-decoration:none; transition:all var(--bp-transition); margin-top:8px; }
.ab-contact-cta:hover { background:var(--bp-accent-hover); transform:translateY(-1px); box-shadow:var(--bp-shadow-accent); }
.ab-contact-cta::after { content:'→'; transition:transform var(--bp-transition); }
.ab-contact-cta:hover::after { transform:translateX(3px); }


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
    .ab-stats-layout { grid-template-columns:1fr; }
    .ab-stat-main { min-height:auto; padding:24px; }
    .ab-stat-main-value { font-size:2.2rem; }
}

@media (max-width:640px) {
    .ab-eco-grid, .ab-pri-grid, .ab-uc-grid { grid-template-columns:1fr; gap:10px; }
    .ab-eco-card, .ab-pri-card, .ab-uc-card { padding:18px; }
    .ab-stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .ab-stat { padding:14px 16px; }
    .ab-stat-value { font-size:1.3rem; }
    .ab-stat-main { padding:20px; }
    .ab-stat-main-value { font-size:1.9rem; }
    .ab-stat-main-label { font-size:0.68rem; }
    .ab-pri-icon { width:36px; height:36px; }
    .ab-contact-cta { width:100%; justify-content:center; padding:14px 20px; }
}


/* ══════════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════════ */
@media print {
    .ab-stat-main, .ab-stat, .ab-eco-card, .ab-pri-card, .ab-uc-card { border:1px solid #999 !important; background:#fafafa !important; break-inside:avoid; }
    .ab-stat-main { background:#f0f0f0 !important; }
    .ab-stat-main-value, .ab-stat-value, .ab-eco-card-name, .ab-pri-name, .ab-uc-name { color:#000 !important; }
    .ab-stat-main-label, .ab-stat-label { color:#333 !important; }
    .ab-contact-cta { background:#333 !important; }
}