/* ==========================================================================
   HSN Nerio Layout — fully admin-controlled via CSS custom properties
   ========================================================================== */

.hsn-nerio-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    gap: var(--nr-gap, 0px);
    background: var(--nr-card-bg, #fff);
}
.hsn-nerio-wrap * { box-sizing: border-box; }

/* ── Badge ──────────────────────────────────────────────────────────────── */
.hsn-nerio-badge {
    display: inline-block;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: var(--nr-badge-tt, uppercase);
    padding: 4px 10px;
    border-radius: var(--nr-badge-radius, 20px);
    line-height: 1;
    margin-bottom: 7px;
    white-space: nowrap;
}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.hsn-nerio-hero {
    display: block;
    position: relative;
    width: 100%;
    min-height: var(--nr-hero-h-mob, 260px);
    border-radius: var(--nr-hero-radius, 0px);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
}

.hsn-nerio-hero-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #222;
    transition: transform .35s ease;
}
.hsn-nerio-wrap:not(.hsn-nerio-hover-none) .hsn-nerio-hero:hover .hsn-nerio-hero-img {
    transform: scale(1.04);
}

.hsn-nerio-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,var(--nr-overlay-alpha, 0.80)) 0%,
        rgba(0,0,0,calc(var(--nr-overlay-alpha, 0.80) * 0.4)) 50%,
        rgba(0,0,0,0.04) 100%
    );
}

.hsn-nerio-hero-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: var(--nr-hero-h-mob, 260px);
    padding: 20px 18px 18px;
}

.hsn-nerio-hero-title {
    font-size: var(--nr-hero-title-sz, 22px);
    font-weight: var(--nr-hero-title-fw, 800);
    line-height: 1.28;
    color: #fff;
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hsn-nerio-hero-excerpt {
    font-size: 13px;
    color: rgba(255,255,255,.78);
    line-height: 1.5;
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hsn-nerio-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.hsn-nerio-hero-meta .hsn-nerio-meta-item {
    font-size: 12px;
    color: rgba(255,255,255,.80);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── LIST ROW ───────────────────────────────────────────────────────────── */
.hsn-nerio-row {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    padding: 14px 6px;
    border-bottom: 1px solid var(--nr-divider, #f0f0f0);
    background: var(--nr-card-bg, #fff);
    transition: background .18s ease;
}
.hsn-nerio-row:last-child { border-bottom: none; }

/* Hover effects */
.hsn-nerio-hover-bg .hsn-nerio-row:hover { background: #f5f5f5; }
.hsn-nerio-hover-opacity .hsn-nerio-row:hover { opacity: .78; }
.hsn-nerio-hover-none .hsn-nerio-row:hover { background: var(--nr-card-bg, #fff); }

.hsn-nerio-row.hsn-nerio-shadow {
    border-bottom-color: transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border-radius: 8px;
    padding: 14px 12px;
    margin-bottom: 6px;
}

.hsn-nerio-thumb {
    flex: 0 0 var(--nr-thumb-w, 110px);
    width: var(--nr-thumb-w, 110px);
    height: var(--nr-thumb-h, 82px);
    border-radius: var(--nr-thumb-r, 6px);
    background-size: cover;
    background-position: center;
    background-color: #e8e8e8;
    transition: transform .28s ease;
}
.hsn-nerio-hover-bg .hsn-nerio-row:hover .hsn-nerio-thumb,
.hsn-nerio-hover-opacity .hsn-nerio-row:hover .hsn-nerio-thumb {
    transform: scale(1.04);
}

.hsn-nerio-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hsn-nerio-row-title {
    font-size: var(--nr-row-title-sz, 15px);
    font-weight: var(--nr-row-title-fw, 700);
    line-height: 1.38;
    color: var(--nr-title, #1a1a1a);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hsn-nerio-row-excerpt {
    font-size: 12px;
    color: var(--nr-meta, #999);
    line-height: 1.4;
    margin: 2px 0 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hsn-nerio-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
}
.hsn-nerio-row-meta .hsn-nerio-meta-item {
    font-size: 11px;
    color: var(--nr-meta, #999);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
    .hsn-nerio-hero-body,
    .hsn-nerio-hero { min-height: var(--nr-hero-h-tab, 320px); }
}
@media (min-width: 900px) {
    .hsn-nerio-hero-body,
    .hsn-nerio-hero { min-height: var(--nr-hero-h-desk, 380px); }
}

@media (prefers-reduced-motion: reduce) {
    .hsn-nerio-hero-img,
    .hsn-nerio-thumb,
    .hsn-nerio-row { transition: none; }
}