/* ── Delt kort-styling for objekt-kort ────────────────────────
   Brukes av alle steder som rendrer kort via ls_render_cards_html()
   (functions.php) — page-landsted.php og forsidens "aktuelle steder".
   Holdes i én fil for å unngå at kortene ser forskjellige ut på tvers
   av siden. ── */

:root {
    --ls-accent:   #5a7f6e;
    --ls-accent-l: #eaf2ee;
    --ls-border:   #ddd;
    --ls-bg:       #f8f7f5;
    --ls-card-bg:  #fff;
    --ls-text:     #333;
    --ls-muted:    #666;
    --ls-badge-bg: rgba(0,0,0,.45);
    --ls-radius:   8px;
    --ls-chip-r:   20px;
    --ls-shadow:   0 2px 10px rgba(0,0,0,.09);
}

.ls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    transition: opacity .18s ease;
}
.ls-grid.is-loading {
    opacity: 0.35;
    pointer-events: none;
}
.ls-card {
    background: var(--ls-card-bg);
    border-radius: var(--ls-radius);
    overflow: hidden;
    box-shadow: var(--ls-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ls-card:hover { transform: translateY(-3px); box-shadow: 0 6px 22px rgba(0,0,0,.13); }
.ls-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }

/* Image area */
.ls-card-img-wrap { position: relative; overflow: hidden; background: #ede9e4; }
.ls-card-img-wrap img, .ls-card-map-fallback {
    width: 100%; height: 195px; object-fit: cover; display: block;
    transition: transform .3s ease;
}
.ls-card:hover .ls-card-img-wrap img { transform: scale(1.04); }
.ls-card-placeholder {
    height: 195px; display: flex; align-items: center; justify-content: center;
    color: #c5bdb5; font-size: 40px;
}
.ls-type-badge {
    position: absolute; top: 10px; left: 10px;
    background: color-mix(in srgb, var(--badge-color, #555) 32%, white);
    color: color-mix(in srgb, var(--badge-color, #333) 85%, #111);
    font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 12px;
    text-transform: capitalize; letter-spacing: .03em; backdrop-filter: blur(4px);
}

/* Highlighted card */
.ls-card--highlighted {
    border: 2px solid #c8992f;
    background: #fdf8ed;
    box-shadow: 0 2px 12px rgba(200,153,47,.18);
}
.ls-card--highlighted:hover { box-shadow: 0 6px 22px rgba(200,153,47,.28); }
.ls-highlighted-badge {
    position: absolute; top: 10px; right: 10px;
    background: #c8992f; color: #fff;
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 12px;
    letter-spacing: .03em; display: flex; align-items: center; gap: 4px;
}

/* Card body */
.ls-card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ls-card-title { font-size: 16px; font-weight: 700; color: #1a2840; margin: 0; line-height: 1.3; }
.ls-card-region { font-size: 12px; color: var(--ls-muted); margin: 0; display: flex; align-items: center; gap: 4px; }
.ls-card-desc {
    font-size: 13px; color: #555; margin: 4px 0 0; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 640px) {
    .ls-card-img-wrap img, .ls-card-map-fallback, .ls-card-placeholder { height: 140px; }
}