/* === Evan Langston overrides (parallax + banners) === */

/* EDIT.mp4 parallax section: half-height, no empty gray area */
#page-edit-parallax{height:50vh !important; min-height:50vh !important; max-height:50vh !important; overflow:hidden !important;}
#page-edit-parallax .parallax-edit__frame{position:relative !important; height:100% !important; width:100% !important; overflow:hidden !important; background:#000;}
#page-edit-parallax .parallax-edit__frame > video,
#page-edit-parallax .parallax-edit__frame > img{position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; width:110% !important; height:110% !important; object-fit:cover !important;}

@media (max-width: 768px){
  #page-edit-parallax{height:38vh !important; min-height:38vh !important; max-height:38vh !important;}
}

/* Reel banner keeps 2048x738 aspect ratio */
.elangston-reel-banner .elangston-reel-inner{width:100% !important;}
.elangston-reel-banner .elangston-reel-video{width:100% !important; height:auto !important; aspect-ratio:2048/738; object-fit:cover; display:block;}

/* Footer keyboard parallax */
.elangston-footer-parallax{width:100%;}
.elangston-footer-parallax .parallax-frame{position:relative; height:55vh; min-height:320px; overflow:hidden; background:#000;}
.elangston-footer-parallax .parallax-frame > img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:110%; height:110%; object-fit:cover;}

@media (max-width: 768px){
  .elangston-footer-parallax .parallax-frame{height:40vh;}
}

/* YouTube modal: prevent any inherited 3D/perspective from template causing "VR" skew */
#elangston-video-modal, #elangston-video-modal *{
  -webkit-transform-style: flat !important;
  transform-style: flat !important;
  -webkit-perspective: none !important;
  perspective: none !important;
}
#elangston-video-modal .elangston-yt-wrap,
#elangston-video-modal #elangston-yt-player{
  -webkit-transform: none !important;
  transform: none !important;
}

/* =========================================================
   Featured Work overlay (text + click anywhere)
   ========================================================= */

/* The template already places a “+” link inside .icon-works.
   We convert that link into a full-tile overlay and render the
   text inside it via JS (elangston-edit-parallax.js). */

#page-featured-work .featured-work-photo .image-works{ position:relative; }

/* Hide the old SVG badge (we’re using a text line instead) */
#page-featured-work .featured-work-photo .award-badge{ display:none !important; }

/* Make the anchor cover the entire thumbnail */
#page-featured-work .featured-work-photo .icon-works{
  position:absolute;
  inset:0;
  margin:0;
  width:100%;
  height:100%;
}
#page-featured-work .featured-work-photo .icon-works a.featured-plus{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background:rgba(255,255,255,0);
  transition:background .18s ease;
}

/* On hover: full white overlay */
#page-featured-work .featured-work-photo:hover .icon-works a.featured-plus{
  background:rgba(255,255,255,.88);
}

/* Inner block */
#page-featured-work .elangston-featured-overlay{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

#page-featured-work .elangston-featured-overlay .overlay-inner{
  text-align:center;
  padding:14px 16px;
  max-width:92%;
}

/* Plus */
#page-featured-work .elangston-featured-overlay .overlay-plus{
  font-family: inherit;
  font-size:32px;
  line-height:1;
  font-weight:700;
  color:#111;
  margin-bottom:10px;
}

/* Title lines (all bold, same styling) */
#page-featured-work .elangston-featured-overlay .overlay-title{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#111;
  font-size:14px;
  line-height:1.15;
  margin:0;
}

/* consistent spacing between title lines */
#page-featured-work .elangston-featured-overlay .overlay-title + .overlay-title{ margin-top:6px; }

/* Type line (thin/medium) */
#page-featured-work .elangston-featured-overlay .overlay-type{
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#111;
  font-size:12px;
  line-height:1.1;
  margin-top:8px;
}

