/* === Loop Grid stabilitet === */
/* Sikrer at hver loop-item ikke kan sprenge sin gridkolonne. */
.e-loop-item,
.e-loop-item > .elementor,
.e-loop-item .elementor-element {
    min-width: 0;           /* nødvendig for flex/grid + ellipsis */
    max-width: 100%;
    box-sizing: border-box;
}
.elementor-shortcode {
    max-width: 100%;
    min-width: 0;
}

/* === Tittel/variant: én linje med ellipsis === */
.bilkort-tittel,
.bilkort-variant {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}

/* === Bilde-wrapper: alltid 3:2, alltid full bredde av sin kolonne === */
.bilkort-bilde,
.bilkort-bilde .elementor-widget-container,
.bilkort-bilde .elementor-shortcode {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    line-height: 0;          /* fjerner descender-luft under img */
    overflow: hidden;
}
.bilkort-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 3 / 2;     /* fast forhold — gir lik høyde på alle kort */
    object-fit: cover;
    object-position: center;
    display: block;
    transition: opacity .2s ease;
}
.bilkort-image--solgt {
    opacity: .55;
}

.bilkort-badge-wrap {
    display: inline-block;
}

/* NB: kun span.bilkort-badge — ikke matche Elementor-widget'ens egen .bilkort-badge-class.
   Hvis vi bruker .bilkort-badge generisk, vil padding/border-radius også legges på widget-wrapperen som har samme klasse. */
span.bilkort-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
}

span.bilkort-badge .bilkort-badge__icon {
    flex-shrink: 0;
    display: inline-block;
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
}

/* Eksplisitt stroke-overstyring for garanti/trygt — Autokull-tekst, ikke Autogrønn */
span.bilkort-badge--garanti .bilkort-badge__icon,
span.bilkort-badge--trygt   .bilkort-badge__icon {
    stroke: #1C1C1C !important;
    color: #1C1C1C !important;
}

span.bilkort-badge .bilkort-badge__text {
    display: inline-block;
}

/* Branding-matched fargevarianter — kun på span */
span.bilkort-badge--solgt     { background: #1C1C1C; color: #fff; }   /* Autokull */
span.bilkort-badge--reservert { background: #6B6B6B; color: #fff; }   /* Mellomgrå */
span.bilkort-badge--kampanje  { background: #EB6555; color: #fff; }   /* Autokorall */
span.bilkort-badge--nyhet     { background: #0096D6; color: #fff; }   /* Autoblå */
span.bilkort-badge--garanti,
span.bilkort-badge--trygt     { background: #F5F5F3; color: #1C1C1C; } /* Autokull-tekst på Auto lys bg */

.bilkort-pris {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}
.bilkort-kontantpris {
    font-size: 26.25px;
    font-weight: 400;
    line-height: 1.2;
}
.bilkort-mndpris {
    font-size: 14px;
    color: #6B6B6B;
    line-height: 1.2;
}

@media (hover: hover) {
    .bilkort:hover .bilkort-mndpris {
        color: #1C1C1C;
    }
}

/* === Neue Haas Grotesk Text (400) på alle bilkort-elementer ===
   Branding-mål: én font, én vekt, hierarki via størrelse + farge.
   !important fordi Elementor per-widget typography ellers vinner.
   Tatt i bruk 2026-05-21 etter Jan-Arilds bekreftelse. */
.bilkort,
.bilkort *,
.bilkort-tittel,
.bilkort-variant,
.bilkort-lokasjon,
.bilkort-meta,
.bilkort-kontantpris,
.bilkort-mndpris,
.bilkort-pris,
span.bilkort-badge,
span.bilkort-badge * {
    font-family: 'neue-haas-grotesk-text', sans-serif !important;
    font-weight: 400 !important;
}

/* Tabellnumre på pris- og meta-tekst – sifferene har lik bredde,
   så kolonneoppstilling blir ryddig og priser ikke "vibrerer" når
   et 999 → 1000-skifte skjer. */
.bilkort-kontantpris,
.bilkort-mndpris,
.bilkort-meta {
    font-variant-numeric: tabular-nums;
}

/* === Test 2026-05-21: type-skala + farger ===
   Regelsett: 4 sizes på kortet (12, 14, 20, 25 – Major Third 1.25-ratio),
   2 tekstfarger (#1C1C1C Autokull primary, #6B6B6B Mellomgrå sekundær).
   Neue Haas overalt. Ingen mixing innen samme element –
   hierarki MELLOM elementer. */

.bilkort-badge,
span.bilkort-badge {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

.bilkort-tittel {
    font-size: 26.25px !important;
    color: #1C1C1C !important;
    line-height: 1.2 !important;
}

.bilkort-variant {
    font-size: 14px !important;
    color: #6B6B6B !important;
    line-height: 1.2 !important;
}

.bilkort-lokasjon,
.bilkort-meta {
    font-size: 14px !important;
    color: #6B6B6B !important;
    line-height: 1.2 !important;
}

.bilkort-kontantpris {
    font-size: 26.25px !important;
    color: #1C1C1C !important;
    line-height: 1.2 !important;
}

.bilkort-mndpris {
    font-size: 14px !important;
    color: #6B6B6B !important;
    line-height: 1.2 !important;
}