/*
 * Informado foundation primitives.
 * These are structural components, not the editorial cards that arrive in V6.
 */

.informado-stack {
    display: flex;
    flex-direction: column;
    gap: var(--informado-stack-gap, var(--informado-space-5));
}

.informado-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--informado-cluster-gap, var(--informado-space-4));
}

.informado-section {
    padding-block: var(--informado-section-space, var(--informado-space-7));
}

.informado-surface {
    background: var(--informado-color-surface-soft);
}

.informado-rule {
    width: 100%;
    height: var(--informado-border-width);
    border: 0;
    margin: 0;
    background: var(--informado-color-border);
}

.informado-button {
    min-height: var(--informado-control-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--informado-space-2);
    padding: 0.7rem 1rem;
    border: 1px solid var(--informado-color-black);
    border-radius: var(--informado-radius-sm);
    background: var(--informado-color-black);
    color: var(--informado-color-white);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--informado-duration-fast) var(--informado-ease-standard),
        color var(--informado-duration-fast) var(--informado-ease-standard),
        border-color var(--informado-duration-fast) var(--informado-ease-standard);
}

.informado-button:hover {
    border-color: var(--informado-color-red);
    background: var(--informado-color-red);
    color: var(--informado-color-white);
}

.informado-button:disabled,
.informado-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

.informado-meta {
    color: var(--informado-color-muted);
    font-size: var(--informado-font-size-sm);
    line-height: 1.4;
}

.informado-empty-state {
    max-width: 44rem;
    padding-block: var(--informado-space-7);
}