/* ============================================================
 * REINS — Home CSS: Teaser Carousel
 * ------------------------------------------------------------
 * קרוסלת טיזרים (מאמרים/הרצאות/קורסים) — .reins-home__teaser-*.
 * פוצל מ-reins-home-shared.css המקורי.
 *
 * .reins-home__lecture-img (תמונת "הרצאה קרובה", reins_home_lecture_image_html
 * ב-shared/content/lecture-helpers.php) עברה לכאן מ-reins-home-video-modal.css
 * הישן - היא לא קשורה למודל הוידאו בכלל, רק ישבה שם באותו קובץ בטעות.
 *
 * [עודכן] קרוסלת הקורסים (.reins-home__teaser-carousel) עברה מ-
 * מנוע "track גולש" (scrollBy + scroll-snap) למנוע השקפים הגנרי
 * המשותף (data-carousel-slide + is-active/aria-hidden, ראו
 * reins-home-carousel.js). ההבדל הפונקציונלי היחיד שהיה קיים
 * בפועל (מלבד הכפילות בקוד) היה peek לא-עקבי במובייל
 * (flex-basis:210px<480px) שגרם לכמה כרטיסים חלקיים להיראות בעוד
 * שבמסך רגיל תמיד הוצג כרטיס יחיד (flex-basis:100%) — הוסר, כדי
 * שההתנהגות תהיה זהה בכל רוחב מסך: כרטיס אחד בלבד בכל רגע.
 * ============================================================ */
.reins-home__lecture-img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }

.reins-home__teaser-carousel { position: relative; }

.reins-home__teaser-track { position: relative; }

.reins-home__teaser-card {
    position: relative;
    display: flex; flex-direction: column;
    gap: 8px;
}

/* מוסתר לגמרי כשלא פעיל — הרלוונטי היחיד לניווט הוא אינדקס ה-JS,
   לא scroll offset. אין יותר scroll-snap/overflow-x: רק כרטיס
   .is-active אחד תופס מקום בפריסה בכל רגע נתון. */
.reins-home__teaser-card[aria-hidden="true"] { display: none; }

.reins-home__teaser-cardlink {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.reins-home__teaser-media {
    position: relative;
    aspect-ratio: 16/9;
    background: rgba(0,0,0,.04);
    overflow: hidden;
    border: 1px solid var(--reins-border);
    border-radius: var(--reins-radius-md);
}
.reins-home__teaser-img, .reins-home__teaser-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.reins-home__teaser-img-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ast-global-color-3); font-size: 26px; }

.reins-home__teaser-play {
    position: absolute; inset: 0; margin: auto; width: 44px; height: 44px;
    border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    font-size: 15px; transition: background .15s, transform .15s;
    z-index: 2;
}
.reins-home__teaser-play:hover { background: var(--ast-global-color-3); transform: scale(1.06); }

.reins-home__teaser-body a[class*="reins-btn"] {
    font-size: 12px;
    padding: 7px 14px;
    min-height: auto;
    align-self: flex-start;
    width: auto;
    display: inline-flex;
}

/* .reins-home__teaser-body--top — מודפסת ב-shared/courses-carousel-renderer.php
 * יחד עם .reins-home__teaser-body, לכרטיסי קורסים שבהם הכותרת מוצגת מעל
 * התמונה במקום מתחתיה. סדר ה-DOM לבדו (הכותרת נכתבת לפני התמונה בקוד)
 * לא מספיק אכיפה, כי .reins-home__teaser-card הוא flex column עם סדר
 * שרירותי — order:-1 מבטיח שהכותרת תהיה תמיד ראשונה גם אם ה-markup ישתנה. */
.reins-home__teaser-body--top {
    order: -1;
}

.reins-home__teaser-title { font-size: 13px; font-weight: 700; margin: 0; color: var(--ast-global-color-2); line-height: 1.3; }

.reins-home__teaser-title a { color: inherit; text-decoration: none; }

.reins-home__teaser-excerpt { font-size: 12px; color: var(--ast-global-color-3); opacity: .75; line-height: 1.5; margin: 0; flex: 1; }

.reins-home__teaser-body .reins-btn {
    font-size: 12px;
    padding: 7px 14px;
    min-height: auto;
    align-self: flex-start;
    width: auto;
    display: inline-flex;
}