/* Responsive pass over the 2014 landing page.
 *
 * The page was built to a fixed 1000px: body has min-width:1000px, every
 * .container is a hard width:940px, and there is no viewport meta, so a phone
 * rendered it at desktop size and scrolled sideways by 400px. Nothing here
 * changes how it looks above 1000px — the widths simply become maximums.
 *
 * The slide deck is safe to make fluid: the script swaps a .hidden class on one
 * slide at a time rather than moving a strip by a pixel offset.
 */

body { min-width: 0; }

.container,
#why .container,
#features_list .container,
#page_footer .container {
  width: auto;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

#page_footer .container { max-width: 960px; height: auto; }

img { max-width: 100%; height: auto; }

/* One slide is shown at a time, so it can simply fill the track. */
#problems .slide { width: 100%; }

@media (max-width: 1000px) {
  #problems { padding: 40px 0; }
  #problems .slides,
  #problems .slide { height: auto; }
  #problems .slide .figure { height: auto; min-height: 160px; }
  #problems .slide .figure img { position: static; }
  #problems .slides_controls ul { width: auto; max-width: 400px; }
  #problems .next_prev .next { right: 4px; }
  #problems .next_prev .prev { left: 4px; }
}

@media (max-width: 700px) {
  .container,
  #why .container,
  #features_list .container,
  #page_footer .container { padding-left: 16px; padding-right: 16px; }
  #page_footer .container { height: auto; padding-top: 12px; padding-bottom: 12px; }
}

/* The landing sheet styled the mark only through `#page_header h1.logo`, so
   when the mark stopped being the page's h1 it fell back to plain link text.
   Described here on the class, using the same brand file as the rest of the
   site; the header is white, so the dark mark. */
#page_header .logo {
  display: block;
  position: absolute;
  top: 18px;
  left: 20px;
  width: 168px;
  height: 43px;
  margin: 0;
  text-indent: -999px;
  overflow: hidden;
  background: url(/website/cosi-about/brand/insight-dark-on-light.svg) left center / contain no-repeat;
}
#page_header .logo a { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* The feature rows are two fixed columns with an absolutely positioned figure
   beside them. Below the fixed layout they stack instead. */
@media (max-width: 1000px) {
  #why .article,
  #features_list .article .content,
  #solution .article { width: auto; max-width: 100%; float: none; }
  #why .article { margin-bottom: 56px; }
  #why .article.right { padding-left: 0; }
  #why .article .figure,
  #why .article.right .figure {
    position: static;
    width: auto;
    margin: 24px 0 0;
    left: auto;
    right: auto;
  }
  #features_list .article.left .content,
  #features_list .article.right .content,
  #features_list .article.left .figure,
  #features_list .article.right .figure { float: none; width: auto; }
  #features_list .article .figure { margin-top: 20px; text-align: center; }
  .banner.aiim .right { position: static; left: auto; top: auto; }
  #page_header #main_menu .menu_links { position: static; padding-top: 26px; }
  #page_header .button { position: static; display: inline-block; margin: 8px 0 12px; }
  #page_header .logo { position: static; margin: 12px auto 0; }
  #page_header #main_menu { height: auto; padding-bottom: 12px; }
}

/* The testimonial is a fixed 640px block with the portrait pulled out to the
   left; below that width the quote sits under the portrait instead. */
@media (max-width: 1000px) {
  #reviews .review { width: auto; max-width: 640px; }
  #reviews .more_reviews { position: static; display: block; margin-top: 16px; }
}
@media (max-width: 700px) {
  #reviews .review .portrait { position: static; margin: 0 0 16px; }
  #reviews .review .blockquote,
  #reviews .review .author { margin-left: 0; }
  #reviews .review .blockquote { font-size: 18px; line-height: 26px; }
}