/* ── Homepage AI block-prompt section ─────────────────────────────
 *
 * Standalone section between Hero and "Wie es funktioniert".
 * Type a prompt → Gemma 4 on the DGX Spark generates a quilt-block
 * → user lands in the editor. Wired up in views/home.js.
 *
 * Visual: subtle tinted background that distinguishes it from the
 * white hero/grid sections without competing with the primary CTA.
 */

.ai-prompt-v2 {
    margin: 1.5rem 0 4rem;
    padding: 3rem 0;
    background: linear-gradient(180deg, #f7f4ee 0%, #f1ece2 100%);
    border-radius: 1.25rem;
}

.ai-prompt-v2-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

.ai-prompt-v2-eyebrow {
    display: inline-block;
    margin-bottom: .75rem;
}

.ai-prompt-v2-title {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.2;
    margin: 0 0 .75rem;
    color: #1f1c14;
}

.ai-prompt-v2-subtitle {
    font-size: 1.05rem;
    color: #555047;
    margin: 0 0 1.75rem;
    line-height: 1.45;
}

.ai-prompt-v2-form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: stretch;
}

.ai-prompt-v2-input {
    width: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid #d8d1c1;
    border-radius: .85rem;
    font: inherit;
    font-size: 1.05rem;
    line-height: 1.45;
    background: #fff;
    color: #1f1c14;
    resize: vertical;
    min-height: 4.5rem;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    box-sizing: border-box;
}
.ai-prompt-v2-input:focus {
    outline: none;
    border-color: #b8845c;
    box-shadow: 0 0 0 3px rgba(184, 132, 92, .18);
}
.ai-prompt-v2-input:disabled {
    background: #f4f1e9;
    color: #777;
    cursor: not-allowed;
}

.ai-prompt-v2-submit {
    align-self: center;
    min-width: 14rem;
    /* btn .btn-primary .btn-lg base styles inherited from app.css */
}
.ai-prompt-v2-submit.is-busy {
    opacity: .75;
    cursor: progress;
    /* Subtle pulsing while the worker churns; no spinner GIF, just
       a CSS animation so we don't have to ship another asset. */
    animation: ai-prompt-pulse 1.4s ease-in-out infinite;
}
@keyframes ai-prompt-pulse {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1px); }
}

.ai-prompt-v2-status {
    margin: 1.25rem 0 0;
    padding: .8rem 1rem;
    border-radius: .65rem;
    font-size: .95rem;
    line-height: 1.4;
}
.ai-prompt-v2-status-info {
    background: #ece6d5;
    color: #4a4234;
}
.ai-prompt-v2-status-success {
    background: #e0eed4;
    color: #2c4413;
}
.ai-prompt-v2-status-error {
    background: #f6dcd6;
    color: #6b2418;
}

.ai-prompt-v2-hint {
    margin: 1rem 0 0;
    font-size: .85rem;
    color: #8a8270;
}

/* Mobile — collapse padding & let textarea grow naturally. */
@media (max-width: 640px) {
    .ai-prompt-v2 {
        margin: 1rem 0 2.5rem;
        padding: 2rem 0;
        border-radius: 0;  /* edge-to-edge on phones */
    }
    .ai-prompt-v2-submit { width: 100%; }
}