/* ============================================================
   LUMOS — Contact page
   ============================================================ */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

/* ── Info column ─────────────────────────────────────────── */

.contact-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  margin-bottom: 4px;
}
.contact-value {
  font-size: 14px;
  line-height: 1.75;
  opacity: 0.75;
  margin-bottom: 28px;
}
.contact-value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(200,169,106,0.35);
  transition: border-color var(--duration-fast) ease;
}
.contact-value a:hover { border-color: var(--champagne); }

/* ── Map ─────────────────────────────────────────────────── */

.map-placeholder {
  height: 420px;
  border: var(--border-champ);
  overflow: hidden;
  position: sticky;
  top: 100px; /* theo scroll của cột info bên trái */
}

.map-placeholder iframe {
  filter: grayscale(0.85) sepia(0.25) brightness(0.88) contrast(0.92);
  transition: filter 600ms ease;
}

.map-placeholder:hover iframe {
  filter: grayscale(0.4) sepia(0.2) brightness(0.95) contrast(0.95);
}

/* ── Booking form ─────────────────────────────────────────── */

.booking-form { margin-top: 0; }
.booking-form h2 {
  font-size: clamp(32px, 4vw, 52px);
  margin-bottom: 44px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}
.form-grid .form-group--full { grid-column: 1 / -1; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--champagne);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(26,23,20,0.18);
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  outline: none;
  transition: border-color var(--duration-fast) ease;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-bottom-color: var(--champagne);
}
.form-group textarea {
  resize: none;
  height: 90px;
}
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23C8A96A' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 20px;
  cursor: pointer;
}
.form-group select option { background: var(--ivory); }

.form-note {
  font-size: 12px;
  opacity: 0.45;
  margin-top: 28px;
  line-height: 1.65;
}

/* Tablet */
@media (max-width: 1024px) {
  .contact-layout { gap: 48px; }
  .map-placeholder { height: 320px; position: static; }
}

/* Mobile */
@media (max-width: 768px) {
  .contact-layout { grid-template-columns: 1fr; gap: 0; }
  .map-placeholder {
    height: 260px;
    margin-bottom: 48px;
    order: -1; /* map hiện trên thông tin trên mobile */
    position: static;
  }
  .form-grid { grid-template-columns: 1fr; gap: 20px; }
  .form-grid .form-group--full { grid-column: auto; }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; } /* prevent iOS zoom */
}
@media (max-width: 480px) {
  .map-placeholder { height: 220px; }
}