/* General body and overlay styling */
body {
  margin: 0;
  padding: 0;
  margin-top: 6vh;
  box-sizing: border-box;
  font-family: "aktiv-grotesk", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:1rem;
  display:grid;
  grid-template-areas:
    ". content ."
    "footer footer footer";
  grid-template-rows:auto;
  grid-template-columns:.1fr 1fr .1fr;
  overflow-y:auto;
  overflow-x:hidden;
  grid-row-gap:64px;
  background-image:url(_images/Grid-transparent.svg); 
  background-size: cover;
}

section, div {
    margin: 0;
    padding: 0;
}

.banner {
  width:100vw;
  /* height:32px; */
  overflow:hidden;
  white-space:nowrap;
  text-align:center;
  background-color:#333;
  position:fixed;
  bottom:0;
  left:0;
  padding-top: .25%;
  padding-bottom: .25%;
  max-height:40px;
}

.banner h3 {
  display:inline-block;
  animation: scroll-left-right 60s linear infinite;
  font-size:.8rem;
  font-weight:800;
  font-style:italic;
  color:#fff;
  padding-left: 100%;
}

@keyframes scroll-left-right {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

main {
    margin: 0;
    padding: 0;
    grid-area:content;
    display:grid;
    grid-template-areas:
        "intro . ."
        ". . .";
    grid-template-rows:auto;
    grid-template-columns:.75fr 1fr 1fr;
    /* grid-template-rows:minmax(320px, 1fr);
    grid-template-columns:.25fr minmax(320px, 1fr) 1fr; */
    column-gap:32px;
    row-gap:64px;
    overflow:auto;
}

.card {
    border:8px solid #111111;
    border-radius:8px;
    padding: 8%;
    font-size:2rem;
    display:grid;
    grid-template-areas:
        "project-title project-title project-title"
        "view-project . .";
    grid-template-columns:1.5fr .25fr .25fr;
    grid-template-rows:minmax(240px, 1fr);
    grid-column-gap:16px;
    grid-row-gap:32px;
    align-content:end;
    background-image:url("https://placehold.co/1200@2x.png?text=horizontal+2x"), linear-gradient(white, white);
    background-image: -webkit-image-set(
        url("https://placehold.co/1200?text=horizontal+1x") 1x,
        url("https://placehold.co/1200@2x?text=horizontal+2x") 2x), linear-gradient(rgba(255,255,255,.5), white);
      background-image: image-set(
        url("https://placehold.co/1200?text=horizontal+1x") 1x,
        url("https://placehold.co/1200@2x?text=horizontal+2x") 2x), linear-gradient(rgba(255,255,255,.5), white);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    justify-self:stretch;
    -webkit-box-shadow: 1px 1px 24px 2px rgba(216, 216, 216, .8);
    -moz-box-shadow: 1px 1px 24px 2px rgba(216, 216, 216, .8);
    box-shadow: 1px 1px 24px 2px rgba(216, 216, 216, .8);
}

.card > h3 {
    opacity:0;
}


.card:hover {
    /* border-radius:8px;
    border: 2px solid #e6e6e6; */
    background-image:linear-gradient(rgba(0,0,0,.5), #000), url("https://placehold.co/1200@2x.png?text=horizontal+2x");
    background-image: linear-gradient(rgba(0,0,0,.5),#000), -webkit-image-set(
        url("https://placehold.co/1200?text=horizontal+1x") 1x,
        url("https://placehold.co/1200@2x?text=horizontal+2x") 2x);
      background-image: linear-gradient(rgba(0,0,0,.5),#000),image-set(
        url("https://placehold.co/1200?text=horizontal+1x") 1x,
        url("https://placehold.co/1200@2x?text=horizontal+2x") 2x);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

    /* BOX SHADOW
    -webkit-box-shadow: 2px 2px 32px 0px rgba(216, 216, 216, 1);
    -moz-box-shadow: 2px 2px 32px 0px rgba(216, 216, 216, 1);
    box-shadow: 2px 2px 32px 0px rgba(216, 216, 216, 1); 
    */

.card:hover > h3 {
    opacity:1;
}


.card:hover > .view-project {
    opacity:1;
}

.project-title {
    grid-area:project-title;
    color:#fff;
    width:100%;
    overflow-wrap: break-word;
}

.view-project {
    grid-area:view-project;
    margin: 0;
    padding: 0;
    opacity:0;
}

.intro {
    margin: 0;
    padding: 0;
    grid-area:intro;
    background-color:rgba(255,255,255,.9);
    border-radius:4px;
}

.project-horiz {
    grid-column:span 3;
}

.project-vert {
    grid-row:span 3;
    grid-column: span 2;
}

.fun-horiz {
    grid-column:span 2;
    grid-row:span 2;
}

.fun-vert {
    grid-row:span 4;
}

.vert {
  grid-row:span 3;
}

.writing {
    grid-column:span 2;
}



/* Button styling */

button {
    background-color:rgba(0,0,0,.9);
    color:#fff;
    margin-right:8px;
    margin-bottom: 8px;
    padding:8px 16px;
    border-radius:24px;
    border:2px solid #e6e6e6;
    text-transform:lowercase;
    font-variant:small-caps;
    letter-spacing:2px;
}

button:hover {
    background-color:#ffffff;
    color:#000000;
    background-color:none;
    font-weight:800;
}


/* Project background images */

.tray {
    background-image:url(_images/tray-preview@2x.png), linear-gradient(white, white);
    background-image: -webkit-image-set(
        url("_images/tray-preview.png") 1x,
        url("_images/tray-preview@2x.png") 2x), linear-gradient(white, white);
      background-image: image-set(
        url("_images/tray-preview.png") 1x, 
        url("_images/tray-preview@2x.png") 2x), linear-gradient(white, white);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    grid-column:span 2;
}

.pttrns {
  background-image:url(_images/amhaus-home.png), linear-gradient(white, white);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:top;
}

.content {
  background-image:url(_images/content-search.png), linear-gradient(white, white);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:bottom;
}

.watch {
  background-image:url(_images/icon-gon-shoe.svg), linear-gradient(lightgreen, lightgreen);
  background-size:cover;
  background-position:center;
}

.acct {
  background-image:url(_images/account-menu.svg), linear-gradient(white, white);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:right;
}

.audio {
  background-image:url(_images/audio-libraries.png), linear-gradient(white, white);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}


.tray:hover {
    background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/tray-preview.png);
    background-position:center;
}

.pttrns:hover {
  background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/amhaus-home.png);
}

.content:hover {
  background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/content-search.png);
}

