/* =============================================================
   Unit Availability widget, Cards layout (Layout = "cards",
   James, 2026-11-11) - shared by every theme.

   Plain css on purpose, linked once from _GlobalStyles_Header like
   ut-widget-image.css: the cards' mechanics live here once - the
   grid, the picture area, the picture rules - and each theme's look
   is a block at the end keyed off a modifier on the grid, drawn with
   the theme's own custom properties and, where it already has them,
   its own classes (Cornerstone's .cs-status / .cs-btn-rent /
   .cell-price__promo, Airspace's .au-unit pieces, Bootstrap's .card /
   .btn / .ut-card-corner-badge for Alpha and Default).

     <div class="ut-unit-cards ut-unit-cards--{cornerstone|airspace|bootstrap}"
          style="--ut-unit-cards-per-row: 3">
       <article class="ut-unit-card [is-unavailable] ...">
         <div class="ut-unit-card__picture">
           <div class="ut-unit-card__frame ut-unit-card__frame--{picture|icon|glyph|plan}">
             <img class="ut-unit-card__img" [data-ut-picture-cap]>
             (or a font icon <i>, the plain unit outline <svg>, or the floor plan)
         ...the theme's own body...

   Cards per row: at most --ut-unit-cards-per-row (the widget's
   setting, 2 to 4) on a computer, at most two on a tablet. A card is
   never narrower than --ut-unit-cards-min, so a narrower space shows
   fewer, down to one on a phone. That floor reads the space the widget
   is in, not the screen, so it also behaves in a Columns widget column.

   The picture fills its area whole (never cropped). A raster picture
   is held to 1.5x its own pixel size once it has loaded
   (_UnitCardsScript.cshtml); an SVG icon is not held back.
   ============================================================= */

.ut-unit-cards {
    --ut-unit-cards-per-row: 3;
    --ut-unit-cards-cols: var(--ut-unit-cards-per-row);
    --ut-unit-cards-gap: 24px;
    --ut-unit-cards-min: 260px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--ut-unit-cards-min), calc((100% - (var(--ut-unit-cards-cols) - 1) * var(--ut-unit-cards-gap)) / var(--ut-unit-cards-cols)))), 1fr));
    gap: var(--ut-unit-cards-gap);
}

/* The setting is for a computer (James, 2026-11-11): a tablet shows at most
   two in a row, and the 260px floor takes a phone down to one. */
@media (max-width: 991.98px) {
    .ut-unit-cards {
        --ut-unit-cards-cols: min(2, var(--ut-unit-cards-per-row));
    }
}

.ut-unit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The Cornerstone filter bar hides a card with the hidden attribute. */
.ut-unit-card[hidden] {
    display: none !important;
}

/* ---------- The picture area ----------
   13:9, the shape the floor plans are drawn for (UnitAvailabilityLayout). */
.ut-unit-card__picture {
    --ut-unit-card-stage-bg: #fff;
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 13 / 9;
    overflow: hidden;
    background: var(--ut-unit-card-stage-bg);
}

