/* Digital business card (templates/includes/digital_card.html, behaviour static/js/vcard.js).
   Colours are the site's palette variables, so the card follows the admin colour scheme; the dark emerald card looks the same in light and dark mode. */
.bh-vcard { margin-inline: auto; text-align: center; }
.bh-vc-stage { perspective: 1500px; display: flex; justify-content: center; margin: 1.6rem 0 .8rem; }
.bh-vc-card {
    position: relative; width: min(100%, 560px); aspect-ratio: 85 / 55; container-type: inline-size; cursor: pointer;
    outline: none; -webkit-tap-highlight-color: transparent; border-radius: 22px; text-align: start;
}
.bh-vc-card:focus-visible { box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 6px var(--c-accent); }
.bh-vc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.85,.25,1); will-change: transform; }
.bh-vc-face {
    position: absolute; inset: 0; border-radius: 22px; overflow: hidden; color: var(--c-salam);
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    background: radial-gradient(120% 150% at 16% 6%, var(--c-primary-2) 0%, var(--c-primary-deeper) 54%, var(--c-ink-4) 100%);
    box-shadow: 0 30px 52px -26px rgba(var(--rgb-ink), .8), 0 10px 20px -12px rgba(var(--rgb-ink), .55), inset 0 1px 0 rgba(255,255,255,.2);
}
.bh-vc-back { transform: rotateY(180deg); }
.bh-vc-face::before { content: ""; position: absolute; inset: 11px; border: 1px solid var(--c-gold); border-radius: 15px; opacity: .5; pointer-events: none; z-index: 3; }
.bh-vc-face::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; transform: translateX(var(--sx, 0%));
    background: linear-gradient(112deg, transparent 28%, rgba(255,255,255,.17) 46%, rgba(255,255,255,.04) 56%, transparent 66%);
}
.bh-vc-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 22%; z-index: 0; pointer-events: none; }
.bh-vc-in { position: absolute; inset: 0; z-index: 2; }  /* above the gloss, so the QR code stays crisp */
.bh-vc-front .bh-vc-in { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2.4cqw; padding: 6cqw; }
.bh-vc-plate { background: rgba(var(--rgb-bg), .97); border-radius: 3cqw; padding: 1.5cqw 2.6cqw; box-shadow: 0 1.4cqw 3.4cqw rgba(0,0,0,.38), inset 0 0 0 1px rgba(var(--rgb-accent-light), .55); }
.bh-vc-plate img { display: block; width: 27cqw; max-width: 130px; height: auto; }
.bh-vc-org { margin: 0; font: 600 1.5rem/1.1 Georgia, "Times New Roman", serif; font-size: 7.4cqw; letter-spacing: .15em; text-transform: uppercase; color: var(--c-gold); }
.bh-vc-sub { margin: 0; font-size: .8rem; font-size: 3.2cqw; letter-spacing: .08em; color: var(--c-salam); opacity: .9; }
.bh-vc-dua { margin: .4cqw 0 0; font-size: .75rem; font-size: 3cqw; color: var(--c-gold); opacity: .8; }
.bh-vc-back .bh-vc-in { display: grid; grid-template-columns: minmax(0, 1fr) 31cqw; align-items: center; gap: 4cqw; padding: 5.6cqw 7.4cqw; }
/* back of the card: the NAME OF THE HOUSE is the big line, the person (role + name) is small */
.bh-vc-brand { margin: 0; font: 600 1.45rem/1.1 Georgia, "Times New Roman", serif; font-size: 7cqw; letter-spacing: .03em; color: var(--c-gold); }
.bh-vc-orgline { margin: .8cqw 0 1.6cqw; font-size: .72rem; font-size: 2.6cqw; opacity: .78; }
.bh-vc-who { margin: 0 0 2.2cqw; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2cqw 1.8cqw; padding-top: 1.6cqw; border-top: 1px solid rgba(var(--rgb-accent-light), .28); }
.bh-vc-role { font-size: .6rem; font-size: 2.2cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold); }
.bh-vc-name { font-size: .78rem; font-size: 3.2cqw; font-weight: 600; color: var(--c-salam); }
.bh-vc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6cqw; }
.bh-vc-rows li { display: flex; align-items: center; gap: 2cqw; font-size: .8rem; font-size: 3.1cqw; line-height: 1.25; min-width: 0; }
.bh-vc-rows li span { min-width: 0; overflow-wrap: anywhere; }
.bh-vc-rows svg { flex: none; width: 3.6cqw; height: 3.6cqw; min-width: 13px; min-height: 13px; fill: none; stroke: var(--c-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bh-vc-qrbox { text-align: center; }
.bh-vc-qr { background: rgba(var(--rgb-bg), .98); border-radius: 2.6cqw; padding: 2.2cqw; aspect-ratio: 1; color: var(--c-ink-4); box-shadow: 0 1.2cqw 3cqw rgba(0,0,0,.4); display: flex; }
.bh-vc-qr svg { display: block; width: 100%; height: 100%; }
.bh-vc-qr:empty { display: none; }
.bh-vc-qrcap { margin: 1.6cqw 0 0; font-size: .62rem; font-size: 2.3cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gold); }
.bh-vc-hint { margin: .2rem 0 0; font-size: .88rem; color: var(--c-subtext); }
.bh-vc-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.1rem; }
.bh-vc-actions .btn { display: inline-flex; align-items: center; gap: .5rem; }
.bh-vc-actions .btn[hidden], .bh-vc-save[hidden] { display: none !important; }
.bh-vc-actions svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bh-vc-msg { min-height: 1.6em; margin: .7rem 0 0; font-size: .92rem; color: var(--c-kicker); }
.bh-vcard[dir="rtl"] .bh-vc-org, .bh-vcard[dir="rtl"] .bh-vc-sub, .bh-vcard[dir="rtl"] .bh-vc-role, .bh-vcard[dir="rtl"] .bh-vc-qrcap { letter-spacing: 0; text-transform: none; }
.bh-vcard[dir="rtl"] .bh-vc-org, .bh-vcard[dir="rtl"] .bh-vc-brand { font-family: inherit; font-weight: 700; letter-spacing: 0; }
.bh-vcard[dir="rtl"] .bh-vc-name { font-family: inherit; font-weight: 700; }