.watch:hover {
  background-color:linear-gradient(lightgreen, lightgreen);
  background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/icon-gon-shoe.svg);
}

.acct:hover {
  background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/account-menu.svg);
  background-position:right;
}

.audio:hover {
  background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/audio-libraries.png);
}

/* End of project background images */


h1, h2, h3 {
    margin: 0;
    padding: 0;
    font-family: "aktiv-grotesk-thin", sans-serif;
    font-weight: 200;
    font-style: normal;
}

h1 {
    font-family: "podium-soft-variable", sans-serif;
    font-variation-settings: "wdth" 88;
    font-size:6rem;
    letter-spacing:2px;
    padding-left: 2%;
    padding-top: 4%;
}

h2 {
    font-size:1.9rem;
    padding-left: 2%;
    font-style:italic;
}

p {
    margin: 0;
    padding: 0;
    margin-top: 8%;
    line-height:1.5;
}

/* .intro > p {
    font-size:.9rem;
} */

/* Quick view layouts */

#overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.overlay-content {
  background-color: white;
  border-radius: 10px;
  width: 80%;
  max-height:90%;
  padding: 20px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden; 
}

/* Close Button */
.close-button {
  position: absolute;
  top: -10px;
  right: 0;
  background: none;
  border: none;
  font-size: 24px;
  font-weight: bold;
  color: black;
  cursor: pointer;
  padding: 10px;
}


/* Carousel Images Section */
.carousel-images {
  display: flex; /* Images in a row */
  height: 300px; /* Fixed height */
  /* overflow: hidden;  */
  position: relative;
  white-space: nowrap; /* Prevent images from wrapping to the next line */
}

.carousel-images img {
  height: 100%; /* Maintain 300px height */
  object-fit: contain; /* Ensure aspect ratio is maintained */
  margin-right: 16px;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  filter:grayscale(1);
}

/* Fade effect for sliding */
.fade-out {
  opacity: 0;
}

.fade-in {
  opacity: 1;
}

/* Text Section - Three Columns */
.text-section {
  display: flex;
  justify-content: space-between;
  margin-top: 4%;
  align-items: flex-start;
}

.project-name {
  width: 25%;
}

.project-name h1 {
  font-size: 4rem;
  margin: 0;
}

.description, .additional-info {
  width: 35%;
  font-size: 14px;
}

/* Full Width CTA Row */
.cta-row {
  display: flex;
  justify-content: flex-end; 
  margin-top: 4%;
  width: 100%;
}

.cta-button {
  background-color: #000000;
  color:#ffffff;
  height: 50px;
  width: 150px;
  border-radius: 25px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}


a,
a + button,
button,
button.quick-view {
    cursor:none;
    cursor:pointer;
}

a, 
a:visited {
    color:blue;
    text-decoration:none;
}

footer {
    grid-area:footer;
    background-color:#111;
    min-height:10vh;
    padding-top: 2%;
    padding-bottom: 4%;
    padding-left: 8%;
    padding-right: 8%;
    text-align:center;
    color:#fff;
    font-family: "aktiv-grotesk-thin", sans-serif;
    font-weight: 200;
    margin: 0;
    font-size:.8rem;
}

.f-copy {
  font-size:.9rem;
}

footer > a,
footer > a:visited {
    color:#fff;
    text-decoration:underline;
    font-variant:small-caps;
    letter-spacing:2px;
}