@import "partials/variables";
@import "partials/colors";
@import "partials/fonts";
@import "partials/mixins";

a, a:visited{
  text-decoration: none;
  color: inherit;
  transition: color 0.15s ease-out;
}

body{
  margin: 0;
  // background-color: green;
  font-weight: $default_fwght;
  line-height: 1.5;
}

// Splitting met .word ET .char en inline-block :
// - inline-block sur .char crée une opportunité de coupure entre CHAQUE lettre ;
// - inline-block sur .word (dimensionné en max-content) empêche tout retour à la
//   ligne interne, donc les soft hyphens ne peuvent jamais couper le mot.
// On repasse les deux en inline : le mot redevient un flux de texte qui ne coupe
// qu'aux césures logicielles (U+00AD) insérées par le JS.
// Spécificité (0,2,1) pour battre `.splitting .word/.char` de Splitting.
.splitting span.word,
.splitting span.char{
  display: inline;
}


//  _                             _
// | |                           | |
// | |     __ _ _   _  ___  _   _| |_
// | |    / _` | | | |/ _ \| | | | __|
// | |___| (_| | |_| | (_) | |_| | |_
// \_____/\__,_|\__, |\___/ \__,_|\__|
//               __/ |
//              |___/

div.layout-container{
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  max-width:1080px;
  margin: 0 auto;
  header[role="banner"]{
    padding: 0.5em 0;
    flex: 0 1 content;
    z-index: 100;
    // position: fixed;
    // top:0;
    // width: 100%;
    height: $header_height;
  }
  main[role="main"]{
    flex: 1 1 auto;
    // padding:5em 0;
    overflow-y: scroll;
  }
  // footer[role="contentinfo"]{
  //   // flex: 0 1 content;
  //   z-index: 100;
  //   position: fixed;
  //   bottom: 0;
  //   width: 100%;
  // }
}



//  _   _                _
// | | | |              | |
// | |_| | ___  __ _  __| | ___ _ __
// |  _  |/ _ \/ _` |/ _` |/ _ \ '__|
// | | | |  __/ (_| | (_| |  __/ |
// \_| |_/\___|\__,_|\__,_|\___|_|


header[role="banner"]{
  background-color: #fff;
  // box-shadow: 0 -5px 15px #000;

  .header-middle{
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: 0.2em 0;
  }

  #block-leshed-identitedusite{
    a{
      // color: ;
      text-decoration: none;
      font-size: 2em;
      font-weight: 500;

      // &:hover{
      //   color: $rose;
      // }
    }
  }

  .header-right{
    // position: relative;
    height:20px; width:20px;
    cursor: pointer;
    // background-color: green;

    >div#burger-btn{
      position:relative;
      transition-duration: 0.5s;
      transition-property: transform;
      top: 8.5px;
      &, &::before, &::after{
        // position: absolute;
        width:20px; height:3px;
        background-color: red;

      }
      &:hover{
        &, &::before, &::after{
          background-color: green;
        }
      }
      &::before, &::after{
        content: "";
        position: absolute;
        left: 0;
        // background-color: red;
      }
      &::before{
        top:6px;
      }
      &::after{
        bottom: 6px;
      }
      &[opened]{
        transform: rotate(90deg);
      }
    }


    &>div.wrapper{
      position:absolute;
      top:$header_height; left:0;
      // z-index: 99;
      background-color: rgba(0,0,0,0.75);

      width:100vw;
      height: 0;
      overflow: hidden;
      transition-duration: 0.5s;
      &[opened]{
        height: calc(100vh - $header_height);
      }
      &>nav{
        padding-top: 10px;
        background-color: #fff;
        >ul{
          margin: 0;
        }
      }

      nav#block-mathallo-navigationprincipale{
        padding: 2em 1em;
        ul{
          display: flex;
          justify-content: flex-end;
          list-style: none;
          li{
            margin-right: 1em;
            // background-color: $bleu_site;
            color: #fff;
            padding:0.5em 1em;
            &:not(:last-child){
            }
          }
        }
      }
    }

  }
} // end of header[role="banner"]{


.variable-title{
  margin: 0;
  font-weight: 200;
  text-transform:lowercase;
  line-height: 1;
  // margin-left: -0.04em;
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff);
  span.word{
    span.char{
      letter-spacing:-0.1em;
    }
  }
  // span.whitespace{
  //   letter-spacing: 0.5em;
  // }
}

//   _____ _____        __   ____ ___  _     ____
//  |_   _/ _ \ \      / /  / ___/ _ \| |   / ___|
//    | || | | \ \ /\ / /  | |  | | | | |   \___ \
//    | || |_| |\ V  V /   | |__| |_| | |___ ___) |
//    |_| \___/  \_/\_/     \____\___/|_____|____/

div.layout.layout--twocol-section--50-50{
  flex-wrap: nowrap;
  // Sans ça, `align-items: stretch` (défaut flex) étire les deux colonnes à la
  // même hauteur : la synchro de scroll ne verrait aucune différence de hauteur.
  // flex-start = chaque colonne prend la hauteur de son contenu.
  align-items: flex-start;

  column-gap: $colsgap;
  div.layout__region{
    max-width: calc(50% - $colsgap / 2);
    flex: 1 0 calc(50% - $colsgap / 2);
    .views-row{
      // border: 1px solid red;
      // box-sizing: border-box;
      margin-bottom: 2em;
      max-width: 100%;
      article.node-type-projet{
        >header{
          >h2{
            font-size: 5em;
          }
        }
        >div{
          // margin-top: 3em;
        }
        // only with images, title overlap the image
        &.has-image{
          >header{
            >h2{
              position: relative;
              max-height: 1em;
              overflow: visible;
              z-index: 10;
              // text-shadow: 0 0 10px #fff;
              // box-shadow: 0 0 15px #f00;
              // filter: drop-shadow(0 0 5px #fff);
            }
            div.field_images{
              position:relative;
              // width: 100%;
              z-index: 5;
              a{
                display:block;
                img{
                  width:100%;
                  height: auto;
                }
              }
            }
          }
        }
      }

    }
  }
}


article.node-type-projet.view-mode-full{
  div.cols{
    display: flex;
    flex-direction: row;
    gap: $colsgap;
    // column-gap: 2em;
    div.col{
      flex:0 0 calc(50% - $colsgap / 2);
      // max-width: 48%;

      &.left{
        >h2{
          font-size: 12em;
          margin: 0;
        }

        .field_artiste_s_invite_s{
          font-size: 1.8em;
          font-weight: 300;
        }
        .field_invite_accompagne_curate_p{
          font-weight: 400;
          .field-label{
            font-weight: $default_fwght;
          }
          >div{
            display: inline-block;
          }
        }
        .field_dates{
          time{
            font-weight: 400;
          }
        }
      }
      &.right{
        // Étire .field_images sur toute la hauteur de la colonne (= colonne la
        // plus haute, via le stretch de .cols) : le contexte de collage sticky
        // couvre alors tout le scroll, donc les cartes restent figées tant que
        // la colonne gauche défile encore (cf. point 6).
        display: flex;
        .field_images{
          flex: 1;
        }
        img{
          max-width: 100%;
          height: auto;
        }
        // Empilement "cartes" : chaque image se fige au même endroit (haut) et
        // est recouverte par la suivante (l'ordre du DOM fait que la dernière
        // passe au-dessus). La 1re image ne bouge pas. Desktop uniquement.
        @media (min-width: 768px){
          .field_images .field-item{
            position: sticky;
            top: 0;
          }
        }
      }
    }
  }

}