/* Compact v3.2.1: dedicated Arabic vertical budget for the top career carousel.
   English dimensions remain governed by site-compact-logo-polish.css. */

/* Arabic needs more vertical room than Latin text. Give it real space instead of
   compressing Noto Kufi Arabic, and keep date ranges visually chronological. */
html[lang="ar"] .viewport{grid-template-rows:56px 190px minmax(0,1fr)}
html[lang="ar"] .timeline-slide .career-track{
  height:130px;
  padding:14px 0 8px;
}
html[lang="ar"] .timeline-slide .career-step{padding-top:39px}
html[lang="ar"] .timeline-slide .career-step time{
  direction:ltr;
  unicode-bidi:isolate;
  text-align:right;
  margin-bottom:7px;
}
html[lang="ar"] .timeline-slide .career-step span{
  max-width:174px;
  font-size:.67rem;
  line-height:1.38;
  padding-bottom:6px;
}

/* Keep the mobile TV-news ticker mechanics; only give Arabic enough height. */
@media(max-width:1039px){
  html[lang="ar"] .viewport{grid-template-rows:52px 176px minmax(0,1fr)}
  html[lang="ar"] .timeline-slide .career-track{height:118px;padding-top:12px;padding-bottom:8px}
  html[lang="ar"] .timeline-slide .career-step{padding-top:37px}
  html[lang="ar"] .timeline-slide .career-step span{max-width:168px;font-size:.64rem;line-height:1.34}
}

@media(max-width:620px){
  .timeline-slide .career-track,
  .logos-slide .worked-with-track{
    scroll-behavior:auto;
    scroll-snap-type:none;
  }
  html[lang="ar"] .viewport{grid-template-rows:50px 158px minmax(0,1fr)}
  html[lang="ar"] .timeline-slide .career-track{height:104px;padding:9px 0 7px}
  html[lang="ar"] .timeline-slide .career-step{padding-top:34px}
  html[lang="ar"] .timeline-slide .career-step time{margin-bottom:5px}
  html[lang="ar"] .timeline-slide .career-step span{
    max-width:158px;
    font-size:.60rem;
    line-height:1.32;
    padding-bottom:5px;
  }
}

/* Short desktop/tablet screens still get extra Arabic space while preserving
   the one-screen contract by taking the budget from the main area. */
@media(max-height:760px) and (min-width:621px){
  html[lang="ar"] .viewport{grid-template-rows:50px 154px minmax(0,1fr)}
  html[lang="ar"] .timeline-slide .career-track{height:96px;padding-top:8px;padding-bottom:6px}
  html[lang="ar"] .timeline-slide .career-step{padding-top:34px}
  html[lang="ar"] .timeline-slide .career-step time{margin-bottom:5px}
  html[lang="ar"] .timeline-slide .career-step span{font-size:.60rem;line-height:1.28;padding-bottom:4px}
}

@media(max-height:650px){
  html[lang="ar"] .viewport{grid-template-rows:46px 132px minmax(0,1fr)}
  html[lang="ar"] .timeline-slide .career-track{height:82px;padding-top:6px;padding-bottom:5px}
  html[lang="ar"] .timeline-slide .career-step{padding-top:30px}
  html[lang="ar"] .timeline-slide .career-step time{margin-bottom:4px}
  html[lang="ar"] .timeline-slide .career-step span{font-size:.54rem;line-height:1.24;padding-bottom:3px}
}

@media(max-height:650px) and (max-width:620px){
  html[lang="ar"] .viewport{grid-template-rows:46px 126px minmax(0,1fr)}
  html[lang="ar"] .timeline-slide .career-track{height:78px;padding-top:5px;padding-bottom:4px}
  html[lang="ar"] .timeline-slide .career-step{padding-top:29px}
  html[lang="ar"] .timeline-slide .career-step span{font-size:.53rem;line-height:1.24;padding-bottom:3px}
}