/*
  css/work.css
  Stylesheet for the Individual Work Page
  Author: Jules
*/

/* ------------------- */
/* --- Work Layout --- */
/* ------------------- */
.work-container {
  /* A two-column grid for the image gallery and the work details. */
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* The image column is slightly larger. */
  gap: var(--spacing-xlarge); /* A large gap between the gallery and the text. */
  align-items: start; /* Aligns items to the top of their grid cells. */
}

/* ------------------- */
/* --- Image Gallery --- */
/* ------------------- */
.work-gallery {
  /* Container for the main image and thumbnails. */
  width: 100%;
}

.main-image {
  /* Container for the large, currently displayed image. */
  margin-bottom: var(--spacing-medium);
  border: 2px solid var(--secondary-accent-color);
  overflow: hidden; /* To contain the image. */
}

.main-image img {
  /* The large image itself. */
  width: 100%;
  height: auto;
  display: block; /* Removes any extra space below the image. */
}

.thumbnail-images {
  /* A flex container for the small thumbnail images. */
  display: flex;
  gap: var(--spacing-medium); /* Space between thumbnails. */
  flex-wrap: wrap; /* Allows thumbnails to wrap on smaller screens. */
}

.thumbnail {
  /* Individual thumbnail image styles. */
  width: 100px; /* Fixed width for thumbnails. */
  height: 100px; /* Fixed height for thumbnails - now square */
  object-fit: cover; /* Ensures the image covers the thumbnail area without distortion. */
  cursor: pointer; /* Indicates that the thumbnails are clickable. */
  border: 2px solid transparent; /* A transparent border by default. */
  transition: border-color 0.3s ease, opacity 0.3s ease; /* Smooth transition for hover/active states. */
  opacity: 0.7; /* Non-active thumbnails are slightly faded. */
}

.thumbnail:hover {
  /* On hover, the thumbnail becomes fully opaque. */
  opacity: 1;
}

.thumbnail.active {
  /* The currently selected thumbnail has a colored border and is fully opaque. */
  border-color: var(--primary-accent-color);
  opacity: 1;
}

/* ------------------- */
/* --- Work Details --- */
/* ------------------- */
.work-details {
  /* Container for all the textual information about the artwork. */
  position: sticky; /* Makes the details section "stick" on the screen during scroll. */
  top: var(--spacing-large); /* The distance from the top before it starts sticking. */
}

.work-title {
  /* The main title of the artwork. */
  font-size: 2.5rem;
  margin-bottom: var(--spacing-medium);
}

.work-meta {
  /* Container for the metadata (Series, Medium, etc.). */
  margin-bottom: var(--spacing-large);
  padding-bottom: var(--spacing-large);
  border-bottom: 1px solid var(--secondary-accent-color); /* Separator line. */
  display: flex;
  flex-direction: column; /* Stacks the metadata items vertically. */
  gap: var(--spacing-small); /* Adds space between metadata items. */
}

.work-meta span {
  /* Individual metadata item (e.g., "Medium: Ceramic"). */
  font-size: 1rem;
}

.work-meta strong {
  /* The label part of the metadata (e.g., "Medium:"). */
  color: var(--secondary-accent-color);
  margin-right: var(--spacing-small);
}

.work-description {
  /* The main descriptive text about the artwork. */
  margin-bottom: var(--spacing-large);
}

/* ------------------- */
/* --- Media Queries --- */
/* ------------------- */
@media (max-width: 992px) {
  .work-container {
    /* Switches to a single-column layout on tablets and smaller screens. */
    grid-template-columns: 1fr;
  }

  .work-details {
    /* Un-sticks the details section on smaller screens where scrolling is more limited. */
    position: static;
  }
}

@media (max-width: 480px) {
  .thumbnail {
    /* Reduces thumbnail size on very small screens. */
    width: 80px;
    height: 100px;
  }
}