/* contact.css. The Contact page (sartaba/contact.html). Used together with article.css. On a wide screen the details
   (e-mail, social links, what to include) sit on the left and the message form on the right, on a phone they stack. */

.sg-article.is-wide { width: min(100% - 2 * var(--space-4), 1120px); }
.sg-article-body.is-wide { max-width: none; }

.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (min-width: 960px) { .contact-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7); } }
.contact-details > .sg-article-section:first-child { border-top: 0; padding-top: 0; }
.contact-form-card { padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.contact-form-card h2 { margin-top: 0; }

.contact-form { display: grid; gap: 16px; }
.contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .contact-form-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-form label { display: grid; gap: 7px; color: var(--muted); font-size: .9rem; }
.contact-form label span { color: var(--text); font-weight: 700; }
.contact-form input, .contact-form select, .contact-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 12px 13px;
    color: var(--text);
    font: inherit;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-text); outline-offset: 1px; }
.contact-photo-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -6px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.contact-photo-tools[hidden] { display: none; }
.contact-photo-tools .ghost-button { flex: 0 0 auto; padding: 8px 12px; }
.contact-form-note, .contact-status { margin: 0; color: var(--muted); line-height: 1.6; }
.contact-status.is-success { color: var(--good); }
.contact-status.is-error { color: var(--danger); }

.email-image-link { display: inline-flex; align-items: center; max-width: 100%; margin-top: 8px; border-radius: 12px; }
.sg-article a.email-image-link { text-decoration: none; }
.email-image { display: block; max-width: min(100%, 365px); height: auto; }
.social-follow { margin-top: 14px; }
.social-follow__links { display: flex; flex-wrap: wrap; gap: 10px; }
.sg-article a.social-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; color: var(--text); font-size: .88rem; font-weight: 700; text-decoration: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
.sg-article a.social-link:hover { border-color: var(--accent); }
.social-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }