// ===============================================
// Hero Styles
// ===============================================

.hero {
  // sets the base values for the local variables
  --theme-hsl: var(--navy-hsl);
  --button-hsl: var(--theme-hsl);
  --bg-img: url(/images/hero/homepage.jpg);
}

// ===============================================
// Main layout styles
// Based on this implementation by Heydon Pickering
// https://every-layout.dev/layouts/cover/#the-generator
// ===============================================

.hero {
  display: flex;
  min-height: 70vh;
  flex-direction: column;
}

.hero > * {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.hero > :first-child:not(.hero__content) { margin-top: 0; }   
.hero > :last-child:not(.hero__content) { margin-bottom: 0; } 

.hero__content {
  margin-top: auto; // This pushes the main content as far as possible from the top
  @include breakpoint($large) { margin-bottom: auto; } // This makes the main content centered vertically on large screens
}

// ===============================================
// Main content styles
// ===============================================

.hero__content {
  padding-top: var(--s2);
  padding-bottom: var(--s2);
  width: calc(100% - 2rem);
}


// ===============================================
// Internal Elements Styles
// ===============================================

.hero__logo {
  // Sets the logo size on different screen-sizes
  display: block;
  max-width: 120px; 
  @include breakpoint($large) { max-width: 160px; }
}

.hero__heading {
  // Typographic styles for the main heading
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.3;
  color: hsla(var(--theme-hsl), 1);

  @include breakpoint($large) { 
    font-size: 2.5rem;
    line-height: 1.1;
    letter-spacing: 1px;
  }
}

.hero__subheading {
  max-width: 45ch; // Sets the max-width as a function of the number of characters, so we don't need to worry about media queries

  // Adds a white text-shadow to improve legibility. 
  // This should be very subtle and not evident visually
  text-shadow: 0 0 6px hsla(var(--white-hsl), .7);

  // Typographic styles for the sub heading
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 300;

  @include breakpoint($large) { 
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: .3px;
  }
}

.hero__description { 
  max-width: 75ch; // Sets the max-width as a function of the number of characters, so we don't need to worry about media queries
  
  // Adds a white text-shadow to improve legibility. 
  // This should be very subtle and not evident visually
  text-shadow: 0 0 6px hsla(var(--white-hsl), .7);

  padding-bottom: 1.5rem;
}


// ===============================================
// Here we deal with the two overlays of the hero.
// ===============================================

.hero { position: relative; } // Setting the position relative, so the pseudo elements use this as a reference point.

.hero:after,
.hero:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  @include breakpoint($large) { left: 50%; }
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-image: var(--bg-img);
}

// Applying the background image variable
.hero:before { 
  z-index: -3; // Sets the bg-image behind the gradient overlay
  background-image: var(--bg-img); 
}

// Applies a linear gradient to to create the fading effect. 
// The effect swicthes direction depending on the screensize. 
.hero:after {
  z-index: -2; // Sets the bg-image in front of the gradient overlay
  background-image: linear-gradient(0deg, hsla(var(--white-hsl), 1) 20%, hsla(var(--white-hsl), 0.2) 100%);  
  
  @include breakpoint($large) { 
    // This sets the width of the gradient overlay slightly shorter than the background-image. 
    // This was done to prevent a small glitch to happen when a thin line of the background image
    // appeared behind the gradient in some screensizes. I suspect this has something to do with split-pixels.
    left: calc(50% - 5px); 
    border-left: 4px solid hsla(var(--white-hsl), 1);
    
    background-image: linear-gradient(90deg, hsla(var(--white-hsl), 1) 0%, hsla(var(--white-hsl), 0) 100%); 
  }
}


// Applying the background image variables and the theme colors
.hero--democracy { 
  --theme-hsl: var(--green-hsl); 
  --bg-img: url(/images/hero/democracy@2x.jpg);
}

.hero--future-leadership {
  --theme-hsl: var(--red-hsl);
  --bg-img: url(/images/hero/future-leadership@2x.jpg);
}

.hero--politics-society {
  --theme-hsl: var(--yellow-hsl);
  --bg-img: url(/images/hero/politics-society@2x.jpg);
}

.hero--digital-world {
  --theme-hsl: var(--purple-hsl);
  --bg-img: url(/images/hero/digital-world@2x.jpg);
}

// Setting only the bg-image, since the --theme-hsl is already the default navy.
.hero--team     { --bg-img: url(/images/hero/team@2x.jpg); }
.hero--about    { --bg-img: url(/images/hero/about@2x.jpg); }
.hero--stiftung { --bg-img: url(/images/hero/stiftung.jpg); }
.hero--archives { --bg-img: url(/images/hero/archives@2x.jpg); }
.hero--updates  { --bg-img: url(/images/hero/updates@2x.jpg); }