/* Award line (italic, keep the bigger gap like you liked) */
#page-featured-work .elangston-featured-overlay .overlay-award{
  font-style:italic;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#111;
  font-size:12px;
  line-height:1.1;
  margin-top:14px;
}

@media (max-width: 768px){
  #page-featured-work .elangston-featured-overlay .overlay-plus{ font-size:28px; margin-bottom:8px; }
  #page-featured-work .elangston-featured-overlay .overlay-title{ font-size:13px; }
}

/* ================================
   ELANGSTON: Overlay system (Featured + Portfolio)
   Fixes: Safari positioning, full-tile click target, consistent typography
   ================================= */

/* Ensure tiles are positioning contexts */
.featured-work-photo,
.elangston-portfolio-item{
  position: relative !important;
  overflow: hidden !important;
}

/* Hide any existing award badge graphics (we use text-only award line) */
.featured-work-photo .award-badge{
  display: none !important;
}

/* Make the existing "+" link cover the full tile so the whole overlay is clickable */
.featured-work-photo .icon-works a.featured-plus,
.elangston-portfolio-item a.elangston-portfolio-plus{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 5 !important;
  opacity: 0 !important;           /* invisible click-target */
  background: transparent !important;
}

/* Remove the old icon visual (we draw our own plus in the overlay) */
.featured-work-photo .icon-works a.featured-plus i,
.elangston-portfolio-item a.elangston-portfolio-plus span{
  display: none !important;
}

/* Overlay container */
.elangston-overlay{
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  padding: 22px 18px !important;
  background: rgba(255,255,255,0.72) !important;

  opacity: 0 !important;
  transition: opacity 180ms ease !important;

  /* Critical for click-through to the invisible full-tile link */
  pointer-events: none !important;
}

/* Hover reveal */
.featured-work-photo:hover .elangston-overlay,
.elangston-portfolio-item:hover .elangston-overlay{
  opacity: 1 !important;
}

/* Plus mark */
.elangston-overlay .elangston-plus{
  font-size: 34px !important;
  line-height: 1 !important;
  margin: 0 0 10px 0 !important;
  font-weight: 600 !important;
}

/* Title lines (bold) */
.elangston-overlay .elangston-title{
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* Type line (medium/regular) */
.elangston-overlay .elangston-type{
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

/* Award line (italic, and spacing matches what you liked) */
.elangston-overlay .elangston-award{
  margin: 12px 0 0 0 !important;
  padding: 0 !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
}
/* =========================================================
   TARGETED TEXT REMOVALS (requested)
   - Featured: remove text under thumbnails, keep rollover text
   - Portfolio: remove upper-left label, keep rollover text
   ========================================================= */
#page-featured-work .featured-work-info{
  display:none !important;
}

/* Portfolio label is not inside #page-portfolio intro container, so target directly */
.elangston-portfolio-label{
  display:none !important;
}

/* =========================================================
   LOCKED FIXES (do not change other behavior)
   1) EDIT.mp4: match 32:9 container, no zoom/crop
   2) Footer keyboard: simple image band below Contact
   ========================================================= */

/* 1) EDIT.mp4 — 3840x1080 (32:9), scale with browser, no zoom */
#page-edit-parallax{
  aspect-ratio: 32 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
#page-edit-parallax .parallax-edit__frame{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #000 !important;
}
#page-edit-parallax .parallax-edit__frame > video.el-edit-video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* no crop */
  object-position: center center !important;
  transform: none !important;       /* remove any translate/scale */
}

/* 2) Footer keyboard band — simple image, no JS, no parallax */
#page-footer{
  height: auto !important;
  min-height: 0 !important;
}
#page-footer .el-keyboard-parallax{
  width: 100% !important;
  aspect-ratio: 32 / 9 !important;  /* match asset ratio */
  overflow: hidden !important;
  background: #000 !important;
}
#page-footer .el-keyboard-media{
  width: 100% !important;
  height: 100% !important;
  background-image: url("../images/keyboard_alt.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important; /* no crop */
}


