/* ==========================================================================
   Contact page (page-contact.php)
   Scoped page styles - prefix .contact- - token variables only, no raw hexes.
   Shared vocabulary (.v-form, .v-field, .v-card, .v-faq, .v-btn...) lives in
   main.css and is never redefined here.
   ========================================================================== */

/* --- Split hero (paper) -------------------------------------------------- */
.contact-hero{position:relative;overflow:hidden;background:var(--paper);
  padding:calc(var(--header-h) + 72px) 0 104px}
.contact-hero::before{content:"";position:absolute;top:-340px;right:-200px;width:760px;height:760px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--violet) 7%,transparent) 0%,transparent 68%)}

.contact-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:68px;align-items:start}
.contact-intro .v-lead{max-width:520px;margin-top:20px}

/* --- Support channel rows ------------------------------------------------- */
.contact-channels{display:grid;gap:14px;margin-top:46px}
.contact-channel{display:flex;align-items:center;gap:18px;padding:20px 22px;text-decoration:none}
.contact-channel .v-card-ic{flex:0 0 auto;margin-bottom:0}
.contact-channel-txt{flex:1;min-width:0}
.contact-channel-txt b{display:block;font-family:var(--display);font-size:16.5px;font-weight:600;
  letter-spacing:-0.015em;color:var(--ink)}
.contact-channel-txt span{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--muted)}
.contact-channel > .v-arrow{flex:0 0 auto;color:var(--faint);transition:color .2s ease,transform .2s ease}
.contact-channel:hover > .v-arrow{color:var(--violet);transform:translateX(4px)}

/* --- Form panel ----------------------------------------------------------- */
@media (min-width:1025px){
  .contact-panel{position:sticky;top:calc(var(--header-h) + 28px)}
}

/* Success + error states (rendered server-side and by the form script) */
.contact-success{text-align:center;padding:40px 20px}
.contact-success h2{margin:0 0 12px;font-family:var(--display);font-size:24px;font-weight:700;
  letter-spacing:-0.02em;color:var(--ink)}
.contact-success p{margin:0;color:var(--text)}
.contact-success .v-btn{width:auto;display:inline-flex;margin-top:20px}

.contact-error{margin-bottom:18px;padding:13px 16px;border-radius:11px;font-size:14px;font-weight:500;
  color:var(--amber-d);
  background:color-mix(in srgb,var(--amber) 10%,var(--paper));
  border:1px solid color-mix(in srgb,var(--amber) 32%,var(--paper))}

.contact-docs-note{margin:22px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.contact-docs-note a{color:var(--violet-d);font-weight:600;text-decoration:none}
.contact-docs-note a:hover{text-decoration:underline}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1024px){
  .contact-hero{padding:calc(var(--header-h) + 56px) 0 88px}
  .contact-grid{grid-template-columns:1fr;gap:56px}
  .contact-intro .v-lead{max-width:640px}
}

@media (max-width:768px){
  .contact-hero{padding:calc(var(--header-h) + 44px) 0 72px}
  .contact-channels{margin-top:38px}
  .contact-channel{padding:18px}
}

@media (max-width:520px){
  .contact-hero{padding-bottom:64px}
  .contact-panel .v-form{padding:26px 20px}
  .contact-channel{gap:14px}
  .contact-channel .v-card-ic{width:44px;height:44px;border-radius:11px}
  .contact-channel .v-card-ic svg{width:21px;height:21px}
}

@media (prefers-reduced-motion:reduce){
  .contact-channel > .v-arrow{transition:none}
  .contact-channel:hover > .v-arrow{transform:none}
}