/* ================================================================
   PUBLIC SEO FEATURE PAGES
   Styles shared across /features/* public marketing pages.
   Intentionally kept in a standalone file to avoid polluting app.css.
   ================================================================ */

.seo-feature-page {
    display: flex;
    flex-direction: column;
    gap: var(--tw-space-5);
    padding: 0;
}

.seo-feature-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--tw-space-2);
}

.seo-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--tw-space-3);
}

.seo-feature-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 100%;
    padding: 1rem 1rem 1.05rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.93));
}

.seo-feature-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.seo-feature-card h3 {
    margin: 0;
    color: var(--tw-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.seo-feature-card p {
    margin: 0;
    color: var(--tw-text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
}

.seo-feature-link-card {
    color: inherit;
    text-decoration: none;
    transition:
        border-color var(--tw-transition-fast),
        box-shadow var(--tw-transition-fast),
        transform var(--tw-transition-fast);
}

.seo-feature-link-card:hover,
.seo-feature-link-card:focus-visible {
    border-color: color-mix(in srgb, var(--tw-shell-accent) 32%, var(--tw-border));
    box-shadow: var(--tw-shadow-sm);
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
}

[data-bs-theme=dark] .seo-feature-card {
    border-color: rgba(71, 85, 105, 0.72);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--tw-shell-workspace-bg, #101828) 84%, transparent),
            color-mix(in srgb, var(--tw-shell-workspace-bg, #101828) 74%, transparent));
}

@media (max-width: 640px) {
    .seo-feature-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .seo-feature-actions .btn {
        width: 100%;
    }
}