/* ============================================================
   זריז שליחויות · page-util.css
   עמודי שירות: יצירת קשר, מדריכים (רשימה + תבנית מדריך), 404, מפת האתר.
   נטען אחרי site.css. טוקנים בלבד: בלי צבעים, גדלים, רדיוסים או גופנים חדשים.
   ============================================================ */

/* ---------- כלי עזר ---------- */
.pu-vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pu-line { display: block; }

/* ---------- מסך פתיחה: וריאציות ---------- */
/* בלי תמונה (מדריכים, מפת האתר, תבנית מדריך): קומפקטי יותר, הטקסט נושם על פחם עם גרגר */
.page-hero--short.pu-hero--plain { min-block-size: min(50svh, 30rem); }
.pu-hero--plain .page-hero__copy { grid-column: 1 / -1; }
@media (min-width: 69rem) { .pu-hero--plain .page-hero__copy { grid-column: 1 / span 9; } }
/* כותרת ראשית בשתי שורות שצריכה רוחב (יצירת קשר) */
@media (min-width: 48rem) and (orientation: landscape) { .pu-hero--wide .page-hero__copy { grid-column: 1 / span 8; } }

/* ============================================================
   יצירת קשר: שלוש הדרכים
   וואטסאפ מוביל (משטח מורם, הכפתור הירוק היחיד), טלפון וטופס שקטים לצידו.
   ============================================================ */
.pu-ways {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: var(--space-group); align-items: stretch;
  list-style: none;
}
.pu-way {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: var(--space-in);
  padding-block-start: var(--space-group);
  box-shadow: inset 0 1px 0 var(--line);
}
.pu-way--lead {
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgb(var(--paper-rgb) / .06), var(--shadow-1);
}
@media (min-width: 48rem) {
  .pu-way { grid-column: span 6; }
  .pu-way--lead { grid-column: 1 / -1; }
}
@media (min-width: 69rem) {
  .pu-way--lead { grid-column: 1 / span 6; }
  .pu-way { grid-column: span 3; }
  .pu-way:not(.pu-way--lead) { padding-block-start: clamp(1.5rem, 1rem + 2vw, 3rem); }
}
.pu-way__head { display: flex; align-items: center; gap: var(--sp-3); }
.pu-way__ico { inline-size: var(--icon-lg); block-size: var(--icon-lg); flex: none; color: var(--fg-2); }
.pu-way--lead .pu-way__ico { color: var(--lime-500); }
.pu-way__kicker { font-weight: var(--fw-bold); color: var(--fg-1); }
.pu-way__text { color: var(--fg-2); }
.pu-way__act { margin-block-start: auto; padding-block-start: var(--sp-3); }
.pu-way__act .btn { max-inline-size: 100%; }
.pu-way__act .link { font-weight: var(--fw-bold); }
@media (max-width: 30rem) {
  .pu-way__act .mag { display: flex; inline-size: 100%; }
  .pu-way__act .btn { inline-size: 100%; }
}

.pu-help {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-block-start: var(--space-block);
  color: var(--fg-2);
}
.pu-help svg { inline-size: var(--icon-md); block-size: var(--icon-md); flex: none; color: var(--lime-500); margin-block-start: .05em; }
.pu-help strong { color: var(--fg-1); font-weight: var(--fw-bold); }

/* מתי ולאן */
.pu-info__cols { display: grid; gap: var(--space-block) var(--gutter); align-items: start; }
@media (min-width: 48rem) { .pu-info__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pu-info__block p { margin-block-start: var(--space-in); color: var(--fg-2); }
.pu-other { margin-block-start: var(--space-block); }

/* ============================================================
   מדריכים: מצב ריק, מה בדרך, כרטיסים
   ============================================================ */
.pu-empty { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-group); align-items: center; }
.pu-empty__text { grid-column: 1 / -1; display: grid; gap: var(--space-in); justify-items: start; }
.pu-empty__text p { color: var(--fg-2); }
.pu-empty__text .cta-row { margin-block-start: var(--space-in); }
.pu-empty__art { grid-column: 1 / -1; inline-size: 100%; block-size: auto; overflow: visible; }
@media (min-width: 48rem) {
  .pu-empty__text { grid-column: 1 / span 6; }
  .pu-empty__art { grid-column: 8 / -1; }
}
/* המסלול שעוד לא נסעו בו: מקווקו ואפור, ורק מטוס הנייר בתחילתו בירוק */
.pu-empty__art path { fill: none; stroke: var(--on-ink-3); stroke-width: 2; stroke-dasharray: 2 12; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pu-empty__art circle { fill: none; stroke: var(--on-ink-3); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pu-empty__art use { color: var(--lime-500); }

.pu-posts {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: var(--space-block);
  list-style: none;
}
.pu-posts > li { grid-column: 1 / -1; }
@media (min-width: 48rem) { .pu-posts > li { grid-column: span 6; } }
@media (min-width: 69rem) { .pu-posts > li { grid-column: span 4; } }
/* three related guides: three columns from tablet, so the third card is never left alone on a half-empty row */
@media (min-width: 48rem) { .pu-posts--3 > li { grid-column: span 4; } }
/* four guides: two columns from tablet up, so the fourth card is never left alone on a row of its own */
@media (min-width: 69rem) { .pu-posts--4 > li { grid-column: span 6; } }
.pu-post { display: grid; gap: var(--space-in); align-content: start; }
.pu-post .frame { margin-block-end: var(--sp-2); }
/* עוד לא פורסם: התמונה עמומה יותר מבשאר האתר */
.pu-post--soon .frame img { filter: saturate(.55) brightness(.7); }
.pu-post p { color: var(--fg-2); }
.pu-tag {
  position: absolute; z-index: 1; top: var(--sp-4); inset-inline-start: var(--sp-4);
  display: inline-flex; align-items: center; min-block-size: 2rem; padding-inline: var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 0 0 1px var(--line-control);
  font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1; color: var(--fg-1);
}

/* ============================================================
   תבנית מדריך: שורת פרטים, קריאה ארוכה, תיבת פעולה
   ============================================================ */
.pu-meta { margin-block-start: var(--space-in); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }

.pu-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-group); }
.pu-article__media { margin-block-end: var(--sp-4); }
.pu-lede { max-inline-size: 26em; font-weight: var(--fw-light); color: var(--fg-1); }
/* עברית ארוכה: שורה קצרה, ריווח נדיב בין שורות ופסקאות */
.pu-article .prose { gap: var(--sp-5); }
.pu-article .prose p, .pu-article .prose li { line-height: 1.75; }
.pu-article .prose > * { max-inline-size: 36em; }
.pu-article .prose h2 { margin-block-start: var(--space-block); }
.pu-article .prose h2 + p { margin-block-start: calc(-1 * var(--sp-2)); }
.pu-article .prose hr { margin-block: var(--space-block) var(--sp-2); }

