/* ============================================================
   LIPIKA — contact.css
   Contact page layout & sidebar treatments
   ============================================================ */

.contact-hero{padding:calc(var(--nav-h) + 64px) 0 24px;text-align:center;background:var(--grad-soft)}
.contact-hero p{max-width:500px;margin:14px auto 0}

.contact-layout{
  display:grid;grid-template-columns:1.35fr .85fr;gap:36px;
  align-items:start;margin-top:48px;padding-bottom:96px;
}

/* Form card — warm manuscript feel */
.contact-form-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-l);padding:38px;box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.contact-form-card::before{ /* Pattachitra crown */
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 12px,var(--gold) 12px 24px,var(--ink) 24px 30px);
  opacity:.5;
}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

/* Success state */
.form-success{
  display:none;text-align:center;padding:48px 24px;
}
.form-success.show{display:block;animation:pop-in .5s var(--ease)}
.form-success .fs-icon{
  width:72px;height:72px;margin:0 auto 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--success) 13%,transparent);
  color:var(--success);border:2px dotted var(--success);
}
.form-success .fs-icon svg{width:32px;height:32px}
.form-success h3{margin-bottom:8px}

/* Sidebar cards — darker scholarly treatment */
.contact-side{display:flex;flex-direction:column;gap:18px}
.side-card{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;
  display:flex;gap:16px;align-items:flex-start;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
  background-image:repeating-linear-gradient(180deg,transparent 0 28px,var(--line-faint) 28px 29px);
}
.side-card:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.side-card .sc-icon{
  flex:none;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
}
.side-card .sc-icon svg{width:20px;height:20px}
.side-card h4{margin-bottom:4px}
.side-card p{font-size:.86rem}
.side-card a.link-accent{font-size:.86rem}

/* Response indicator */
.resp-indicator{
  display:flex;align-items:center;gap:10px;
  border:1px dashed var(--border-strong);border-radius:12px;
  padding:14px 18px;font-size:.86rem;color:var(--text-muted);
}
.resp-indicator .pulse{
  width:9px;height:9px;border-radius:50%;background:var(--success);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 45%,transparent);
  animation:resp-pulse 2.2s ease-out infinite;
}
@keyframes resp-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 45%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* Socials */
.social-row{display:flex;gap:10px}
.social-row a{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);color:var(--text-muted);background:var(--surface);
  transition:all .25s var(--ease);
}
.social-row a svg{width:18px;height:18px}
.social-row a:hover{color:#FFF8F0;background:var(--grad-accent);border-color:transparent;transform:translateY(-3px)}