@import '../../core/Variables';

.section-layout-sequence {
  overflow: hidden;
  padding-top: 0;
}

/*
 * Foreground
 */

.section-layout-sequence .foreground {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  text-align: center;
}

.theme-major-dark .section-layout-sequence .foreground {
  background-color: #0e0e0e;
}

/*
 * Block
 */

.section-layout-sequence p {
  width: 40%;
  font-size: 20px;
  line-height: 150%;
  margin-left: auto;
  margin-right: auto;
  /*padding-top: 30px;*/
  text-align: left;
  max-width: 768px;
}

.section-layout-sequence h1.block, {
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  max-width: 768px;
  line-height: 110%;
}

.section-layout-sequence blockquote {
  width: 35%;
  margin-left: auto;
  margin-right: auto;
  max-width: 672px;
  line-height: 130%;
}

.section-layout-sequence h2.block {
  width: 40%;
  line-height: 120%;
  margin-left: auto;
  margin-right: auto;
  max-width: 768px;
}

.section-layout-sequence a {
  background: none !important;
}


@keyframes fade-in-media {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body:not(.builder-mode) .section-layout-sequence {
  div.block:not(.bring-in) {
    opacity: 0;
  }

  div.block.bring-in {
    animation: fade-in-media 1s;
  }
}

.section-layout-sequence blockquote {
  font-family: 'noto_serif', 'Georgia', 'Hoefler Text', 'Palatino', cursive;
  font-size: 24px;
  line-height: 130%;
  text-align: left;
}

body.mobile-view .section-layout-sequence blockquote {
  font-size: 20px !important;
  line-height: 130%;
}

/* TODO: For media but could be used for all? */

.block-size-small,
.block-size-medium,
.block-size-large {
  width: 100%;
}

.block-size-small .block-media-wrapper,
.block-size-small .block-caption {
  width: 40%;
  max-width: 768px;
  margin: auto;
}

//portrait images
.block-size-small.portrait .block-media-wrapper,
.block-size-small.portrait .block-caption {
  width: 27%;
  max-width: 518px;
  margin: auto;
}

.block-size-medium .block-media-wrapper,
.block-size-medium .block-caption {
  width: 80%;
  max-width: 1536px;
  margin: auto;
}

//portrait images
.block-size-medium.portrait .block-media-wrapper,
.block-size-medium.portrait .block-caption {
  width: 57%;
  max-width: 1094px;
  margin: auto;
}

// large media (including images) will always fill width, regardless of landscape or portrait (images)
.block-size-large .block-media {
  width: 100%;
}

.block-size-large .block-caption {
  width: 100%;
  padding: 0 10px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-layout-sequence .block.image .block-media {
  min-width: 170px;
}

.block-media {
  margin: auto;
}

/*
 * Responsive
 */

body.mobile-view .section-layout-sequence {
  .block {
    margin-top: 20px;
  }

  p.block {
    font-size: 16px;
    width: 90%;
  }

  h1 {
    width: 90%;
  }


  blockquote {
    width: 80%;
    padding: 0 12px;
  }

  h1 {
    font-size: 30px;
    line-height: 110%;
  }

  h2 {
    font-size: 24px;
    width: 90%;
  }

  .block-media-wrapper {
    width: 100%;
  }

  .block-caption {
    line-height: 130%;
    width: 90%;
    margin: 5px auto 0;
    text-align: center;
    padding: 0;
  }

}

body.tablet-view .section-layout-sequence {

  p.block {
    font-size: 20px;
    width: 50%;
  }

  blockquote {
    padding: 0 12px;
    font-size: 24px;
    width: 45%;
  }

  h1 {
    font-size: 36px;
    width: 50%;
  }

  h2 {
    font-size: 27px;
    width: 50%;
  }

  .block-size-small .block-media-wrapper,
  .block-size-small .block-caption {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
}




/*
 * Huge first letter for first block of the sequence
 *  and block that wants it (like after a gallery)
 */

/* could have be done in pure CSS but JS may allow finer control more easily */
/*.section-layout-sequence:not(.sequence-2) .block:nth-child(1) h1::first-letter,*/
/*.section-layout-sequence .image-gallery + .block .block-inner::first-letter*/
.section-layout-sequence .block.first-letter-huge::first-letter,
.section-layout-sequence h1.first-letter-huge::first-letter {
  font-size: 200%;
  color: #a5a948;
  vertical-align: 0px;
}


/*
 * Mobile warning
 */

.section-layout-sequence.sequence-2,
.section-layout-sequence.sequence-2 .block {
  padding-top: 0px;
}

.section-layout-sequence.sequence-2 .block {
  width: 90%;
  margin-left: 5%;
  background-color: fade(@sm-brand-danger, 80%);
  border-radius: 4px;
  color: #FFF;
  padding: 15px;
}

/*
 * test with background and scroll foreground
 */

.section-layout-sequence.sequence-3 .foreground {
  position: relative;
  bottom: inherit;
}

.section-layout-sequence.sequence-3 .block {
  min-height: initial !important; /* because of less??? */
  width: 50% !important;
  padding-top: 10px !important;
}

.section-layout-sequence.sequence-4 .foreground {
  position: relative;
  bottom: inherit;
  width: 50%;
  margin-left: 40px;
  background-color: rgba(0, 0, 0, 0.4);
}

.section-layout-sequence.sequence-4 .block {
  min-height: initial !important;
  width: 100% !important;
  padding-top: 0 !important;
}

/*
.section-layout-sequence.sequence-4 .block-inner {
  background-color: initial;
}
*/

/*
 * Builder
 */

.builder-mode .section-layout-sequence h1.block::after,
.builder-mode .section-layout-sequence h2.block::after,
.builder-mode .section-layout-sequence blockquote.block::after,
.builder-mode .section-layout-sequence .image-gallery::after {
  width: 80%;
  left: 50%;
  right: 50%;
  margin-left: -40%;
}
