/**
 * bemvindo_feedback_318.css
 * Feedback #318 — melhorias de legibilidade e modal de anúncios na home.
 * v1.0 (2026-08-04): cards de anúncios sem corte abrupto + cards de temporadas mais largos.
 */

#mainContainer #activeSeasonsContainer .seasons-grid,
#mainContainer #openSeasonsNotEnrolledContainer .seasons-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

#mainContainer .announcements-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

#mainContainer .announcement-card-welcome {
    width: 100%;
    text-align: left;
    cursor: pointer;
    appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

#mainContainer .announcement-card-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    line-height: 1.45;
    min-height: calc(1em * 1.45 * 2);
    color: var(--color-text-primary);
}

#mainContainer .announcement-card-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-accent);
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 0.25rem;
}

.announcement-modal-body .report-modal-text {
    max-height: 62vh;
    overflow-y: auto;
}

.announcement-modal-loading-body {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    color: var(--color-text-primary);
}

.announcement-modal-loading-spinner {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 3px solid rgba(var(--color-accent-rgb, 212, 255, 0), 0.2);
    border-top-color: var(--color-accent);
    animation: announcement-spin 0.8s linear infinite;
}

.announcement-modal-footer {
    justify-content: flex-end;
    gap: 0.6rem;
}

@keyframes announcement-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 1024px) {
    #mainContainer #activeSeasonsContainer .seasons-grid,
    #mainContainer #openSeasonsNotEnrolledContainer .seasons-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    }
}

@media (max-width: 768px) {
    #mainContainer .announcements-grid,
    #mainContainer #activeSeasonsContainer .seasons-grid,
    #mainContainer #openSeasonsNotEnrolledContainer .seasons-grid {
        grid-template-columns: 1fr;
    }

    .announcement-modal-footer {
        flex-direction: column-reverse;
    }

    .announcement-modal-footer .rival-button {
        width: 100%;
        justify-content: center;
    }
}