.ut-unit-card__frame {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* An uploaded picture: as big as the area allows (whole, never cropped). */
.ut-unit-card__frame--picture {
    padding: 6% 8%;
}

.ut-unit-card__frame--picture .ut-unit-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* A library icon: the same share of every card, so a row of them lines up. */
.ut-unit-card__frame--icon .ut-unit-card__img {
    display: block;
    width: 44%;
    height: 56%;
    object-fit: contain;
}

.ut-unit-card__frame--icon i {
    font-size: 64px;
    line-height: 1;
}

/* No icon chosen: the plain unit outline. */
.ut-unit-card__frame--glyph svg {
    width: 76px;
    height: 76px;
}

/* A size that can't be rented now: the picture goes grey with it. On the
   picture itself, not its frame: a filtered frame would be drawn on its own
   first, and a picture's white background could no longer melt into the
   card (Cornerstone's multiply) - it showed as a grey box. */
.ut-unit-card.is-unavailable .ut-unit-card__frame > * {
    filter: grayscale(1);
    opacity: 0.55;
}

/* ---------- The floor plan (Cornerstone's "Floor plans" setting) ----------
   The grid squares (5 ft / 1 m) and the footprint at the facility's one
   scale, in percent of the area (set inline from the view), with the two
   measurements drawn along its edges. */
.ut-unit-card__frame--plan {
    background-image:
        linear-gradient(var(--ut-unit-card-plan-line, #e6e7e9) 1px, transparent 1px),
        linear-gradient(90deg, var(--ut-unit-card-plan-line, #e6e7e9) 1px, transparent 1px);
    background-size: var(--ut-plan-cell-x, 12%) var(--ut-plan-cell-y, 17%);
    background-position: center;
}

.ut-unit-card__plan {
    position: relative;
    display: block;
    box-sizing: border-box;
}

.ut-unit-card__measure {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 solid;
}

.ut-unit-card__measure::before {
    content: "";
    position: absolute;
    background: currentColor;
}

.ut-unit-card__measure--across {
    left: -2px;
    right: -2px;
    bottom: calc(100% + 7px);
    height: 9px;
    border-left-width: 1px;
    border-right-width: 1px;
}

.ut-unit-card__measure--across::before {
    left: 0;
    right: 0;
    top: 4px;
    height: 1px;
}

.ut-unit-card__measure--down {
    top: -2px;
    bottom: -2px;
    right: calc(100% + 7px);
    width: 9px;
    border-top-width: 1px;
    border-bottom-width: 1px;
}

.ut-unit-card__measure--down::before {
    top: 0;
    bottom: 0;
    left: 4px;
    width: 1px;
}

.ut-unit-card__measure > span {
    position: relative;
    padding: 0 5px;
    background: var(--ut-unit-card-stage-bg);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.ut-unit-card__measure--down > span {
    padding: 5px 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* =============================================================
   Cornerstone - the "industrial manifest" table's look as cards:
   square corners, the business colour's bar across the top (grey
   when the size can't be rented), Montserrat, the table's status
   dots, buttons and promotion stamp.
   ============================================================= */
.ut-unit-cards--cornerstone {
    --ut-unit-cards-gap: 24px;
}

.ut-unit-cards--cornerstone .ut-unit-card {
    background: #fff;
    border: 1px solid var(--cs-border-strong);
    box-shadow: 0 1px 0 rgba(17, 20, 23, 0.02), 0 6px 18px rgba(17, 20, 23, 0.06);
}

.ut-unit-cards--cornerstone .ut-unit-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 4px;
    background: var(--ut-theme-primary);
}

.ut-unit-cards--cornerstone .ut-unit-card.is-unavailable {
    background: var(--cs-paper);
}

.ut-unit-cards--cornerstone .ut-unit-card.is-unavailable::before {
    background: var(--cs-slate-300);
}

/* Paper behind the picture; a picture's white background melts into it. */
.ut-unit-cards--cornerstone .ut-unit-card__picture {
    --ut-unit-card-stage-bg: var(--cs-paper);
    border-bottom: 1px solid var(--cs-border);
}

.ut-unit-cards--cornerstone .ut-unit-card.is-unavailable .ut-unit-card__picture {
    --ut-unit-card-stage-bg: #f1f2f3;
}

.ut-unit-cards--cornerstone .ut-unit-card__frame--picture .ut-unit-card__img {
    mix-blend-mode: multiply;
}

.ut-unit-cards--cornerstone .ut-unit-card__frame--icon,
.ut-unit-cards--cornerstone .ut-unit-card__frame--glyph {
    color: var(--cs-ink-700);
}

.ut-unit-cards--cornerstone .ut-unit-card__plan {
    background: var(--cs-primary-soft);
    border: 2px solid var(--cs-ink-700);
}

.ut-unit-cards--cornerstone .ut-unit-card__measure {
    color: var(--cs-slate-400);
}

.ut-unit-cards--cornerstone .ut-unit-card__measure > span {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--cs-slate-700);
}

/* The promotion, stamped on the picture (the table's stamp, a size up). */
.ut-unit-cards--cornerstone .cs-card__promo {
    position: absolute;
    z-index: 1;
    top: 18px;
    left: 16px;
    max-width: 78%;
    padding: 6px 10px;
    font-size: 11px;
    white-space: normal;
    box-shadow: 0 2px 6px rgba(17, 20, 23, 0.16);
}

.cs-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    padding: 18px 22px 20px;
}

.cs-card__name {
    margin: 0;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--cs-fg-1);
}

/* The size and the price side by side: the two facts a renter compares. */
.cs-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cs-card__size {
    flex: 0 0 auto;
}

.cs-card__dim {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 900;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.4px;
    color: var(--cs-ink-900);
    white-space: nowrap;
}

.cs-card__area {
    margin-top: 7px;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--cs-fg-3);
    white-space: nowrap;
}

/* A zero basis: the price takes what the size leaves, and a range wraps
   after its dash rather than pushing the card wider. */
.cs-card__price {
    flex: 1 1 0;
    min-width: min-content;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 900;
    color: var(--cs-ink-900);
}

.cs-card__strike {
    position: relative;
    display: inline-block;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: var(--cs-fg-3);
    white-space: nowrap;
}

.cs-card__strike::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: 50%;
    height: 2px;
    background: var(--ut-theme-primary);
    transform: rotate(-8deg);
}

.cs-card__now {
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -0.4px;
}

.cs-card__now--range {
    font-size: 20px;
}

.cs-card__mo {
    margin-left: 2px;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--cs-fg-3);
    white-space: nowrap;
}

