/* =====================================================================
   blog.css - עיצוב הבלוג של ניאון גולף (עמוד הרשימה ועמודי הכתבות).
   קובץ עצמאי בכוונה: css/output.css (Tailwind) לא נבנה מחדש עבור הבלוג,
   ולכן כל מה שהבלוג צריך מעבר ל-header/footer של האתר יושב כאן כ-CSS רגיל.
   צבעי המותג: רקע #0F0518, כרטיס #1D0A33, מסגרת #4D128B, סגול #A855F7,
   ציאן #00F0FF, טקסט משני #D1ACF5, ורוד #F600A7.
   ===================================================================== */

/* בעמודי הבלוג התוכן מוצג מיד, בלי אנימציית הכניסה של שאר האתר,
   כך שהטקסט גלוי גם בלי JavaScript וגם לסורקים של מנועי חיפוש */
.reveal-fade-up { opacity: 1; transform: none; transition: none; }

/* ---------- רשימת הכתבות ---------- */
.bl-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 640px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bl-card {
    display: flex;
    flex-direction: column;
    background: #1D0A33;
    border: 1px solid #4D128B;
    border-radius: 1rem;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: border-color .3s, transform .3s, box-shadow .3s;
}
.bl-card:hover {
    border-color: rgba(168, 85, 247, 0.7);
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.35);
}
.bl-card-img {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
    display: block;
    background: #0F0518;
}
.bl-card-body { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.bl-card-date { font-size: .8rem; color: #D1ACF5; }
.bl-card-title { font-size: 1.2rem; font-weight: 800; line-height: 1.35; color: #fff; }
.bl-card:hover .bl-card-title { color: #A855F7; }
.bl-card-summary {
    color: #D1ACF5;
    font-size: .95rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bl-card-more { margin-top: auto; padding-top: .5rem; color: #00F0FF; font-weight: 700; font-size: .9rem; }
.bl-empty { text-align: center; color: #D1ACF5; margin-top: 2rem; }
.bl-empty:empty { display: none; }

/* ---------- עמוד כתבה ---------- */
.bl-article { max-width: 52rem; }
.bl-crumbs { font-size: .85rem; color: #D1ACF5; margin-bottom: 1.5rem; display: flex; gap: .5rem; align-items: center; }
.bl-crumbs a { color: #D1ACF5; text-decoration: none; }
.bl-crumbs a:hover { color: #fff; }

.bl-head { margin-bottom: 2rem; }
.bl-title {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 900;
    color: #fff;
    margin-bottom: 1rem;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.35);
}
@media (min-width: 1024px) { .bl-title { font-size: 2.75rem; } }
.bl-lead { color: #D1ACF5; font-size: 1.15rem; line-height: 1.7; }
.bl-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; font-size: .85rem; color: #D1ACF5; }
.bl-meta > * + *::before { content: "\00B7"; margin-left: .75rem; }
.bl-author { color: #fff; font-weight: 500; }

.bl-hero {
    margin: 0 0 2.5rem;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid #4D128B;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.bl-hero img { width: 100%; height: auto; max-height: 30rem; object-fit: cover; display: block; }

/* גוף הכתבה: ה-HTML מגיע מהמודל, בלי inline styles, ומעוצב כאן בלבד */
.bl-body { color: #EDE3F7; font-size: 1.05rem; line-height: 1.85; }
.bl-body > * + * { margin-top: 1.1rem; }
.bl-body h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #A855F7;
    margin-top: 2.5rem;
    margin-bottom: .75rem;
    line-height: 1.3;
    text-shadow: 0 0 12px rgba(168, 85, 247, 0.45);
}
.bl-body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #00F0FF;
    margin-top: 1.75rem;
    margin-bottom: .5rem;
}
.bl-body h4 { font-size: 1.1rem; font-weight: 700; color: #fff; margin-top: 1.5rem; }
.bl-body p { margin-bottom: 0; }
.bl-body strong, .bl-body b { color: #fff; font-weight: 700; }
.bl-body em { color: #D1ACF5; }
.bl-body a { color: #00F0FF; text-decoration: underline; text-underline-offset: 3px; }
.bl-body a:hover { color: #fff; }
.bl-body ul, .bl-body ol { padding-right: 1.5rem; }
.bl-body ul { list-style: disc; }
.bl-body ol { list-style: decimal; }
.bl-body li { margin: .4rem 0; }
.bl-body li::marker { color: #A855F7; }
.bl-body blockquote {
    border-right: 3px solid #F600A7;
    padding: .25rem 1.25rem .25rem 0;
    color: #D1ACF5;
    font-style: italic;
}
.bl-body img { max-width: 100%; height: auto; border-radius: .75rem; border: 1px solid #4D128B; }
.bl-body table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.bl-body th, .bl-body td { border: 1px solid #4D128B; padding: .5rem .75rem; text-align: right; }
.bl-body th { background: #1D0A33; color: #fff; }
.bl-body hr { border: 0; border-top: 1px solid #4D128B; margin: 2rem 0; }

/* קופסת טיפים: <div class="tip"><h3>...</h3><ul>...</ul></div> */
.bl-body .tip {
    background: #1D0A33;
    border: 1px solid #4D128B;
    border-right: 4px solid #00F0FF;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1.75rem;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.08);
}
.bl-body .tip h3 { margin-top: 0; }
.bl-body .tip > * + * { margin-top: .5rem; }

/* שורת הגילוי על השימוש ב-AI, בסוף גוף הכתבה */
.bl-note {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid #4D128B;
    font-size: .85rem;
    color: #D1ACF5;
    opacity: .85;
}

/* קריאה לפעולה בסוף הכתבה */
.bl-cta {
    margin-top: 3rem;
    padding: 1.75rem 1.5rem;
    background: linear-gradient(135deg, #1D0A33 0%, #150726 100%);
    border: 1px solid #4D128B;
    border-radius: 1rem;
    text-align: center;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.15);
}
.bl-cta h2 { font-size: 1.5rem; font-weight: 900; color: #fff; margin-bottom: .5rem; }
.bl-cta p { color: #D1ACF5; line-height: 1.7; max-width: 36rem; margin: 0 auto 1.25rem; }
.bl-cta-btns { display: flex; flex-direction: column; gap: .75rem; align-items: center; }
@media (min-width: 640px) { .bl-cta-btns { flex-direction: row; justify-content: center; } }
.bl-btn {
    display: inline-block;
    padding: .8rem 2rem;
    border-radius: .5rem;
    font-weight: 900;
    font-size: 1.05rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform .2s, box-shadow .2s, background-color .2s;
    min-width: 12rem;
    text-align: center;
}
.bl-btn-primary { background: #00F0FF; color: #0F0518; border-color: #00F0FF; box-shadow: 0 0 25px rgba(0, 240, 255, 0.6); }
.bl-btn-primary:hover { transform: scale(1.04); box-shadow: 0 0 35px rgba(0, 240, 255, 0.8); }
.bl-btn-secondary { color: #00F0FF; border-color: #00F0FF; box-shadow: 0 0 10px rgba(0, 240, 255, 0.2); }
.bl-btn-secondary:hover { background: rgba(0, 240, 255, 0.1); box-shadow: 0 0 20px rgba(0, 240, 255, 0.5); }

/* עוד בבלוג */
.bl-more { margin-top: 3rem; }
.bl-more h2 { font-size: 1.4rem; font-weight: 900; color: #fff; margin-bottom: 1.25rem; }
.bl-more:has(.bl-grid:empty) { display: none; }