/* ===== Base ===== */
body {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  background-color: #F2EFEA;
}

/* ===== Section ===== */
.photo-collage {
  position: relative;

  background: #F2EFEA;

  padding: 110px 0 80px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== Rows ===== */
.collage-row {
  display: flex;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  padding-bottom: 20px;
}

/* ===== Direction offsets ===== */
.row-left {
  transform: translateX(-120px);
}

.row-right {
  transform: translateX(120px);
}

/* ===== Animate in ===== */
.collage-row.animate {
  opacity: 1;
  transform: translateX(0);
  transition: transform 2s ease, opacity 2s ease;
}

/* ===== Track ===== */
.row-track {
  display: flex;
  gap: 20px;
  width: max-content;
}

/* ===== Images ===== */
.photo {
  height: auto;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 8px 10px rgba(0,0,0,0.12);
  display: block;
}

/* ===== Base Sizes ===== */
.r-1 {
  width: clamp(160px, 16vw, 320px);
  aspect-ratio: 1 / 1;
}

.r-2 {
  width: clamp(80px, 8vw, 160px);
  aspect-ratio: 1 / 2;
}

.r-3 {
  width: clamp(240px, 24vw, 480px);
  aspect-ratio: 3 / 2;
}

/* ===== Middle Row Emphasis (KEY) ===== */
.collage-row.row-right .r-1 {
  width: clamp(220px, 22vw, 440px);
}

.collage-row.row-right .r-2 {
  width: clamp(110px, 11vw, 220px);
}

.collage-row.row-right .r-3 {
  width: clamp(330px, 33vw, 660px);
}



/* ===== Center Block ===== */
.collage-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Match r-3 */
.collage-center.r-3 {
  width: clamp(330px, 33vw, 660px);
  aspect-ratio: 3 / 2;
}

/* ===== Center Content ===== */
.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0px;
}


/* ===== Text ===== */
.center-text {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(40px, 5vw, 80px);
    transition: transform 0.3s ease, filter 0.3s ease;
    color: #233619;
    letter-spacing: 1px;
    line-height: 1;
}

.center-text:hover {
  transform: scale(1.1);
  filter: brightness(0) saturate(100%) invert(55%) brightness(130%) contrast(115%);
}

/* ===== Optional Date ===== */
/*
.center-date {
  font-size: clamp(14px, 1.2vw, 18px);
  color: #233619;
  opacity: 0.7;
}
*/

.mobile-only {
  display: none;
}

@media (max-width: 799px) {

  /* =========================================
     COLLAGE CONTAINER
  ========================================= */

  .photo-collage {
    padding: 85px 0 60px;
  }

  /* =========================================
     ROWS (horizontal scroll for image rows)
  ========================================= */

  .collage-row {
    overflow-x: auto;
    justify-content: flex-start;
    padding-left: 20px;
  }

  /* Hide scrollbar */
  .collage-row::-webkit-scrollbar {
    display: none;
  }

  .collage-row {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* =========================================
     TRACK
  ========================================= */

  .row-track {
    gap: 14px;
  }

  /* =========================================
     IMAGE SIZES (smaller + cleaner)
  ========================================= */

  .r-1 {
    width: clamp(90px, 28vw, 140px);
  }

  .r-2 {
    width: clamp(60px, 18vw, 100px);
  }

  .r-3 {
    width: clamp(140px, 45vw, 220px);
  }

    /* ===== Middle Row Emphasis (KEY) ===== */
  .collage-row.row-right .r-1 {
    width: clamp(90px, 28vw, 140px);
  }

  .collage-row.row-right .r-2 {
    width: clamp(60px, 18vw, 100px);
  }

  .collage-row.row-right .r-3 {
    width: clamp(140px, 45vw, 220px);
  }

  /* =========================================
     MIDDLE ROW → TEXT ONLY
  ========================================= */


  /* Remove horizontal scroll for text row */
  .row-middle {
    overflow: visible;
    justify-content: center;
    padding-left: 0;
    width: clamp(60px, 18vw, 100px);
  }

  /* Center the content */
  .row-middle .row-track {
    width: 100%;
    justify-content: center;
  }

  /* =========================================
     CENTER TEXT BLOCK
  ========================================= */

  .collage-center {
    margin: 0px 0;
  }

  .collage-center.r-3 {
    max-width: 300px;
    width: clamp(60px, 18vw, 100px);
    aspect-ratio: 1 / 1;
  }
  

  .center-text {
    font-size: clamp(32px, 9vw, 46px);
    text-align: center;
  }

  /* =========================================
     MOBILE-ONLY EXTRA ROWS
  ========================================= */

  .mobile-only {
    display: flex;
  }

}