/* רצועת לוגואים - עותק אחד לעמוד העברי ולאנגלי.
 *
 * הלוגואים הם PNG עם ערוץ אלפא, ולכן מוצגים כ-mask-image עם background-color
 * ולא כ-<img>. כך הם נצבעים בנייבי של האתר ולא מופיעים בצבעי המותג המקוריים,
 * שהיו נראים כמו רצועת פרסומות על הדואוטון. אין כאן alt: הלוגו aria-hidden,
 * והשם יושב כטקסט visually-hidden בתוך הקישור - כך גם קוראי מסך וגם סורקים
 * (שמתעלמים מ-aria-label) מקבלים טקסט עוגן.
 *
 * הגבהים אינם אחידים בכוונה. נמדד: אצל Viber האותיות תופסות 61% מגובה
 * התיבה (הבועה עוטפת אותן), אצל Gett ו-Pango 95-98%. גובה זהה היה מקטין
 * את אותיות Viber ב-40%. הערכים למטה מיישרים לפי גובה האותיות ולא לפי התיבה.
 */

.logos { margin-top: 2rem; }

.logos-label {
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--maroon-dk);
  margin-bottom: .85rem;
}

/* יישור קו בסיס, לא מרכז התיבה.
 * נמדד מתוך הקבצים: קו הבסיס יושב ב-82% מגובה התיבה ב-Viber, 86% ב-Pango
 * ו-96% ב-Gett. יישור למרכז היה מרים את Pango מעל השורה. כאן כל התיבות
 * מיושרות לתחתית, וכל לוגו מורם ב-margin-bottom כגובה הזנב שלו - כך
 * האותיות יושבות על קו אחד, והזנבות (שפיץ הבועה, הרגל של ה-p) יורדים מתחתיו. */
.logos-list {
  list-style: none;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.2rem 2.6rem;
  margin: 0;
  padding: 0;
}

.logos-list li { display: flex; align-items: flex-end; }
.logos-list a { display: block; line-height: 0; }
.logos-list a:focus-visible { outline: 2.5px solid var(--maroon); outline-offset: 6px; border-radius: 3px; }

.logo {
  display: block;
  background-color: var(--ink);
  opacity: .55;
  transition: opacity .15s ease;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
.logos-list a:hover .logo,
.logos-list a:focus-visible .logo,
.logo:hover { opacity: 1; }

/* גדלים מכוילים אופטית + הרמה לקו הבסיס.
 * margin-bottom = עומק הזנב של הלוגו העמוק ביותר (Viber) פחות עומק הזנב שלו. */
.logo-viber { -webkit-mask-image: url(logos/viber.png); mask-image: url(logos/viber.png); width: 89px;  height: 42px; margin-bottom: 0; }
.logo-gett  { -webkit-mask-image: url(logos/gett.png);  mask-image: url(logos/gett.png);  width: 85px;  height: 28px; margin-bottom: 6.25px; }
.logo-pango { -webkit-mask-image: url(logos/pango.png); mask-image: url(logos/pango.png); width: 109px; height: 27px; margin-bottom: 3.4px; }

@media (max-width: 680px) {
  .logos-list { gap: 1.1rem 1.9rem; }
  .logo-viber { width: 70px; height: 33px; margin-bottom: 0; }
  .logo-gett  { width: 67px; height: 22px; margin-bottom: 4.9px; }
  .logo-pango { width: 85px; height: 21px; margin-bottom: 2.7px; }
}

@media (prefers-reduced-motion: reduce) { .logo { transition: none; } }

/* ניגודיות מוגברת: אטימות מלאה תמיד, בלי מעבר */
body.a11y-contrast .logo { opacity: 1; transition: none; }

/* יעדי העוגנים של הרצועה. ההדר דביק, לכן בלי המרווח הזה
   הכותרת של הבלוק מסתתרת מתחתיו אחרי הקפיצה. */
#case-gett, #case-pango { scroll-margin-top: 90px; }

/* אינדיקציית קישור חיצוני (↗) - בשימוש בעמוד האנגלי. יושבת מחוץ לזרימה
   כדי לא להזיז את יישור קו הבסיס של הלוגואים. */
.logo-link-ext { position: relative; }
.logo-ext {
  position: absolute;
  inset-block-start: -.35rem;
  inset-inline-end: -1rem;
  font-family: var(--mono);
  font-size: .85rem;
  line-height: 1;
  color: var(--maroon);
}