/* ---------- About (full page) ---------- */

.about-full {
  background: var(--white);
  padding: 80px 0;
}

.about-full p {
  font-size: 1.05rem;
  margin: 0 0 20px;
}

.about-full .drag-hint {
  text-align: center;
  font-style: italic;
  color: var(--text-gray);
  font-size: 0.9rem;
  margin: 0 0 8px;
}

.subheading {
  font-family: var(--sans);
  font-style: italic;
  color: var(--blue);
  font-size: 1.3rem;
  margin: -8px 0 28px;
}

.about-full ul {
  color: var(--text-dark);
  padding-left: 20px;
  margin-bottom: 24px;
}

.about-full ul li {
  margin-bottom: 6px;
}

.recipe-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.recipe-link:hover {
  text-decoration-thickness: 2px;
}

/* ---------- Photo collage ---------- */

.about-collage {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 880px;
}

.about-text {
  position: absolute;
  top: 12px;
  left: 384px;
  width: 632px;
  z-index: 2;
}

.photo-item {
  position: absolute;
  margin: 0;
  border-radius: 8px 8px 8px 8px;
  overflow: hidden;
  background: #d9d9d9;
  cursor: none;
  box-shadow: 0 14px 30px rgba(20, 20, 107, 0.18);
  z-index: 1;
  transition: transform 0.25s ease;
}

.photo-item:hover {
  z-index: 3;
}

.photo-item.dragging {
  z-index: 20;
  transition: none;
  cursor: grabbing;
  user-select: none;
}

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

/* my signature lemon raspberry cake */
.scatter-1 { top: 210px; left: 58px; width: 166px; height: 205px; transform: rotate(-3deg); }
.scatter-1:hover { transform: rotate(-3deg) scale(1.06); }

/* performative reading */
.scatter-2 { top: 430px; left: 142px; width: 212px; height: 159px; transform: rotate(-4deg); }
.scatter-2:hover { transform: rotate(-4deg) scale(1.06); }

/* foraging w/ friends */
.scatter-3 { top: 610px; left: 300px; width: 197px; height: 212px; transform: rotate(-10deg); }
.scatter-3:hover { transform: rotate(-10deg) scale(1.06); }

/* hiking around appalachia */
.scatter-4 { top: -6px; left: 139px; width: 197px; height: 205px; transform: rotate(-6deg); }
.scatter-4:hover { transform: rotate(-6deg) scale(1.06); }

/* showing off my duke spirit */
.scatter-5 { top: 25px; left: 1127px; width: 166px; height: 178px; transform: rotate(4deg); }
.scatter-5:hover { transform: rotate(4deg) scale(1.06); }

/* hacking! */
.scatter-6 { top: 220px; left: 1042px; width: 166px; height: 151px; transform: rotate(3deg); }
.scatter-6:hover { transform: rotate(3deg) scale(1.06); }

/* fueling my stationery addiction @ muji */
.scatter-7 { top: 400px; left: 1210px; width: 182px; height: 235px; transform: rotate(-2deg); }
.scatter-7:hover { transform: rotate(-2deg) scale(1.06); }

/* organizing a school supply drive */
.scatter-8 { top: 644px; left: 582px; width: 182px; height: 136px; transform: rotate(5deg); }
.scatter-8:hover { transform: rotate(5deg) scale(1.06); }

/* i love nature! */
.scatter-9 { top: 644px; left: 900px; width: 220px; height: 136px; transform: rotate(-4deg); }
.scatter-9:hover { transform: rotate(-4deg) scale(1.06); }

@media (max-width: 1400px) {
  .about-full .drag-hint {
    display: none;
  }

  .about-collage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    min-height: 0;
  }

  .about-text {
    position: static;
    grid-column: 1 / -1;
    width: auto;
    padding: 0;
    box-shadow: none;
  }

  .photo-item {
    position: static;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  .photo-item img {
    height: auto;
  }
}

@media (max-width: 480px) {
  .about-collage {
    grid-template-columns: 1fr;
  }
}

@media (pointer: coarse) {
  .photo-item {
    cursor: auto;
  }

  .photo-item::after {
    content: attr(data-caption);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 20, 107, 0.7);
    color: var(--white);
    font-size: 0.8rem;
    padding: 8px 12px;
  }
}