/* ==========================================================================
   Specific CSS for the home page
   ========================================================================== */

// Intro with small description of our work
.intro-section
  position: relative
  z-index: 2
  background: $blue
  color: #fff

  .intro
    padding: column(1.5) 0 column(1.5)

  p
    margin: 0
    font-size: 2rem
    font-weight: medium()
    line-height: 1.33333

  // 1. correction for perfect alignment
  // 2. for equal space above and below the breadcrumb
  .breadcrumb
    display: block
    margin-top: -0.5em /* 1. */
    margin-bottom: columnVw(.65) /* 1 */

    color: rgba(255,255,255,.5)
    font-size: .8rem
    font-weight: bold()
    letter-spacing: .15em
    text-transform: uppercase
    white-space: nowrap

  +respond-to-width(1681)
    margin-bottom: 0

  // Responsiveness for home header
  +respond-to-width($lgGridBreakpoint)

    .intro p
      font-size: 1.8rem

  +respond-to-width($mdGridBreakpoint)
    .intro
      width: column(11)
      p
        font-size: 1.6rem

  // Small view
  +respond-to-width($smGridBreakpoint)
    .intro
      width: column(10)
      p
        font-size: 1.3rem
  // Mobile view
  +respond-to-width($xsGridBreakpoint)
    .intro-section

      // Hide drips
      .header-drip
        display: none

      // Re-align intro
      .intro
        padding: $mobileTopSpace $mobileAsideSpace $mobileBottomSpace
        width: 100%

        p
          font-size: 1.1rem
          line-height: 1.3

.home

  // Featured cases on home
  .featured-cases
    max-width: $gridMaxWidth
    margin: 0 auto

  .about-our-company
    .text-block
      padding-top: column(2)
      padding-bottom: column(2)

  .featured-testimonials
    display: flex
    flex-wrap: wrap

  // Award
  .award-container
    display: flex
    flex-wrap: wrap
    .award-logo,
    .award-text
      width: 50%
    .award-text
      display: table
      padding: column(1,8) 0
    .award-logo
      display: flex
      align-items: center
      justify-content: flex-start
      img
        max-width: 300px

    +respond-to-width($mdGridBreakpoint)
      width: column(11)
    +respond-to-width($smGridBreakpoint)
      .award-logo,
      .award-text
        width: 100%
      .award-text
        order: 1
      .award-logo
        order: 2
        justify-content: center
        margin-bottom: column(1,11)
    +respond-to-width($smGridBreakpoint)
      width: 100%
      .award-text
        padding: $mobileTopSpace $mobileAsideSpace



  // Intro about our team
  .about-our-team

    img
      width: 50%
      max-height: 600px
      object-fit: cover

    .text-block
      width: column(6,7)
      padding: column(1,7)

  +respond-to-width-beyond($xlGridBreakpoint)
    .about-our-team .flexable-layout
      padding: column(1) 0

  +respond-to-width($mdGridBreakpoint)
    .about-our-company .column-container
      white-space: nowrap

  // Small view
  +respond-to-width($smGridBreakpoint)
    .about-our-company .column-container
      white-space: normal

    // Re-align about-our-company
    .about-our-company
      .text-block
        padding-right: column(1,12)
        padding-left: column(1,12)
      .col-12 > .col-6
        width: 100%
      .col-12 :nth-child(2)
        padding-top: 0

    // Re-align about-our-team
    // 1. 16:9 ratio
    .about-our-team
      .flexable-layout
        flex-direction: column
        .flex-col,
        .text-block
          width: 100%
        img
          width: 100%
          height: 56.25vw /* 1 */

    // About our company
    .about-our-company
      .column-container
        width: 100%
      .text-block
        padding: $mobileTopSpace $mobileAsideSpace $mobileBottomSpace
        border-bottom: 1px solid $borderColor
        &:nth-child(2)
          padding-top: $mobileTopSpace

    // About our team
    .about-our-team
      .flexable-layout
        .flex-col
          order: 1
        img
          order: 2
      .text-block
        padding: $mobileTopSpace $mobileAsideSpace $mobileBottomSpace

/**
 * video header
 *
 * 1. Set up the height on 90% of viewport for now, maybe adjust later
 */
section.video
  position: relative
  overflow: hidden
  max-height: 95vh
  min-height: 600px

  +respond-to-width($mdGridBreakpoint)
    max-height: none
    min-height: 0

  .video-container
    position: relative
    padding-bottom: 56.3% /* 16:9 */
    background: #1d2433

  iframe, .video-overlay
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

  .overlay
    +position(absolute, null null 0 0)
    width: 100%
    height: 100%
    //box-shadow: inset 0px -600px 400px -300px rgba(0, 0, 0, 0.3)

  .contained-layout
    display: flex
    height: 100%

  .logo-web-branding-agency
    +position(absolute, null null 0 0)
    fill: #fff
    padding-bottom: column(1,5)

  // Align logo with the intro text
  +respond-to-width($mdGridBreakpoint)
    .logo-holder
      margin-left: column(1.5)

  +respond-to-width($smGridBreakpoint)
    .logo-holder
      display: none
    .overlay
      display: none

#ytplayer
  opacity: 0