/* Cards page. Everything structural comes from /assets/site.css.
   What's here is the drawn hardware: the black card, the lock screen
   and the grid they sit in. The card and the lock screen are objects,
   not interface, so they carry their real-world proportions and
   rounding. Copied from the product page build at
   code/roche-digital/cards/landing/card.css. */

/* --- Page head: copy beside the card ------------------------ */
.head-grid { display: grid; gap: 3rem; }
.card-stage { display: flex; justify-content: center; }

/* --- The card, at real proportions (85.6 x 54mm) ------------ */
.nfc {
  position: relative;
  width: 260px;
  aspect-ratio: 85.6 / 54;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px;
  border-radius: 11px;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(247, 246, 243, .08), transparent 60%),
    var(--ink);
  box-shadow: 0 1px 2px rgba(22, 21, 19, .2), 0 24px 40px -18px rgba(22, 21, 19, .55);
  color: var(--paper);
  text-align: left;
}
.nfc--sm { width: 78%; max-width: 210px; transform: rotate(-5deg); }
.card-stage .nfc { transform: rotate(-7deg); }

.nfc-tap { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; color: var(--paper); }
.nfc-tap .tap-dot, .close-tap .tap-dot { fill: var(--accent); }
.nfc-name { font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.1; letter-spacing: -0.01em; color: var(--paper); }
.nfc-role { margin-top: 6px; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 246, 243, .6); }

/* Where the card meets a phone: rings leave the tap mark and fade. */
.ripple { position: absolute; top: 31px; right: 31px; width: 1px; height: 1px; }
.ripple::before, .ripple::after {
  content: "";
  position: absolute;
  left: -40px; top: -40px;
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: ripple 2.8s cubic-bezier(.2, .7, .3, 1) infinite;
}
.ripple::after { animation-delay: 1.1s; }
@keyframes ripple {
  0% { transform: scale(.25); opacity: .8; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* --- The hardware grid -------------------------------------- */
.kit { display: grid; gap: 2.5rem 1.25rem; }
.kit-item { margin: 0; }
.kit-stage {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
}
.kit-stage--photo { border: 0; background: none; }
.kit-stage--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); }
.kit-item figcaption { margin-top: 1.1rem; }
.kit-item p { margin-top: .5rem; color: var(--ink-2); font-size: .97rem; }

/* --- The lock screen ---------------------------------------- */
.lock {
  /* fixed, because the stage is 4:5 and a 1:2 phone sized in percentages
     overflows it as soon as the contents are taller than the box */
  width: 130px; height: 260px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 30px;
  border: 6px solid var(--ink);
  background: linear-gradient(180deg, #2a2926, var(--ink));
  box-shadow: 0 24px 40px -18px rgba(22, 21, 19, .5);
  color: var(--paper);
}
.lock-date { font-size: 6.5px; letter-spacing: .06em; color: rgba(247, 246, 243, .6); order: -1; white-space: nowrap; }
.lock-time { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.1; color: var(--paper); }
.lock-qr { width: 64px; height: 64px; margin-top: 10px; padding: 7px; background: var(--paper); border-radius: 8px; }
.lock-note { margin-top: 8px; font-family: var(--font-mono); font-size: 6px; letter-spacing: .12em; text-transform: uppercase; color: rgba(247, 246, 243, .6); white-space: nowrap; }

.kit-note {
  margin-top: 3rem;
  padding-top: 1.5rem;
  max-width: 76ch;
  border-top: 1px solid var(--hairline);
  color: var(--ink-3);
  font-size: .95rem;
  line-height: 1.75;
}
.kit-note strong { font-weight: 500; }

/* --- Who it's for ------------------------------------------- */
.who li { padding: 1.1rem 0; border-top: 1px solid var(--hairline); }
.who li:last-child { border-bottom: 1px solid var(--hairline); }
.who strong { display: block; font-family: var(--font-display); font-weight: 460; font-size: 1.3rem; letter-spacing: -0.01em; }
.who span { display: block; margin-top: .3rem; color: var(--ink-2); }

/* --- Close -------------------------------------------------- */
.close-tap { width: 44px; height: 44px; margin: 0 auto 1.5rem; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .ripple::before, .ripple::after { animation: none; opacity: 0; }
}

@media (min-width: 620px) {
  .kit { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 980px) {
  .head-grid { grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; }
  .kit { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
  .nfc--sm { width: 82%; max-width: 210px; }
  .card-stage .nfc { width: 300px; }
}


/* A frame sitting under copy in a split column needs air above it. */
.split .frames { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem) !important; }