/* ================================
   PROJECT PAGE BASE
================================ */

.project-page {
  padding: 0 2rem;
}

p {
  color: #434343;
  font-family: "neue-haas-unica", sans-serif;
  font-size: 16px;
  line-height: 1.3;
}

/* Shared inner column */
.project-inner {
  width: 100%;
  margin: 0 auto;
}

/* ================================
   BANNER IMAGE
================================ */

.project-banner {
  margin-top: 13vh;
}

.project-banner img {
  width: 100%;
  height: 20vh;
  object-fit: cover;
  display: block;
}

/* ================================
   PROJECT HEADER
   (aligned with synopsis content)
================================ */

.project-header {
  margin-top: 40px;
  margin-bottom: 30px;
}

.project-header .project-inner {
  display: flex;
  flex-direction: column;
  /* align-items: flex-end; */
  gap: 5vw;
  /* padding-left: 30vw; */
}

.project-title {
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 400;
  color: #1D3EFF;
  line-height: 1.1;
}

.project-category {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 6px;
}

/* ================================
   SYNOPSIS SECTION
================================ */

.project-synopsis {
  margin-top: 40px;
}

.synopsis-grid {
  display: block;
  grid-template-columns: 30vw 1fr;
  gap: 0;
  align-items: start;
}

.synopsis-label {
  display: none;
}

.synopsis-label p {
  font-size: 20px;
  font-weight: 400;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
}

.synopsis-content {
  width: 100%;
}

/* Synopsis text */
.synopsis-text {
  margin-bottom: 40px;
}

.synopsis-text p {
  max-width: 100%;
  font-family: "neue-haas-unica", sans-serif;
  font-weight: 300;
}

.synopsis-text span {

  font-style: italic;
}

/* ================================
   SYNOPSIS ASSETS
================================ */

.synopsis-assets {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.synopsis-assets img {
  width: 50%;
  height: 50%;
}

.synopsis-assets video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.synopsis-assets img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.synopsis-assets > * {
  flex: 1;
  /* max-height: 320px; adjust to taste */
  overflow: hidden;
}

/* ================================
   PROJECT ASSETS SECTION
================================ */

.project-assets {
  margin-top: 20px;
}

.project-assets .project-inner {
  display: block;
}

/* ================================
   PROJECT IMAGE COMPOSITION
================================ */

.asset-composition {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.asset-full {
  overflow: hidden;
  object-position: center;
}

/* Top full-width image */
.asset-full img {
  width: 100%;
  display: block;
  object-fit: cover;
  height: 100%;
  min-height: 50vh;
}

.asset-full video {
  height: 100%;
  max-height: 50vh;
}

.media-box{
  height: 50vh;
}

/* Bottom 70 / 30 split */
.asset-split {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

.asset-split img,
.asset-split video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills container and crops if needed */
  display: block;
}

/* Bottom 70 / 30 split */
.asset-split-7-5 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

.asset-split-7-5 img,
.asset-split-7-5 video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills container and crops if needed */
  display: block;
}

/* Bottom 70 / 30 split */
.asset-split-4-4-4 {
  display: flex;
  flex-direction: column;
  /* grid-template-columns: repeat(3, 1fr); */
  gap: 20px;
  align-items: start;
}

.asset-split-4-4-4 img,
.asset-split-4-4-4 video {
  width: 100%;
  height: auto;
  object-fit: cover; /* fills container and crops if needed */
  display: block;
}

/* Bottom 50 / 50 split */
.asset-split-6-6 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

.asset-split-6-6 img,
.asset-split-6-6 video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills container and crops if needed */
  display: block;
}

.Video-fix video{
  width: 105%;
  height: 100%;
}

.asset-stack {
  display: flex;
  flex-direction: column;   /* 🔒 forces vertical stacking */
  align-items: flex-start;  /* prevents stretch */
  gap: 20px;
  width: 100%;
}

.asset-stack img {
  width: 100%;
  height: auto;
  display: block;
}

/* ================================
   PROJECT NAVIGATION
================================ */

.project-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5vh 0 5vh 0;
  font-family: "neue-haas-unica", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #1D3EFF;
  gap: 1rem;
}

.project-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
}

.project-nav-link:hover {
  opacity: 0.6;
}

.project-nav-title {
  white-space: nowrap;
  /* width: 50%; */
}

/* Arrow styling */
.arrow {
  font-size: 20px;
  line-height: 10px;
  transform: translateY(-1px);
}

/* Spacer pushes links apart */
.project-nav-spacer {
  flex-grow: 1;
}


/* ================================
   SPINOLA BRANDING
================================ */

.Heading-Space {
 padding-top: 10vh;
}

.Brandtone {
  width: 100%;
  background-color: #1D3EFF;
  color: white;
  padding: 10vh 10vw;
}

.Brandtone p{
  font-size: 18px;
  color: white;
}

.Brandtone h1{
  font-size: 40px;
  font-weight: 500;
}



.BrandColours {
  display: flex;
  flex-direction: column;
  gap: 20px;

}

.Light_Grey {
  height: 30vh;
  display: flex;
  flex-direction: column;
  align-items: first baseline;
  width: 100%;
  background-color: #F4F4F4;
  justify-content: flex-end;
  padding: 5vh 10vw;
}

