/* Selected Works Category Background Images */

.main-image-2 {
  background-image: url("../img/backgrounds/abstract-1920.webp");
}

.portfolio-item-3 {
  background-image: url("../img/backgrounds/home-moody1.webp");
}

.portfolio-item-4 {
  background-image: url("../img/backgrounds/home-representart.webp");
}

/* ------------------------------------------------*/
/* Portfolio Title Style Update */
/* ------------------------------------------------*/

.portfolio-stack__title {
  /* Increases thickness (standard is 400 or 500, bolder is 700+) */
  font-weight: 800 !important;

  /* 'Two font sizes' up: if the default is ~1.4rem, 2.2rem provides 
       a significant visual jump while keeping the editorial look */
  font-size: 2.2rem !important;

  /* Optional: Slightly increase letter spacing to keep 
       the bold text from looking cramped */
  letter-spacing: 0.02em;

  /* Optional: Ensure the line height accommodates the larger size */
  line-height: 1.2;
}

/* Tablet/Mobile adjustment to ensure it doesn't wrap awkwardly */
@media only screen and (max-width: 767px) {
  .portfolio-stack__title {
    font-size: 1.8rem !important;
  }
}

/* Custom Spacing Utility */
.my-50 {
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}

/* 1. The Button: Force horizontal/vertical center and prevent content wrapping */
.btn-default {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: row !important; /* Force text to stay in a row, not a column */
  flex-wrap: nowrap !important; /* Prevent the split you see in the screenshot */
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  z-index: 1;
}

/* 2. The Hover Effect (em): Anchor to center so the circle expands correctly */
.btn-default em {
  position: absolute !important;
  top: 50% !important; /* Center the starting point of the expansion */
  left: 50% !important;
  width: 0; /* Reset to 0 so the template's 0-to-225% logic works */
  height: 0;
  z-index: 0 !important;
  pointer-events: none;
  /* Note: The template's transform: translate(-50%, -50%) will now center it perfectly */
}

/* 3. The Text (span): Lock it as a single unit */
.btn-caption {
  position: relative !important;
  z-index: 2 !important; /* Keep text above the expanding white circle */
  white-space: nowrap !important; /* Absolute prevention of the vertical split */
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 1. Reduce the main vertical padding of each section */
.inner {
  padding-top: 12.5rem !important; /* Approx 112px */
  padding-bottom: 12.5rem !important; /* Approx 112px */
}

/* 2. Tighten the space between internal blocks */
.content__block {
  margin-bottom: 4rem !important; /* Approx 64px */
}

/* 3. Specifically reduce the gap at the top of the 'Selected Works' section */
.portfolio {
  padding-top: 5rem !important;
}

/* 4. Ensure the last block in a section doesn't push the next one too far down */
.inner .content__block:last-child {
  margin-bottom: 0 !important;
}

/* Adjustments for large desktops to prevent scaling up too much */
@media only screen and (min-width: 1400px) {
  .inner {
    padding-top: 12.5rem !important;
    padding-bottom: 12.5rem !important;
  }
}

/* Adjustments for subtitles */
@media only screen and (min-width: 1600px) {
  h2 {
    font-size: 10rem !important;
  }
}

.headline__signature {
  /* This makes the image height scale relative to the font size of the H1 */
  height: 2em;
  width: auto;
  display: inline-block;

  /* Adjust this value to make the signature sit perfectly on the baseline */
  vertical-align: middle;

  /* Prevents the image from being affected by text-reveal animations if necessary */
  position: relative;
  top: -0.05em;
}

/* Optional: If the signature looks too thin compared to the bold H1, 
   you can add a slight drop shadow or adjust brightness */
[color-scheme="dark"] .headline__signature {
  filter: brightness(0) invert(1); /* Forces a black signature to appear white in Dark Mode */
}

/* ------------------------------------------------*/
/* Full Faded Background */
/* ------------------------------------------------*/

.intro-bg-03__01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;

  /* CRITICAL: Prevents the image from pushing past the page edges */
  overflow: hidden;
}

