/* =========================================================================
   Novin OS — Front-end Styles
   ========================================================================= */

:root {
    --ns-primary:    #1a56db;
    --ns-primary-h:  #1648b8;
    --ns-success:    #059669;
    --ns-danger:     #dc2626;
    --ns-warning:    #d97706;
    --ns-surface:    #ffffff;
    --ns-surface-2:  #f8fafc;
    --ns-border:     #e2e8f0;
    --ns-text:       #1e293b;
    --ns-text-2:     #64748b;
    --ns-text-3:     #94a3b8;
    --ns-radius:     8px;
    --ns-radius-lg:  12px;
    --ns-shadow:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --ns-shadow-md:  0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.04);
    --ns-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
}

/* -------------------------------------------------------------------------
   Grid
   ------------------------------------------------------------------------- */
.ns-grid {
    display: grid;
    gap: 20px;
}
.ns-grid--1 { grid-template-columns: 1fr; }
.ns-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ns-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ns-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .ns-grid--3, .ns-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ns-grid--2, .ns-grid--3, .ns-grid--4 { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Card
   ------------------------------------------------------------------------- */
.ns-card {
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-lg);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    display: flex;
    flex-direction: column;
}
.ns-card:hover {
    box-shadow: var(--ns-shadow-md);
    transform: translateY(-2px);
}
.ns-card__thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ns-surface-2);
}
.ns-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ns-card__body {
    padding: 16px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ns-card__subtitle {
    font-size: 12px;
    color: var(--ns-text-2);
    margin-bottom: 4px;
    font-weight: 500;
    letter-spacing: .02em;
}
.ns-card__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 8px;
}
.ns-card__title a {
    color: var(--ns-text);
    text-decoration: none;
}
.ns-card__title a:hover {
    color: var(--ns-primary);
}
.ns-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 10px;
}
.ns-meta-item {
    font-size: 13px;
    color: var(--ns-text-2);
    white-space: nowrap;
}
.ns-meta-item a { color: var(--ns-text-2); text-decoration: none; }
.ns-meta-item a:hover { color: var(--ns-primary); }
.ns-meta-item--expired { color: var(--ns-danger); text-decoration: line-through; }

.ns-card__header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.ns-card__excerpt {
    font-size: 14px;
    color: var(--ns-text-2);
    line-height: 1.55;
    margin-bottom: 14px;
    flex: 1;
}
.ns-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

.ns-card--closed { opacity: .65; }
.ns-card--closed .ns-card__thumb { filter: grayscale(.5); }

/* -------------------------------------------------------------------------
   Badges
   ------------------------------------------------------------------------- */
.ns-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .02em;
    line-height: 1.4;
}
.ns-badge--funding {
    background: #ede9fe;
    color: #5b21b6;
}
.ns-badge--type {
    background: #dbeafe;
    color: #1e40af;
}
.ns-badge--price {
    font-weight: 700;
}
.ns-badge--free {
    background: #d1fae5;
    color: #065f46;
}
.ns-badge--paid {
    background: #fef3c7;
    color: #92400e;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.ns-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 18px;
    border-radius: var(--ns-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
    line-height: 1.4;
    font-family: var(--ns-font);
}
.ns-btn--primary {
    background: var(--ns-primary);
    color: #fff;
    border-color: var(--ns-primary);
}
.ns-btn--primary:hover {
    background: var(--ns-primary-h);
    color: #fff;
}
.ns-btn--secondary {
    background: var(--ns-surface);
    color: var(--ns-text);
    border-color: var(--ns-border);
}
.ns-btn--secondary:hover {
    background: var(--ns-surface-2);
    border-color: var(--ns-text-3);
}
.ns-btn--sm {
    font-size: 13px;
    padding: 6px 14px;
}
.ns-btn--filter {
    background: var(--ns-primary);
    color: #fff;
    font-size: 13px;
    padding: 7px 16px;
    border: none;
    border-radius: var(--ns-radius);
    cursor: pointer;
}
.ns-btn--filter:hover { background: var(--ns-primary-h); }
.ns-btn--reset {
    font-size: 13px;
    padding: 7px 14px;
    background: var(--ns-surface-2);
    color: var(--ns-text-2);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    text-decoration: none;
}
.ns-btn--reset:hover { background: var(--ns-border); color: var(--ns-text); }

/* -------------------------------------------------------------------------
   Filter Bar
   ------------------------------------------------------------------------- */
.ns-filter-bar {
    margin-bottom: 20px;
}
.ns-filter-bar__inner {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 18px;
    background: var(--ns-surface-2);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-lg);
}
.ns-filter {
    flex: 1;
    min-width: 140px;
}
.ns-filter__select {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    background: var(--ns-surface);
    color: var(--ns-text);
    font-family: var(--ns-font);
}
.ns-filter__select:focus {
    outline: none;
    border-color: var(--ns-primary);
    box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}

/* -------------------------------------------------------------------------
   Pagination
   ------------------------------------------------------------------------- */
.ns-pagination {
    margin-top: 24px;
    text-align: center;
}
.ns-pagination .page-numbers {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 2px;
    font-size: 13px;
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    text-decoration: none;
    color: var(--ns-text-2);
    background: var(--ns-surface);
}
.ns-pagination .page-numbers.current {
    background: var(--ns-primary);
    color: #fff;
    border-color: var(--ns-primary);
}
.ns-pagination .page-numbers:hover:not(.current) {
    background: var(--ns-surface-2);
    border-color: var(--ns-text-3);
}

.ns-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--ns-text-2);
    font-size: 15px;
}

/* -------------------------------------------------------------------------
   Lead Capture Form
   ------------------------------------------------------------------------- */
.ns-lead-form-wrap {
    max-width: 640px;
    margin: 0 auto;
}
.ns-form-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--ns-text);
}
.ns-field-row {
    margin-bottom: 14px;
}
.ns-field-row--half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 560px) {
    .ns-field-row--half { grid-template-columns: 1fr; }
}
.ns-field {
    margin-bottom: 14px;
}
.ns-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ns-text);
    margin-bottom: 5px;
}
.ns-req { color: var(--ns-danger); }

.ns-field input[type="text"],
.ns-field input[type="email"],
.ns-field input[type="tel"],
.ns-field input[type="url"],
.ns-field input[type="number"],
.ns-field select,
.ns-field textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    background: var(--ns-surface);
    color: var(--ns-text);
    font-family: var(--ns-font);
    transition: border-color .15s, box-shadow .15s;
}
.ns-field input:focus,
.ns-field select:focus,
.ns-field textarea:focus {
    outline: none;
    border-color: var(--ns-primary);
    box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}

.ns-form .ns-btn--primary {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 12px 24px;
}

.ns-form-error {
    margin-top: 12px;
    padding: 10px 14px;
    font-size: 13px;
    background: #fef2f2;
    color: var(--ns-danger);
    border: 1px solid #fecaca;
    border-radius: var(--ns-radius);
}

.ns-form-success {
    padding: 20px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: var(--ns-radius-lg);
    text-align: center;
    font-size: 16px;
    color: #065f46;
}
.ns-form-success p { margin: 0; }

.ns-honeypot { position: absolute; left: -9999px; }