.cs-card__desc {
    margin: 2px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--cs-border);
    font-size: 13px;
    line-height: 1.5;
    color: var(--cs-slate-700);
}

/* The availability and the button, on the card's last line. */
.cs-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid var(--cs-border);
}

.cs-card__foot > .cs-btn-rent {
    margin-left: auto;
}

/* "No sizes match those filters." - a whole row of the grid. */
.cs-cards__none {
    grid-column: 1 / -1;
    padding: 32px 24px;
    text-align: center;
    font-size: 14px;
    color: var(--cs-slate-700);
    background: #fff;
    border: 1px solid var(--cs-border-strong);
}

.cs-cards__none button {
    margin-left: 6px;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 2px solid var(--ut-theme-primary);
    font-weight: 700;
    color: var(--cs-ink-900);
    cursor: pointer;
}

/* The floor plan scale and the units count, under the cards. */
.cs-cards__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 18px;
    padding: 0 2px;
    font-size: 13px;
    color: var(--cs-slate-700);
}

.cs-cards__foot > span:only-child {
    margin: 0 auto;
}

@media (max-width: 575.98px) {
    .cs-card__body {
        padding: 16px 18px 18px;
    }

    .cs-card__foot {
        padding: 14px 18px;
    }

    .cs-card__dim {
        font-size: 24px;
    }

    .cs-card__now {
        font-size: 26px;
    }
}

/* =============================================================
   Airspace - its own centered price card (badge top right, light
   price, full-width button) with the picture across the top, on
   white so it reads as part of the card (James, 2026-11-11). The
   card's own padding moves to the body below the picture.
   ============================================================= */
.ut-unit-cards--airspace {
    --ut-unit-cards-gap: 30px;
}

.ut-widget-unit-list .ut-unit-cards--airspace .au-unit {
    padding: 0;
}

.ut-unit-cards--airspace .au-unit .badge {
    z-index: 1;
}

.ut-unit-cards--airspace .ut-unit-card__frame--icon,
.ut-unit-cards--airspace .ut-unit-card__frame--glyph {
    color: var(--ut-theme-primary);
}

.ut-unit-cards--airspace .au-unit__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 30px 32px 36px;
}

@media (max-width: 640px) {
    .ut-unit-cards--airspace .au-unit__body {
        padding: 28px 28px 32px;
    }
}

/* =============================================================
   Alpha and Default - Bootstrap's card in the theme's own dress
   (Alpha's rounded grey .ut-card--rounded, corner badge and round
   buttons), with the picture on a white panel inset at the top.
   Default has no corner-badge styles of its own, so the badge's
   look below has no weight at all (:where) and a theme's own always
   wins.
   ============================================================= */
.ut-unit-cards--bootstrap {
    --ut-unit-cards-gap: 1.5rem;
}

.ut-unit-cards--bootstrap .ut-unit-card__picture {
    margin: 12px 12px 0;
    border-radius: calc(var(--bs-card-border-radius, 1rem) - 4px);
}

.ut-unit-cards--bootstrap .ut-unit-card__badge {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}

:where(.ut-unit-cards--bootstrap .ut-unit-card__badge) {
    padding: 0.25rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
    color: #fff;
    background-color: var(--bs-primary);
    border-bottom-right-radius: var(--bs-card-border-radius, 0.375rem);
}

:where(.ut-unit-cards--bootstrap .ut-unit-card__badge.ut-card-corner-badge--warning) {
    background-color: var(--bs-warning);
}

:where(.ut-unit-cards--bootstrap .ut-unit-card__badge.ut-card-corner-badge--danger) {
    background-color: var(--bs-danger);
}

.ut-unit-cards--bootstrap .ut-unit-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    flex: 1 1 auto;
}

.ut-unit-cards--bootstrap .ut-unit-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.ut-unit-cards--bootstrap .ut-unit-card__name {
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.2;
}

.ut-unit-cards--bootstrap .ut-unit-card__location {
    margin: -0.25rem 0 0;
    font-size: 0.9375rem;
    opacity: 0.8;
}

.ut-unit-cards--bootstrap .ut-unit-card__price {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.ut-unit-cards--bootstrap .ut-unit-card__price--range {
    font-size: 1.1875rem;
}

.ut-unit-cards--bootstrap .ut-unit-card__was {
    font-size: 0.9375rem;
    font-weight: 400;
}

.ut-unit-cards--bootstrap .ut-unit-card__price sup {
    font-size: 0.75rem;
    font-weight: 400;
    margin-left: 1px;
}

.ut-unit-cards--bootstrap .ut-unit-card__desc {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.ut-unit-cards--bootstrap .ut-unit-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: auto;
    padding-top: 0.375rem;
}

.ut-unit-cards--bootstrap .ut-unit-card__foot .btn {
    margin-left: auto;
}