/* rally/templates/suite/landing.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 {
.landing-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, var(--color-primary)) 100%);
    color: white;
    text-align: center;
    padding: var(--spacing-12) var(--spacing-4);
}
.landing-hero-content { max-width: 760px; margin: 0 auto; }
.landing-hero-logo-card {
    margin-bottom: var(--spacing-4);
}
.landing-hero-logo {
    height: 64px; width: auto; max-width: 220px;
}
.landing-hero h1 {
    color: white; font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-2);
}
.landing-tagline { font-size: var(--font-size-xl); opacity: 0.92; margin-bottom: var(--spacing-6); }
.landing-hero-actions { display: flex; gap: var(--spacing-3); justify-content: center; flex-wrap: wrap; }
.landing-hero-actions .btn { min-width: 150px; }
.btn-white { background: white; color: var(--color-primary); border: none; font-weight: var(--font-weight-semibold); }
.btn-white:hover { background: var(--color-gray-100); }
.btn-outline-white { background: transparent; color: white; border: 2px solid rgba(255,255,255,.85); font-weight: var(--font-weight-semibold); }
.btn-outline-white:hover { background: rgba(255,255,255,.15); border-color: white; }

.landing-container { max-width: 1000px; margin: 0 auto; padding: var(--spacing-12) var(--spacing-4); flex: 1; }
.landing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-6); }
.landing-card {
    background: white; border-radius: var(--radius-lg); padding: var(--spacing-8);
    text-decoration: none; color: inherit; box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex; flex-direction: column;
}
.landing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.landing-card-icon {
    width: 52px; height: 52px; background: var(--color-gray-100); border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-4);
}
.landing-card-icon svg { width: 26px; height: 26px; color: var(--color-primary); }
.landing-card h3 { font-size: var(--font-size-xl); color: var(--color-gray-900); margin-bottom: var(--spacing-2); }
.landing-card p { color: var(--color-gray-600); margin-bottom: var(--spacing-4); flex: 1; }
.landing-card-link { color: var(--color-primary); font-weight: var(--font-weight-semibold); }

.landing-footer {padding: var(--spacing-8); background: var(--color-gray-100); color: var(--color-gray-600); }
.landing-footer a { color: var(--color-primary); font-weight: var(--font-weight-semibold); }

@media (max-width: 1023px) {
    .landing-hero { padding: var(--spacing-8) var(--spacing-4); }
    .landing-hero h1 { font-size: var(--font-size-2xl); }
    .landing-tagline { font-size: var(--font-size-base); }
    .landing-container { padding: var(--spacing-8) var(--spacing-4); }
}
@media (max-width: 767px) {
    .landing-hero { padding: var(--spacing-6) var(--spacing-4); }
    .landing-cards { grid-template-columns: 1fr; }
    .landing-card { padding: var(--spacing-6); }
    .landing-hero-actions .btn { flex: 1 1 auto; }
}
}