/* ═══════════════════════════════════════════════════
   brick.news — Poll Widget
   ═══════════════════════════════════════════════════ */

.poll-widget {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 2rem 0;
}
.poll-question {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 1.25rem;
}
.poll-options {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.poll-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: .7rem 1rem;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: .88rem;
    color: var(--color-text);
    overflow: hidden;
    transition: border-color .2s;
    width: 100%;
}
.poll-option:hover {
    border-color: var(--color-primary);
}
.poll-option.poll-selected {
    border-color: var(--color-primary);
    background: rgba(64, 80, 181, 0.04);
}
.poll-option-label {
    position: relative;
    z-index: 1;
    font-weight: 500;
}
.poll-option-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(64, 80, 181, 0.1);
    border-radius: var(--radius) 0 0 var(--radius);
    transition: width .4s ease;
    z-index: 0;
}
.poll-selected .poll-option-bar {
    background: rgba(64, 80, 181, 0.15);
}
.poll-option-pct {
    position: relative;
    z-index: 1;
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-primary);
    min-width: 36px;
    text-align: right;
}
.poll-option-check {
    position: relative;
    z-index: 1;
    color: var(--color-primary);
    font-weight: 700;
    margin-left: .5rem;
}
.poll-option.poll-voted {
    cursor: default;
}
.poll-option.poll-voted:hover {
    border-color: var(--color-border);
}
.poll-option.poll-voted.poll-selected:hover {
    border-color: var(--color-primary);
}
.poll-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    font-size: .78rem;
    color: var(--color-text-3);
}
.poll-status {
    font-weight: 500;
    color: var(--color-text-2);
}

/* ── Inline poll inside article grid (spans 2 of 3 columns) ── */
.poll-card-inline {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
}
.poll-card-inline .poll-widget {
    flex: 1;         /* fills the card height to match adjacent article card */
    margin: 0;
    display: flex;
    flex-direction: column;
}
.poll-card-inline .poll-options {
    flex: 1;         /* push footer to bottom when there are few options */
}

@media (max-width: 768px) {
    /* On the 2-column tablet breakpoint, still span 2 columns */
    .poll-card-inline { grid-column: span 2; }
}

@media (max-width: 600px) {
    .poll-widget {
        padding: 1.15rem;
    }
    .poll-option {
        padding: .6rem .85rem;
        font-size: .82rem;
    }
    /* On single-column mobile, full width naturally */
    .poll-card-inline { grid-column: span 1; }
}