/* ============================================================
   Blog — public website (LuisSizzoWebsiteL12)
   Posts authored on the Dashboard project; rendered HTML lives
   in `blog_posts.content_html` and is dropped into .lux-blog-detail-body.
   ============================================================ */

/* ---------- Toolbar (search + category pills) ---------- */
/* Shared content spine for the entire blog area. Matches the existing
   `.lux-grid` pattern (max-width 1680, 32px lateral padding) but a touch
   narrower so cards stay readable. */
.lux-blog-toolbar,
.lux-blog-grid,
.lux-comments {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}
@media (max-width: 700px) {
    .lux-blog-toolbar,
    .lux-blog-grid,
    .lux-comments {
        padding-left: 18px;
        padding-right: 18px;
    }
}

.lux-blog-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.lux-blog-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--lux-bg-elevated);
    border: 1px solid var(--lux-border);
    border-radius: var(--lux-radius-pill);
    padding: 8px 16px;
    min-width: 240px;
    box-shadow: var(--lux-shadow-md);
}
.lux-blog-search > i { color: var(--lux-text-muted); font-size: 20px; }
.lux-blog-search input {
    border: none !important;
    outline: none;
    background: transparent;
    color: var(--lux-text-primary);
    font: 14px var(--lux-font-body);
    flex: 1;
    height: 32px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.lux-blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lux-blog-cat-pill {
    --cat-color: var(--lux-brand);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--lux-radius-pill);
    background: var(--lux-bg-elevated);
    border: 1px solid var(--lux-border);
    color: var(--lux-text-primary) !important;
    font: 600 12px var(--lux-font-body);
    text-transform: uppercase;
    letter-spacing: .3px;
    transition: transform .18s var(--lux-ease-out), box-shadow .18s var(--lux-ease-out);
}
.lux-blog-cat-pill > i { font-size: 16px; color: var(--cat-color); }
.lux-blog-cat-pill:hover { transform: translateY(-1px); box-shadow: var(--lux-shadow-md); }
.lux-blog-cat-pill.is-active {
    background: var(--cat-color);
    border-color: var(--cat-color);
    color: #fff !important;
}
.lux-blog-cat-pill.is-active > i { color: #fff; }

/* ---------- Grid + cards ---------- */
.lux-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.lux-blog-card {
    background: var(--lux-bg-elevated);
    border: 1px solid var(--lux-border);
    border-radius: var(--lux-radius-lg);
    overflow: hidden;
    box-shadow: var(--lux-shadow-md);
    transition: transform .25s var(--lux-ease-out), box-shadow .25s var(--lux-ease-out);
}
.lux-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lux-shadow-lg);
}

.lux-blog-card-link { display: block; color: inherit !important; }

.lux-blog-card-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--lux-bg-subtle);
    overflow: hidden;
}
.lux-blog-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s var(--lux-ease-out);
}
.lux-blog-card:hover .lux-blog-card-cover img { transform: scale(1.04); }

.lux-blog-card-cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--lux-bg-subtle) 0%, var(--lux-bg-elevated) 100%);
}
.lux-blog-card-cover--placeholder > i {
    font-size: 56px;
    color: var(--lux-brand);
    opacity: .55;
}

.lux-blog-card-body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lux-blog-card-cat {
    --cat-color: var(--lux-brand);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--lux-radius-pill);
    background: color-mix(in srgb, var(--cat-color) 14%, transparent);
    color: var(--cat-color);
    font: 700 11px var(--lux-font-body);
    text-transform: uppercase;
    letter-spacing: .4px;
    align-self: flex-start;
}
.lux-blog-card-cat > i { font-size: 14px; }

.lux-blog-card-title {
    font: 700 19px/1.3 var(--lux-font-display);
    color: var(--lux-text-primary);
    margin: 0;
}

.lux-blog-card-excerpt {
    font: 14px/1.55 var(--lux-font-body);
    color: var(--lux-text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lux-blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: auto;
    padding-top: 6px;
    color: var(--lux-text-muted);
    font: 12px var(--lux-font-body);
}
.lux-blog-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.lux-blog-card-meta i { font-size: 14px; }

/* ---------- Empty state ---------- */
.lux-blog-empty {
    text-align: center;
    padding: 72px 24px;
    color: var(--lux-text-muted);
}
.lux-blog-empty > i { font-size: 56px; color: var(--lux-brand); opacity: .5; margin-bottom: 12px; }
.lux-blog-empty > p { font: 16px var(--lux-font-body); margin: 0; }

/* ---------- Detail (single post) ---------- */
.lux-blog-detail-cat {
    align-self: center;
    margin-bottom: 14px;
}

.lux-blog-detail-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-top: 10px;
    color: var(--lux-text-muted);
    font: 13px var(--lux-font-body);
}
.lux-blog-detail-meta span { display: inline-flex; align-items: center; gap: 6px; }
.lux-blog-detail-meta i { font-size: 16px; }

