/* mobile and tablet overrides, loaded after index.css and locale styles */

/* copies of header menu links in "..." popup, shown only when header links are hidden */
.header .popup > li.mobile_only {
  display: none;
}

/* less than website width: fluid sections, compact header, carousel with fluid pages */
@media (max-width: 959px) {
  img {
    max-width: 100%;
    height: auto;
  }

  /* definite width: with "auto" sections inside flex body grow to carousel content width */
  .section {
    width: 100%;
  }
  .section.description,
  .section.screenshot_list,
  .section.download_app,
  .section.trust_reason_list,
  .section.vocabulary_list,
  .section.contact,
  .section.giftcards,
  .section.redirect {
    padding: 32px 24px 16px 24px;
  }
  .section.download_app {
    padding-top: 0;
  }
  .section.giftcards,
  .section.redirect {
    padding-bottom: 32px;
  }

  /* header: full width, logo, title, menu button, "open app" and language are visible,
     menu links are hidden and available in the menu button popup */
  .header {
    left: 0;
    right: 0;
    margin-left: 0;
  }
  .header > .menu {
    min-width: 0;
  }
  .header > .menu > li:nth-child(n+3):not(.more) {
    display: none;
  }
  .header .popup > li.mobile_only {
    display: flex;
  }
  .header > .menu > li.more {
    flex-shrink: 0;
    order: -1; /* menu button is the first one on the left, as usual on mobile */
  }
  .header > .menu > li.more > span {
    font-size: 0; /* "..." is replaced with burger icon */
  }
  .header > .menu > li.more > span:before {
    content: "\2630";
    font-size: 20px;
    line-height: 1;
  }
  .header > .menu > li:after {
    display: none;
  }
  .header > .menu > li {
    min-width: 0;
  }
  .header > .menu > li a.title {
    font-size: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header > .scroll_to_top {
    width: 48px;
    height: 48px;
    bottom: 16px;
    right: 16px;
    padding-top: 4px;
  }

  /* carousel: two screenshots per page, arrows inside the section padding,
     script calculates number of pages from screenshot width */
  .screenshot_list > .carousel {
    padding: 0 16px;
  }
  .screenshot_list > .carousel > .arrow {
    width: 20px;
    height: 20px;
  }
  .screenshot_list > .carousel > .arrow.left {
    left: -8px;
  }
  .screenshot_list > .carousel > .arrow.right {
    right: -8px;
  }
  .screenshot_list .content {
    width: 100%; /* negative margin set by script would stretch "auto" width and screenshots with it */
  }
  .screenshot_list .content > .screenshot,
  .screenshot_list .content > .screenshot.second {
    flex: 0 0 50%;
    padding: 0 4px;
  }
  .screenshot_list .content > .screenshot .frame {
    justify-content: center;
  }
  .screenshot_list .content > .screenshot.banner {
    align-items: center;
  }

  .vocabulary_list .content {
    justify-content: space-around;
  }

  .copyright {
    padding: 8px 24px;
  }
}

/* phones and small tablets: stack all two column blocks */
@media (max-width: 767px) {
  .section h1 {
    font-size: 30px;
  }

  .description > .content {
    flex-direction: column;
  }

  /* carousel: one screenshot per page */
  .screenshot_list .content > .screenshot,
  .screenshot_list .content > .screenshot.second {
    flex: 0 0 100%;
    padding: 0;
  }
  /* image with buttons first, list of advantages below */
  .description > .content > .decoration {
    order: -1;
    margin-bottom: 24px;
    align-items: center;
  }
  .description > .content .button_panel,
  .description > .content .button_panel.french {
    margin-top: 16px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* grid: app icon with stats on the right, description and store buttons below,
     "details" box is dissolved so its children become grid items */
  .download_app .content {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 16px;
    align-items: center;
  }
  .download_app .content .details {
    display: contents;
  }
  .download_app .content .app_icon img {
    width: 112px;
    display: block;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
  }
  .download_app .content .details .stats {
    flex-direction: column;
    align-items: flex-start;
  }
  .download_app .content .details .stats li + li {
    margin-left: 0;
    margin-top: 6px;
  }
  .download_app .content .details > p,
  .download_app .content .details .button_panel {
    grid-column: 1 / 3;
    margin-top: 16px;
  }
  .download_app .content .details .button_panel {
    justify-content: center;
  }
  .download_app .content .details .button_panel > * + * {
    margin-left: 8px;
  }

  .contact .content {
    flex-direction: column;
  }
  .contact .content .form input,
  .contact .content .form textarea {
    width: 100%;
  }
  .contact .content .decor {
    margin-left: 0;
    margin-top: 24px;
    align-items: center;
  }
  /* decorative image would separate "send message" button from the form */
  .contact .content .decor img.contact_graphic {
    display: none;
  }

  .giftcards a {
    overflow-wrap: anywhere;
  }

  .copyright {
    text-align: center;
  }

  .overlay .popup {
    width: auto;
    max-width: 384px;
    margin: 72px 16px 24px 16px;
    padding: 24px 16px;
  }
  .overlay .popup h1 {
    font-size: 26px;
  }
  .overlay .select_app .app_list li {
    font-size: 18px;
  }
}

/* phones */
@media (max-width: 480px) {
  .section.description,
  .section.screenshot_list,
  .section.download_app,
  .section.trust_reason_list,
  .section.vocabulary_list,
  .section.contact,
  .section.giftcards,
  .section.redirect {
    padding-left: 16px;
    padding-right: 16px;
  }
  .section h1 {
    font-size: 26px;
  }

  .header > .menu > li a.title {
    font-size: 20px;
  }
  .header > .menu > li > a,
  .header > .auth > li > a,
  .header > .menu > li.more > span,
  .header > .auth > li.lang > span {
    margin: 0 4px;
  }

  /* both store buttons on a single line */
  .download_app .content .details .button_panel .button_flat span.icon {
    width: 44px;
  }
  .download_app .content .details .button_panel .button_flat span.label {
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  .download_app .content .details .button_panel .button_flat span.label strong {
    font-size: 18px;
  }

  .overlay .select_app .app_list li {
    font-size: 16px;
  }
}

/* lesson cards (164px sprites) are scaled to keep two cards per row with a gap,
   collapsed list height is scaled too, so it still shows two rows */
@media (max-width: 400px) {
  .vocabulary_list .content > li {
    zoom: 0.9;
  }
  .vocabulary_list .content.show_less {
    height: 412px;
  }
}
@media (max-width: 350px) {
  .vocabulary_list .content > li {
    zoom: 0.8;
  }
  .vocabulary_list .content.show_less {
    height: 366px;
  }
}

/* banner graphic has fixed 340px width, scale it down to fit the carousel page */
@media (max-width: 420px) {
  .screenshot_list .content > .screenshot.banner {
    zoom: 0.9;
  }
}
@media (max-width: 374px) {
  .screenshot_list .content > .screenshot.banner {
    zoom: 0.8;
  }

  /* narrow phones: smaller store buttons to keep them on a single line */
  .download_app .content .details .button_panel .button_flat span.icon {
    width: 32px;
  }
  .download_app .content .details .button_panel .button_flat span.label {
    padding: 4px 6px;
    font-size: 10px;
  }
  .download_app .content .details .button_panel .button_flat span.label strong {
    font-size: 15px;
  }
}
@media (max-width: 340px) {
  .screenshot_list .content > .screenshot.banner {
    zoom: 0.75;
  }
}