/*
 * Blocks Common — shared utility classes for all BHT blocks
 * 
 * Любой блок который использует bht_box_classes() или bht_build_classes()
 * автоматически получает эти стили без дублирования CSS в каждом блоке.
 * 
 * Префикс не нужен — классы универсальные, работают на любом элементе.
 */


/* ============================================================
   BACKGROUND
   ============================================================ */
.bht-bg-surface         { background: var(--bg-surface); }
.bht-bg-surface-alt     { background: var(--bg-surface-alt); }
.bht-bg-primary-soft    { background: var(--primary-soft); }
.bht-bg-accent-soft     { background: var(--accent-soft); }
.bht-bg-bio-accent-soft { background: var(--bio-accent-soft); }


/* ============================================================
   PADDING
   ============================================================ */
.bht-p-none { padding: 0; }
.bht-p-sm   { padding: 0.75rem; }
.bht-p-md   { padding: 1.5rem; }
.bht-p-lg   { padding: 2rem; }
.bht-p-xl   { padding: 3rem; }


/* ============================================================
   BORDER RADIUS
   ============================================================ */
.bht-r-none { border-radius: 0; }
.bht-r-sm   { border-radius: var(--r-sm, 6px); }
.bht-r-md   { border-radius: var(--r-md, 10px); }
.bht-r-lg   { border-radius: var(--r-lg, 16px); }
.bht-r-xl   { border-radius: var(--r-xl, 24px); }


/* ============================================================
   SHADOW
   ============================================================ */
.bht-shadow-sm { box-shadow: var(--shadow-sm); }
.bht-shadow-md { box-shadow: var(--shadow-md); }
.bht-shadow-lg { box-shadow: var(--shadow-lg); }


/* ============================================================
   BORDER
   ============================================================ */
.bht-border         { border: 1px solid var(--border); }
.bht-bc-default     { border-color: var(--border); }
.bht-bc-strong      { border-color: var(--border-strong); }
.bht-bc-primary     { border-color: var(--primary-mid); }
.bht-bc-accent      { border-color: var(--accent-mid); }


/* ============================================================
   WIDTH
   ============================================================ */
.bht-w-content {
    max-width: var(--content-width, 768px);
    margin-left: auto;
    margin-right: auto;
}