/* with JavaScript: the card flips */
.bh-vcard.js .bh-vc-card.is-flipped .bh-vc-inner { transform: rotateY(180deg); }
/* without JavaScript: both sides, one below the other */
.bh-vcard:not(.js) .bh-vc-card { aspect-ratio: auto; display: grid; gap: 1rem; cursor: default; }
.bh-vcard:not(.js) .bh-vc-inner { position: static; display: grid; gap: 1rem; }
.bh-vcard:not(.js) .bh-vc-face { position: relative; aspect-ratio: 85 / 55; }
.bh-vcard:not(.js) .bh-vc-back { transform: none; }
.bh-vcard:not(.js) .bh-vc-hint { display: none; }

html[data-bh-look="glass"] .bh-vc-face { box-shadow: 0 34px 60px -28px rgba(var(--rgb-primary), .85), 0 10px 22px -12px rgba(var(--rgb-ink), .5), inset 0 1px 0 rgba(255,255,255,.35); }
/* narrow card (phones): a slimmer QR column, so the e-mail address stays on one line */
@container (max-width: 400px) {
    .bh-vc-back .bh-vc-in { grid-template-columns: minmax(0, 1fr) 27cqw; gap: 3cqw; padding: 5cqw 6cqw; }
    .bh-vc-rows li { font-size: 2.95cqw; gap: 1.8cqw; }
    .bh-vc-rows li span { overflow-wrap: break-word; }
    .bh-vc-brand { font-size: 6.6cqw; }
}
@media (max-width: 420px) {
    .bh-vc-face::before { inset: 8px; border-radius: 13px; }
    .bh-vc-actions .btn { padding-inline: 1.1rem !important; }
}
@media (prefers-reduced-motion: reduce) { .bh-vc-inner { transition: none; } }