/* הכרטיס במסך מלא: הכל נכנס למסך אחד בלי גלילה. כל המידות נגזרות מ---u, לפי המסך. */
html.cs-page, html.cs-page body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
html.cs-page body { background: none; }
.cs {
    --u: min(2.564vw, 1.316vh, 11px);
    position: relative; box-sizing: border-box; width: 100%; height: 100vh;
    display: flex; flex-direction: column; direction: rtl; text-align: right; color: #fff;
    padding: calc(var(--u) * 1.6 + env(safe-area-inset-top, 0px)) calc(var(--u) * 1.8) calc(var(--u) * .8 + env(safe-area-inset-bottom, 0px));
    background-size: cover !important;
}
@supports (height: 100dvh) {
    .cs { --u: min(2.564vw, 1.316dvh, 11px); height: 100dvh; }
}
.cs *, .cs *::before, .cs *::after { box-sizing: border-box; }
.cs a { color: inherit; text-decoration: none; }
.cs h1, .cs h2, .cs h3, .cs p, .cs ul { margin: 0; padding: 0; list-style: none; }
/* מעבר הדרגתי בקצוות, בלי קו בין הכרטיס לאזורי הדפדפן */
.cs::before, .cs::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.cs::before { top: 0; height: calc(44px + env(safe-area-inset-top, 0px)); background: linear-gradient(to bottom, var(--bar-top) 12%, transparent); }
.cs::after { bottom: 0; height: calc(56px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bar-bottom) 12%, transparent); }
.cs-wide { position: relative; z-index: 1; width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; flex: 1; min-height: 0; }

.cs-head { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 1.6); padding-left: calc(var(--u) * 5); }
.cs-photo { flex: none; display: block; width: calc(var(--u) * 11); height: calc(var(--u) * 11); object-fit: cover; border: 2px solid #fff; }
.cs-names { flex: 1; min-width: 0; }
.cs h1 { font-size: calc(var(--u) * 2.7); line-height: 1.15; font-weight: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs h2 { font-size: calc(var(--u) * 1.8); line-height: 1.25; margin-top: calc(var(--u) * .5); font-weight: normal; color: #fff; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.cs-details { flex: none; margin-top: calc(var(--u) * 1.6) !important; font-size: calc(var(--u) * 1.6); line-height: 1.3; }
.cs-details li { display: flex; gap: calc(var(--u) * 1); padding: calc(var(--u) * .35) 0; }
.cs-details b { flex: none; width: calc(var(--u) * 6.2); font-weight: bold; }
.cs-details span { flex: 1; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-title { flex: none; text-align: center; font-size: calc(var(--u) * 2.2); font-weight: normal; margin-top: calc(var(--u) * 1.2) !important; padding-top: calc(var(--u) * 1.2) !important; border-top: 1px solid #ffffff99; }

/* הלחצנים: כל שורה באותו גובה, והלחצנים מתכווצים לפי הכמות */
.cs-btns { flex: 1; min-height: 0; position: relative; margin-top: calc(var(--u) * .8); }
.cs-grid { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: space-evenly; direction: rtl; }
.cs-btn { width: calc(100% / var(--cols)); height: min(calc(100% / var(--rows)), calc(var(--u) * 12.5)); container-type: size; }
.cs-btn a { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; }
.cs-ic { flex: none; display: flex; align-items: center; justify-content: center; --size: min(66cqw, calc(100cqh - 2.5 * var(--label)), 64px); width: var(--size); height: var(--size); border: 2px solid #fff; border-radius: 50%; font-size: calc(var(--size) * .42); line-height: 1; }
.cs-ic i { line-height: 1; }
.cs-btn { --label: min(12px, 13cqw); }
.cs-btn a { --label: min(12px, 13cqw); }
.cs-lb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; width: 100%; padding: 0 2px; margin-top: 2px; font-size: var(--label); line-height: 1.15; color: #fff; }

.cs-copy { flex: none; text-align: center; font-size: calc(var(--u) * 1.15); line-height: 1.3; margin-top: calc(var(--u) * .6) !important; color: #fff; }
.cs-copy a { font-weight: bold; }

/* עיצוב 2: תמונה עגולה במרכז */
.cs-2 .cs-head { flex-direction: column; padding-left: 0; gap: calc(var(--u) * 1); text-align: center; }
.cs-2 .cs-photo { width: calc(var(--u) * 12.5); height: calc(var(--u) * 12.5); border-radius: 50%; border-width: 3px; }
.cs-2 .cs-names { width: 100%; }
.cs-2 h2 { letter-spacing: .12em; }
.cs-2 .cs-details { border-top: 1px solid #ffffff99; padding-top: calc(var(--u) * .8); }
.cs-2 .cs-btns { margin-top: calc(var(--u) * 1.2); }

/* עיצוב 3: שתי עמודות, לחצנים מרובעים ולחצן חיוג בולט */
.cs-3 .cs-head { align-items: stretch; padding-left: 0; }
.cs-3 .cs-side { flex: none; width: 42%; text-align: center; }
.cs-3 .cs-photo { width: calc(var(--u) * 11); height: calc(var(--u) * 11); margin: 0 auto calc(var(--u) * .6); }
.cs-3 h1 { font-size: calc(var(--u) * 2.2); float: none; max-width: none; margin-right: 0; }
.cs-3 h2 { font-size: calc(var(--u) * 1.5); float: none; max-width: none; margin-right: 0; }
.cs-3 .cs-contact { flex: 1; min-width: 0; text-align: center; padding-left: calc(var(--u) * 4); }
.cs-3 .cs-contact h3 { font-size: calc(var(--u) * 2.2); font-weight: normal; margin-bottom: calc(var(--u) * .6); }
.cs-3 .cs-contact p { font-size: calc(var(--u) * 1.45); line-height: 1.3; padding: calc(var(--u) * .3) 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-3 .cs-ic { border-radius: 0; }
.cs-call { flex: none; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.2); margin-top: calc(var(--u) * .8); padding: calc(var(--u) * .7); border: 2px solid #fff; font-size: calc(var(--u) * 1.9); }
.cs-call i { font-size: calc(var(--u) * 1.9); }

/* הכרטיס הנגלל: מסך פתיחה, ומתחתיו התוכן */
html:has(.cs-roll) { scroll-behavior: smooth; }
.cs-roll::before, .cs-roll::after { display: none; }
.cs-roll-more { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: calc(var(--u) * .4); font-size: calc(var(--u) * 1.4); color: #fff; }
.cs-roll-more i { animation: cs-roll-hint 1.6s ease-in-out infinite; }
@keyframes cs-roll-hint { 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .cs-roll-more i { animation: none; } }
.tl-wrap .cs-copy { text-align: center; font-size: 13px; color: #efefef; margin-top: 26px; }
.tl-wrap .cs-copy a { color: #fff; font-weight: bold; text-decoration: none; }

/* טלפון לרוחב: המסך נמוך מדי, אז מותר לגלול */
@media (orientation: landscape) and (max-height: 500px) {
    html.cs-page, html.cs-page body { overflow: auto; height: auto; }
    .cs { --u: 9px; height: auto; min-height: 100vh; }
    .cs-btns { flex: none; height: calc(var(--rows) * var(--u) * 12.5); }
}