/* ============================================
   WORK PAGE — Portfolio Grid & Header Styling
   Paste into: Design > Custom CSS

   Surface: collection landing page (portfolio)
   Selectors: observed portfolio grid classes
   Note: body.collection-type-portfolio is NOT
   present on this page, so we scope to the
   .portfolio-grid-overlay wrapper instead.

   Observed structure per tile:
   a.grid-item
     div.grid-image
       div.grid-image-inner-wrapper
         img
     div.portfolio-overlay  (absolute, opacity:0, z-index:99)
     div.portfolio-text
       h3.portfolio-title
   ============================================ */

/* ----------------------------------------
   PORTFOLIO GRID
   ---------------------------------------- */
.portfolio-grid-overlay.grid-wrapper {
  max-width: 100% !important;
  gap: 20px !important;
}

/* ----------------------------------------
   PORTFOLIO TILES — Rounded corners,
   gold overlay on hover with blur, white text
   ---------------------------------------- */

/* Base tile — rounded corners */
.grid-item {
  border-radius: 10px !important;
  overflow: hidden !important;
}

.grid-item .grid-image {
  border-radius: 10px;
  overflow: hidden;
}

/* Image — smooth blur/zoom transition */
.grid-item .grid-image img {
  transition: filter 500ms ease, transform 500ms ease !important;
}

/* Native overlay — change from cream to semi-transparent gold */
.grid-item .portfolio-overlay {
  background-color: rgba(213, 158, 88, 0.60) !important;
  transition: opacity 500ms ease !important;
}

/* Title — white, heading font, moderate size */
.grid-item .portfolio-title {
  color: #ffffff !important;
  font-family: var(--heading-font-font-family, "Barlow Semi Condensed", sans-serif) !important;
  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Title text wrapper — hidden by default, show on hover */
.grid-item .portfolio-text {
  opacity: 0 !important;
  z-index: 100 !important;
  align-items: center !important;
  transition: opacity 500ms ease !important;
}

.grid-item:hover .portfolio-text {
  opacity: 1 !important;
}

/* ----------------------------------------
   HOVER STATE
   ---------------------------------------- */

/* Gold overlay fades in */
.grid-item:hover .portfolio-overlay {
  opacity: 1 !important;
}

/* Image blurs and zooms slightly */
.grid-item:hover .grid-image img {
  filter: blur(4px);
  transform: scale(1.03);
}

/* Title drops shadow on hover for extra pop */
.grid-item:hover .portfolio-title {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
}