/* === PROJEKTSIDOR (FOXIO DESIGN) === */
.projectpage-start-foxio {
  padding: 1rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 2rem;
  background-color: grey;
  text-align: center;
  position: relative;
  z-index: 1;

  background-image: url('foxio_images/foxio-background.png');
  background-size: cover;        
  background-position: center;  
  background-repeat: no-repeat;
}

.foxio-title {
  position: relative;
  z-index: 2; /* högre än videon och bakgrunden */
  display: inline-block;
  margin-bottom: 1rem;
}

.foxio-title h1 {
  padding: 1rem 2rem;
  display: inline-block;
  min-width:60%;
  max-width: 90%;
  background-color: transparent;
  border-radius: 1.5rem;
  color: #f2b885;
  font-weight: 1000;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.3rem;
}

/* 3D-bilder */

.images-section {
  font-family: 'Noto Sans', sans-serif;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  color: #333;
  background-color: #f2f1df;
  padding: 1rem;
}

.images-section h2 {
  font-family: "Noto Sans", sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: #333;
  margin: 2rem 0 1rem 0;
  text-align: center;
}

/* Grid för 3D iframes: 4 per rad */
.image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* Grid för foton: 2 per rad */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

/* Stil för iframes och bilder i 3D-griden */
.image-grid iframe,
.image-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  display: block;
  object-fit: cover;
  overflow: hidden;
}

/* Stil för bilder i photo-grid */
.photo-grid img {
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  object-fit: contain;
  display: block;
  overflow: hidden;
}

/* Mobilanpassning */
@media (max-width: 768px) {
  .images-section {
    padding: 0.1rem;
  }

  .image-grid {
    grid-template-columns: 1fr;
  }

  .photo-grid {
    grid-template-columns: 1fr;
    margin-top: 1rem;
  }

  .image-grid iframe,
  .image-grid img,
  .photo-grid img {
    width: 100%;
    max-width: 100%;
  }
}

/*BILDGALLERI-SEKTION*/

/* === Bildspelssektion: container och rubriker === */
.multi-carousel-section {
  max-width: 1400px;
  margin: 0 auto;
  font-family: "Noto Sans", sans-serif;
  text-align: center;
  padding: 1rem;
  background-color: #1e1e1e;
}

.multi-carousel-section h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-family: "Noto Sans", sans-serif;
  color: whitesmoke;
}

.multi-carousel-container {
  position: relative;
  overflow: hidden;
}

.multi-carousel-viewport {
  overflow: hidden;
  width: 100%;
}

.multi-carousel-track {
  display: flex;
  gap: 15px;
  transition: transform 0.5s ease;
}

.multi-carousel-item {
  flex: 0 0 calc(33.333% - 10px);
}

.multi-carousel-item img {
  width: 100%;
  border-radius: 1rem;
  display: block;
}

.multi-prev,
.multi-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  color: rgba(255, 255, 255, 0.4); /* Halvtransparent vit färg */
  font-size: 1.2rem; 
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  border-radius: 0.5rem;
  user-select: none;
  z-index: 10;
  transition: color 0.3s ease;
  background: transparent;
}

.multi-prev {
  left: 0.5rem;
}

.multi-next {
  right: 0.5rem;
}

.multi-prev:hover,
.multi-next:hover {
  color: rgba(255, 255, 255, 0.9);
}

.multi-carousel-viewport.dragging {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.multi-carousel-viewport {
  cursor: grab;
  cursor: -webkit-grab;
}

.multi-carousel-item img {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

@media (max-width: 768px) {
  /* Behåll maxbredd och centrering men ta bort onödig padding/marginal */
  .multi-carousel-section {
    max-width: 100%;
    margin: 0 auto;
    padding: 0.5rem 1rem; /* Lite mindre padding för mobil */
    margin-bottom: 0;      /* Ingen extra margin under sektionen */
  }

  /* Rubriken anpassas för mindre skärm */
  .multi-carousel-section h2 {
    font-size: 1.6rem;
    margin: 0 0 1rem 0;   /* Inga toppmarginaler, men lite under */
  }

  /* Bildkarusellens items — visa 2 bilder bredvid varandra med lite gap */
  .multi-carousel-item {
    flex: 0 0 calc(50% - 10px);
    margin-right: 0;  /* Ta bort extra marginal om satt */
  }

  /* Om du har gap mellan bilder via flex-gap */
  .multi-carousel-track {
    gap: 10px;
  }

  /* Navigationsknapparna mindre och enklare på mobil */
  .multi-prev,
  .multi-next {
    font-size: 1rem;
    padding: 0.5rem;
  }
}

  /* NIGHT TO DAY TRANSITION */

.ntd-area {
  font-family: 'Noto Sans', sans-serif;
  background-color: #f2f1df;
  max-width: 1400px;
  margin: 0 auto;
  color: #333;
  padding: 1rem;
}

.ntd-area h2 {
  font-family: "Noto Sans", sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 2rem;
  text-align: center;
}

.ntd-video-iframe-container {
  position: relative;
  width: 90%;
  max-width: 1400px;
  margin: 2rem auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 0.2rem;
  overflow: hidden;
}

.ntd-video-iframe-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

.ntd-video-text p {
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  padding: 0.5rem;
  border-radius: 0.8rem;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: center;
  font-weight: 400;
  color: whitesmoke;
  max-width: 90%;
  margin: 1rem auto 0 auto;
}

/*BRANDING-SECTION */

.branding-area {
  font-family: 'Noto Sans', sans-serif;
  max-width: 1400px;
  width:100%;
  margin: 0 auto;
  color: #333;
  padding: 1rem;
}

.branding-area h2 {
  font-family: "Noto Sans", sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 2rem;
  text-align: center;
}

.branding-images-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr 1.5fr; /* Andelar istället för fasta px */
  grid-template-rows: repeat(2, minmax(180px, auto));
  gap: 0.5rem;
  width: 100%;             /* Ta hela tillgängliga bredden */
  box-sizing: border-box;
}

.branding-images-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  display: block;
}

/* Bildplacering */
.img1 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.img2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.img3 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.img4 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

.img5 {
  grid-column: 4 / 5;
  grid-row: 1 / 3;
}

/* Responsiv anpassning */
@media (max-width: 1024px) {
  .branding-images-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(150px, auto));
  }
  
  .img1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  
  .img2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  
  .img3 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  
  .img4 {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
  }
  
  .img5 {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
  }
}

@media (max-width: 600px) {
  .branding-images-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
  }
  
  .img1, .img2, .img3, .img4, .img5 {
    grid-column: 1 / 2 !important;
    grid-row: auto !important;
    height: 200px; /* kan justeras */
  }
}



/* USER TESTS */
.user-tests-area {
  font-family: 'Noto Sans', sans-serif;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
  background-color: #f2f1df;
}

.user-tests-area h2 {
  font-family: "Noto Sans", sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 2rem;
  text-align: center;
}

.user-tests-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
  /* Vanlig ordning: text vänster, bilder höger */
  flex-direction: row;
}

/* Textområde till vänster */
.left-user-tests {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 250px;
  
}

.left-user-tests p {
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 400;
  color: #333;
  text-align: justify;
}

/* Bildområde till höger med två bilder i rad */
.user-tests-right-images {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  min-width: 250px;
}

.user-tests-right-images img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Responsiv anpassning */
@media (max-width: 768px) {
  .user-tests-container {
    flex-direction: column;
  }
  
  .left-user-tests, 
  .user-tests-right-images {
    min-width: 100%;
  }
  
  .left-user-tests {
    gap: 1.5rem;
  }
}