/* ===== Design tokens ===== */
:root {
    --bg: #ffffff;
    --ink: #0f172a;
    --muted: #64748b;

    --brand-navy: #1F3C88;
    --brand-red: #E63946;
    --brand-accent: #0b7bff;

    --line: #eef2f7;
    --card: #ffffff;

    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 10px;

    --shadow-sm: 0 4px 12px rgba(2, 6, 23, .06);
    --shadow-md: 0 10px 30px rgba(2, 6, 23, .08);
    --shadow-lg: 0 22px 60px rgba(2, 6, 23, .10);

    --container: 1160px;

    --ts: 220ms cubic-bezier(.2, .6, .2, 1);
}

/* ===== Base / reset-ish ===== */
* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

html,
body {
    background: #ffffff
}

/* единый белый фон на всём сайте */

body {
    margin: 0;
    font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 .5rem;
    font-weight: 700;
    color: #0b1220
}

p {
    margin: 0 0 1rem
}

a {
    color: var(--brand-navy);
    text-decoration: none
}

a:hover {
    opacity: .9
}

/* ===== Layout helpers ===== */
.bl-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

.bl-wrap {
    min-height: 100%;
    display: flex;
    flex-direction: column
}

/* ===== Header ===== */
.bl-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.bl-header__inner {
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Логотип - работает для IMG и inline SVG */
.bl-logo {
    display: flex;
    align-items: center;
    line-height: 0
}

.bl-logo img,
.bl-logo svg {
    max-height: 40px;
    /* целевой размер логотипа */
    height: 40px;
    /* фиксируем чтобы не «вылезал» */
    width: auto;
    /* сохраняем пропорции */
    display: block;
}

.bl-logo svg {
    width: auto
}

/* страховка для svg без width */

/* Если {{ $logo }} внезапно отдает блок с вложенным img/svg */
.bl-logo>* {
    max-height: 40px;
}

/* ===== Nav ===== */
.bl-nav {
    margin-left: auto;
    display: flex;
    gap: 18px;
    align-items: center;
}

.bl-nav a {
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink);
}

.bl-nav a:hover {
    background: #f3f6fb
}

/* Burger - CSS only */
.bl-nav__toggle {
    display: none
}

.bl-nav__burger {
    display: none;
    margin-left: auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--line);
    cursor: pointer;
    position: relative;
}

.bl-nav__burger span {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: #0b1220;
    transition: transform var(--ts), top var(--ts), opacity var(--ts);
}

.bl-nav__burger span:nth-child(1) {
    top: 12px
}

.bl-nav__burger span:nth-child(2) {
    top: 20px
}

.bl-nav__burger span:nth-child(3) {
    top: 28px
}

/* Burger - open state */
#bl-nav-toggle:checked+.bl-nav__burger span:nth-child(1) {
    top: 20px;
    transform: rotate(45deg)
}

#bl-nav-toggle:checked+.bl-nav__burger span:nth-child(2) {
    opacity: 0
}

#bl-nav-toggle:checked+.bl-nav__burger span:nth-child(3) {
    top: 20px;
    transform: rotate(-45deg)
}

@media(max-width:980px) {
    .bl-nav__burger {
        display: block
    }

    .bl-nav {
        position: fixed;
        inset: 64px 0 auto 0;
        background: rgba(255, 255, 255, .96);
        border-bottom: 1px solid var(--line);
        padding: 16px;
        transform: translateY(-100%);
        transition: transform var(--ts);
        box-shadow: var(--shadow-sm);
        flex-direction: column;
        align-items: stretch;
    }

    #bl-nav-toggle:checked~.bl-nav {
        transform: translateY(0)
    }
}

/* ===== Infobar ===== */
.bl-infobar {
    border-bottom: 1px solid var(--line);
    background: #fff
}

.bl-infobar__inner {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 8px 0;
    min-height: 46px;
}

.bl-breadcrumbs {
    flex: 1;
    font-size: 13px;
    color: var(--muted)
}

.bl-breadcrumbs a {
    color: #334155
}

.bl-infobar__slot {
    display: flex;
    align-items: center;
    gap: 10px
}

/* ===== Main ===== */
.bl-main {
    flex: 1;
    padding: 32px 0;
    background: #ffffff
}

.bl-grid {
    display: grid;
    grid-template-columns: 1.6fr .8fr;
    gap: 26px
}

@media(max-width:1024px) {
    .bl-grid {
        grid-template-columns: 1fr
    }
}

/* Content and sidebar cards */
.bl-content>*:first-child {
    margin-top: 0
}

.bl-content .bl-card,
.bl-aside .bl-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin: 0 0 18px;
}

.bl-card__title {
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 10px;
    border-left: 4px solid var(--brand-navy);
    padding-left: 10px;
}