/* =========================================================
   Featured Work: full-tile click target (keeps overlay text)
   Fixes template transform on `.icon-works` that can shift the
   click layer so only part of the thumbnail is clickable.
   ========================================================= */
#page-featured-work .featured-work-photo .icon-works{
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;

  /* critical: neutralize template hover-centering transform */
  -webkit-transform: none !important;
  transform: none !important;

  /* keep the click layer active even when template fades `.icon-works` */
  opacity: 1 !important;
}

/* keep the full-tile link invisible but reliably clickable */
#page-featured-work .featured-work-photo .icon-works a.featured-plus{
  opacity: 0.001 !important;
}


/* === Featured Work carousel: use arrow PNGs instead of pagination dots (scoped) === */
#featured-work-carousel .owl-controls{
  margin-top: 0 !important;
}
#featured-work-carousel .owl-pagination{
  display: none !important;
}
#featured-work-carousel .owl-buttons{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none; /* let inner buttons receive */
}
#featured-work-carousel .owl-buttons .owl-prev,
#featured-work-carousel .owl-buttons .owl-next{
  position: absolute;
  pointer-events: auto;
  width: 44px;
  height: 44px;
  opacity: 0.85;
}
#featured-work-carousel .owl-buttons .owl-prev{ left: -8px; }
#featured-work-carousel .owl-buttons .owl-next{ right: -8px; }

#featured-work-carousel .owl-buttons .owl-prev:hover,
#featured-work-carousel .owl-buttons .owl-next:hover{
  opacity: 1;
}

#featured-work-carousel .owl-buttons .owl-prev img,
#featured-work-carousel .owl-buttons .owl-next img{
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 740px){
  #featured-work-carousel .owl-buttons .owl-prev{ left: 6px; }
  #featured-work-carousel .owl-buttons .owl-next{ right: 6px; }
}

/* === FEATURED CAROUSEL ARROWS POSITIONING (OUTSIDE) === */
/* Only affects Featured Work carousel */
#page-featured-work{
  position: relative;
}

/* Make the carousel a positioning context */
#page-featured-work #featured-work-carousel{
  position: relative;
}

/* Put arrows OUTSIDE the thumbnail area, aligned to the sides of the Featured section */
#page-featured-work #featured-work-carousel .owl-buttons{
  pointer-events: none; /* allows only buttons to be clickable */
}

#page-featured-work #featured-work-carousel .owl-buttons .owl-prev,
#page-featured-work #featured-work-carousel .owl-buttons .owl-next{
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background-size: 44px 44px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.9;
  z-index: 20;
}

/* Move to the outside edges of the Featured section */
#page-featured-work #featured-work-carousel .owl-buttons .owl-prev{
  left: -60px; /* outside the carousel */
}

#page-featured-work #featured-work-carousel .owl-buttons .owl-next{
  right: -60px; /* outside the carousel */
}

/* On narrower screens keep arrows just inside so they don't clip offscreen */
@media (max-width: 1100px){
  #page-featured-work #featured-work-carousel .owl-buttons .owl-prev{ left: 10px; }
  #page-featured-work #featured-work-carousel .owl-buttons .owl-next{ right: 10px; }
}

/* Hide default Owl text */
#page-featured-work #featured-work-carousel .owl-buttons .owl-prev:before,
#page-featured-work #featured-work-carousel .owl-buttons .owl-next:before{
  content: "";
}
/* === END FEATURED CAROUSEL ARROWS POSITIONING (OUTSIDE) === */


/* === FEATURED CAROUSEL ARROWS VISIBILITY FIX ===
   When arrows are placed outside, Owl's wrappers often have overflow:hidden,
   which clips them. This block makes ONLY the Featured carousel wrappers overflow:visible
   and sets explicit arrow images.
   ============================================= */
#page-featured-work #featured-work-carousel,
#page-featured-work #featured-work-carousel .owl-wrapper-outer,
#page-featured-work #featured-work-carousel .owl-wrapper{
  overflow: visible !important;
}

