/* ==========================================================================
   Royal Lunden - Cardholders cards
   Single template, all sizes proportional to the card width so one card looks
   identical at any size (grid, single column, mobile).
   ========================================================================== */

.bm-ch-section {
    margin: 30px 0 60px;
}

.bm-ch-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr));
    gap: 34px;
}

/* --- project filter ------------------------------------------------------
   The header carries a single "Cardholders" entry, so the section itself is
   what keeps every project reachable. Wraps to one row per link on phones. */
.bm-ch-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 30px;
}

.bm-ch-filter__item {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid #d8cba4;
    border-radius: 999px;
    background: #fff;
    color: #0f1a2c;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.bm-ch-filter__item:hover,
.bm-ch-filter__item:focus {
    border-color: #b79b52;
    background: #faf6ea;
    color: #0f1a2c;
    text-decoration: none;
}

.bm-ch-filter__item.is-active {
    border-color: #b79b52;
    background: #0f1a2c;
    color: #f3e7c4;
}

@media (max-width: 480px) {
    .bm-ch-filter__item {
        font-size: 11px;
        padding: 8px 14px;
    }
}

.bm-ch-empty {
    text-align: center;
    color: #6c7683;
    font-style: italic;
    padding: 40px 0;
}

/* --- card shell ---------------------------------------------------------- */
.bm-ch-card {
    position: relative;
    border-radius: 14px;
    background: #fdfdfb;
    box-shadow: 0 10px 26px rgba(15, 26, 44, .13);
    overflow: hidden;
}

@supports (container-type: inline-size) {
    .bm-ch-card { container-type: inline-size; }
}

.bm-ch-card__inner {
    position: relative;
    /* fallback for browsers without container queries (~600px wide card) */
    font-size: 6px;
    line-height: 1.15;
    color: #0f1a2c;
    padding: 5em 5em 3.6em;
    min-height: 66em;
    display: flex;
    flex-direction: column;
    background: #fdfdfb;
}

@supports (container-type: inline-size) {
    .bm-ch-card__inner { font-size: 1cqw; }
}

/* thin gold inset frame, like the printed card */
.bm-ch-card__frame {
    position: absolute;
    top: 2.2em;
    right: 2.2em;
    bottom: 2.2em;
    left: 2.2em;
    border: 0.18em solid rgba(178, 146, 87, .55);
    border-radius: 1.6em;
    pointer-events: none;
}

/* --- body ---------------------------------------------------------------- */
.bm-ch-card__body {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
}

.bm-ch-card__left {
    flex: 0 0 52%;
    max-width: 52%;
    padding: 0 3.4em 0 1.6em;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.bm-ch-card__right {
    flex: 1 1 auto;
    padding: 0 1.6em 0 3.4em;
    border-left: 0.16em solid rgba(178, 146, 87, .5);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- shared bits --------------------------------------------------------- */
.bm-ch-label {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2.6em;
    letter-spacing: .38em;
    text-indent: .38em;
    color: #0f1a2c;
    text-transform: uppercase;
}

.bm-ch-rule {
    height: 0;
    border-top: 0.16em solid rgba(178, 146, 87, .75);
    margin: 1.6em auto 0;
    width: 100%;
}

.bm-ch-rule--brand {
    width: 78%;
    margin-top: 2.6em;
}

/* --- cardholder identity ------------------------------------------------- */
.bm-ch-holder {
    margin-top: 3.4em;
}

.bm-ch-holder__logo {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 16em;
    object-fit: contain;
}

.bm-ch-holder__name {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 7em;
    line-height: 1.05;
    letter-spacing: .02em;
    color: #0f1a2c;
    text-transform: uppercase;
    word-break: break-word;
}

.bm-ch-holder__name.bm-ch-name--long { font-size: 5em; }
.bm-ch-holder__name.bm-ch-name--xlong { font-size: 3.6em; }

.bm-ch-holder__sub {
    margin-top: .5em;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 3.4em;
    letter-spacing: .42em;
    text-indent: .42em;
    color: #b29257;
    text-transform: uppercase;
}

/* --- racing colours ------------------------------------------------------ */
.bm-ch-silks {
    position: relative;
    flex: 1 1 auto;
    min-height: 22em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2.4em;
}

.bm-ch-silks img {
    max-width: 74%;
    max-height: 34em;
    object-fit: contain;
}

/* --- Royal Lunden identity ----------------------------------------------- */
.bm-ch-emblem {
    margin-top: .6em;
}

.bm-ch-emblem img {
    display: block;
    margin: 0 auto;
    width: 27em;
    max-width: 70%;
    height: auto;
}

.bm-ch-brand {
    margin-top: 1.4em;
    display: flex;
    flex-direction: column;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 9em;
    line-height: 1.02;
    letter-spacing: .03em;
    color: #0f1a2c;
}

.bm-ch-series {
    margin-top: 2em;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 3.4em;
    color: #0f1a2c;
}

/* --- permanent card number ----------------------------------------------- */
/* Sits under the Royal Lunden series line as a small engraved gold plate.
   Deliberately outside the racing-colours area so the TRANSFERRED / ELIMINATED
   stamp can never cover it - the number belongs to the card for life. */
.bm-ch-cardno {
    margin-top: 2.2em;
    display: inline-flex;
    align-self: center;
    align-items: baseline;
    gap: .9em;
    padding: .75em 1.5em;
    border: 0.14em solid rgba(178, 146, 87, .75);
    border-radius: .35em;
    background: linear-gradient(180deg, rgba(178, 146, 87, .10), rgba(178, 146, 87, .02));
    white-space: nowrap;
}

.bm-ch-cardno__label {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2.2em;
    letter-spacing: .3em;
    text-indent: .3em;
    text-transform: uppercase;
    color: #8a6f3d;
}

.bm-ch-cardno__value {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 3.4em;
    letter-spacing: .08em;
    color: #0f1a2c;
}

/* --- footer -------------------------------------------------------------- */
.bm-ch-card__foot {
    display: flex;
    align-items: center;
    margin-top: 3em;
    padding-top: 2.6em;
    border-top: 0.16em solid rgba(178, 146, 87, .75);
}

.bm-ch-foot__year {
    flex: 0 0 52%;
    max-width: 52%;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2.4em;
    padding: 0 3.4em 0 1.6em;
}

.bm-ch-foot__year .bm-ch-label { font-size: 2.4em; }

.bm-ch-year {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 6.4em;
    letter-spacing: .02em;
    color: #0f1a2c;
}

.bm-ch-foot__category {
    flex: 1 1 auto;
    padding: 0 1.6em 0 3.4em;
    border-left: 0.16em solid rgba(178, 146, 87, .5);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 3.2em;
    letter-spacing: .06em;
    color: #0f1a2c;
    text-align: center;
    text-transform: uppercase;
}

/* --- CARD STATUS block (sale availability + display-only value) ----------
   Sits in the lower left of the card, under the racing colours, exactly as on
   the printed reference. Everything in here is presentational: the value is a
   number an admin typed, and the three sale options are a legend with the
   active one highlighted. No price, no transaction, no financial lookup.
   ------------------------------------------------------------------------- */
.bm-ch-status {
    margin-top: 2.6em;
}

/* "CARD STATUS" centred between two thin gold rules */
.bm-ch-status__title {
    display: flex;
    align-items: center;
    gap: 1.2em;
    margin-bottom: 1.2em;
}

.bm-ch-status__title:before,
.bm-ch-status__title:after {
    content: "";
    flex: 1 1 auto;
    height: 0;
    border-top: 0.14em solid rgba(178, 146, 87, .75);
}

.bm-ch-status__title span {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2.2em;
    letter-spacing: .32em;
    text-indent: .32em;
    text-transform: uppercase;
    color: #8a6f3d;
    white-space: nowrap;
}

/* the framed box holding VALUE | sale options */
.bm-ch-status__box {
    display: flex;
    align-items: stretch;
    border: 0.14em solid rgba(178, 146, 87, .7);
    border-radius: .3em;
    padding: 1.6em 1.4em;
    gap: 1.4em;
}

/* no value typed in -> the legend simply takes the whole width, centred */
.bm-ch-status__box--novalue {
    justify-content: center;
}

/* --- value / performance (display only) ---------------------------------- */
.bm-ch-value {
    flex: 0 0 46%;
    max-width: 46%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5em;
    /* the vertical gold divider between value and sale options */
    border-right: 0.12em solid rgba(178, 146, 87, .55);
    padding-right: 1.4em;
}

.bm-ch-value__label {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2em;
    letter-spacing: .3em;
    text-indent: .3em;
    text-transform: uppercase;
    color: #0f1a2c;
}

.bm-ch-value__amount {
    font-family: "Playfair Display", Georgia, serif;
    color: #0f1a2c;
    white-space: nowrap;
}

.bm-ch-value__amount strong {
    font-weight: 700;
    font-size: 3.6em;
    letter-spacing: .01em;
}

.bm-ch-value__currency {
    margin-left: .35em;
    font-size: 2.4em;
    letter-spacing: .06em;
}

.bm-ch-value__trend {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-family: "Playfair Display", Georgia, serif;
    white-space: nowrap;
}

.bm-ch-value__pct {
    font-size: 3em;
    letter-spacing: .04em;
}

/* trend colours: green up, red down, navy flat */
.bm-ch-trend--up    { color: #1d7a3c; }
.bm-ch-trend--down  { color: #a72020; }
.bm-ch-trend--neutral { color: #0f1a2c; }

/* CSS-only arrow so no icon font is needed inside the card */
.bm-ch-arrow {
    display: inline-block;
    width: 1.6em;
    height: 2.4em;
    background: currentColor;
    /* stubby upward arrow: shaft + head */
    clip-path: polygon(50% 0, 100% 42%, 72% 42%, 72% 100%, 28% 100%, 28% 42%, 0 42%);
}

.bm-ch-arrow--down {
    transform: rotate(180deg);
}

/* --- sale availability legend -------------------------------------------- */
.bm-ch-sale {
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .85em;
}

.bm-ch-sale__item {
    display: flex;
    align-items: center;
    gap: .9em;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2.2em;
    line-height: 1.15;
    color: #0f1a2c;
    /* unselected options are present but recede, so the active one reads first */
    opacity: .42;
    transition: opacity .15s ease;
}

.bm-ch-sale__item.is-selected {
    opacity: 1;
    font-weight: 700;
}

.bm-ch-sale__label {
    white-space: nowrap;
}

/* --- the coloured indicator ---------------------------------------------- */
/* A filled disc inside a ring of the same hue - the premium look of the
   reference card, and it still reads at small sizes. */
.bm-ch-dot {
    flex: 0 0 auto;
    display: inline-block;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: currentColor;
    box-shadow:
        0 0 0 .18em #fdfdfb,
        0 0 0 .42em currentColor;
}

.bm-ch-dot--not_for_sale      { color: #d61f26; }
.bm-ch-dot--open_for_approach { color: #e08a1e; }
.bm-ch-dot--for_sale          { color: #1d7a3c; }

/* the selected row gets a slightly stronger dot */
.bm-ch-sale__item.is-selected .bm-ch-dot {
    box-shadow:
        0 0 0 .2em #fdfdfb,
        0 0 0 .5em currentColor;
}

/* --- status treatments --------------------------------------------------- */
/* The stamp sits over the racing colours area only, so it never covers the
   Royal Lunden identity on the right hand side of the card. */
.bm-ch-stamp {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.bm-ch-stamp span {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 3.4em;
    letter-spacing: .28em;
    text-indent: .28em;
    padding: .4em .8em;
    border: .1em solid currentColor;
    border-radius: .15em;
    transform: rotate(-9deg);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Transferred - still a live card, flagged in gold */
.bm-ch-card--transferred .bm-ch-stamp span {
    color: rgba(178, 146, 87, .78);
    background: rgba(255, 255, 255, .55);
}

/* Eliminated - stays on the site but clearly inactive ----------------------
   The card must read as "out of the series" at a glance, yet the CARD STATUS
   block and the card number have to stay fully legible: they are exactly what
   a visitor looks up on an eliminated card.

   A `filter` on an ancestor cannot be undone by a descendant (and a child's
   opacity multiplies with its parent's), so the muted treatment is NOT applied
   to the whole card. Instead the imagery is desaturated individually and the
   type is recoloured to grey - which leaves the status block and the number
   untouched, in full colour, without fighting inherited effects.
   ------------------------------------------------------------------------- */
.bm-ch-card--eliminated {
    box-shadow: 0 6px 16px rgba(15, 26, 44, .09);
}

.bm-ch-card--eliminated .bm-ch-card__inner {
    background: #f6f6f4;
}

/* imagery: desaturated and faded */
.bm-ch-card--eliminated .bm-ch-silks img,
.bm-ch-card--eliminated .bm-ch-holder__logo,
.bm-ch-card--eliminated .bm-ch-emblem img {
    filter: grayscale(1);
    opacity: .5;
}

/* typography: navy -> grey */
.bm-ch-card--eliminated .bm-ch-label,
.bm-ch-card--eliminated .bm-ch-holder__name,
.bm-ch-card--eliminated .bm-ch-brand,
.bm-ch-card--eliminated .bm-ch-series,
.bm-ch-card--eliminated .bm-ch-year,
.bm-ch-card--eliminated .bm-ch-foot__category {
    color: #7b828c;
}

.bm-ch-card--eliminated .bm-ch-holder__sub {
    color: #a2a7ae;
}

/* gold rules and frame -> grey */
.bm-ch-card--eliminated .bm-ch-card__frame,
.bm-ch-card--eliminated .bm-ch-rule,
.bm-ch-card--eliminated .bm-ch-card__foot,
.bm-ch-card--eliminated .bm-ch-card__right,
.bm-ch-card--eliminated .bm-ch-foot__category {
    border-color: rgba(123, 130, 140, .45);
}

.bm-ch-card--eliminated .bm-ch-stamp span {
    color: #4a5361;
    background: rgba(255, 255, 255, .6);
}

/* --- kept at full strength on an eliminated card ------------------------- */

/* The permanent card number survives every status, so it stays dark and
   framed instead of fading out with the rest of the card. */
.bm-ch-card--eliminated .bm-ch-cardno {
    border-color: rgba(74, 83, 97, .8);
    background: rgba(255, 255, 255, .55);
}

.bm-ch-card--eliminated .bm-ch-cardno__label,
.bm-ch-card--eliminated .bm-ch-cardno__value {
    color: #2a3342;
}

/* Sale availability keeps its red / orange / green coding - a card can still
   be for sale after being eliminated from the series. */
.bm-ch-card--eliminated .bm-ch-status__title span {
    color: #6f7681;
}

.bm-ch-card--eliminated .bm-ch-status__title:before,
.bm-ch-card--eliminated .bm-ch-status__title:after {
    border-color: rgba(123, 130, 140, .55);
}

.bm-ch-card--eliminated .bm-ch-status__box {
    background: rgba(255, 255, 255, .6);
    border-color: rgba(74, 83, 97, .55);
}

.bm-ch-card--eliminated .bm-ch-value {
    border-right-color: rgba(123, 130, 140, .5);
}

.bm-ch-card--eliminated .bm-ch-value__label,
.bm-ch-card--eliminated .bm-ch-value__amount,
.bm-ch-card--eliminated .bm-ch-sale__item {
    color: #2a3342;
}

/* the white halo around each dot has to match the card's own background */
.bm-ch-card--eliminated .bm-ch-dot {
    box-shadow:
        0 0 0 .18em #f6f6f4,
        0 0 0 .42em currentColor;
}

.bm-ch-card--eliminated .bm-ch-sale__item.is-selected .bm-ch-dot {
    box-shadow:
        0 0 0 .2em #f6f6f4,
        0 0 0 .5em currentColor;
}

/* --- small screens ------------------------------------------------------- */
@media (max-width: 480px) {
    .bm-ch-cards { gap: 22px; }
    .bm-ch-card__inner { padding: 4em 3.2em 3em; }
}

/* A single card column on a phone is still ~330px wide, so the status box
   would squeeze "Open for Approach" onto two lines next to the value. Below
   that width the value simply sits above the legend instead of beside it. */
@container (max-width: 360px) {
    .bm-ch-status__box {
        flex-direction: column;
        gap: 1.2em;
    }

    .bm-ch-value {
        flex: 0 0 auto;
        max-width: 100%;
        border-right: none;
        border-bottom: 0.12em solid rgba(178, 146, 87, .55);
        padding-right: 0;
        padding-bottom: 1.2em;
    }

    /* Centre the legend as a block rather than centring each row on its own -
       otherwise the three dots zig-zag instead of stacking in one column. */
    /* .bm-ch-section-prefixed so it outranks the ul reset further down */
    .bm-ch-section .bm-ch-sale {
        align-items: flex-start;
        width: max-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- defensive resets ----------------------------------------------------
   The cards are rendered inside the CMS page markup (Controller_Cardholders
   and the [[INCLUDE_CARDHOLDERS]] tag both output into a .pages wrapper), so
   two site-wide rules from the shared stylesheets reach in here:

     1. the metronic reset flattens every element with
        `border-radius: 0 !important`, which turned the sale-status dots into
        squares and squared off the card, frame, pills and boxes;
     2. `.main .container .pages li` gives bare list items the editorial
        dotted underline, a 2px !important border and 14px of top padding,
        which broke the alignment of the three sale-status rows.

   Both are undone below, scoped to the card markup only so nothing else on
   the page changes. Everything here restores a value already declared above -
   the !important flags exist purely to outrank the inherited resets. */
.bm-ch-section .bm-ch-filter__item { border-radius: 999px !important; }
.bm-ch-section .bm-ch-card        { border-radius: 14px !important; }
.bm-ch-section .bm-ch-card__frame { border-radius: 1.6em !important; }
.bm-ch-section .bm-ch-status__box { border-radius: .3em !important; }
.bm-ch-section .bm-ch-cardno      { border-radius: .35em !important; }
.bm-ch-section .bm-ch-stamp span  { border-radius: .15em !important; }
.bm-ch-section .bm-ch-dot         { border-radius: 50% !important; }

.bm-ch-section ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: left;
    background: none;
}

/* only the li rules are !important - `.main .container .pages li` outranks a
   plain rule here. The ul above is left plain so later rules (the stacked
   layout below 360px) can still move it. */
.bm-ch-section li {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
    text-align: left;
    background: none;
}