/* ============================================================================
 * Why Are We Doing This? — the single feature video above "How You are
 * Changing Lives". Printed by why.php; see Zendesk ticket 13124.
 *
 * Deliberately thin: the section reuses the theme's .videos and
 * .youtube-player rules from main.css, so only the width of a lone feature
 * video and the band behind it need styling here. Kept out of main.css
 * because that file is a Prepros build of main.scss.
 *
 * SPECIFICITY: header.php prints main.css *after* wp_head(), so this file is
 * served first and loses every tie on source order. Each selector below is
 * doubled up (.videos.videos--feature) to out-specify the base rule it has to
 * beat rather than relying on coming later, which it does not.
 * ==========================================================================*/

/* The logo slider above is white and "How You are Changing Lives" below is
   white, so without a band of its own this section would run into both. The
   page then alternates white / light / white / light down to the flag.
   #eaeff8 is the theme's own $blue-light from css/global/_variables.scss, and
   the same band css/services.css uses. */
.videos.videos--feature {
  background: #eaeff8;
  border-top: 1px solid rgba(0, 51, 102, .07);
  border-bottom: 1px solid rgba(0, 51, 102, .07);
  /* The section carries an id, so it can be linked to. #header-container
     fixes itself to the top once the page scrolls (#header .sw is 5.625rem
     then, 4.375rem on mobile) and would otherwise sit over the heading when
     the jump lands. */
  scroll-margin-top: 7rem;
}

@media (max-width: 63.99875em) {
  .videos.videos--feature { scroll-margin-top: 5.5rem; }
}

/* Beats .videos .videos__items { justify-content: space-between }, which is
   built for two or more videos and would pin a lone child to the left. */
.videos.videos--feature .videos__items {
  justify-content: center;
}

/* Beats .videos .videos__items .video { width: 47% }.
   Ken asked for a thumbnail bigger than the vet videos and about the size of
   the Freedom Bourbon one. The vet grid runs 31% of the 81.25rem container
   (~25rem); the bourbon video sat in a 1.15fr/1fr split at ~34rem. 35rem lands
   on the bourbon end of that, and caps rather than stretches so the clip never
   outgrows the row of vets directly beneath it. Below the theme's $mobile1 the
   cap simply stops applying before the column does. */
.videos.videos--feature .videos__items .video {
  width: 100%;
  max-width: 35rem;
  margin-left: auto;
  margin-right: auto;
}