/* Contact page. Shared nav/reveal/overlay rules live in style.css; fields/buttons in components.css. */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: start;
}
.contact-mail { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 3px; }
.contact-mail:hover { text-decoration-color: var(--p-base); }

.contact-panel {
    padding: 3.5rem;
    border-radius: 24px;
    background: rgba(15, 15, 15, 0.6);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}
.contact-title {
    margin-bottom: 2rem;
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
}
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.contact-form .field textarea { resize: vertical; }

.form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}
.form-actions .btn { margin-left: auto; min-width: 11rem; }
.form-status { font-size: 0.85rem; color: var(--text-muted); flex: 1 1 14rem; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--danger-text); }

.contact-sent { text-align: left; }
.contact-sent:not([hidden]) { animation: sent-in var(--dur-med) var(--ease-out); }
.contact-sent .contact-title { margin-bottom: 0.75rem; outline: none; }
.contact-sent__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background: rgba(60, 207, 145, 0.14);
    border: 1px solid rgba(60, 207, 145, 0.4);
    color: var(--ok);
    font-size: 1.3rem;
}
.contact-sent__body { color: var(--text-muted); line-height: 1.7; margin-bottom: 1.75rem; overflow-wrap: anywhere; }
@keyframes sent-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
    .contact-panel { padding: 2rem 1.5rem; }
    .contact-title { font-size: 1.8rem; }
    .contact-form .form-row { grid-template-columns: 1fr; }
    .form-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .contact-sent:not([hidden]) { animation: none; }
}