/* Contactpagina: hero met draaiende plaat, liedje aanvragen, contactpersonen,
   openingsuren met live status, contactformulier */

.section--tight { padding-top: 0; }

/* ---------- Hero ---------- */

.contact-hero {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(32px, 7vw, 88px) 0 clamp(48px, 7vw, 88px);
}
@media (min-width: 900px) {
  .contact-hero { grid-template-columns: 1.1fr 0.9fr; }
}
.contact-hero .lead { max-width: 44ch; }

/* Live status: "Nu open", "Telefonisch bereikbaar tot 19u", "Gesloten" */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--dj-surface-glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 14px -6px rgba(30, 30, 30, 0.2);
  color: var(--dj-ink);
  font-size: var(--fs-small);
  font-weight: 500;
}
.status__dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2FA84F;
}
.status[data-state="phone"] .status__dot { background: var(--dj-amber); }
.status[data-state="closed"] .status__dot { background: #A7A29B; }
.status:not([data-state="closed"]) .status__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  color: inherit;
  opacity: 0;
  animation: dj-status-pulse 2s var(--ease-out) infinite;
}
.status[data-state="open"] .status__dot::after { color: #2FA84F; }
.status[data-state="phone"] .status__dot::after { color: var(--dj-amber); }
@keyframes dj-status-pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  80%, 100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- Draaiende plaat ---------- */

.record {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  margin: 0 auto;
}
.record__glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 128, 255, 0.35), rgba(0, 128, 255, 0) 70%);
  filter: blur(24px);
  animation: dj-glow 3.2s ease-in-out infinite alternate;
}
@keyframes dj-glow { from { opacity: 0.45; transform: scale(0.96); } to { opacity: 0.9; transform: scale(1.04); } }
.record__disc,
.record__sheen {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  filter: drop-shadow(0 24px 30px rgba(30, 30, 30, 0.3));
}
.record__disc { animation: dj-spin 3.6s linear infinite; }   /* ± 33⅓ toeren, maar rustiger */
.record__sheen { filter: none; mix-blend-mode: screen; }
@keyframes dj-spin { to { transform: rotate(360deg); } }

.record__arm {
  position: absolute;
  right: -4%;
  top: -2%;
  width: 42%;
  transform-origin: 75% 13%;
  transform: rotate(-18deg);
  animation: dj-arm-in 1.4s var(--ease-out) 0.4s forwards;
  filter: drop-shadow(0 8px 10px rgba(30, 30, 30, 0.25));
}
/* De naald zakt op de plaat bij het laden */
@keyframes dj-arm-in { to { transform: rotate(4deg); } }

/* Noten die opstijgen en vervagen */
.record__note {
  position: absolute;
  left: calc(58% + var(--n) * 7%);
  top: 38%;
  color: var(--dj-blue);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  opacity: 0;
  animation: dj-note 4.8s ease-out infinite;
  animation-delay: calc(var(--n) * 1.2s + 1.6s);
}
.record__note:nth-of-type(2n) { color: var(--dj-amber); }
@keyframes dj-note {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-8deg) scale(0.8); }
  15%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(40px, -150px) rotate(14deg) scale(1.15); }
}

/* ---------- Liedje aanvragen ---------- */

.song {
  display: grid;
  gap: var(--space-4) var(--space-5);
  align-items: center;
  padding: clamp(22px, 3vw, 32px);
}
@media (min-width: 700px) {
  .song { grid-template-columns: auto 1fr auto; }
}
.song > * { position: relative; z-index: 1; }
.song__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(0, 128, 255, 0.1);
  color: var(--dj-blue);
}
.song__title {
  margin: 0 0 var(--space-1);
  color: var(--dj-ink);
  font-size: 1.25rem;
  font-weight: 600;
}
.song__copy p { margin: 0; color: var(--dj-text-muted); }
.song__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--dj-blue);
  color: var(--dj-white);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.song__cta:hover { background: var(--dj-blue-hover); box-shadow: var(--shadow-cta); transform: translateY(-1px); }

/* ---------- Contactpersonen ---------- */

