/*
.portfolio_header{
    display: block;
    position:relative;
    width:500px;
    height:36px;
    background:url(/portfolio/gui_images/portfolio_headers.png) no-repeat;
    margin:0 auto 25px auto
}
*/

.screenshots,
.illustrations,
.textures {
  margin: 40px auto 25px auto;
}

.three_d_models {
  background-position: 0 0;
}

.illustrations {
  background-position: 0 -36px;
}

.textures {
  background-position: 0 -72px;
}

.gui {
  background-position: 0 -111px;
}

.screenshots {
  background-position: 0 -148px;
}

.folioThumbnailWrapper {
  width: 100%;
  margin: 25px auto 35px auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
  transition: opacity 0.5s;
}

/*--------------------------------- Software Used Mini Icons System ---------------------------------*/

.inline-container {
  display: flex;
  flex-direction: row;
  align-items: center; /* Aligns all items nicely in a horizontal row */
  justify-content: center;
  margin: 0 auto 60px auto;
}

/* 2. Item Wrapper - Now handles internal alignment */
.item-wrapper {
  display: flex; /* Changes from inline-block to flex for internal alignment */
  align-items: center; /* Centers the icon and text vertically within the item */
  flex: 0 0 auto; /* Prevents stretching and shrinking */
  white-space: nowrap; /* Prevents text from wrapping */
  margin: auto 10px;
}

/* 3. Base Icon Styles */
.icons_mini_software_used {
  background: url(/portfolio/gui_images/icons_mini_software_used.png) no-repeat;
  display: inline-block; /* Changed from block to fit inline flows */
  flex-shrink: 0; /* Ensures the icon image never gets squished */
  width: 30px;
  height: 25px;
  border: none;
  margin-top: -4px;
}

/* 4. Position and Margins */
.icons_mini_blender {
  background-position: 0 0;
}

.icons_mini_painter {
  background-position: -93px 0;
}

.icons_mini_designer {
  background-position: -124px 0;
}

.icons_mini_marmoset {
  background-position: -31px 0;
}

.icons_mini_zbrush {
  background-position: -155px 0;
}

.icons_mini_plasticity {
  background-position: -62px 0;
}

.icons_mini_unreal {
  background-position: -185px 0;
}

.icons_mini_spacing {
  margin-left: 3px;
}

.icons_mini_3dcoat {
  background-position: -217px 0;
}

/*----------------------- pull quote System ----------------------*/
.pullquote-container {
  float: right;
  width: 356px;
  margin: 0 0 10px 20px;
  position: relative;
}

.pullquote-quote {
  display: block;
  font-style: italic;
  color: #e8e190;
  padding: 15px;
  font-size: 1.35rem; /* used to be 1.25 */
}

.pullquote-graphic {
  background: url(/portfolio/gui_images/pullquote.png) no-repeat;
  display: block;
  position: absolute;
  width: 356px;
  height: 14px;
}

.custom-quote {
  quotes: "“" "”";
}

.custom-quote::before {
  content: open-quote;
}

.custom-quote::after {
  content: close-quote;
}

/*----------------------- ai prompt system ----------------------*/
.custom-ai-prompt-container {
  display: block;
  justify-content: center;
  align-items: center;
  width: 960px;
  margin: 24px auto;
}

.custom-ai-prompt-box {
  position: relative;
  width: 100%;
  padding: 40px 30px 45px 30px;
  box-sizing: border-box;
}

.ai-prompt-icon {
  position: absolute;
  top: 0;
  left: 20px;
  width: 108px;
  height: 17px;
  background-image: url("/portfolio/gui_images/ai_prompt_upper.png");
  background-size: cover;
}

.ai-prompt-text {
  text-align: justify;
  margin: -16px 0 0 0;
  width: 100%;
  color: #e5e299;
}

.ai-prompt-bottom-border {
  position: absolute;
  bottom: 13px;
  left: 0;
  width: 960px;
  height: 39px;
  background-image: url("/portfolio/gui_images/ai_prompt_lower.png");
}

.marmoset_viewer {
  width: 100%;
  aspect-ratio: 16 / 9; /* Automatically sets height based on container width */
  height: auto;
}

/* ------------------------- Common Thumbnail Attributes / Transitions ------------------------- */
.folio-thumb-link {
  border: 2px solid #412009;
  transform: translateY(0);
  transition:
    transform 0.17s ease-in-out,
    box-shadow 0.17s ease-in-out,
    border-color 0.15s ease-in-out;
}

.folio-thumb-image {
  width: 100%;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  transition: filter 0.2s ease-in-out;
}

.folio-thumb-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7);
  border-color: #ffdd57;
}

.folio-thumb-link:hover {
  filter: brightness(1.25) contrast(1.05);
}