#page-featured-work #featured-work-carousel .owl-buttons{
  display: block !important;
}

#page-featured-work #featured-work-carousel .owl-buttons .owl-prev{
  background-image: url('img/hero-slider-arrow-left.png') !important;
}

#page-featured-work #featured-work-carousel .owl-buttons .owl-next{
  background-image: url('img/hero-slider-arrow-right.png') !important;
}
/* === END FEATURED CAROUSEL ARROWS VISIBILITY FIX === */


/* === FEATURED ARROWS: CLIP THUMBS TO BETWEEN ARROWS (NO CIRCLES) ===
   Goal:
   - Arrows use your PNGs (you'll darken them yourself)
   - Only thumbnails BETWEEN arrows are visible (no peeking into arrow gutters)
   - No background circles or styling applied to arrows
   Scope: Featured section only
   ================================================================ */

/* Create left/right gutters INSIDE the carousel so arrows live there.
   The carousel content is clipped by Owl's wrapper, so thumbs won't show in gutters. */
#page-featured-work #featured-work-carousel{
  position: relative;
  box-sizing: border-box;
  padding-left: 70px;  /* gutter width (arrow area) */
  padding-right: 70px; /* gutter width (arrow area) */
}

/* Ensure the carousel viewport clips thumbnails */
#page-featured-work #featured-work-carousel .owl-wrapper-outer{
  overflow: hidden !important;
}

/* Place arrows inside the gutters (so they're visible without needing overflow:visible) */
#page-featured-work #featured-work-carousel .owl-buttons{
  display: block !important;
}

#page-featured-work #featured-work-carousel .owl-buttons .owl-prev,
#page-featured-work #featured-work-carousel .owl-buttons .owl-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background-size: 44px 44px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.9;
  z-index: 20;

  /* No circles / no background styling */
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Center arrows within the gutters */
#page-featured-work #featured-work-carousel .owl-buttons .owl-prev{
  left: 12px;
  background-image: url('img/hero-slider-arrow-left.png') !important;
}

#page-featured-work #featured-work-carousel .owl-buttons .owl-next{
  right: 12px;
  background-image: url('img/hero-slider-arrow-right.png') !important;
}

/* If space gets tight, reduce gutters slightly */
@media (max-width: 900px){
  #page-featured-work #featured-work-carousel{ padding-left: 54px; padding-right: 54px; }
  #page-featured-work #featured-work-carousel .owl-buttons .owl-prev{ left: 8px; }
  #page-featured-work #featured-work-carousel .owl-buttons .owl-next{ right: 8px; }
}

/* === END FEATURED ARROWS CLIP === */


/* === Featured Work: ensure SVG arrow <img> is visible and sized === */
#page-featured-work #featured-work-carousel .owl-buttons .owl-prev img.el-featured-arrow,
#page-featured-work #featured-work-carousel .owl-buttons .owl-next img.el-featured-arrow{
  display: block !important;
  width: 52px;
  height: 52px;
}

/* Keep buttons on the sides of the Featured section (no overlay on thumbnails) */
#page-featured-work #featured-work-carousel{
  position: relative;
  padding-left: 84px;
  padding-right: 84px;
  box-sizing: border-box;
}
#page-featured-work #featured-work-carousel .owl-wrapper-outer{
  overflow: hidden !important; /* only show thumbs between arrows */
}
#page-featured-work #featured-work-carousel .owl-buttons{ display:block !important; }
#page-featured-work #featured-work-carousel .owl-buttons .owl-prev,
#page-featured-work #featured-work-carousel .owl-buttons .owl-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  z-index: 30;
  background: transparent !important;
}
#page-featured-work #featured-work-carousel .owl-buttons .owl-prev{ left: 18px; }
#page-featured-work #featured-work-carousel .owl-buttons .owl-next{ right: 18px; }