/*
  css/bio.css
  Stylesheet for the Bio Page (bio.html)
  Author: Jules
*/

/* ------------------- */
/* --- Page Title --- */
/* ------------------- */
.page-title {
  /* Center-aligns the main title of the page. */
  text-align: center;
  /* Adds extra space below the title before the main content. */
  margin-bottom: var(--spacing-large);
  /* Increases the font size for a strong visual hierarchy. */
  font-size: 2.5rem;
}

/* ------------------- */
/* --- Bio Layout --- */
/* ------------------- */
.bio-layout {
  /* Uses CSS Grid for a robust two-column layout. */
  display: grid;
  /* Defines two columns: the first for the photo (40%), the second for text (60%). */
  grid-template-columns: 40% 1fr;
  /* Creates a significant gap between the photo and the text content. */
  gap: var(--spacing-xlarge);
  /* Aligns items to the top of the grid cells. */
  align-items: start;
}

/* ------------------- */
/* --- Bio Photo --- */
/* ------------------- */
.bio-photo img {
  /* Ensures the image is fully contained within its grid column. */
  width: 100%;
  /* Maintains the aspect ratio of the image. */
  height: auto;
  /* Adds a border that matches the site's brutalist aesthetic. */
  border: 2px solid var(--secondary-accent-color);
}

/* ------------------- */
/* --- Bio Content --- */
/* ------------------- */
.bio-content {
  /* This container holds all the text-based elements. */
  display: flex;
  /* Stacks the content (bio, statement, buttons) vertically. */
  flex-direction: column;
  /* Adds a gap between the stacked flex items. */
  gap: var(--spacing-large);
}

.bio-content h2 {
  /* The artist's name, styled as the primary heading within this section. */
  font-size: 2rem;
  /* A border below the name to visually separate it from the bio text. */
  border-bottom: 2px solid var(--primary-accent-color);
  /* Padding below the text to give the border some space. */
  padding-bottom: var(--spacing-small);
  /* Margin to separate it from the paragraphs that follow. */
  margin-bottom: var(--spacing-medium);
}

.artist-statement {
  /* Styles for the artist statement section. */
  background-color: rgba(255, 255, 255, 0.05); /* A very subtle background to differentiate it. */
  padding: var(--spacing-large); /* Generous padding inside the box. */
  border-left: 4px solid var(--primary-accent-color); /* An accent border on the left. */
}

.artist-statement h3 {
  /* Margin below the heading of the artist statement. */
  margin-bottom: var(--spacing-medium);
}

.artist-statement p {
  /* Removes the bottom margin from the last paragraph inside this box. */
  margin-bottom: 0;
}

/* ------------------- */
/* --- Action Buttons --- */
/* ------------------- */
.bio-actions {
  /* Container for the 'View CV' and 'Download CV' buttons. */
  display: flex;
  /* Puts space between the buttons. */
  gap: var(--spacing-medium);
  /* Aligns the buttons to the start of the container. */
  justify-content: flex-start;
  /* Allows buttons to wrap onto the next line on smaller screens. */
  flex-wrap: wrap;
}

/* ------------------- */
/* --- Media Queries --- */
/* ------------------- */
@media (max-width: 992px) {
  .bio-layout {
    /* Adjusts grid columns for medium-sized screens (e.g., tablets). */
    /* The photo column becomes slightly smaller. */
    grid-template-columns: 35% 1fr;
    gap: var(--spacing-large); /* Reduces the gap slightly. */
  }
}

@media (max-width: 768px) {
  .bio-layout {
    /* Stacks the layout into a single column on mobile devices. */
    grid-template-columns: 1fr;
  }

  .bio-photo {
    /* Limits the width of the photo on mobile to prevent it from being too large. */
    max-width: 400px;
    /* Centers the photo horizontally. */
    margin: 0 auto var(--spacing-large);
  }
}