.bht-w-wide {
    max-width: var(--wide-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

.bht-w-full {
    max-width: 100%;
}


/* ============================================================
   MARGIN TOP
   ============================================================ */
.bht-mt-none { margin-top: 0; }
.bht-mt-sm   { margin-top: 0.5rem; }
.bht-mt-md   { margin-top: 1.5rem; }
.bht-mt-lg   { margin-top: 2.5rem; }
.bht-mt-xl   { margin-top: 4rem; }


/* ============================================================
   MARGIN BOTTOM
   ============================================================ */
.bht-mb-none { margin-bottom: 0; }
.bht-mb-sm   { margin-bottom: 0.5rem; }
.bht-mb-md   { margin-bottom: 1.5rem; }
.bht-mb-lg   { margin-bottom: 2.5rem; }
.bht-mb-xl   { margin-bottom: 4rem; }


/* ============================================================
   TEXT COLOR
   ============================================================ */
.bht-text-main    { color: var(--text-main); }
.bht-text-muted   { color: var(--text-muted); }
.bht-text-hint    { color: var(--text-hint); }
.bht-text-primary { color: var(--primary); }
.bht-text-accent  { color: var(--accent); }
.bht-text-white   { color: #fff; }


/* ============================================================
   FONT SIZE
   ============================================================ */
.bht-fs-xs  { font-size: 0.75rem; }
.bht-fs-sm  { font-size: 0.875rem; }
.bht-fs-md  { font-size: 1rem; }
.bht-fs-lg  { font-size: 1.125rem; }
.bht-fs-xl  { font-size: 1.375rem; }
.bht-fs-2xl { font-size: 1.75rem; }


/* ============================================================
   FONT WEIGHT
   ============================================================ */
.bht-fw-400 { font-weight: 400; }
.bht-fw-500 { font-weight: 500; }
.bht-fw-600 { font-weight: 600; }
.bht-fw-700 { font-weight: 700; }


/* ============================================================
   FONT FAMILY
   ============================================================ */
.bht-ff-sans  { font-family: var(--font-sans); }
.bht-ff-serif { font-family: var(--font-serif); }
.bht-ff-mono  { font-family: var(--font-mono); }


/* ============================================================
   TEXT ALIGN
   ============================================================ */
.bht-ta-left   { text-align: left; }
.bht-ta-center { text-align: center; }
.bht-ta-right  { text-align: right; }


/* ============================================================
   LINE HEIGHT
   ============================================================ */
.bht-lh-tight   { line-height: 1.2; }
.bht-lh-normal  { line-height: 1.6; }
.bht-lh-relaxed { line-height: 1.8; }


/* ============================================================
   VISIBILITY
   ============================================================ */
@media (max-width: 768px) {
    .bht-hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .bht-hide-desktop { display: none !important; }
}


/* ============================================================
   SCORE COLORS
   ============================================================ */
.bht-score-high { color: var(--score-high); }
.bht-score-mid  { color: var(--score-mid); }
.bht-score-low  { color: var(--score-low); }


/* ============================================================
   LIST STYLES (for bht_render_list)
   ============================================================ */
.bht-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bht-list__item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-main);
}

.bht-list__icon {
    flex-shrink: 0;
    margin-top: 3px;
}

.bht-list__num {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    margin-top: 2px;
    min-width: 1.25rem;
}

.bht-list--primary .bht-list__icon,
.bht-list--primary .bht-list__num { color: var(--primary); }

.bht-list--accent .bht-list__icon,
.bht-list--accent .bht-list__num { color: var(--accent); }

.bht-list--muted .bht-list__icon,
.bht-list--muted .bht-list__num { color: var(--text-hint); }

.bht-list--danger .bht-list__icon,
.bht-list--danger .bht-list__num { color: var(--score-low); }

.bht-list--warning .bht-list__icon,
.bht-list--warning .bht-list__num { color: var(--score-mid); }


/* ============================================================
   SCORE BARS (for bht_render_score_bars)
   ============================================================ */
.bht-score-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bht-score-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bht-score-bar__label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    min-width: 100px;
}

.bht-score-bar__track {
    flex: 1;
    height: 6px;
    background: var(--bg-surface-alt);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.bht-score-bar__fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.bht-score-bar__fill--high { background: var(--score-high); }
.bht-score-bar__fill--mid  { background: var(--score-mid); }
.bht-score-bar__fill--low  { background: var(--score-low); }

.bht-score-bar__value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-hint);
    min-width: 28px;
    text-align: right;
}


/* ============================================================
   TABLE (for bht_render_table)
   ============================================================ */
.bht-table-wrapper {
    overflow-x: auto;
    margin: 1.5rem 0;
}

.bht-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.bht-table th {
    text-align: left;
    padding: 0.625rem 0.875rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-hint);
    background: var(--bg-surface-alt);
    border-bottom: 1px solid var(--border);
}

.bht-table td {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
}

.bht-table tbody th {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-main);
    text-transform: none;
    letter-spacing: 0;
}

.bht-table tr:last-child td,
.bht-table tr:last-child th { border-bottom: none; }

.bht-table tr:hover td,
.bht-table tr:hover th { background: var(--bg-surface-alt); }

/* Striped */
.bht-table--striped tbody tr:nth-child(even) td,
.bht-table--striped tbody tr:nth-child(even) th {
    background: var(--bg-surface-alt);
}

/* Bordered */
.bht-table--bordered {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.bht-table--bordered td,
.bht-table--bordered th {
    border-right: 1px solid var(--border);
}

.bht-table--bordered td:last-child,
.bht-table--bordered th:last-child { border-right: none; }

/* Compact */
.bht-table--compact th { padding: 0.5rem 0.75rem; }
.bht-table--compact td { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }


/* ============================================================
   MOBILE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
    .bht-p-lg  { padding: 1.25rem; }
    .bht-p-xl  { padding: 1.5rem; }
    .bht-r-xl  { border-radius: var(--r-lg, 16px); }

    .bht-score-bar__label { min-width: 80px; font-size: 0.75rem; }
}

@media (max-width: 480px) {
    .bht-p-md { padding: 1rem; }
    .bht-p-lg { padding: 1rem; }
}