/* Sidebar lists */
.bl-aside ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.bl-aside li {
    padding: 8px 0;
    border-bottom: 1px dashed #edf2f7
}

.bl-aside li:last-child {
    border-bottom: 0
}

.bl-aside a {
    color: #0b1220
}

.bl-aside a:hover {
    color: var(--brand-navy)
}

/* Ads placeholders */
.bl-ads {
    margin: 16px 0
}

.bl-ads--top {
    padding: 8px 0
}

/* ===== Footer ===== */
.bl-footer {
    border-top: 1px solid var(--line);
    background: #fcfdff;
    padding: 28px 0 36px;
}

.bl-footer__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 14px
}

.bl-footer__brand img {
    max-height: 38px
}

.bl-footer__meta {
    text-align: center
}

.bl-muted {
    color: var(--muted)
}

.bl-small {
    font-size: 12px
}

/* ===== Utilities ===== */
.bl-kicker {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-navy);
    background: #f2f6ff;
    border: 1px solid #e6efff;
    padding: 6px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}

/* Motion - soft float in */
@media (prefers-reduced-motion: no-preference) {
    .bl-fadein {
        opacity: 0;
        transform: translateY(10px);
        animation: blFadeIn .6s var(--ts) forwards
    }

    .bl-fadein-delayed {
        opacity: 0;
        transform: translateY(10px);
        animation: blFadeIn .8s var(--ts) .08s forwards
    }

    @keyframes blFadeIn {
        to {
            opacity: 1;
            transform: none
        }
    }
}

/* ===== Rich content blocks you insert via {{ $content }} ===== */

/* Hero from editor */
.bl-hero {
    background: #ffffff;
    /* без градиента - чисто белый */
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 28px 26px;
    margin: 0 0 18px;
}

.bl-hero h2 {
    font-size: 28px;
    line-height: 1.2
}

.bl-hero .subtitle {
    color: var(--muted);
    font-size: 16px
}

.bl-callout {
    margin-top: 12px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand-navy);
    border-radius: var(--radius-md);
    background: #fff;
    padding: 14px 16px;
}

/* Tiles grid for categories */
.bl-tiles {
    display: grid;
    gap: 16px;
    margin: 18px 0 8px;
    grid-template-columns: repeat(4, 1fr);
}

@media(max-width:1100px) {
    .bl-tiles {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:820px) {
    .bl-tiles {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:520px) {
    .bl-tiles {
        grid-template-columns: 1fr
    }
}

.bl-tile {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--ts), box-shadow var(--ts), border-color var(--ts);
}

.bl-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: #dfe7f2
}

.bl-tile__head {
    border-left: 4px solid var(--brand-navy);
    padding-left: 10px;
    margin-bottom: 6px
}

.bl-tile:nth-child(3n) .bl-tile__head {
    border-left-color: var(--brand-red)
}

.bl-tile__title {
    font-size: 18px;
    line-height: 1.25;
    margin: 0
}

.bl-tile__desc {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--muted)
}

/* Two-column info block */
.bl-columns {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 20px;
    margin-top: 6px
}

@media(max-width:900px) {
    .bl-columns {
        grid-template-columns: 1fr
    }
}

.bl-btn {
    display: inline-block;
    border: 2px solid var(--brand-navy);
    padding: 10px 16px;
    border-radius: 12px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--brand-navy);
    transition: background var(--ts), color var(--ts), transform var(--ts), box-shadow var(--ts);
}

.bl-btn:hover {
    background: var(--brand-navy);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm)
}

.bl-logo img,
.bl-logo svg {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
}

/* ==== Fix logo PNG size ==== */
.bl-logo {
    display: flex;
    align-items: center;
    max-height: 48px;
    /* высота шапки под логотип */
    overflow: hidden;
    /* если картинка больше — обрежет */
}

.bl-logo img {
    height: 40px !important;
    /* финальный размер PNG */
    max-height: 40px !important;
    width: auto !important;
    /* сохраняем пропорции */
    display: block;
}
/* --- Fix: hide empty bl-logo wrapper if present --- */
.bl-logo:empty { display: none; }

/* --- Fix: normalize $logo block that your engine outputs --- */
.bl-header .navbar-brand.logo,
.bl-header .navbar-brand,
.bl-header .logo-link {
  display: flex !important;
  align-items: center !important;
  max-height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

/* Key rule: clamp the PNG logo itself */
.bl-header .logo-image,
.bl-header .navbar-brand.logo img,
.bl-header .logo-link img {
  height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
  display: block !important;
}

/* Keep header compact */
.bl-header__inner {
  min-height: 64px;
  height: 64px;
}

/* Optional: avoid any global .logo rules from old theme */
.logo-image { max-width: none !important; } /* ширина авто по пропорции, не 250px */