/* css/v5-blocks.css */

/* ============================================================
   BLOCKS — каркасы-обёртки (card, section)
   Внутри используются frame-* + утилиты
   ============================================================ */

/* ============================================================
   CARD
   ============================================================ */

.v5-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: var(--v5-border-width) solid var(--v5-primary-base);
    border-radius: var(--v5-radius);
    transition: all 0.2s ease;
    flex-shrink: 0;
    overflow: hidden;


}

.v5-card--fixed {
    width: var(--v5-card-fix-width);
    min-width: var(--v5-card-fix-width);
    max-width: var(--v5-card-fix-width);
    flex-shrink: 0;
    flex-grow: 0;
}

.v5-card--clickable {
    cursor: pointer;
}

.v5-card.v5-selected {
    border-width: 2px;
    background: color-mix(in srgb, var(--v5-primary-base) 15%, transparent);
}

/* ============================================================
   CARD — строки и тело
   ============================================================ */

.v5-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--v5-gap-min);
    padding: var(--v5-padding);
}

.v5-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v5-gap-min);
    font-size: var(--v5-font-normal);
}

/* Стек: текст сверху (слева), значение снизу (справа) */
.v5-card-row--stack {
    flex-direction: column;
    align-items: stretch;
    gap: var(--v5-gap-min);
}

.v5-card-row--stack > span {
    text-align: left;
}

.v5-card-row--stack > strong {
    text-align: right;
    align-self: flex-end;
}

.v5-card-row--divider {
    border-top: var(--v5-border-width) dashed var(--v5-primary-base);
    padding-top: var(--v5-gap-min);
}

.v5-card-row--total {
    border-top: var(--v5-border-width) solid var(--v5-primary-base);
    padding-top: var(--v5-gap-normal);
    font-size: var(--v5-font-normal);
}

@media (hover: hover) {
    .v5-card--clickable:hover:not(.v5-selected) {
        filter: brightness(0.95);
    }
}

/* ============================================================
   SECTION
   ============================================================ */

.v5-section {
    display: flex;
    flex-direction: column;
    background: var(--v5-primary-bg);
    border: var(--v5-border-width) solid var(--v5-primary-base);
    border-radius: var(--v5-radius);

    overflow: hidden;
    flex-shrink: 0;


}

.v5-section--fill {
    height: 100%;
    min-height: calc(60px * var(--v5-scale));

}