/* Sample makeovers: before/after cards on /samples/ */
.mk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.6vw, 30px);
}
@media (max-width: 900px) { .mk-grid { grid-template-columns: 1fr; } }

.mk-card {
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, .03);
  transition: border-color .3s;
}
.mk-card:hover { border-color: rgba(255, 255, 255, .3); }

.mk-compare {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0c0c0c;
  touch-action: pan-y;
  user-select: none;
}
.mk-compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
}
.mk-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.mk-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.mk-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.mk-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
/* with JS the box takes the pointer: drag sideways to compare, click to open the site */
.mk-compare.is-live { cursor: pointer; }
.mk-compare.is-live .mk-range { pointer-events: none; }
.mk-compare.is-live.near-handle, .mk-compare.is-live.is-dragging { cursor: ew-resize; }
.mk-compare.is-live:not(.near-handle):not(.is-dragging):hover .mk-tag-b { left: 12px; }
.mk-tag-a { right: 12px; }

.mk-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 20px 0;
}
.mk-meta .xi { opacity: .45; font-size: 12px; }
.mk-meta h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); }
.mk-meta .xc { opacity: .6; font-size: 13px; }
.mk-say { margin: 10px 20px 0; max-width: 52ch; opacity: .8; line-height: 1.5; }
/* Explore button: small, right-aligned, wearing the spectrum at rest.
   Hover lifts it, fades a soft glow in behind, speeds the colour and nudges the arrow. */
.mk-card .mk-open {
  display: flex;
  width: max-content;
  margin: 14px 20px 20px auto;
  padding: .9em 1.45em;
  gap: .75em;
  font-size: .64rem;
  font-weight: 700;
  color: #090909;
  background-image: var(--spectrum);
  background-size: 200% 100%;
  animation: spectrum-flow 6s linear infinite;
}
.mk-card .mk-open svg { width: 13px; height: 13px; }
.mk-card .mk-open:hover, .mk-card .mk-open:focus-visible {
  color: #090909;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(203, 173, 255, .28);
  animation-duration: 1.6s;
}
.mk-card .mk-open::after { background: var(--spectrum); background-size: 200% 100%; filter: blur(14px); }
.mk-card .mk-open:hover::after, .mk-card .mk-open:focus-visible::after { opacity: .55; }
html[data-colour-paused=true] .mk-card .mk-open { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .mk-card .mk-open, .mk-card .mk-open:hover { animation: none; transform: none; }
}