/* reach/templates/portal_home.html — page styles.
 *
 * Moved out of the template. Declarations are as they were;
 * anything here that also exists in a shared stylesheet is a deliberate
 * or accidental override, and `scripts/css-redefinition-report.py`
 * lists them.
 */

@layer app {
.portal-hero {
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 60%, black) 100%);
color: white;
padding: var(--spacing-10) 0;
text-align: center;
}

.portal-hero .hero-title {
color: white;
margin-bottom: var(--spacing-2);
}

.portal-hero .hero-subtitle {
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0 auto;
}

.portal-services {
padding: var(--spacing-12) 0;
}

.section-title {
text-align: center;
margin-bottom: var(--spacing-8);
}

.portal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-6);
}

.portal-card {
background: white;
border: 1px solid var(--color-border);
border-radius: 8px;
padding: var(--spacing-8);
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
display: flex;
flex-direction: column;
}

.portal-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.portal-card-icon {
display: flex;
justify-content: center;
margin-bottom: var(--spacing-4);
color: var(--color-primary);
}

.portal-card h3 {
margin-bottom: var(--spacing-3);
color: var(--color-text);
}

.portal-card .text-muted {
margin-bottom: var(--spacing-6);
line-height: 1.5;
}

.portal-card-actions {
display: flex;
flex-direction: column;
margin-top: auto;
gap: var(--spacing-2);
}

.portal-card-actions .btn {
width: 100%;
}

.portal-card-emergency {
border-color: var(--color-danger);
background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 5%, white), white);
}

.portal-card-emergency .portal-card-icon {
color: var(--color-danger);
}

.btn-large {
padding: var(--spacing-4) var(--spacing-8);
font-size: var(--font-size-xl);
}

.portal-about {
padding: var(--spacing-12) 0;
background: var(--color-bg-subtle);
margin-top: var(--spacing-8);
}

.about-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}

.about-content h2 {
margin-bottom: var(--spacing-4);
}

.about-content p {
color: var(--color-text-muted);
line-height: 1.7;
}

.stat-icon {
display: flex;
justify-content: center;
margin-bottom: var(--spacing-2);
color: var(--color-primary);
}

.about-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-6);
margin-top: var(--spacing-8);
}

/* The hotline number stays on one line */
.btn-hotline {
white-space: nowrap;
}

.stat-label {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}

}