/* ==========================================
   RESET
========================================== */

.menu-container {
  display: flex;
  background-color: #393b3d;
  color: #fff;
  gap: 0px; /* space between divs */
  padding: 0px;
  font-size: 2rem;
  font-family: "DM Sans", sans-serif;
  position:fixed;
  top:0;
  width:100%;
  z-index:100;
}

.menu-container a{
  color: #fff!important;
}

.menu-nav {
  flex: 1;
  display: flex;
  gap: 0px; /* space between divs */
  padding: 20px;
}

.box1 {
  flex: 1;
  padding: 0px;
}

.box2 {
  flex: 1;
  text-align: right;
  padding: 0px;
}

.menu-language {
  flex: 0;
  text-align: right;
  padding: 20px 20px 20px 0px;
  font-weight: 200;
  font-style: italic;
}

.wagelogo {
  width: 100%;
  height: 100px; /* Define a height so the div is visible */
  background-image: url('/assets/wagelogo.png');
  background-size: contain; /* Forces image to fill the div without stretching */
  background-position: center;
  background-repeat: no-repeat;
}

.w2alogo {
  width: 100%;
  height: 150px; /* Define a height so the div is visible */
  background-image: url('/assets/w2alogocolour.png');
  background-size: contain; /* Forces image to fill the div without stretching */
  background-position: left;
  background-repeat: no-repeat;
}

/* ==========================================================
   RESET
========================================================== */

/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        "DM Sans", sans-serif;

    overflow-x: hidden;
}


/* ==========================================================
   MAIN GRID
========================================================== */

.editorial {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    width: 100%;

}


/* ==========================================================
   IMAGE COLUMN
========================================================== */

.gallery-column {

    position: relative;

}

.gallery-sticky {

    position: sticky;

    top: 0;

    height: 100vh;

}


.gallery-frame {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #000;

}


/* ==========================================================
   IMAGE SLIDES
========================================================== */

.gallery-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    overflow: hidden;

    transition:
        opacity 2.4s cubic-bezier(.22,.61,.36,1);

}


.gallery-slide.active {

    opacity: 1;

}


.gallery-slide img {

    position:absolute;

    top:-20%;
    left:-20%;

    width:140%;
    height:140%;

    object-fit:cover;

    transform:
        scale(1.04);

    will-change:transform;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

}


/* ==========================================================
   IMAGE DARKENING
========================================================== */

.gallery-overlay {

    position: absolute;

    inset: 0;

    z-index: 5;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(0,0,0,.15),
            rgba(0,0,0,.45)
        );

}


/* ==========================================================
   CONTENT COLUMN
========================================================== */

.content-column {

  background-image: linear-gradient(to top, #C2C2C2, #ffffff 25%);
  background-color: #fff; /* Your page background color */
  background-attachment: fixed;
  background-size: cover; 
  min-width: 0;

}

.content-width {
    width: 100%;
    max-width: 720px;
    margin: 60px auto;
    padding: 0px clamp(30px, 5vw, 80px);
}


/* ==========================================================
   HERO
========================================================== */


.hero {
  	margin-top: 150px;
    min-height: auto;
    display: block;
}


h1 {

    margin: 0 0 35px;

    font-size:
        clamp(3rem, 6vw, 6rem);

    line-height: .95;

    letter-spacing: -.04em;

}


.lead {
    font-size:
        clamp(1.15rem, 1.5vw, 1.4rem);

    line-height: 1.7;
}


/* ==========================================================
   CONTENT SECTIONS
========================================================== */

.editorial-section {
    min-height: auto;
    display: block;
    padding: 0px 0;
}


h2 {

    margin: 0 0 25px;

    font-size:
        clamp(2rem, 3vw, 3rem);
  
    line-height: 1;

}


p {

    font-size: 1.3rem;

    line-height: 1.5;

    margin-bottom: 1.3rem;

}


footer {

    padding: 0px 0;

}



/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {
  
  .menu-container {
    flex-direction: column;
    font-size: 1.5rem;
  }
  
  .menu-language {
    padding: 0px;
    background-color: #2a2e31;
    text-align: center;
    font-size: 1.2rem;
    padding: 8px;
  }
  
  .wagelogo {
  background-image: url('/assets/wagelogo-w.png');
  }
  
  .w2alogo {
  background-image: url('/assets/w2alogowhite.png');
  }



    .editorial {

        display: block;

    }
  
  .editorial a {
    
    color: #fff!important;
    
  }


    .gallery-column {

        position: fixed;

        inset: 0;

        width: 100%;

        height: 100vh;

        z-index: 0;

    }


    .gallery-sticky {

        height: 100vh;

    }


    .gallery-frame {

        height: 100vh;

    }


    .gallery-overlay {

        background:
            rgba(0,0,0,.62);

    }


    .content-column {

        position: relative;

        z-index: 10;

        background: transparent;

        color: white;

    }


    .content-width {

        padding:
            40px 30px;

    }


    h1,
    h2,
    p {

        color: white;

    }


    .hero {

        min-height: 100vh;

    }


    .editorial-section {

        min-height: auto;

        padding:
            50px 0;

    }


}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }


    .gallery-slide {

        transition: none;

    }

}