/* assets/css/contact.css */
@import './theme.css';

/* -------- Section background -------- */
.contact{
  position: relative;
  padding: clamp(2.75rem, 6vw, 5.5rem) 1rem clamp(2.5rem, 6vw, 5rem);
  background: radial-gradient(1000px 600px at 50% -10%, var(--bg-start) 0%, var(--bg-end) 100%);
}
[data-theme="dark"] .contact{
  background: radial-gradient(1400px 800px at 50% -10%,
              #0b0b0c 0%, #0f0f10 45%, #131315 75%, #161617 100%);
}

.ct-wrap{ max-width:1080px; margin:0 auto; }

/* -------- Header -------- */
.ct-header{ position:relative; text-align:center; margin-bottom: clamp(1.4rem, 3.6vw, 2.2rem); }
.ct-title{
  margin:0; font-size: clamp(1.6rem, 4vw, 2.25rem);
  font-weight:800; letter-spacing:-.01em; line-height:1.12;
}
.ct-sub{
  color:var(--text-muted); margin-top:.4rem; line-height:1.6;
  max-width: 44ch; margin-left:auto; margin-right:auto; text-wrap: balance;
}
/* chip (geen absolute posities meer) */
.ct-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:.6rem; padding:.34rem .68rem; border-radius:999px;
  font-weight:700; font-size:.92rem; color: var(--accent);
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent),
              0 6px 22px rgba(0,176,239,.18);
}

/* -------- Grid -------- */
.ct-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:720px){ .ct-grid{ grid-template-columns:1fr 1fr; } }

/* -------- Card -------- */
.ct-card{
  background: var(--glass);
  border: 1px solid rgba(127,127,127,.16);
  border-radius: 16px;
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 8px 28px var(--shadow);
  padding: clamp(1rem, 2.2vw, 1.25rem);
  display:grid; gap:.5rem;
  transform: translateY(10px); opacity:0;
  transition: transform .5s ease, opacity .5s ease, box-shadow .3s ease, filter .3s ease, border-color .3s ease;
}
.ct-card.in{ transform:none; opacity:1; }
.ct-card:hover{ box-shadow: 0 12px 36px var(--shadow); filter: saturate(105%); }

/* -------- Card head -------- */
.ct-top{ display:flex; align-items:center; gap:.6rem; }
.ct-ico{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  font-size:1.1rem; color:#fff; user-select:none;
  background: linear-gradient(180deg, var(--accent), #07c1ff);
  box-shadow: 0 4px 12px rgba(0,176,239,.45);
}
.ct-name{ font-size: clamp(1.05rem, 1.8vw, 1.2rem); font-weight:800; letter-spacing:-.01em; }

/* -------- Body -------- */
.ct-desc{ color:var(--text-muted); font-size:.95rem; line-height:1.55; }
.ct-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.25rem; }
.btn{
  display:inline-block; padding:.7rem 1.2rem; border-radius:999px;
  font-weight:600; text-decoration:none; transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.btn-primary{ color:#fff; background: var(--accent); box-shadow: 0 6px 20px rgba(0,176,239,.45); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,176,239,.6); }
.btn-ghost{ color: var(--accent); background: rgba(0,176,239,.1); }
.btn-ghost:hover{ background: rgba(0,176,239,.16); transform: translateY(-1px); }

/* -------- Small screens (Apple-clean) -------- */
@media (max-width: 700px){
  .ct-header{ text-align:left; padding:14px 16px 12px; margin-bottom:12px; }
  .ct-title{ font-size: clamp(1.45rem, 6.2vw, 1.8rem); }
  .ct-sub{
    max-width:30ch; margin:.25rem 0 .35rem;
    font-size: clamp(.95rem, 3.6vw, 1.05rem); line-height:1.45;
  }
  .ct-pill{ align-self:flex-start; margin-top:.05rem; }
  .ct-pill br{ display:none; }          /* chip 1 regel op mobiel */
  .ct-card{ border-radius:14px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ct-card{ transition:none !important; }
}

/* Safety: stacking */
#contact .ct-header{ isolation: isolate; }