.intro-bg-03__01 img {
  width: 100%;
  height: 100%;

  /* Changed to 'contain' so the entire 700x782 artwork is visible */
  object-fit: contain;
  object-position: center; /* Keeps the art centered behind the text */

  /* Fade controls */
  opacity: 0.15;

  /* Removed scale(1.1) to eliminate the "lower-left only" overflow issue */
  transform: none !important;
}

/* Optional: Ensure the background of the section is consistent 
   if the image doesn't fill the entire width (due to contain) */
.intro-bg-03 {
  background-color: var(--b-body);
}

/* ------------------------------------------------*/
/* Headline Hierarchy: 10% Text Reduction */
/* ------------------------------------------------*/

/* Targets "The Art of", "visual artist", and "studio practice" */
.headline__title .title__line span {
  font-size: 0.8em !important; /* Reduced by 10% from original size */
}

/* Mobile Adjustment */
@media only screen and (max-width: 767px) {
  .headline__title .title__line span {
    font-size: 0.75em !important; /* Slightly more reduction on mobile to prevent crowding */
  }
}

/* ------------------------------------------------*/
/* Vertical Centering for Exhibition Labels */
/* ------------------------------------------------*/

/* 1. Remove standard block spacing to control the gaps manually */
#resume .content__block {
  margin-bottom: 0 !important;
}

/* 2. Create a centered 'window' for the Solo and Group labels */
#resume .block__subtitle {
  height: 12rem; /* Adjust this value to increase/decrease the total gap */
  display: flex;
  align-items: center; /* Vertically centers the text */
  margin: 0 !important;
  padding: 0;
}

/* 3. Remove paragraph margins that might push the text off-center */
#resume .block__subtitle .tagline-chapter {
  margin-bottom: 0 !important;
}

/* 4. Ensure the spacing between the list and the next label is consistent */
#resume .resume-lines {
  margin-bottom: 0 !important;
}

/* =======================================================
   MOBILE RESPONSIVITY & CENTERING FIXES (< 1200px)
   ======================================================= */

@media only screen and (max-width: 1199px) {
  
  /* 1. Force full viewport height on mobile to push the image down */
  .main__intro.intro-fullheight-centered {
    min-height: 100svh; /* Uses dynamic viewport height (fixes iOS/Android address bar jumping) */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the content */
    margin-bottom: 0 !important; /* Removes the 12rem gap dragging the image up */
    padding-top: 8rem; /* Accounts for the mobile navigation bar height */
  }

  /* 2. Remove static margins from the headline so it obeys the flexbox centering above */
  .headline.headline-centered {
    margin-top: 0 !important;
    width: 100%;
  }

  /* 3. Constrain the SVG signature to prevent horizontal scrolling on Galaxy S9 */
  .headline__signature {
    max-width: 100%; /* Forces SVG to shrink rather than break the screen boundary */
    height: auto !important; 
    max-height: 2em; /* Keeps your scale constraint intact */
  }

  /* 4. Allow title lines to wrap gracefully if the text is still too long */
  .title__line {
    white-space: normal !important;
    display: inline-block;
  }
}

/* =======================================================
   MOBILE PADDING REDUCTION (10px) 
   ======================================================= */
@media only screen and (max-width: 767px) {
  
  /* Reduces the 20px left/right padding to 10px on all main text blocks */
  .content__block, 
  .project__block {
    padding-left: 1rem !important;  /* 10px */
    padding-right: 1rem !important; /* 10px */
  }

  /* The template also adds a heavy 30px (3rem) right padding specifically 
     to resume titles. This reduces it so long exhibition names don't get squished */
  .resume-lines__title,
  .resume-lines__source {
    padding-right: 1rem !important; /* 10px */
  }
}