.lux-blog-detail {
    /* Matches the blog spine (toolbar/grid/comments at 1400px max with
       32px lateral padding) so the article visually aligns with the
       index and comments sections. */
    max-width: 1400px;
    margin: 0 32px;
    margin-left: auto; margin-right: auto;
    background: var(--lux-bg-elevated);
    border-radius: var(--lux-radius-lg);
    border: 1px solid var(--lux-border);
    box-shadow: var(--lux-shadow-md);
    overflow: hidden;
}
@media (min-width: 1465px) { .lux-blog-detail { margin-left: auto; margin-right: auto; } }
@media (max-width: 700px)  { .lux-blog-detail { margin: 0 18px; } }

.lux-blog-detail-cover {
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--lux-bg-subtle);
}
.lux-blog-detail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lux-blog-detail-body {
    /* Inner padding scales with viewport so text doesn't run too close
       to the edges on a 1400px container, while staying readable on
       narrow screens. */
    padding: 48px 64px 36px;
    color: var(--lux-text-primary);
    font: 16px/1.7 var(--lux-font-body);
}
@media (max-width: 1100px) { .lux-blog-detail-body { padding: 40px 48px 32px; } }
@media (max-width: 700px)  { .lux-blog-detail-body { padding: 28px 22px 22px; } }
.lux-blog-detail-body h1,
.lux-blog-detail-body h2,
.lux-blog-detail-body h3,
.lux-blog-detail-body h4 {
    font-family: var(--lux-font-display);
    color: var(--lux-text-primary);
    margin: 1.6em 0 .5em;
    line-height: 1.25;
}
.lux-blog-detail-body h1 { font-size: 30px; }
.lux-blog-detail-body h2 { font-size: 24px; }
.lux-blog-detail-body h3 { font-size: 19px; }
.lux-blog-detail-body p { margin: 0 0 1.1em; }
.lux-blog-detail-body a { color: var(--lux-brand); text-decoration: underline; }
.lux-blog-detail-body a:hover { color: var(--lux-brand-dark); }
.lux-blog-detail-body ul,
.lux-blog-detail-body ol { margin: 0 0 1.1em 1.4em; }
.lux-blog-detail-body li { margin: .25em 0; }
.lux-blog-detail-body blockquote {
    margin: 1.2em 0;
    padding: 12px 18px;
    border-left: 3px solid var(--lux-brand);
    background: var(--lux-bg-subtle);
    border-radius: 0 var(--lux-radius-sm) var(--lux-radius-sm) 0;
    color: var(--lux-text-secondary);
    font-style: italic;
}
.lux-blog-detail-body code {
    background: var(--lux-bg-subtle);
    padding: 2px 6px;
    border-radius: 4px;
    font: 14px var(--lux-font-mono);
}
.lux-blog-detail-body pre {
    background: #1e1e2e;
    color: #f3f4f6;
    padding: 16px 18px;
    border-radius: var(--lux-radius-sm);
    overflow-x: auto;
    margin: 1.2em 0;
}
.lux-blog-detail-body pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 13.5px;
}
.lux-blog-detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--lux-radius-sm);
    margin: 1em 0;
    display: block;
}
.lux-blog-detail-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
    font-size: 14px;
}
.lux-blog-detail-body th,
.lux-blog-detail-body td {
    padding: 10px 12px;
    border: 1px solid var(--lux-border);
    text-align: left;
}
.lux-blog-detail-body th {
    background: var(--lux-bg-subtle);
    font-weight: 700;
}
.lux-blog-detail-body hr {
    border: none;
    border-top: 1px solid var(--lux-border);
    margin: 2em 0;
}

.lux-blog-detail-tags {
    padding: 0 64px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--lux-text-muted);
}
@media (max-width: 1100px) { .lux-blog-detail-tags { padding: 0 48px 24px; } }
@media (max-width: 700px)  { .lux-blog-detail-tags { padding: 0 22px 22px; } }
.lux-blog-detail-tags > i { font-size: 18px; }
.lux-blog-detail-tag {
    padding: 4px 10px;
    border-radius: var(--lux-radius-pill);
    background: var(--lux-bg-subtle);
    color: var(--lux-text-secondary);
    font: 600 12px var(--lux-font-body);
}