.pu-cta-box {
  max-inline-size: 40em; margin-block: var(--space-group);
  display: grid; gap: var(--space-in); justify-items: start;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--r-lg); background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgb(var(--paper-rgb) / .06);
}
.pu-cta-box__mark { inline-size: var(--icon-lg); block-size: var(--icon-lg); color: var(--lime-500); }
.pu-cta-box p { color: var(--fg-2); }
.pu-cta-box .pu-cta-box__title { color: var(--fg-1); }
.pu-cta-box .cta-row { margin-block-start: var(--sp-2); }
/* 320px phones: the two buttons are wider than the box, so their text may wrap instead of pushing the page sideways */
.pu-cta-box { grid-template-columns: minmax(0, 1fr); }
.pu-cta-box .cta-row { max-inline-size: 100%; }
.pu-cta-box .btn { white-space: normal; text-align: center; }

/* ============================================================
   404: המסלול נקטע באמצע
   ============================================================ */
.page-hero.pu-404 { min-block-size: 100svh; align-items: center; padding-block-end: calc(var(--space-block) * 2.5); }
.pu-404 .page-hero__media img { filter: saturate(.7) brightness(.75); }
.pu-404 .page-hero__route { bottom: var(--space-block); block-size: clamp(4rem, 2rem + 7vw, 8rem); }
.pu-404 .page-hero__route .pu-route-rest { stroke: var(--on-ink-3); stroke-dasharray: 2 12; stroke-linecap: round; opacity: .8; }
.pu-404 .page-hero__route .pu-route-hollow { fill: none; stroke: var(--on-ink-3); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pu-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin-block-start: var(--space-group); }
.pu-links a { display: inline-flex; align-items: center; min-block-size: var(--hit); color: var(--fg-2); }
.pu-links .link::before, .pu-links .link::after { bottom: .6rem; }
@media (hover: hover) and (pointer: fine) { .pu-links a:hover { color: var(--fg-1); } }

/* ============================================================
   מפת האתר
   ============================================================ */
.pu-map { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-block); }
.pu-map__group { grid-column: 1 / -1; display: grid; gap: var(--space-in); align-content: start; padding-block-start: var(--space-in); box-shadow: inset 0 1px 0 var(--line); }
@media (min-width: 48rem) { .pu-map__group { grid-column: span 6; } .pu-map__group:first-child { grid-column: 1 / -1; } }
@media (min-width: 69rem) { .pu-map__group, .pu-map__group:first-child { grid-column: span 4; } }
.pu-map h2 { color: var(--fg-2); }
.pu-map ul { list-style: none; display: grid; gap: 0; }
.pu-map__top > li { padding-block: var(--sp-2); }
.pu-map__top > li > a { display: inline-flex; align-items: center; min-block-size: var(--hit); font-weight: var(--fw-bold); color: var(--fg-1); }
.pu-map__top > li > a.link::before, .pu-map__top > li > a.link::after { bottom: .55rem; }
/* תת-עמודים: תלויים על קו דק, כמו עצירות במסלול */
.pu-map__sub { margin-inline-start: .3em; padding-inline-start: var(--sp-5); box-shadow: inset calc(1px * var(--dir)) 0 0 var(--line-hover); }
:root[dir="rtl"] .pu-map__sub { box-shadow: inset -1px 0 0 var(--line-hover); }
.pu-map__sub a, .pu-map__sub span { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--fg-2); }
.pu-map__sub a.link::before, .pu-map__sub a.link::after { bottom: .55rem; }
.pu-map__sub span { min-block-size: 0; padding-block: var(--sp-1); }
.pu-map__note { font-size: var(--fs-small); color: var(--fg-3); font-weight: var(--fw-regular); }
@media (hover: hover) and (pointer: fine) { .pu-map__sub a:hover { color: var(--fg-1); } }