@import 'less-elements.less';
@import 'material-colors.less';
@import 'colors.less';
@import 'main.less';

// Sizes

@media_switch_size: 800;
@media_small_max_width: @media_switch_size - 1px;
@media_large_min_width: @media_switch_size + 0px;

@menu_height:      50px;
@header_height:    250px;
@pre_main_overlap: 30px;
@pre_main_height:  auto;
@main_height:      auto;
@footer_height:    50px;

@margin:        24px;
@grid_margin:   100px;

h2, h3, h4, h5, h6 {
  @media screen and (max-width: @media_large_min_width) { // small screen
    text-align: center;
  }
}

.3-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  @media screen and (max-width: @media_large_min_width) { // small screen
    grid-template-columns: auto;
  }
}

.grid-margin {
  padding: @margin @grid_margin;

  @media screen and (max-width: @media_large_min_width) { // small screen
    padding: @margin;
  }
}

.grid-container {
  display:    grid;
  min-height: 100vh;

  grid-template-columns: @grid_margin auto @grid_margin;
  grid-template-rows:    @menu_height @header_height @pre_main_overlap @pre_main_height @main_height @footer_height;
  grid-auto-columns:     min-content;
  grid-gap:              0;

  grid-template-areas:
    'menu menu menu'
    'header header header'
    'header header header'
    'pre-main pre-main pre-main'
    'main main main'
    'footer footer footer';

  >div {
    padding: @margin;
  }

  .menu     { grid-area: menu;}
  .header   { grid-area: header; }
  .pre-main { grid-area: pre-main; }
  .main     { grid-area: main; }
  .footer   { grid-area: footer; }

  .menu {
    .grid-margin();
    background:    white;
    border-bottom: 1px solid @accent_color;
  }

  .header {
    .3-cols();
    .grid-margin();
    grid-template-areas: 'picture info info';

    /* background: #material-light-blue[200]; */
    background:         @accent_color;
    background-image:   linear-gradient(270deg, #093054, #0f4771);
    color:              @accent_text_color;
    
    .accent {
        color: @accent_text_color_highlighted;
    }

    &__picture {
      grid-area:    picture;
      align-self:   center;
      justify-self: center;

      width:  calc(0.7 * @header_height);
      height: calc(0.7 * @header_height);

      img {
        width:  100%;
        height: 100%;

        border:        3px solid white;
        border-radius: 50%;
        background:    #material-blue-grey[50];
      }
    }
    
    &__title {
        font-family: "Marck Script", cursive;
        font-weight: 400;
        font-style: normal;
        font-size: 50px;
        text-transform: none;
        text-align: right;
        margin-block: 0;
        white-space: nowrap;
        
        @media screen and (max-width: @media_large_min_width) { // small screen
            font-size: clamp(30px, 10vw, 50px);
            display: block;
        }
    
        &::before {
            content: "Hi, I'm";
            font-family: "Roboto";
            font-size: 24px;
            font-weight: 200;
            font-variation-settings: "wdth" 75;
            margin-right: 1em;
            
            @media screen and (max-width: @media_large_min_width) { // small screen
                display: block;
                margin: 0;
            }
        }
    }
    
    &__subtitle {
        font-family: "Roboto";
        font-size: 20px;
        font-weight: 300;
        font-variation-settings: "wdth" 75;
        color: #e99b6b;
        text-transform: uppercase;
        text-align: right;
        margin-block: 0.5em;
        
        @media screen and (max-width: @media_large_min_width) { // small screen
            font-size: clamp(14px, 4vw, 18px);
        }
    }
    
    &__under-construction {
        display: block;
        font-family: "Roboto";
        font-size: 14px;
        font-weight: 300;
        font-variation-settings: "wdth" 75;
        text-align: right;
        font-style: italic;
        opacity: 0.5;
    }

    &__info    {
      grid-area:    info;
      align-self:   center;
      justify-self: center;
      padding:      @margin;
    }
  }

  .pre-main {
    .3-cols();
    grid-gap: 2 * @margin;

    background: white;
    text-align: center;

    .fa {
      color:     @accent_color;
      font-size: 28px;
    }

    p {
      text-align: justify;
    }
  }

  .main {
    padding: 0;

    > div {
      .grid-margin();
    }
  }

  .footer {
    .3-cols();
    .grid-margin();

    padding-top:    0;
    padding-bottom: 0;

    line-height: @footer_height;
    text-align:  center;
    background:  @accent_color;
    color:       @accent_text_color;
  }

  @media screen and (min-width: @media_small_max_width) { // large screen
    .header {
      padding-bottom: @margin;
    }

    .pre-main {
      grid-column-start: 2;
      grid-column-end:   3;
      grid-row-start:    3;
      grid-row-end:      5;

      box-shadow: 0 0 5px lightgrey;
    }

    .main {
      margin-top: @margin;
    }
  }

  @media screen and (max-width: @media_large_min_width) { // small screen
    grid-template-columns: @margin auto @margin;
    grid-template-rows:    @menu_height auto auto auto auto auto;

    .header {
      // grid-template-columns: auto;
      grid-template-areas:   'picture' 'info';

      text-align: center;
    }

    .footer {
      text-align: left;
    }
  }
}

.career-path {
  background: #material-blue-grey[50];
}