.team {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.person {
  display: grid;
  justify-items: center;
  padding: 28px 20px 24px;
  text-align: center;
  transition: transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out);
}
.person > * { position: relative; z-index: 1; }
.js .person[data-reveal].is-settled:hover,
.no-js .person:hover { transform: translateY(-4px); }
.person__avatar {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: linear-gradient(145deg, #3399ff, #0066cc);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 10px 22px -8px rgba(0, 128, 255, 0.55);
  color: var(--dj-white);
  font-family: var(--font-label);
  font-size: 2.4rem;
  line-height: 1;
  overflow: hidden;
  transition: transform 450ms var(--ease-out);
}
.person__avatar img { width: 100%; height: 100%; object-fit: cover; }
.person:hover .person__avatar { transform: scale(1.06) rotate(-3deg); }
.person__name { margin: 0; color: var(--dj-ink); font-size: 1.25rem; font-weight: 600; }
.person__role { margin: 2px 0 var(--space-4); color: var(--dj-amber); font-size: var(--fs-small); font-weight: 500; }
.person__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(0, 128, 255, 0.08);
  color: var(--dj-blue);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
/* Telefoon-icoon (SVG als masker, kleurt mee) */
.person__phone::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.person__phone:hover { background: var(--dj-blue); color: var(--dj-white); }

.mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: clamp(28px, 4vw, 44px);
}
.mail__label { color: var(--dj-text-muted); }
.mail__address {
  color: var(--dj-blue);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size 400ms var(--ease-out);
}
.mail__address:hover { background-size: 100% 1.5px; }
.mail__copy {
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(30, 30, 30, 0.06);
  color: var(--dj-text);
  font: 500 0.8125rem / 1 var(--font-ui);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.mail__copy:hover { background: rgba(30, 30, 30, 0.1); }
.mail__copy.is-done { background: var(--dj-amber-soft); color: var(--dj-amber); }

/* ---------- Openingsuren ---------- */

.hours { max-width: 640px; padding: clamp(12px, 2vw, 20px) clamp(16px, 3vw, 28px); }
.hours > * { position: relative; z-index: 1; }
.hours__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.hours__table th,
.hours__table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(30, 30, 30, 0.07);
}
.hours__table tr:last-child th,
.hours__table tr:last-child td { border-bottom: 0; }
.hours__table thead th {
  padding-top: 8px;
  color: var(--dj-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hours__table tbody th { color: var(--dj-ink); font-weight: 500; }
.hours__table tbody td:nth-child(2) { color: var(--dj-blue); font-weight: 600; }
.hours__table tbody td:nth-child(3) { color: var(--dj-amber); font-size: var(--fs-small); font-weight: 500; }
.hours__table .is-closed th,
.hours__table .is-closed td { color: var(--dj-text-muted) !important; font-weight: 400; }
/* Vandaag gemarkeerd */
.hours__table .is-today th,
.hours__table .is-today td { background: rgba(0, 128, 255, 0.07); }
.hours__table .is-today th { border-radius: 10px 0 0 10px; }
.hours__table .is-today td:last-child { border-radius: 0 10px 10px 0; }
.hours__table .is-today th::after {
  content: "vandaag";
  margin-left: var(--space-2);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--dj-blue);
  color: var(--dj-white);
  font-size: 0.6875rem;
  font-weight: 600;
  vertical-align: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .record__disc, .record__glow, .record__note, .status__dot::after { animation: none; }
  .record__arm { animation: none; transform: rotate(4deg); }
  .record__note { display: none; }
}

/* Openingsuren + support naast elkaar */
.hours-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}
@media (min-width: 900px) {
  .hours-grid { grid-template-columns: 1.3fr 1fr; }
}
.hours-grid .hours { max-width: none; }

.support {
  --live: #2FA84F; /* groen: nu bereikbaar (grijs via data-reachable) */
  --live-soft: rgba(47, 168, 79, 0.12);
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: clamp(24px, 3vw, 32px);
}
.support > * { position: relative; z-index: 1; margin: 0; }
.support__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(0, 128, 255, 0.1);
  color: var(--dj-blue);
}
.support__title { color: var(--dj-ink); font-size: 1.25rem; font-weight: 600; }
.support p { color: var(--dj-text-muted); }
.support__call {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  margin-top: var(--space-2);
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--dj-blue);
  color: var(--dj-white);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.support__call:hover { background: var(--dj-blue-hover); box-shadow: var(--shadow-cta); transform: translateY(-1px); }
/* Rechtsboven: live label groen (bereikbaar) of grijs (niet bereikbaar) */
.support[data-reachable="false"] { --live: #8C8781; --live-soft: rgba(140, 135, 129, 0.14); }
.support__live {
  position: absolute !important;
  top: clamp(20px, 3vw, 28px);
  right: clamp(20px, 3vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--live-soft);
  color: var(--live) !important;
  font-size: 0.8125rem;
  font-weight: 600;
}
.support__live[hidden] { display: none; }
.support__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.support[data-reachable="true"] .support__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: dj-status-pulse 2s var(--ease-out) infinite;
}

.support__calls { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2) !important; }
.support__calls .support__call { margin-top: 0; }
.support__call--alt {
  background: rgba(0, 128, 255, 0.08);
  color: var(--dj-blue);
  box-shadow: inset 0 0 0 1.5px rgba(0, 128, 255, 0.3);
}
.support__call--alt:hover { background: var(--dj-blue); color: var(--dj-white); }
.support__disclaimer { font-size: var(--fs-small); font-style: italic; }

/* "Gratis support" in dezelfde kleur als het live label */
.support__note {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--live-soft);
  color: var(--live) !important;
  font-size: var(--fs-small);
  font-weight: 600;
}
@media (max-width: 479px) {
  .support__live { position: static !important; }
}

/* ---------- Mobiel: compacter ---------- */
@media (max-width: 699px) {
  .contact-hero { padding-top: var(--space-6); }
  .record { width: min(72%, 280px); }

  /* Contactpersonen als rijen: avatar links, naam + rol ernaast, telefoon eronder */
  .team { grid-template-columns: 1fr; gap: var(--space-3); }
  .person {
    grid-template-columns: 56px 1fr;
    justify-items: start;
    column-gap: var(--space-4);
    padding: 16px 18px;
    text-align: left;
  }
  .person__avatar {
    grid-row: 1 / 3;
    width: 56px;
    height: 56px;
    margin: 0;
    font-size: 1.7rem;
    align-self: center;
  }
  .person__name { align-self: end; font-size: 1.125rem; }
  .person__role { align-self: start; margin: 0; }
  .person__phone { grid-column: 1 / -1; justify-self: stretch; justify-content: center; margin-top: var(--space-3); }
}