/*
|--------------------------------------------------------------------------
| FILE PATH:
| /home/mahaupsi/public_html/assets/public/css/voices.css
|
| FILE PURPOSE:
| Page-specific styling for the Maha Shikshan Awaaz Public Voices page.
|
| Displays only approved public submissions while respecting
| anonymous-display preferences.
|--------------------------------------------------------------------------
*/


/* =========================================================
   VOICES SUMMARY
   ========================================================= */

.voices-summary {
    margin-bottom: var(--space-6);
}


/* =========================================================
   VOICES LIST
   ========================================================= */

.voices-list {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-4);
}


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

.voice-card {
    background: var(--card-bg);

    border:
        1px solid
        var(--card-border);

    border-radius: var(--radius-lg);

    box-shadow: var(--card-shadow);

    overflow: hidden;
}

.voice-card-body {
    padding: var(--space-5);
}


/* =========================================================
   VOICE HEADER
   ========================================================= */

.voice-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--space-4);
}

.voice-clause {
    color: var(--text-primary);

    font-size: var(--font-lg);
    font-weight: 700;

    line-height: 1.35;
}

.voice-meta {
    margin-top: var(--space-1);

    color: var(--text-muted);

    font-size: var(--font-sm);
}


/* =========================================================
   POSITION
   ========================================================= */

.voice-position {
    flex: 0 0 auto;
}


/* =========================================================
   VOICE TEXT
   ========================================================= */

.voice-text {
    width: 100%;

    margin:
        var(--space-4)
        0
        0;

    padding: 0;

    color: var(--text-primary);

    font-size: var(--font-md);
    line-height: 1.65;

    white-space: normal;
}


/* =========================================================
   FOOTER META
   ========================================================= */

.voice-footer {
    margin-top: var(--space-5);

    padding-top: var(--space-3);

    border-top:
        1px solid
        var(--border-color);

    color: var(--text-muted);

    font-size: var(--font-xs);
}


/* =========================================================
   POSITION PILLS
   ========================================================= */

.voice-position--object {
    background: var(--danger-bg);
    color: var(--danger-text);

    border:
        1px solid
        var(--danger-border);
}

.voice-position--support {
    background: var(--success-bg);
    color: var(--success-text);

    border:
        1px solid
        var(--success-border);
}

.voice-position--modify {
    background: var(--warning-bg);
    color: var(--warning-text);

    border:
        1px solid
        var(--warning-border);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 599px) {

    .voice-card-body {
        padding: var(--space-4);
    }

    .voice-header {
        flex-direction: column;
    }

    .voice-position {
        align-self: flex-start;
    }
}