.lux-blog-detail-back {
    padding: 0 64px 36px;
}
@media (max-width: 1100px) { .lux-blog-detail-back { padding: 0 48px 32px; } }
@media (max-width: 700px)  { .lux-blog-detail-back { padding: 0 22px 24px; } }
.lux-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: var(--lux-radius-pill);
    background: transparent;
    border: 1px solid var(--lux-border-strong);
    color: var(--lux-text-primary) !important;
    font: 600 13px var(--lux-font-body);
    text-transform: uppercase;
    letter-spacing: .3px;
    transition: background .18s var(--lux-ease-out), transform .18s var(--lux-ease-out);
}
.lux-btn-ghost:hover {
    background: var(--lux-bg-subtle);
    transform: translateY(-1px);
}

@media (max-width: 700px) {
    .lux-blog-detail-body  { padding: 24px 22px 18px; }
    .lux-blog-detail-tags  { padding: 0 22px 18px; }
    .lux-blog-detail-back  { padding: 0 22px 24px; }
    .lux-blog-detail-body h1 { font-size: 24px; }
    .lux-blog-detail-body h2 { font-size: 20px; }
}

/* ============================================================
   Insertable components from the Dashboard editor — must stay
   in sync with the Dashboard's `blog.blade.php` definitions so
   posts render identically in both places.
   ============================================================ */

