/* ========================================================
   LumaScape — Contact Page Styles
   ======================================================== */

/* Contact layout */
.contact-grid {
    display: grid; grid-template-columns: 1fr; gap: 64px;
}
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 96px; } }

/* Contact info */
.contact-info h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 400; line-height: 1.15;
    color: var(--charcoal); margin-bottom: 24px;
}
.contact-info > p {
    font-size: 16px; color: rgba(28,28,28,0.5);
    font-weight: 300; line-height: 1.7; margin-bottom: 48px;
    max-width: 480px;
}

.contact-details {
    display: flex; flex-direction: column; gap: 36px;
}
.contact-item {
    display: flex; gap: 20px; align-items: flex-start;
}
.contact-item-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--bone);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: rgba(28,28,28,0.45);
}
.contact-item-icon .material-symbols-outlined { font-size: 22px; font-weight: 300; }
.contact-item-label {
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(28,28,28,0.35); margin-bottom: 6px;
}
.contact-item-value {
    font-size: 16px; color: var(--charcoal);
    font-weight: 400; line-height: 1.6;
}
.contact-item-value a {
    transition: color 0.3s;
}
.contact-item-value a:hover { color: var(--forest); }

/* Social links */
.social-links {
    display: flex; gap: 16px; margin-top: 48px;
}
.social-link {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(28,28,28,0.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(28,28,28,0.5);
    transition: all 0.3s;
}
.social-link:hover {
    background: var(--charcoal); color: var(--cream);
    border-color: var(--charcoal);
}
.social-link .material-symbols-outlined { font-size: 20px; }

/* Contact form */
.contact-form-wrap {
    background: var(--bone);
    border-radius: 20px; padding: 48px 40px;
}
@media (min-width: 768px) { .contact-form-wrap { padding: 56px 48px; } }

.contact-form-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px; font-weight: 400;
    color: var(--charcoal); margin-bottom: 8px;
}
.contact-form-desc {
    font-size: 14px; color: rgba(28,28,28,0.45);
    font-weight: 300; margin-bottom: 36px;
}

.form-group { margin-bottom: 24px; }
.form-label {
    display: block; font-size: 12px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(28,28,28,0.45); margin-bottom: 8px;
}
.form-input,
.form-select,
.form-textarea {
    width: 100%; padding: 14px 18px;
    background: var(--cream); border: 1px solid rgba(28,28,28,0.08);
    border-radius: 12px; font-family: inherit;
    font-size: 15px; color: var(--charcoal);
    transition: border-color 0.3s;
    outline: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: rgba(28,28,28,0.2);
}
.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(28,28,28,0.3); font-weight: 300;
}
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231C1C1C' stroke-width='1.5' fill='none' opacity='0.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}
.form-textarea { resize: vertical; min-height: 120px; }

.form-row {
    display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

.btn-submit {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--forest); color: var(--cream);
    padding: 16px 36px; border-radius: 50px;
    font-size: 15px; font-weight: 500;
    font-family: inherit; cursor: pointer;
    border: none; transition: background 0.3s;
    margin-top: 8px;
}
.btn-submit:hover { background: rgba(31, 58, 46, 0.9); }
.btn-submit .material-symbols-outlined { font-size: 18px; transition: transform 0.3s; }
.btn-submit:hover .material-symbols-outlined { transform: translateX(4px); }

/* Map section */
.map-section { margin-top: 0; }
.map-wrap {
    border-radius: 20px; overflow: hidden;
    height: 400px; width: 100%;
    background: var(--bone);
}
.map-wrap iframe {
    width: 100%; height: 100%; border: 0;
}