/* =================================================================
   CONTACT PAGE STYLES
   ================================================================= */

/* ---------------------------- INFO CARDS ---------------------------- */
.contact-info__row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.info-card{
  text-align: center;
  background: linear-gradient(160deg, var(--jade-surface), var(--obsidian-2));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: transform var(--t-med) var(--ease-premium), border-color var(--t-med);
}
.info-card:hover{ transform: translateY(-5px); border-color: var(--gold-dim); }
.info-card i{ font-size: 1.7rem; color: var(--gold-light); margin-bottom: var(--space-sm); }
.info-card h3{ font-size: 1rem; margin-bottom: 8px; }
.info-card__value{ color: var(--ivory-dim); font-size: 0.92rem; word-break: break-word; margin-bottom: var(--space-sm); }
.info-card__note{ font-size: 0.78rem; color: var(--ivory-faint); }
.copy-btn{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 700; color: var(--gold-light);
  border: 1px solid rgba(227,164,49,0.35);
  padding: 6px 14px; border-radius: var(--radius-full);
  transition: all var(--t-fast);
}
.copy-btn:hover{ background: rgba(227,164,49,0.1); }
.copy-btn.is-copied{ color: var(--gold-light); border-color: var(--gold-light); }
@media (max-width: 780px){ .contact-info__row{ grid-template-columns: 1fr; } }

/* ---------------------------- FORM + SIDEBAR ---------------------------- */
.contact-main__grid{ display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-2xl); align-items: start; }
.contact-form{ padding: var(--space-xl); }
.contact-form form{ margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.field{ display: flex; flex-direction: column; gap: 8px; position: relative; }
.field label{ font-size: 0.82rem; font-weight: 700; color: var(--ivory-dim); }
.field__label-row{ display: flex; justify-content: space-between; align-items: baseline; }
.char-counter{ font-size: 0.72rem; color: var(--ivory-faint); }
.field input, .field select, .field textarea{
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  color: var(--ivory);
  transition: border-color var(--t-fast);
  resize: vertical;
}
.field select{ cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--gold); }
.field input::placeholder, .field textarea::placeholder{ color: var(--ivory-faint); }
.field__error{ display: none; font-size: 0.76rem; color: var(--garnet-glow); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea{ border-color: var(--garnet-glow); }
.field.is-invalid .field__error{ display: block; }

.contact-sidebar{ display: flex; flex-direction: column; gap: var(--space-md); }
.contact-sidebar .gem-card{ padding: var(--space-lg); }
.contact-sidebar h3{ font-size: 1.05rem; margin-bottom: 6px; }
.clock-widget{
  margin-top: var(--space-md);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}
.clock-widget__status{ font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.clock-widget__status::before{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ivory-faint); }
.clock-widget__status.is-open{ color: var(--emerald-glow); }
.clock-widget__status.is-open::before{ background: var(--emerald-glow); animation: pulseGlow 1.6s ease-in-out infinite; }
.clock-widget__status.is-closed{ color: var(--ivory-faint); }
.clock-widget__status.is-closed::before{ background: var(--garnet-glow); }
.clock-widget__time{ font-family: var(--font-emblem); color: var(--gold-light); font-size: 0.95rem; }

.social-row{ display: flex; gap: 10px; margin-top: var(--space-md); flex-wrap: wrap; }
.social-row a{
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
.social-row a:hover{ border-color: var(--gold); color: var(--gold-light); transform: translateY(-3px); }

@media (max-width: 900px){
  .contact-main__grid{ grid-template-columns: 1fr; }
  .field-row{ grid-template-columns: 1fr; }
}

/* ---------------------------- MAP PLACEHOLDER ---------------------------- */
.map-placeholder{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  height: 380px;
}
.map-placeholder svg{ width: 100%; height: 100%; display: block; }
.map-placeholder__tag{
  position: absolute;
  left: var(--space-lg); bottom: var(--space-lg);
  display: flex; align-items: center; gap: var(--space-md);
  background: rgba(11,4,16,0.82);
  backdrop-filter: blur(14px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  max-width: 90%;
  flex-wrap: wrap;
}
.map-placeholder__tag i{ font-size: 1.4rem; color: var(--garnet-glow); }
.map-placeholder__tag strong{ display: block; font-family: var(--font-display); font-size: 1rem; }
.map-placeholder__tag span{ font-size: 0.82rem; color: var(--ivory-dim); }
@media (max-width: 560px){
  .map-placeholder{ height: 320px; }
  .map-placeholder__tag{ flex-direction: column; align-items: flex-start; text-align: left; }
}