.Funky_Blue {
  height: 30vh;
  display: flex;
  flex-direction: column;
  align-items: first baseline;
  width: 100%;
  background-color: #1D3EFF;
  justify-content: flex-end;
  padding: 5vh 10vw;
  color: white;
}

.Funky_Blue p{
  color: white;
}

.Kinda_Dark_Black {
  height: 30vh;
  display: flex;
  flex-direction: column;
  align-items: first baseline;
  width: 100%;
  background-color: #434343;
  justify-content: flex-end;
  padding: 5vh 10vw;
  color: white;
}

.Kinda_Dark_Black p{
  color: white;
}

.White_White_White {
  height: 30vh;
  display: flex;
  flex-direction: column;
  align-items: first baseline;
  width: 100%;
  background-color: white;
  justify-content: flex-end;
  padding: 5vh 10vw;
}

.Typography_heading {
  font-family: oswald, sans-serif;
  /* margin-left: 30vw; */
  background-color: #1D3EFF;
  color: white;
  padding: 10vh 5vw;
}

.Typography_heading p{
  font-family: 'Oswald', sans-serif;
  color: white;
}

.Typography_heading h1{
  font-family: 'Oswald', sans-serif;
  font-size: 60px;
  line-height: 60px;
  color: white;
}

.Typography_paragraph {
  font-family: oswald, sans-serif;
  /* margin-left: 30vw; */
  background-color: #1D3EFF;
  color: white;
  padding: 10vh 5vw;
}

.Typography_paragraph p{
  font-family: "neue-haas-unica", sans-serif;
  color: white;
}

.Typography_paragraph span{
  font-family: "neue-haas-unica", sans-serif;
  font-weight: 600;
  color: white;
}

.asset-split-4-8 {
  display: flex;
  flex-direction: column;
  /* grid-template-columns: 4fr 8fr; */
  gap: 20px; /* matches your existing rhythm */
  width: 100%;

}

.asset-split-4-8 > div {
  /* height: 387px; */
  overflow: hidden;
}

.asset-split-4-8 img,
.asset-split-4-8 video {
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
  display: block;
}

.asset-large{
  background-color: #1D3EFF;
}

.asset-large img{
  width: 100%;
}

.asset-small{
  background-color: #1D3EFF;
}

.asset-small img{
  width: 100%;
}

  /* ================================
   DEVOPS FLYER
================================ */

.DevopsFlyer {
  height: fit-content;
}

  /* ================================
   DEVOPS FLYER
================================ */

.box_fixing {
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.box_fixing img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center;
}

.Top_Space {
  margin-top: 0vh;
}

.image_bottom img {
  object-position: bottom;
}


@media (min-width: 1024px) { 

  .project-banner {
  margin-top: 10vh;
  }

  .project-banner img {
    width: 100%;
    height: 60vh;
  }

  .project-header .project-inner {
    flex-direction: row;
    padding-left: 30vw;
    align-items: flex-end;
  }

  .project-title {
    font-size: 60px;
  }

  .synopsis-label {
    display: inline-block;
  }

  .synopsis-grid {
    display: grid;
    grid-template-columns: 30vw 1fr;
    gap: 0;
    align-items: start;
  }

  .synopsis-assets {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
  }

  .project-assets {
    margin-top: 80px;
  }

  .media-box{
    height: auto;
  }

  .asset-split-4-8 > div {
    height: 387px;
  }

  .asset-split-4-8 {
    display: grid;
    grid-template-columns: 4fr 8fr;
  }

  .BrandColours {
    display: flex;
    flex-direction: row;
  }


  .Light_Grey {
    height: 60vh;
    padding: 2vh 2vw;
  }

  .Funky_Blue {
    height: 60vh;
    padding: 2vh 2vw;
  }

  .Funky_Blue p{
    color: white;
  }

  .Kinda_Dark_Black {
    height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: first baseline;
    width: 100%;
    background-color: #434343;
    justify-content: flex-end;
    padding: 2vh 2vw;
    color: white;
  }

  .Kinda_Dark_Black p{
    color: white;
  }

  .White_White_White {
    height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background-color: white;
    justify-content: flex-end;
    padding: 2vh 2vw;
  }

  .Typography_heading {
    margin-left: 30vw;
  }

  .Typography_heading h1{
    font-size: 175px;
    line-height: 175px;
  }

  .Typography_paragraph {
    margin-left: 30vw;
  }

  .project-nav-title {
    white-space: nowrap;
    width: fit-content;
  }

  .asset-split {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 20px;
    align-items: stretch;
  }

  .Top_Space {
    margin-top: 15vh;
  }

  .asset-full {
    height: auto;
  }

  .asset-full img{
    height: auto;
  }

  .asset-full video {
    max-height: 80vh;
    width: 100%;
  }

  .asset-split-4-4-4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
  }

  .asset-split-6-6 {
    display: grid;
    grid-template-columns: 5fr 5fr;
    gap: 20px;
    align-items: stretch;
  }

  .asset-split-7-5 {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: 20px;
    align-items: stretch;
  }

  .Brandtone h1{
    font-size: 60px;
    font-weight: 400;
  }

  .project-nav {
    font-size: 20px;
    display: flex;
    flex-direction: row;
  }
}