/* =========================================================
   FRONT FACE — built to match approved mockup MVB_CARD-10-15-26.
   Sizes use cqw (1% of card width) so the whole card scales
   proportionally on phones instead of reflowing into tiny text.
   Mockup reference width: 478px.
   ========================================================= */
.front {
  container-type: inline-size;
  width: 100%;
  border-radius: var(--radius-front);
  overflow: hidden;
  clip-path: inset(0 round var(--radius-front)); /* guarantees all 4 corners are round, incl. Safari */
  background: var(--white);
  font-family: var(--font-sans);
}
.front__navy {
  position: relative;
  background: radial-gradient(120% 60% at 20% 0%, #13294D 0%, var(--navy) 60%);
  color: var(--white);
  padding: 11cqw 5.8cqw 2cqw;
}

/* Portrait: mockup style — tall curved gold arc flush to the top-right.
   The photo is NOT zoomed: it is shown at its natural shape (719 x 800)
   at the top of the arc area, so the full face and upper body are visible.
   Its lowest edge fades softly into the navy so the arc can sweep down to
   the right edge as in the mockup. */
.front__portrait { position: absolute; top: 0; right: 0; width: 48cqw; height: 80cqw; }
.front__photo { position: absolute; inset: 0; clip-path: url(#portraitClip); }
.front__photo img {
  /* Sized and placed so the face is centred inside the arc (not zoomed to fill). */
  position: absolute; top: 0; left: -15.6%; width: 129%; aspect-ratio: 719 / 800; height: auto;
  display: block; object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 93%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 93%, transparent 100%);
}
.front__arc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

/* Name block */
.front__identity { position: relative; width: 50cqw; }
.front__name { margin: 0; font-weight: 700; line-height: 1.04; letter-spacing: .01em; }
.front__name span { display: block; white-space: nowrap; }
.front__name-1 { font-size: 8.7cqw; color: var(--white); }
.front__name-2 {
  font-size: 9.8cqw; margin-top: .6cqw;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.front__rule { display: block; width: 14cqw; height: 3px; background: var(--gold); margin: 5.4cqw 0 5cqw; }
.front__headline { margin: 0; font-size: max(4.25cqw, 0.8125rem); line-height: 1.45; color: var(--white); }

.front__summary { max-width: 77cqw; margin: 8cqw 0 0; font-size: max(4cqw, 0.8125rem); line-height: 1.55; color: var(--white); position: relative; }

/* Document buttons — 2 × 2 grid */
.front__docs { display: grid; grid-template-columns: 1fr 1fr; gap: 3.6cqw; margin-top: 6cqw; }
.doc {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 31cqw; padding: max(3cqw, 0.75rem) max(2cqw, 0.5rem); box-sizing: border-box;
  border: 2px solid var(--gold); border-radius: 2.4cqw;
  color: var(--white); text-decoration: none; text-align: center;
  font-size: max(3.5cqw, 0.8125rem); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.25;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 70%);
}
.doc__line { display: block; text-wrap: balance; }
.doc--long .doc__line + .doc__line { font-size: max(3.05cqw, 0.8125rem); }
.doc__icon { width: 8.6cqw; height: 8.6cqw; color: var(--gold); margin-bottom: 2.2cqw; }
.doc__icon svg, .doc__arrow svg { width: 100%; height: 100%; display: block; }
.doc__arrow { flex: 0 0 auto; width: max(5cqw, 1.1rem); height: max(2.6cqw, 0.6rem); color: var(--gold-light); margin-top: 1.8cqw; }
.doc__status { margin-top: 1.6cqw; font-size: max(2.7cqw, 0.75rem); font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--navy-muted); }
a.doc:hover { background: var(--navy-raised); }
.doc[aria-disabled="true"] { cursor: default; }

/* LinkedIn / E-Portfolio rows */
.front__links { list-style: none; margin: 6cqw 0 0; padding: 0; }
.front__links li + li { border-top: 1px solid rgba(200,162,80,.55); }
.link-row { display: flex; align-items: center; gap: 4cqw; padding: 3.4cqw 1.2cqw; color: var(--white); text-decoration: none; }
.link-row__icon { flex: 0 0 auto; width: 10cqw; height: 10cqw; color: var(--gold); }
.link-row__icon svg, .link-row__ext svg, .quick__icon svg, .nfc__icon svg { width: 100%; height: 100%; display: block; }
.link-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.link-row__title { font-size: max(4cqw, 0.8125rem); font-weight: 700; }
.link-row__sub { font-size: max(3.1cqw, 0.75rem); color: #8DB0E0; margin-top: .6cqw; }
.link-row__sub--gold { color: var(--gold); } /* fits on one line; can only break after a dot if a visitor enlarges spacing */
@container (max-width: 340px) { .link-row { gap: 2.6cqw; } }
.link-row__ext { width: 3.8cqw; height: 3.8cqw; color: var(--navy-muted); }
.link-row:hover .link-row__title { text-decoration: underline; text-underline-offset: 3px; }

/* Contact / Phone / Share trio */
.front__quick {
  list-style: none; margin: 0; padding: 4.4cqw 0 4cqw;
  border-top: 1px solid rgba(200,162,80,.55);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.quick { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: max(2.95cqw, 0.75rem); line-height: 1.3; color: var(--white); }
.quick + .quick { border-left: 1px solid rgba(255,255,255,.35); }
.quick__icon {
  width: 9.6cqw; height: 9.6cqw; box-sizing: border-box; padding: 1.5cqw; margin-bottom: 1.6cqw;
  border: 1.5px solid var(--gold); border-radius: 50%; color: var(--gold);
}

/* Gold sweep into the white lower panel */
.front__wave { display: block; width: 100%; height: 13cqw; margin-top: -1px; background: var(--white); }

/* White lower panel */
.front__paper { background: var(--white); color: var(--navy); padding: 0 8cqw 6cqw; }
.front__share { display: flex; align-items: center; gap: 7cqw; padding: 1cqw 0 5cqw; }
.qr-slot {
  flex: 0 0 auto; width: 27cqw; height: 27cqw; box-sizing: border-box;
  border: 2px solid var(--gold); border-radius: 2cqw;
  display: grid; place-items: center; text-align: center;
  font-size: max(2.7cqw, 0.75rem); line-height: 1.35; color: var(--ink-muted);
  background: repeating-linear-gradient(45deg, #FAF8F3 0 6px, #F3EFE6 6px 12px);
}
.nfc { display: flex; align-items: flex-start; gap: 3cqw; }
.nfc__icon { width: 10cqw; height: 10cqw; color: var(--gold); margin-top: 1cqw; }
.nfc p { margin: 0; font-size: max(3.1cqw, 0.8125rem); line-height: 1.45; color: var(--ink); }
.nfc strong { font-size: max(3.9cqw, 0.8125rem); color: var(--navy); }
.front__tagline {
  margin: 0; padding-top: 3.6cqw; border-top: 1px solid var(--gold);
  text-align: center; text-transform: uppercase; letter-spacing: .16em; text-wrap: balance;
  font-size: max(2.9cqw, 0.75rem); line-height: 1.75; color: var(--navy);
}

/* Keyboard focus */
.front a:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; border-radius: 2cqw; }

/* Share button (active only once a public address is approved) */
.quick__btn { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; color: inherit; font: inherit; padding: 0 1cqw 1cqw; text-decoration: none; }
.quick__btn:hover > span:not(.quick__icon):not(.sr-only) { text-decoration: underline; text-underline-offset: 3px; }
.quick__sub { color: var(--navy-muted); }
.quick__btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; border-radius: 6px; }
.quick__msg { display: block; min-height: 1.3em; margin-top: 2cqw; color: var(--gold-light); } /* sits clearly below the button, never under its outline */
.quick__sub { white-space: nowrap; }