/* /pages/home.css
 *
 * Home page only. Everything page-shared lives in the design system; this
 * file owns the home-specific layout (the hero band, the specialties grid,
 * and the "how it works" three-step strip).
 */

/* ============================================================================
 * Section helpers — only used on the home page (kept here, not promoted)
 * ============================================================================ */

.home-section-title {
    text-align: center;
    margin: var(--space-12) 0 var(--space-2);
    font-size: var(--font-xxl);
}

.home-section-sub {
    text-align: center;
    color: var(--color-brown-deep);
    margin: 0 auto var(--space-8);
    max-width: 36em;
    font-size: var(--font-md);
}

/* ============================================================================
 * Specialties grid
 * ============================================================================ */

.home-specialties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
    margin: var(--space-12) auto;
}

.home-specialty-card {
    background: linear-gradient(to bottom, var(--color-brown-soft), var(--color-brown-cream));
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-brown-deep);
    transition: background var(--transition-base),
    transform   var(--transition-base),
    box-shadow  var(--transition-base);
}

.home-specialty-card:hover {
    background: linear-gradient(to bottom, var(--color-brown-warm), var(--color-brown-cream));
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.home-specialty-card:hover h3 {
    color: var(--color-brown-cream);
    transform: color var(--transition-base);
}

.home-specialty-card h3 {
    margin: 0 0 var(--space-2) 0;
    color: var(--color-brown-deep);
    font-size: var(--font-xl);
}

.home-specialty-card p {
    margin: 0;
    color: var(--color-brown-deep);
}

/* ============================================================================
 * Responsive
 * ============================================================================ */

@media (max-width: 640px) {
    .home-section-title {
        font-size: var(--font-xl);
        margin-top: var(--space-8);
    }
}