/*
 * Hand-written layout fixes on top of style.min.css (which has no source in
 * the repo, so it is not edited). Loaded on every page right after
 * style.min.css, before rtl.css. Rules here apply to LTR and RTL alike;
 * RTL-only mirrors live in rtl.css (scripts/gen_rtl_css.py, MANUAL block).
 */

/* Home hero, 1024-1279px: the image box (.intro--main .intro__img-wrapper,
 * left:calc(50% - 20px), 388px wide) starts at 492px at 1024 and moves with
 * the viewport, while the subtitle column is wider than the space left of
 * it, so the subtitle's first/last words ran under the image (en and he).
 * 420px keeps the subtitle clear of the image at every width in the range:
 * en text ends at 488 vs image 492 (1024); he text starts at 536 vs image
 * right edge 532 (1024). At >=1280 the original layout already clears. */
@media (min-width:1024px) and (max-width:1279px) {
  .intro--main .intro__subtitle {max-width:420px}
}

/* /feature/call-history-and-sms-control/, 1024-1279px: this is the only
 * feature page whose photo (.intro--features-history .intro__img-wrapper,
 * left:calc(50% + 15px), mirrored in RTL) starts above the bottom of the
 * one-line H1, so long translations (de/ru/pl/sv/ro/fr/nl/es/it) ran their
 * last word under it. 50% of the content box ends 15px before the photo at
 * every width in the range, in LTR and RTL. Other feature pages are left
 * alone: their photos start below the H1 line and a general cap would
 * re-wrap titles that fit today. */
@media (min-width:1024px) and (max-width:1279px) {
  .intro--features-history .intro__title {max-width:50%}
}

/* /download/ Features: download.html's inline
 * `.download-page .tabs-element__wrapper{max-width:790px}` (#41) beats
 * style.min.css's breakpoint widths, so between 768 and 1279px the feature
 * rows ran under the phone mockup (.tabs-element__app-link, right:38px,
 * 286px img shifted 16px outwards; <=1023: right:36px, 175px img, 13px).
 * Reserve the phone's footprint plus a 16px gap: 280px at 1024-1299
 * (capped at the inline 790px; at 1280-1299 the phone still sits at
 * right:45px), style.min.css's own 195px at 768-1023 (phone hidden <=767).
 * One extra class beats the inline rule's specificity. */
@media (min-width:768px) and (max-width:1023px) {
  .download-page .tabs-element .tabs-element__wrapper {max-width:calc(100% - 195px)}
}
@media (min-width:1024px) and (max-width:1299px) {
  .download-page .tabs-element .tabs-element__wrapper {max-width:min(790px, calc(100% - 280px))}
}