/* Whiteboard photo collage shown after the letter (#collageContainer in
   index.html). Kept apart from letter.css because it is a self-contained part. */

.whiteboard-container {
  width: 90%;
  max-width: 1200px;
  height: 80vh;
  min-height: 600px;
  position: relative;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

.whiteboard {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #fdfbf8 0%, #f0ede8 100%);
  border: 20px solid #8b7355;
  border-radius: 15px;
  position: relative;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.05),
    inset 0 0 100px rgba(139, 115, 85, 0.05);
  overflow: hidden;
}

.wood-texture {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  background-image: repeating-linear-gradient(
    90deg,
    #8b7355,
    #8b7355 2px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
}

.polaroid {
  position: absolute;
  transform-origin: center center;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 10;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

.polaroid:hover {
  transform: scale(1.05) rotate(0deg) !important;
  z-index: 100;
  box-shadow:
    0 8px 15px rgba(0, 0, 0, 0.3),
    0 3px 6px rgba(0, 0, 0, 0.15);
}

.polaroid-1 {
  width: 180px;
  left: 42%;
  top: 30%;
  transform: rotate(-1deg);
}

.polaroid-2 {
  width: 180px;
  left: 15%;
  top: 50%;
  transform: rotate(6deg);
}

.polaroid-3 {
  width: 180px;
  right: 25%;
  top: 7%;
  transform: rotate(-2deg);
}

.polaroid-4 {
  width: 180px;
  right: 18%;
  top: 52%;
  transform: rotate(3deg);
}

.polaroid-5 {
  width: 180px;
  left: 12%;
  top: 10%;
  transform: rotate(-4deg);
}

.polaroid img {
  width: 100%;
  height: auto;
  display: block;
}

.polaroid-text {
  display: none;
}

.flower {
  position: absolute;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.flower-1 {
  top: 5%;
  left: 3%;
  transform: rotate(15deg);
}

.flower-2 {
  bottom: 10%;
  left: 20%;
  transform: rotate(-20deg);
}

.flower-3 {
  top: 50%;
  right: 3%;
  transform: rotate(25deg);
}

.flower-4 {
  bottom: 15%;
  right: 40%;
  transform: rotate(-10deg);
}

.tape {
  position: absolute;
  background: rgba(255, 248, 220, 0.7);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tape-1 {
  width: 50px;
  height: 18px;
  top: 8%;
  left: 35%;
  transform: rotate(-30deg);
}

.tape-2 {
  width: 50px;
  height: 18px;
  top: 55%;
  right: 8%;
  transform: rotate(35deg);
}

/* Photos are a fixed 180px wide but decorations are placed in percentages, so
   on narrower screens they collide. Text and the stamp sit in areas the photos
   never reach, and are layered above the photos (z-index 10) as a fallback. */
.vintage-stamp {
  position: absolute;
  z-index: 20;
  width: 80px;
  height: 80px;
  bottom: 4%;
  left: 3%;
  opacity: 0.6;
  transform: rotate(-15deg);
}

.handwritten-text {
  position: absolute;
  z-index: 20;
  font-family: 'Brush Script MT', cursive;
  color: #5a4a3a;
  font-size: 24px;
  white-space: nowrap;
  transform: rotate(-2deg);
  opacity: 0.8;
}

/* Centred in the strip above the photos, which start at 7% from the top */
.text-1 {
  top: 1%;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
}

/* Bottom-right corner, outside the bottom-right photo (18% from the right) */
.text-2 {
  bottom: 3%;
  right: 4%;
  font-size: 20px;
  transform: rotate(3deg);
}

.pushpin {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #ff6b6b, #cc5555);
  border-radius: 50%;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 3px rgba(0, 0, 0, 0.2);
}

.pushpin-1 {
  top: 8%;
  right: 15%;
}

.pushpin-2 {
  top: 60%;
  left: 25%;
}

.doodle {
  position: absolute;
  opacity: 0.3;
  color: #8a7968;
  font-size: 40px;
}

.doodle-1 {
  top: 60%;
  left: 50%;
}

.doodle-2 {
  bottom: 30%;
  left: 40%;
  font-size: 30px;
}

/* Responsive Design for Mobile */
/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
  .polaroid {
    width: 160px;
  }

  .whiteboard-container {
    width: 95%;
  }
}