/*
B2B-LANDING-001: styles for /business/ only. Extends the design tokens
already defined in ../styles.css's :root (colors, fonts, radii, shadow) —
does not redefine them, so both pages stay visually in sync automatically.
Sticky/fixed positioning in this file is scoped to .b2b-* classes only —
it must never leak onto the personal Matrix page (see
TestEntryLayoutScopedToEntryState precedent in test_ui_contract.py, whose
spirit this file follows for its own contract test).
*/

.b2b-body {
    overflow-x: hidden;
}

.b2b-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 20px 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- header ------------------------------------------------------------ */

.b2b-header {
    margin-bottom: 32px;
}

.b2b-logo-link {
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm);
}

.b2b-logo-link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 4px;
}

.b2b-content-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    font-size: 0.9rem;
}

.b2b-content-link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 3px;
}

.b2b-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.b2b-header-tag {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* CHG-WEB-004 / PHASE-3 / STEP-03: DR-043 Global Header nav additions.
   Reuses .header-actions' own flex/gap for the language wrapper (no
   dedicated CSS needed there) and .b2b-content-link's established link
   look is intentionally not reused here to keep these visually distinct
   from the page's own "Контент-завод" shortcut. */
.b2b-global-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.b2b-global-nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
}

.b2b-global-nav-link:hover,
.b2b-global-nav-link:focus-visible {
    color: var(--text-primary);
}

.b2b-global-start-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    background: var(--accent-gradient);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

/* DR-043 Global Footer: reuses ../styles.css's own .site-footer-columns/
   .site-footer-col/.site-footer-heading/.site-footer-copyright classes
   (already shared, already tested by the Homepage) — only the wrap
   behavior of THIS page's own .b2b-footer row needs a small addition so
   the new column block drops to its own line instead of squeezing
   alongside the existing "BRAIN LAB · Insight Matrix OS" + back-link. */
.b2b-footer {
    flex-wrap: wrap;
}

.b2b-footer .site-footer-columns {
    flex-basis: 100%;
}

/* --- main content wrapper -------------------------------------------------
   CHG-WEB-004 / PHASE-4 / STEP-02B.2: the old .b2b-layout flex-column
   wrapper (hero -> sticky-CTA-aside -> scroll-feed) is retired along with
   the composition it wrapped. The new Hero/chapters/final sections reuse
   ../styles.css's own .hero-section/.marketing-section rhythm unmodified
   (same as every other PPVS page), so no wrapping layout div is needed —
   only flex:1 to keep the footer pinned to the bottom on short pages. */

.b2b-main {
    flex: 1;
}

/* --- Business Hub Hero: PRODUCT_PAGE_VISUAL_SYSTEM_v0.1 geometry -----------
   Page-scoped .bizhub-hero-grid class applied only to THIS page's own
   .hero-grid (../styles.css's shared rule, used by the Homepage and every
   other page, is untouched). Same validated mechanism as every other
   product/mechanism page (STEP-04B.3): align-items:stretch at 1024px+, the
   visual panel is a flex column whose svg fills remaining height via
   flex:1 1 0%/min-height:0, scoped to the same breakpoint so mobile/tablet
   never risks the flex-collapse failure mode. No CSS transform of any kind
   is used anywhere in this file. The Hero visual is a NEUTRAL business-situation field with
   three EQUAL vectors — deliberately not a dominant "result" node like
   Sales Matrix/Corporate Matrix/Partners use — so the Hub does not visually
   become another product page (anti-template invariant). */

.bizhub-hero-visual {
    max-width: var(--content-max);
    padding: var(--space-5);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    display: flex;
    flex-direction: column;
}

.bizhub-hero-visual svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--text-muted);
}

.bizhub-hero-visual-caption {
    flex: 0 0 auto;
    margin: var(--space-5) 0 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

@media (min-width: 1024px) {
    .bizhub-hero-grid {
        align-items: stretch;
    }
    .bizhub-hero-visual {
        flex: 1;
        max-width: var(--content-max);
        justify-content: center;
    }
    .bizhub-hero-visual svg {
        height: auto;
        flex: 1 1 0%;
        min-height: 0;
    }
}

/* Chapter 1 — three equal directions reuse ../styles.css's own
   .ai-comparison-grid/.ai-comparison-col/.ai-comparison-label (unedited) —
   the same equal-weight, non-ranked, non-sequential component already used
   on /personal/ and /partners/how-it-works/. Only the "problem signal"
   line needs a small page-scoped style. */

.bizhub-direction-signal {
    margin: 0 0 var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-small);
    line-height: 1.5;
}

/* Final business choice — three equal links, no ranking, no sticky/fixed
   positioning of any kind (owner decision: the old scroll-driven local CTA
   is retired completely, with no replacement sticky CTA). */

.bizhub-final-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

@media (min-width: 640px) {
    .bizhub-final-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* --- footer -------------------------------------------------------------- */

.b2b-footer {
    margin-top: 48px;
    padding: 24px 0 32px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.b2b-footer a {
    color: var(--text-secondary);
    text-decoration: none;
}

.b2b-footer a:hover,
.b2b-footer a:focus-visible {
    color: var(--text-primary);
}

/* --- mobile compaction ----------------------------------------------------
   CHG-WEB-004 / PHASE-4 / STEP-02B.2: the Hero/chapter-specific overrides
   that used to live here (.b2b-overline/.b2b-hero h1/.b2b-subtitle/
   .b2b-hero-addendum/.b2b-cta*) are retired along with the elements they
   targeted — the new Hero/chapters reuse ../styles.css's own responsive
   rules for .hero-section/.marketing-section unmodified, exactly like
   every other PPVS page. Only the page's own container/header spacing
   still needs a page-scoped override. */

@media (max-width: 1023.98px) {
    .b2b-container {
        padding: 16px 16px 0;
    }

    .b2b-header {
        margin-bottom: 20px;
    }
}

/* --- reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .b2b-logo-link {
        transition: none !important;
    }
}