/* Riding Passport — premium editions.
   One card shape, four distinct editions. Decorative layers (foil, ornament,
   portrait) never carry member data and are hidden from assistive technology. */

.passport-v2114 .passport-face{
  --plate:transparent;
  --foil-a:#ffffff0f;
  --foil-b:#ffffff00;
  position:relative;
  isolation:isolate;
  min-height:318px;
  padding:28px 30px;
  gap:13px;
  border-radius:18px;
  overflow:hidden;
}
/* Text stays in its own column so the artwork can never crowd a rider's name. */
.passport-v2114 .passport-face>header,
.passport-v2114 .passport-face>p,
.passport-v2114 .passport-face>h3,
.passport-v2114 .passport-face>div:not(.passport-ornament):not(.passport-foil){
  max-width:62%;
}
.passport-v2114 .passport-face>footer{max-width:100%}

/* --- artwork ------------------------------------------------------------- */
/* Size, place, fade and restack come from Admin > Membership > Card Designer as
   custom properties. The artwork itself is never redrawn or recoloured. */
.passport-v2114 .passport-portrait{
  position:absolute;
  z-index:var(--z-horse,1);
  left:var(--horse-x,102%);
  top:var(--horse-y,53%);
  translate:calc(var(--horse-x,102%) * -1) calc(var(--horse-y,53%) * -1);
  width:var(--horse-size,58%);
  height:auto;
  max-height:94%;
  object-fit:contain;
  pointer-events:none;
  /* The artwork keeps its own colours — no blend mode, no filter, no recolouring.
     Transparency and a soft edge are what settle it into the card, and the fade
     towards the text column keeps a member's details fully readable. */
  opacity:var(--horse-opacity,.32);
  -webkit-mask-image:linear-gradient(to left,#000 46%,#000000d9 70%,#0000 99%);
  mask-image:linear-gradient(to left,#000 46%,#000000d9 70%,#0000 99%);
}
.passport-v2114 .passport-face>.passport-foil{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(112deg,var(--foil-b) 30%,var(--foil-a) 47%,var(--foil-b) 62%);
}
.passport-v2114 .passport-ornament{z-index:0}
/* The member's own information always sits in its own layer, above the card stock. */
.passport-v2114 .passport-face>header{z-index:var(--z-logo,2)}
.passport-v2114 .passport-face>.passport-collection,
.passport-v2114 .passport-face>.passport-level-name,
.passport-v2114 .passport-face>div:not(.passport-ornament):not(.passport-foil),
.passport-v2114 .passport-face>footer{position:relative;z-index:var(--z-text,4)}
.passport-v2114 .passport-photo{
  position:absolute;
  z-index:var(--z-photo,3);
  right:26px;
  bottom:52px;
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--card-line);
  box-shadow:0 6px 18px -10px #000000a6;
}

/* --- shared plate work --------------------------------------------------- */
.passport-v2114 .passport-face .passport-logo{
  width:min(56%,186px);
  max-width:186px;
  height:auto;
  max-height:58px;
  object-fit:contain;
  background:var(--plate);
  border:0;
  padding:0;
  border-radius:0;
}
.passport-v2114 .passport-face .passport-tier{
  font:700 10px/1 Inter,Arial,sans-serif;
  letter-spacing:.22em;
  padding:6px 10px;
  border:1px solid var(--card-line);
  border-radius:999px;
  color:var(--card-muted);
  white-space:nowrap;
}
.passport-v2114 .passport-face .passport-collection{
  margin:4px 0 -4px;
  font:700 9px/1.5 Inter,Arial,sans-serif;
  letter-spacing:.24em;
  color:var(--card-muted);
}
.passport-v2114 .passport-face .passport-level-name{
  margin:0;
  font:400 clamp(27px,3.1vw,38px)/1.08 Georgia,serif;
  letter-spacing:-.015em;
}
.passport-v2114 .passport-face .passport-owner{
  font:500 16px/1.35 Inter,Arial,sans-serif;
  letter-spacing:.02em;
}
.passport-v2114 .passport-face .passport-code{
  margin-top:6px;
  font:12px/1.4 ui-monospace,monospace;
  letter-spacing:.1em;
}
.passport-v2114 .passport-face footer{
  position:relative;
  z-index:2;
  padding-top:11px;
  font:700 10px/1.5 Inter,Arial,sans-serif;
  letter-spacing:.14em;
}

/* --- edition 1 · CLASSIC · PARCHMENT ------------------------------------- */
.passport-v2114.edition-parchment .passport-face{
  --plate:#fbf6ec;
  --foil-a:#ffffff70;
  --card-bg:#f0e6d1;--card-ink:#2c2317;--card-muted:#7a6647;--card-line:#c3a672;
  color:#2c2317;
  border:1px solid #c9ae79;
  background:
    repeating-linear-gradient(58deg,#00000000 0 12px,#a8823c0a 12px 13px),
    linear-gradient(146deg,#fdf9f1 0%,#f2e7d1 46%,#e6d5b4 100%);
  box-shadow:0 16px 34px -24px #6b4f2680;
}
.passport-v2114.edition-parchment .passport-face:after{border:1px solid #c9ae79;opacity:.55;inset:9px;border-radius:10px}
.passport-v2114.edition-parchment .passport-logo{padding:0;border:0;background:none}

/* --- edition 2 · SIGNATURE · FOREST -------------------------------------- */
.passport-v2114.edition-forest .passport-face{
  --foil-a:#e4c78a26;
  --card-bg:#14322a;--card-ink:#f6ecd7;--card-muted:#cbbb98;--card-line:#a98d55;
  border:1px solid #a98d55;
  border-left:5px solid #b8985c;
  background:
    repeating-linear-gradient(122deg,#00000000 0 16px,#d8bd8508 16px 17px),
    radial-gradient(120% 100% at 88% 108%,#2c5546 0%,#1a3b31 42%,#0d241e 100%);
  box-shadow:0 18px 36px -24px #07130fb3;
}
.passport-v2114.edition-forest .passport-face:after{border:1px solid #a98d5588;inset:9px;border-radius:10px;opacity:.8}

/* --- edition 3 · PRESTIGE · NAVY ----------------------------------------- */
.passport-v2114.edition-navy .passport-face{
  --foil-a:#dbe6f533;
  --card-bg:#0f1b30;--card-ink:#eef3fb;--card-muted:#b8c8e0;--card-line:#8ea6c8;
  border:1px solid #8ea6c8;
  background:
    repeating-linear-gradient(128deg,#00000000 0 9px,#cfe0f50d 9px 10px),
    radial-gradient(124% 112% at 84% 106%,#1f3a63 0%,#132745 46%,#08111f 100%);
  box-shadow:0 18px 38px -24px #04091380;
}
.passport-v2114.edition-navy .passport-face:after{border:3px double #9db6d6;inset:8px;border-radius:11px;opacity:.65}
.passport-v2114.edition-navy .passport-tier{border-color:#9db6d6;color:#e3edfa}

/* --- edition 4 · MASTER · OBSIDIAN --------------------------------------- */
.passport-v2114.edition-obsidian .passport-face{
  --foil-a:#e7bf6e33;
  --card-bg:#100f0d;--card-ink:#f6dfab;--card-muted:#d7c095;--card-line:#c9a86a;
  border:1px solid #c9a86a;
  background:
    repeating-linear-gradient(115deg,#00000000 0 14px,#e0b96b0f 14px 15px),
    radial-gradient(130% 115% at 82% 108%,#3a2f1d 0%,#1d1913 44%,#0a0908 100%);
  box-shadow:0 20px 44px -24px #000000cc;
}
.passport-v2114.edition-obsidian .passport-face:after{border:3px double #c9a86a;inset:7px;border-radius:12px;opacity:.9}
.passport-v2114.edition-obsidian .passport-face .passport-level-name{letter-spacing:.01em;color:#f7e2b0}
.passport-v2114.edition-obsidian .passport-tier{border-color:#c9a86a;color:#f0d9a6}
/* Corner flourishes mark the highest edition. */
.passport-v2114.edition-obsidian .passport-ornament{
  right:15px;top:15px;width:24px;height:24px;border-radius:0;opacity:.8;
  border:0;border-top:2px solid #c9a86a;border-right:2px solid #c9a86a;
}
.passport-v2114.edition-obsidian .passport-ornament:after{display:none}
.passport-v2114.edition-obsidian .passport-foil:after{
  content:"";position:absolute;left:15px;bottom:15px;width:24px;height:24px;opacity:.8;
  border-bottom:2px solid #c9a86a;border-left:2px solid #c9a86a;
}

/* --- compact and small screens ------------------------------------------- */
.passport-v2114.compact .passport-face{min-height:292px;padding:24px 25px}
@media(max-width:640px){
  .passport-v2114 .passport-face{min-height:300px;padding:23px 22px;gap:12px}
  .passport-v2114 .passport-face>header,
  .passport-v2114 .passport-face>p,
  .passport-v2114 .passport-face>h3,
  .passport-v2114 .passport-face>div:not(.passport-ornament):not(.passport-foil){max-width:66%}
  .passport-v2114 .passport-portrait{width:calc(var(--horse-size,58%) * .84)}
  .passport-v2114 .passport-face .passport-logo{max-width:152px}
  .passport-v2114 .passport-face .passport-level-name{font-size:28px}
  .passport-v2114 .passport-face .passport-tier{letter-spacing:.16em;padding:5px 8px}
}
@media(max-width:400px){
  .passport-v2114 .passport-face{padding:20px 18px}
  .passport-v2114 .passport-face>header,
  .passport-v2114 .passport-face>p,
  .passport-v2114 .passport-face>h3,
  .passport-v2114 .passport-face>div:not(.passport-ornament):not(.passport-foil){max-width:70%}
  .passport-v2114 .passport-portrait{width:calc(var(--horse-size,58%) * .76)}
  .passport-v2114 .passport-face .passport-level-name{font-size:25px}
}
@media(prefers-reduced-motion:no-preference){
  .passport-v2114 .passport-face{transition:transform .3s ease,box-shadow .3s ease}
  .passport-v2114:not(.compact) .passport-face:hover{transform:translateY(-3px)}
}