/* --- ABOUT PAGE LAYOUT --- */

.about-wrapper {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* --- HERO STATEMENT --- */

.quickLabel {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-midGrey);
  margin-bottom: var(--space-sm);
}

.hero-statement {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-text);
  max-width: 60ch; /* Keeps the line length readable and punchy */
}

/* --- TWO COLUMN CONTENT --- */

.about-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* Narrative gets slightly more room */
  gap: var(--space-xl);
  align-items: center;
}

.bio-text p {
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-medium);
  margin-bottom: var(--space-md);
}

.bio-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.intro-lead {
  color: var(--color-text) !important;
  font-weight: 500;
}

/* --- MEDIA FRAME --- */

.image-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px; /* Increased from 320px for better mobile display */
}

.image-frame img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: var(--space-sm);
  object-fit: cover;
}

.image-caption {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
  margin-bottom: var(--space-sm);
}

/* Pagination Dots */
.pagination-dots {
  display: flex;
  gap: 1.2rem;
  padding: 1rem 0;
}

.dot {
  width: 6px; /* Slightly larger for easier clicking */
  height: 6px;
  background-color: var(--color-lightGrey);
  border-radius: 50%;
  position: relative;
  cursor: pointer; /* Critical for UX */
  transition: background-color 0.3s ease;
}

.dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 20px;
  height: 20px;
  background: transparent;
}

.dot.active {
  background-color: var(--color-text);
}

.dot:hover {
  background-color: var(--color-midGrey);
}

#about-gallery-img {
  transition: opacity 0.4s ease;
  will-change: opacity;
}

/* === 900px: About page content stacks === */
/* --- MOBILE --- */

@media (max-width: 900px) {
  .about-content {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Let images be fully responsive without constraints */
  .image-frame {
    width: auto; /* Remove width constraint */
    max-width: none; /* Remove max-width constraint */
  }

  .bio-media {
    width: 100%; /* Full width container */
    max-width: none; /* Remove max-width constraint */
    margin: 0; /* Remove centering */
  }
}

/* === 600px: Reduce vertical spacing on mobile === */
@media (max-width: 600px) {
  .about-wrapper {
    gap: var(--space-lg); /* Reduce from section-gap (5rem) to space-lg (2rem on mobile) */
  }
}