/* VTLog cards: the Driver ID and the Fuel Pass (views/cards/*.php, on the About pages).
 *
 * Both are drawn on a 1012 x 638 design grid - the ID-1 card at 300 dpi - and every
 * length below is a multiple of --u, one grid pixel, so the card scales to whatever
 * width .vlc-frame gets without reflowing. Rajdhani, IBM Plex Mono and Share Tech
 * Mono are already loaded by template/head.php; Caveat is only needed for the
 * signature.
 *
 * Each card is artwork (images/cards/<type>/<design>.webp, passed in as --vlc-art)
 * plus a LAYOUT block below that places the text in the areas that artwork leaves
 * empty (Libraries\Cards::DESIGNS). The shared rules come first, then one block per
 * layout. A new artwork with the same empty areas reuses its layout as is.
 *
 * The PNG versions people embed elsewhere are drawn by Libraries\CardRenderer, a PHP
 * port of the layout blocks below. Change a position here and change it there too,
 * then bump CardRenderer::VERSION so every cached image is redrawn. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');

/* The tile in an About page's left rail (views/cards/slot.php): the whole card,
 * scaled to the rail, as the button that opens the modal. */
.vlc-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}
.vlc-open .vlc-card { box-shadow: none; transition: filter 0.15s ease; }
.vlc-open:hover .vlc-card,
.vlc-open:focus-visible .vlc-card { filter: brightness(1.12); }
.vlc-open:focus-visible { outline: none; }
.vlc-open:focus-visible .vlc-card { box-shadow: 0 0 0 2px #ff9900; }

/* The modal: just the card, full size, with the close button over its corner. */
.vlc-modal .modal-dialog { max-width: min(1012px, calc(100vw - 32px)); }
.vlc-modal .modal-content {
    position: relative;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.vlc-modal-close {
    position: absolute;
    top: -36px; right: 0;
    z-index: 2;
}

/* The share panel under the card in the modal (js/pages/cards.js). */
.vlc-share {
    margin-top: 16px;
    padding: 14px 16px;
    background: #151516;
    border: 1px solid #636363;
    display: flex; flex-direction: column; gap: 10px;
}
.vlc-share-title { font-weight: 600; color: #f2f2f2; }
.vlc-share-row { display: flex; align-items: center; gap: 8px; }
.vlc-share-row label { flex: none; width: 84px; margin: 0; font-size: 13px; color: #a8a8a8; }
.vlc-share-row input { flex: 1; min-width: 0; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.vlc-copy { flex: none; background: #212123; border: 1px solid #636363; color: #f2f2f2; }
.vlc-copy:hover { background: #ff9900; border-color: #ff9900; color: #0d0d0e; }
@media (max-width: 575.98px) {
    .vlc-share-row { flex-wrap: wrap; }
    .vlc-share-row label { width: 100%; }
}

.vlc-frame {
    width: 100%;
    max-width: 1012px;
    container-type: inline-size;
}

.vlc-card {
    --u: calc(100cqw / 1012);
    position: relative;
    width: 100%;
    aspect-ratio: 1012 / 638;
    overflow: hidden;
    color: #f2f2f2;
    font-family: 'Rajdhani', sans-serif;
    background-color: #151516;
    background-image: var(--vlc-art);
    background-size: 100% 100%;
    /* Rounded like a real bank card: ID-1 corners are 3.18 mm on 85.6 mm, 38 on
     * this grid. A deliberate exception to the site's hard corners - the card
     * imitates a physical card. CardRenderer::RADIUS draws the same corner. */
    border-radius: calc(38 * var(--u));
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.vlc-card img { display: block; }
.vlc-mono { font-family: 'IBM Plex Mono', monospace; }

/* ---- Driver ID: shared ------------------------------------------------------------ */

/* Licence fields: the EU field number in grey, the value after it, no labels -
 * that is how a real licence prints them. */
.vlc-id-fields { position: absolute; display: flex; flex-direction: column; }
.vlc-row { display: flex; align-items: baseline; gap: calc(12 * var(--u)); min-width: 0; }
.vlc-row b {
    flex: none;
    min-width: calc(34 * var(--u));
    font-weight: 600;
    font-size: calc(16 * var(--u));
    color: #a8a8a8;
}
.vlc-row span {
    font-weight: 600;
    font-size: calc(25 * var(--u));
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vlc-row span.vlc-mono { font-size: calc(22 * var(--u)); letter-spacing: calc(1 * var(--u)); }
.vlc-row-name span { font-weight: 700; font-size: calc(36 * var(--u)); text-transform: uppercase; }
.vlc-id-pair { display: flex; gap: calc(36 * var(--u)); }

.vlc-row span.vlc-sign-ink {
    font-family: 'Caveat', cursive;
    font-weight: 600;
    font-size: calc(38 * var(--u));
    line-height: 1;
    color: #e6e6e6;
    padding-right: calc(8 * var(--u));
    transform: rotate(-3deg);
    transform-origin: left center;
}

.vlc-id-photo { position: absolute; background: #0d0d0e; }
.vlc-id-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Centred in its panel both ways. letter-spacing also trails the last character,
 * which would push each line left of centre by half a gap, so the line takes that
 * gap back with a negative right margin. A layout sets --mrz-ls. */
.vlc-mrz {
    position: absolute;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u));
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    letter-spacing: var(--mrz-ls);
    color: #d4d4d4;
    white-space: nowrap;
}
.vlc-mrz span { margin-right: calc(-1 * var(--mrz-ls)); }

/* ---- Driver ID, layout "road" (images/cards/driver/road.webp) ----------------------
 * The artwork's own areas, measured on the first 1579 x 996 version and scaled by
 * 1012/1579 (the 2000 x 1262 file now in place is the same picture upscaled):
 * the photo frame with orange corners, the empty field column between the frame and
 * the V, and the framed strip panel along the bottom. */
.vlc-id--road .vlc-id-photo {
    left: calc(44 * var(--u)); top: calc(206 * var(--u));
    width: calc(206 * var(--u)); height: calc(262 * var(--u));
}
.vlc-id--road .vlc-id-fields {
    left: calc(285 * var(--u)); top: calc(202 * var(--u));
    width: calc(420 * var(--u));
    gap: calc(11 * var(--u));
}
.vlc-id--road .vlc-mrz {
    /* The panel's inner edge runs x 50-1535, y 795-935 on the artwork. */
    left: calc(32 * var(--u)); right: calc(28 * var(--u));
    top: calc(510 * var(--u)); height: calc(89 * var(--u));
    font-size: calc(22 * var(--u));
    --mrz-ls: calc(6.4 * var(--u));
}

/* ---- Fuel Pass: shared ------------------------------------------------------------ */

.vlc-fuel-holder,
.vlc-fuel-number { position: absolute; white-space: nowrap; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,0.18), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,0.7); }
.vlc-fuel-holder { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.vlc-fuel-number { font-family: 'Share Tech Mono', 'IBM Plex Mono', monospace; color: #f2f2f2; }

.vlc-fuel-foot {
    position: absolute;
    display: flex; align-items: center; gap: calc(28 * var(--u));
    font-weight: 600;
    color: #cfcfcf;
    white-space: nowrap;
}
.vlc-fuel-foot i { display: block; width: 1px; background: #8a8a8a; }

/* A pill, so the radius is allowed. */
.vlc-fuel-status {
    position: absolute;
    border-radius: 999px;
    background: #ff9900;
    color: #0d0d0e;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}

/* ---- Fuel Pass, layout "road" (images/cards/fuel/road.webp) ------------------------
 * The artwork carries the logo, "Virtual Fleet Card", the chip, the contactless mark,
 * the pump icon and the road V; the text sits in the dark left half and the bottom
 * right corner. */
.vlc-fuel--road .vlc-fuel-holder {
    left: calc(57 * var(--u)); top: calc(402 * var(--u));
    max-width: calc(560 * var(--u));
    font-size: calc(34 * var(--u));
    letter-spacing: calc(5 * var(--u));
}
.vlc-fuel--road .vlc-fuel-number {
    left: calc(57 * var(--u)); top: calc(450 * var(--u));
    font-size: calc(50 * var(--u));
    letter-spacing: calc(4 * var(--u));
}
.vlc-fuel--road .vlc-fuel-foot {
    left: calc(60 * var(--u)); top: calc(538 * var(--u));
    font-size: calc(16 * var(--u));
    letter-spacing: calc(5 * var(--u));
}
.vlc-fuel--road .vlc-fuel-foot i { height: calc(34 * var(--u)); }
.vlc-fuel--road .vlc-fuel-status {
    right: calc(36 * var(--u)); top: calc(526 * var(--u));
    width: calc(150 * var(--u)); height: calc(44 * var(--u));
    font-size: calc(18 * var(--u));
    letter-spacing: calc(4 * var(--u));
}