.lux-blog-detail-body .md-card {
    padding: 14px 16px;
    border-radius: 10px;
    margin: 1em 0;
    border-left: 4px solid;
    font-size: 14px;
    line-height: 1.55;
}
.lux-blog-detail-body .md-card strong { color: inherit; }
.lux-blog-detail-body .md-card-info    { background: #E3F2FD; color: #0D47A1; border-left-color: #1E88E5; }
.lux-blog-detail-body .md-card-success { background: #E8F5E9; color: #1B5E20; border-left-color: #2E7D32; }
.lux-blog-detail-body .md-card-warning { background: #FFF8E1; color: #5D4037; border-left-color: #F39C12; }
.lux-blog-detail-body .md-card-danger  { background: #FDECEA; color: #B71C1C; border-left-color: #C62828; }
.lux-blog-detail-body .md-card-tip     { background: #F3E5F5; color: #4A148C; border-left-color: #6A1B9A; }

.lux-blog-detail-body .md-callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 10px;
    margin: 1em 0;
    background: var(--lux-bg-subtle);
    color: var(--lux-text-primary);
}
.lux-blog-detail-body .md-callout .md-callout-icon {
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 1px;
}

.lux-blog-detail-body .md-hero {
    padding: 28px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1A2434 0%, #2A3850 100%);
    color: #fff;
    text-align: center;
    margin: 1.2em 0;
}
.lux-blog-detail-body .md-hero h2 { color: #fff; margin: 0 0 6px; font-size: 26px; }
.lux-blog-detail-body .md-hero p  { margin: 0; opacity: .9; font-size: 15px; color: #fff; }

.lux-blog-detail-body .md-cols {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1em 0;
}
.lux-blog-detail-body .md-cols .md-col {
    background: var(--lux-bg-elevated);
    border: 1px solid var(--lux-border);
    border-radius: 10px;
    padding: 14px 16px;
}
@media (max-width: 600px) {
    .lux-blog-detail-body .md-cols { grid-template-columns: 1fr; }
}

.lux-blog-detail-body .md-cta {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 22px;
    background: #6A1B9A;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    margin: .4em 0;
}
.lux-blog-detail-body .md-cta:hover { background: #4A148C; }

/* ============================================================
   Comments section (under each blog post)
   The container width is unified with the rest of the blog area
   higher up (1400px max + 32px lateral padding). Here we just
   give it a top margin to separate from the article above.
   ============================================================ */
.lux-comments {
    margin-top: 56px;
}
.lux-comments-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px;
    margin-left: 10px;
    padding: 0 8px;
    border-radius: 14px;
    background: var(--lux-bg-subtle);
    color: var(--lux-text-secondary);
    font: 700 14px var(--lux-font-body);
    vertical-align: middle;
}

/* Flash messages */
.lux-comments-flash {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px;
    border-radius: var(--lux-radius-md);
    margin-bottom: 18px;
    font: 14px/1.5 var(--lux-font-body);
}
.lux-comments-flash > i { font-size: 20px; flex-shrink: 0; }
.lux-comments-flash.is-info { background: #E3F2FD; color: #0D47A1; border-left: 3px solid #1565C0; }
.lux-comments-flash.is-ok   { background: #E8F5E9; color: #1B5E20; border-left: 3px solid #2E7D32; }
.lux-comments-flash.is-err  { background: #FDECEA; color: #B71C1C; border-left: 3px solid #C62828; }

/* Sub-heading that introduces the comment form (now placed BELOW the
   list of existing comments). */
.lux-comments-form-title {
    display: flex; align-items: center; gap: 10px;
    margin: 36px 0 18px;
    font: 700 18px/1.3 var(--lux-font-display);
    color: var(--lux-text-primary);
}
.lux-comments-form-title > i { color: var(--lux-brand); font-size: 22px; }

/* Comment form */
.lux-comment-form {
    background: var(--lux-bg-elevated);
    border: 1px solid var(--lux-border);
    border-radius: var(--lux-radius-lg);
    padding: 24px 26px;
    margin-bottom: 0;
    box-shadow: var(--lux-shadow-md);
}
.lux-comment-form-grid {
    display: grid; gap: 16px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 14px;
}
@media (max-width: 600px) { .lux-comment-form-grid { grid-template-columns: 1fr; } }
.lux-comment-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.lux-comment-field:last-of-type { margin-bottom: 8px; }
.lux-comment-field label {
    font: 600 11px var(--lux-font-body);
    color: var(--lux-text-secondary);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.lux-comment-field input,
.lux-comment-field textarea {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid var(--lux-border);
    border-radius: var(--lux-radius-sm);
    background: var(--lux-bg-base);
    color: var(--lux-text-primary);
    font: 14px var(--lux-font-body);
    transition: border-color .15s, background-color .15s;
}
.lux-comment-field textarea {
    min-height: 100px; resize: vertical;
    line-height: 1.5;
}
.lux-comment-field input:focus,
.lux-comment-field textarea:focus {
    outline: none;
    border-color: var(--lux-brand);
    background: var(--lux-bg-elevated);
}
.lux-comment-disclaimer {
    display: flex; align-items: center; gap: 6px;
    margin: 8px 0 16px;
    font: 12px/1.4 var(--lux-font-body);
    color: var(--lux-text-muted);
}
.lux-comment-disclaimer > i { font-size: 16px; }

.lux-btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 24px;
    border: none;
    border-radius: var(--lux-radius-pill);
    background: var(--lux-brand);
    color: #fff;
    font: 700 13px var(--lux-font-body);
    text-transform: uppercase;
    letter-spacing: .3px;
    cursor: pointer;
    box-shadow: var(--lux-shadow-glow);
    transition: background .18s, transform .18s, box-shadow .18s;
}
.lux-btn-primary:hover {
    background: var(--lux-brand-dark);
    transform: translateY(-1px);
    box-shadow: var(--lux-shadow-glow-strong);
}

/* Empty state */
.lux-comments-empty {
    text-align: center;
    padding: 40px 24px;
    color: var(--lux-text-muted);
    background: var(--lux-bg-elevated);
    border: 1px dashed var(--lux-border);
    border-radius: var(--lux-radius-lg);
}
.lux-comments-empty > i { font-size: 36px; opacity: .55; margin-bottom: 8px; color: var(--lux-brand); }
.lux-comments-empty > p { margin: 0; font: 14px var(--lux-font-body); }

/* Comment list */
.lux-comments-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex; flex-direction: column;
    gap: 18px;
}
.lux-comment {
    display: flex; gap: 14px;
    padding: 18px 20px;
    background: var(--lux-bg-elevated);
    border: 1px solid var(--lux-border);
    border-radius: var(--lux-radius-lg);
    box-shadow: var(--lux-shadow-md);
}
.lux-comment-avatar {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lux-brand) 0%, var(--lux-brand-dark) 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font: 700 16px var(--lux-font-display);
}
.lux-comment-body { flex: 1; min-width: 0; }
.lux-comment-head {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 10px; margin-bottom: 8px;
}
.lux-comment-author {
    font: 700 14px var(--lux-font-body);
    color: var(--lux-text-primary);
}
.lux-comment-date {
    font: 12px var(--lux-font-body);
    color: var(--lux-text-muted);
}
.lux-comment-text {
    margin: 0;
    font: 14px/1.6 var(--lux-font-body);
    color: var(--lux-text-secondary);
    word-wrap: break-word;
    white-space: pre-wrap;
}