/* v5.0 card front (preview). One shared set of rules for the /kartu card, Perbesar, print, profile, SC and the login hero.
   Layers inside .adi-body, bottom to top: watermark (1) < photo (2) < text (3).
   - The photo is flush: top edge directly under the red header, right edge and bottom edge of the card, no padding or margin.
   - The watermark is BEHIND the photo, low opacity, whole phrases only (never cut mid-word). The person's figure covers it; with a transparent-background photo it shows through around the figure.
   - Text keeps a faint white halo so it stays legible over the watermark. */
[data-card-component] .adi-front{isolation:isolate}
[data-card-component] .adi-body{isolation:isolate;z-index:1}
[data-card-component] .adi-body .adi-photo{position:absolute;top:0;right:0;bottom:0;left:auto;width:34%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:50% 12%;z-index:2;isolation:isolate;border:0;outline:0;box-shadow:none;padding:0;margin:0;background:transparent!important;border-radius:0!important;mask:none!important;-webkit-mask:none!important}
[data-card-component] .adi-wm{left:0!important;right:0!important;position:absolute;top:0;bottom:0;overflow:hidden;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:space-evenly;justify-items:center;gap:0;padding:0;opacity:.22;pointer-events:none;user-select:none}
[data-card-component] .adi-wm span{font-size:.58em;line-height:1.2;letter-spacing:.05em;white-space:nowrap;overflow:visible!important;text-overflow:clip;max-width:none;color:#6C727F}
/* Keep the original /kartu front untouched. Profile card is exactly 1.5 × its original 420px width, bounded by available space. */
@media screen{html:not(.card-zoomed) .profile-workarea [data-card-component] .mc-stage{width:min(100%,630px)}}
@media print{html.printing-member-card body *{visibility:hidden}html.printing-member-card [data-card-component] .mc2-stage-wrap,html.printing-member-card [data-card-component] .mc2-stage-wrap *{visibility:visible}html.printing-member-card [data-card-component] .mc2-stage-wrap{position:absolute;inset:0 auto auto 0;padding:0;border:0;background:none}html.printing-member-card .mc2-actions,html.printing-member-card .mc2-tip,html.printing-member-card .mc2-msg{display:none!important}}
/* Text column: label, name, jabatan and institution stack from the top; number, validity and dates are pinned to the bottom (absolute, so the clamped lines keep working).
   The column ends 1.2% before the photo, so nothing can touch or run under it. */
[data-card-component] .adi-fields{position:absolute;left:.55em;right:35.2%;top:.45em;bottom:.45em;max-width:none;display:block;text-align:start;z-index:3;overflow:hidden;color:#111;text-shadow:0 0 .22em #fff,0 0 .22em #fff,0 0 .12em #fff}
[data-card-component] .adi-fields small{display:block;line-height:1.2}
[data-card-component] .adi-fields .nm{font-size:1.05em;line-height:1.12;margin:.05em 0 .12em;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
[data-card-component] .adi-fields .nm[data-name-size="m"]{font-size:.86em}
[data-card-component] .adi-fields .nm[data-name-size="l"]{font-size:.68em;line-height:1.12;-webkit-line-clamp:3}
[data-card-component] .adi-fields .rl{font-size:.66em;line-height:1.2;margin:0 0 .2em;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
[data-card-component] .adi-fields .adi-position{font-size:.6em;line-height:1.2;margin:0 0 .15em;font-weight:600;color:#1F2937;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
[data-card-component] .adi-fields .adi-position[hidden]{display:none}
[data-card-component] .adi-fields .adi-institution[data-inst-size="m"]{font-size:.62em!important}
[data-card-component] .adi-fields .adi-institution[data-inst-size="l"]{font-size:.5em!important}
[data-card-component] .adi-fields .adi-institution{font-size:.8em;line-height:1.25;margin:0;color:#1F2937;overflow-wrap:anywhere;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}
/* Restored v4 layout (14 Nov: keep this block as it was). Masa Berlaku on its own row;
   No. Anggota below it on the left; Member Since / Valid till as two right-aligned lines beside it, left of the photo. */
[data-card-component] .adi-2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.18em;column-gap:.25em;position:absolute;left:0;right:0;bottom:0}
[data-card-component] .adi-number{min-width:0;grid-column:1;grid-row:2;align-self:end}
[data-card-component] .adi-joined{grid-column:2;grid-row:2;align-self:end;justify-self:end;text-align:right;direction:ltr}
[data-card-component] .adi-fields .adi-joined .no{text-align:right}
[data-card-component] .adi-validity{grid-column:1/-1;grid-row:1;min-width:0}
[data-card-component] .adi-validity .no{font-size:.55em}
/* 14 Nov: Masa Berlaku removed from the front; Member Since / Valid till already carry the dates. */
[data-card-component] .adi-fields .adi-validity{display:none!important}
[data-card-component] .adi-fields .adi-date-line{font-size:.43em;line-height:1.45;white-space:nowrap;letter-spacing:0;font-weight:600;text-align:right;color:#263248}
[data-card-component] .adi-joined{position:relative;z-index:3;background:none;padding-left:.3em;max-width:100%}
html[dir=rtl] [data-card-component] .adi-fields{text-align:right}
[data-card-component] .adi-back-qr [data-card-verification-reference]{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.19em;letter-spacing:0;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr;max-width:100%;line-height:1.3}

/* Card back: keep a clear horizontal gap between the Sekjen name/underline
   in the official artwork (name ends at 638/840 ≈ 76% of card width) and the QR card.
   At the standard 420px stage this gap is 28px (was ~8px). The QR stays inside the rounded corner. */
[data-card-component] .adi-back-qr{right:1.6%;width:15.8%;max-width:15.8%}