/* ------------ Accreditation card, 180 x 130 mm (federation design, Premier League 1405-6) ------------
   All coordinates below are taken from the original PDF (mm from the card's top-left corner).
   Backgrounds: public/assets/img/card/card-{detailed|compact|pass}.jpg (artwork with variable text removed). */

@font-face {
    font-family: 'Exo';
    src: url('../fonts/exo/exo-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-display: block;
}

.vb-card {
    --band: #e0b848;
    position: relative;
    width: 180mm;
    height: 130mm;
    overflow: hidden;
    direction: rtl;
    background-color: #20448f;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-family: 'primary-font', tahoma, sans-serif;
    font-weight: 700;
    color: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    line-height: 1;
}

.vb-card * {
    box-sizing: border-box;
}

.vb-card.layout-detailed { background-image: url('../img/card/card-detailed.jpg'); }
.vb-card.layout-compact { background-image: url('../img/card/card-compact.jpg'); }
.vb-card.layout-pass { background-image: url('../img/card/card-pass.jpg'); }

.vb-card .abs {
    position: absolute;
}

/* Season title (top-left block) */
.vb-card .c-title-fa {
    left: 4mm;
    width: 82mm;
    top: 6.5mm;
    font-size: 7.2mm;
    text-align: center;
    white-space: nowrap;
    font-weight: 700;
}

.vb-card .c-title-en {
    left: 4mm;
    width: 82mm;
    top: 19.8mm;
    font-family: 'Exo', sans-serif;
    font-weight: 500;
    font-size: 4.3mm;
    text-align: center;
    direction: ltr;
    white-space: nowrap;
}

/* Big group word (TEAM / PRESS / BROADCAST) */
.vb-card .c-group {
    left: 2mm;
    width: 86mm;
    font-family: 'Exo', sans-serif;
    font-weight: 700;
    text-align: center;
    direction: ltr;
    white-space: nowrap;
    letter-spacing: .4mm;
}

.vb-card .c-sub {
    left: 2mm;
    width: 86mm;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Access-zone legend: heading + two columns, numbers 1-5 right, 6-10 left */
.vb-card .c-zones-head {
    right: 17.5mm;
    top: 42.3mm;
    font-size: 4.6mm;
    white-space: nowrap;
}

.vb-card .c-zones {
    right: 17.5mm;
    top: 52.5mm;
    width: 58.5mm;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 35.7mm 1fr;
    grid-template-rows: repeat(var(--rows, 5), var(--row-h, 6.85mm));
    color: #231f20;
    font-size: 2.8mm;
}

.vb-card .c-zones .z {
    display: flex;
    align-items: center;
    gap: 1.2mm;
    white-space: nowrap;
    overflow: hidden;
}

.vb-card .c-zones .z .n {
    min-width: 3.4mm;
    text-align: center;
}

.vb-card .c-zones .z.off {
    opacity: .3;
}

.vb-card .c-zones .z.on .n {
    background: #20448f;
    color: #fff;
    border-radius: 50%;
    width: 4.2mm;
    height: 4.2mm;
    min-width: 4.2mm;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5mm;
}

.vb-card .c-meta {
    right: 17.5mm;
    width: 58.5mm;
    font-size: 2.6mm;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    gap: 2mm;
}

/* ---------- detailed (TEAM / ORGANIZER) ---------- */
.vb-card .c-band {
    left: 0;
    right: 0;
    height: 5mm;
    background: var(--band);
}

.layout-detailed .c-zones-head { color: #211d51; }

.layout-detailed .c-photo {
    left: 5.2mm;
    top: 39.5mm;
    width: 30.2mm;
    height: 40.2mm;
    border-radius: 4.2mm;
    border: .3mm solid #231f20;
    object-fit: cover;
    background: #fff;
}

.layout-detailed .c-hologram {
    left: 5.2mm;
    width: 30.2mm;
    top: 81mm;
    color: #231f20;
    font-family: Arial, sans-serif;
    font-weight: 400;
    font-size: 2.4mm;
    line-height: 1.25;
    text-align: center;
    direction: ltr;
}

.layout-detailed .c-fields {
    right: 99mm;
    top: 39.5mm;
    width: 44mm;
    display: grid;
    grid-template-columns: 17.6mm 1fr;
    grid-auto-rows: 7.6mm;
    align-items: center;
    font-size: 2.9mm;
}

.layout-detailed .c-fields dt {
    color: #0e6e8c;
    font-weight: 800;
    white-space: nowrap;
}

.layout-detailed .c-fields dd {
    margin: 0;
    color: #030404;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout-detailed .c-band-zones {
    right: 116mm;
    top: 94.4mm;
    height: 5mm;
    display: flex;
    align-items: center;
    gap: 4mm;
    color: #030404;
    font-size: 2.6mm;
    white-space: nowrap;
}

.layout-detailed .c-meta {
    top: 89.5mm;
    color: #6b7280;
    font-size: 2.2mm;
    font-weight: 400;
}

/* ---------- compact (PRESS / BROADCAST) ---------- */
.layout-compact .c-photo {
    left: 31mm;
    top: 27.7mm;
    width: 28mm;
    height: 37.4mm;
    border-radius: 1.3mm;
    object-fit: cover;
    background: #fff;
}

.layout-compact .c-name { top: 67.6mm; font-size: 7.4mm; }
.layout-compact .c-code { top: 82.3mm; font-size: 6mm; }
.layout-compact .c-media { top: 94.5mm; font-size: 6mm; }

/* ---------- pass (PRESS DAY) ---------- */
.layout-pass .c-passbox {
    left: 10.3mm;
    top: 51.2mm;
    width: 69.4mm;
    height: 27.9mm;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.4mm;
    color: #20448f;
    text-align: center;
    padding: 0 3mm;
}

.layout-pass .c-passbox .pn { font-size: 6mm; white-space: nowrap; }
.layout-pass .c-passbox .pm { font-size: 4mm; color: #3c4a6b; white-space: nowrap; }

.layout-compact .c-meta,
.layout-pass .c-meta {
    top: 90.5mm;
    color: rgba(255, 255, 255, .85);
}

/* ---------- on-screen scaled preview wrapper ---------- */
.card-scale {
    position: relative;
    width: 100%;
    aspect-ratio: 180 / 130;
    direction: ltr;
    overflow: hidden;
    border-radius: .6rem;
    box-shadow: 0 .5rem 1.5rem rgba(32, 68, 143, .25);
}

.card-scale > .vb-card {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    transform: scale(var(--s, .5));
}