/* reach/templates/siteinfo/landing.html: every active response, with where
 * its volunteer sites are. Re-creates the layout the page had under
 * public.css, which public_base.html does not load.
 */

@layer app {

.notice-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-6) var(--spacing-4) var(--spacing-12);
}

.notice-header {
    margin-bottom: var(--spacing-8);
}

.notice-header h1 {
    margin: 0 0 var(--spacing-1);
    font-size: 1.75rem;
    color: var(--color-gray-900);
}

.notice-subtitle {
    margin: 0;
    color: var(--color-gray-500);
}

.incident-list {
    display: grid;
    gap: var(--spacing-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.incident-card {
    display: block;
    padding: var(--spacing-6);
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    color: inherit;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.incident-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    text-decoration: none;
}

.incident-card-title {
    margin: 0 0 var(--spacing-1);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
}

.incident-card-location,
.incident-card-meta {
    margin: 0 0 var(--spacing-1);
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}

.incident-card-sites {
    margin: var(--spacing-2) 0 var(--spacing-1);
    color: var(--color-gray-700);
}

.incident-card .btn {
    margin-top: var(--spacing-4);
}

@media (max-width: 640px) {
    .notice-header h1 {
        font-size: var(--font-size-2xl);
    }
}

}