/* ==========================================================================
   Portfolio Expand — draggable gallery with GSAP Flip zoom.
   Self-contained: the whole experience lives inside the widget block
   (position: relative root + absolute children). It never uses position:fixed,
   so it does NOT overlap sibling blocks and survives transformed ancestors
   (e.g. the theme's ScrollSmoother wrapper).
   ========================================================================== */

:root {
  --pe-text: #ffffff;
  --pe-accent: #A64B23;
  --pe-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* The block itself defines the stage. Height is set inline/by control. */
.pe-gallery {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* ----------------------------------------------------------------- Viewport */
.pe-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  background: #000;
  cursor: grab;
}
.pe-gallery.pe-dragging .pe-viewport { cursor: grabbing; }
.pe-gallery.pe-zoom-mode .pe-viewport { cursor: default; }

.pe-canvas-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  isolation: isolate;
}
.pe-grid-container { position: relative; width: 100%; height: 100%; }

.pe-grid-item {
  position: absolute;
  width: 320px;
  height: 320px;
  background: #000;
  cursor: pointer;
  will-change: transform, opacity;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.6s;
}
.pe-grid-item.pe-out { opacity: 0.1; }
.pe-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* -------------------------------------------------------------- Split screen */
.pe-split-screen {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.pe-split-screen.pe-active { opacity: 1; pointer-events: all; }

.pe-split-left,
.pe-split-right {
  position: relative;
  width: 50%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  cursor: pointer;
}
.pe-zoom-target {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pe-scaling-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
  opacity: 1 !important;
}
.pe-scaling-overlay img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----------------------------------------------------------- Title overlay */
.pe-title-overlay {
  position: absolute;
  bottom: 40px;
  left: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 400px;
  max-width: calc(100% - 80px);
  color: #fff;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}
.pe-title-overlay.pe-active { pointer-events: auto; }

/* Index + Category share one row, each independently styleable & clip-revealed. */
.pe-slide-meta {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  margin-bottom: 0.5em;
  max-width: 100%;
}
.pe-slide-index,
.pe-slide-category {
  position: relative;
  overflow: hidden;
  height: 1.6em;
  max-width: 100%;
}
.pe-slide-index span,
.pe-slide-category span {
  display: inline-block;
  color: #fff;
  /* Accent font from Theme Options → Global fonts (:root --pt-font-accent). */
  font-family: var(--pt-font-accent), sans-serif;
  font-size: 12px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  will-change: transform;
}
.pe-slide-category span { opacity: 0.85; }

/* Many accent fonts (e.g. Playfair Display) only ship old-style figures with
   no lining alternate, so digits sit low/uneven next to the uppercase label.
   Use the body text font for the index number so it stays evenly aligned
   regardless of which accent font is picked in Theme Options. */
.pe-slide-index span {
  font-family: var(--pt-font-text), sans-serif;
  font-variant-numeric: lining-nums;
}

.pe-slide-title {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 0.6em;
}
.pe-slide-title h1 {
  margin: 0;
  color: #fff;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  will-change: transform;
}

.pe-slide-description {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 1.4em;
}
.pe-description-line {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  will-change: transform;
}

/* Appearance comes entirely from the theme's .button-style2 (accent color is
   injected by Redux onto .button-style2). We must NOT set a color here — doing
   so competes with that accent rule and, depending on stylesheet load order
   (WPBakery enqueues in the footer), would override the accent. */
.pe-view-project {
  align-self: flex-start;
  will-change: transform;
}

/* ===================================================== Responsive / mobile */

/* Tablet: smaller title. */
@media (max-width: 1024px) {
  .pe-slide-title h1 { font-size: 36px; }
}

/* Phone: stack the split-screen (image on top, details below) so nothing is
   squeezed into a 50% column. */
@media (max-width: 768px) {
  .pe-split-screen { flex-direction: column; }
  .pe-split-left,
  .pe-split-right { width: 100%; height: 50%; }

  /* .pe-split-left (the photo) only fills the top 50%, so anchor the
     overlay's bottom edge to that split line instead of the gallery's own
     bottom — otherwise it lands in the empty lower panel, away from the
     photo, and gets clipped by the gallery's overflow:hidden. */
  .pe-title-overlay {
    left: 20px;
    right: 20px;
    top: auto;
    bottom: calc(50% + 20px);
    width: auto;
    max-width: none;
  }
  .pe-slide-title h1 { font-size: 28px; }
  .pe-description-line { font-size: 14px; }
  /* keep the detail text readable above the split line */
  .pe-slide-description { max-height: 25vh; }
}

@media (max-width: 480px) {
  .pe-slide-title h1 { font-size: 23px; }
  .pe-slide-index span,
  .pe-slide-category span { font-size: 11px; }
}