/* Wepic — contact page (/contact/). */

.contact__grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .contact__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 6vw, 88px); } }

/* Contact options */
.contact-methods { display: grid; gap: 12px; }
.contact-method {
	display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius-lg);
	background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink);
	transition: box-shadow .2s, transform .2s;
}
.contact-method:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-2px); }
.contact-method > .icon:last-child { margin-left: auto; color: var(--muted); transition: transform .2s, color .2s; }
.contact-method:hover > .icon:last-child { color: var(--ink); transform: translateX(3px); }
.contact-method__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: rgb(201 120 20 / 0.12); color: var(--accent-text); }
.contact-method__text { display: grid; gap: 2px; min-width: 0; }
.contact-method__label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact-method__value { font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.contact-method--primary { background: var(--charcoal); box-shadow: none; color: var(--white); }
.contact-method--primary:hover { color: var(--white); box-shadow: 0 14px 30px rgb(0 0 0 / 0.18); }
.contact-method--primary .contact-method__icon { background: var(--accent); color: var(--black); }
.contact-method--primary .contact-method__label, .contact-method--primary > .icon:last-child, .contact-method--primary:hover > .icon:last-child { color: rgb(255 255 255 / 0.7); }

.contact-social { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.contact-social__title { margin: 0; color: var(--ink); font-weight: 700; }
.contact-social .social { margin: 0 !important; }
.contact-social .social a { box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.contact-social .social a:hover { background: var(--charcoal); color: var(--white); box-shadow: none; }

/* Form */
.contact-form-card { padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--sand); scroll-margin-top: calc(var(--header-h) + 20px); }
.contact-form-card__title { margin-bottom: 20px; font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.4rem); }
.contact-form { display: grid; gap: 16px; }
.contact-form__row { display: grid; gap: 16px; }
@media (min-width: 600px) { .contact-form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; margin: 0; }
.field label { color: var(--ink); font-weight: 600; font-size: .9rem; }
.field__required { color: var(--accent-text); }
.field :is(input, textarea) {
	width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--white); color: var(--ink); font-size: 1rem; transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field :is(input, textarea):focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgb(201 120 20 / 0.25); outline: none; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__submit { justify-self: start; min-width: 220px; }
@media (max-width: 599px) { .contact-form__submit { width: 100%; } }

/* Store */
.contact-store__grid { display: grid; gap: 28px; align-items: center; }
.contact-store__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.contact-store .section-title { margin-bottom: 24px; }
@media (min-width: 900px) { .contact-store__grid { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); } }