/* =========================================================
   AI Prompting page (aicss.css) — clean build
   ---------------------------------------------------------
   - Mobile-safe hero (no fixed heights on phones)
   - Square video tiles (Isotope) with 2-col grid
   - Thin blue divider under content sections
   - Shorter Prev/Next image strip (with fallbacks)
========================================================= */

/* Safety */
img { max-width: 100%; height: auto; display: block; }

/* Header logo (simple & consistent) */
#logo { padding: 0 20px; }
#logo a { display: inline-block; }
#logo img { width: 200px; height: auto; display: block; }
@media (max-width: 480px){ #logo img { width: 150px; } }
@media (min-width: 1200px){ #logo img { width: 220px; } }

/* Hero (Owl) – no weird fixed heights on mobile */
#intro .cc-item.bg-image { background: center / cover no-repeat; }
@media (min-width: 768px){
  #intro .cc-item{ min-height: 60vh; display: flex; align-items: center; }
}
@media (max-width: 767px){
  #intro .owl-carousel,
  #intro .owl-stage-outer,
  #intro .owl-stage,
  #intro .owl-item,
  #intro .cc-item{ height: auto !important; min-height: 0 !important; }
  #intro .cc-item.bg-image{ position: relative; padding-top: 56.25%; background-size: contain; }
  #intro.slideshow.bg-dark{ background: transparent; }
}

/* Content section divider (thin blue rule under every content section) */
#content-container section { position: relative; }
#content-container section:not(#intro):not(#portfolio-single-nav)::before{
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:92%; max-width:1100px; height:2px;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(29,79,156,.35) 15%,
    rgba(29,79,156,.35) 85%,
    rgba(0,0,0,0) 100%);
  pointer-events:none; z-index:5;
}
#content-container section:not(#intro):not(#portfolio-single-nav){ padding-top:50px; }
@media (max-width:767px){
  #content-container section:not(#intro):not(#portfolio-single-nav){ padding-top:36px; }
}

/* =========================================================
   AI sections (portfolio-single-info1..4)
   – Square video/image tiles, flush, 2 columns
========================================================= */

/* Flush masonry (no seams) */
section[id^="portfolio-single-info"] .isotope-items-wrap{ margin:0 !important; }
section[id^="portfolio-single-info"] .isotope .isotope-item{
  padding:0 !important; box-sizing:border-box !important;
}

/* Force 2 columns on desktop/tablet; 1 col on phones */
section[id^="portfolio-single-info"] .isotope .grid-sizer,
section[id^="portfolio-single-info"] .isotope .isotope-item{ width:50% !important; }
@media (max-width:640px){
  section[id^="portfolio-single-info"] .isotope .grid-sizer,
  section[id^="portfolio-single-info"] .isotope .isotope-item{ width:100% !important; }
}

/* Kill theme ratio helpers that create phantom space */
section[id^="portfolio-single-info"] .ps-gallery-item-image.bg-image::before,
section[id^="portfolio-single-info"] .ps-video::before{
  content:none !important; display:none !important;
}

/* Square video tiles */
section[id^="portfolio-single-info"] .ps-video{
  position:relative; width:100%; aspect-ratio:1 / 1;
  overflow:hidden; background:#000;
}
section[id^="portfolio-single-info"] .ps-video > video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block;
}

/* If any tiles are bg-image blocks, also make them square */
section[id^="portfolio-single-info"] .ps-gallery-item-image.bg-image{
  position:relative; width:100%; aspect-ratio:1 / 1;
  background:center / cover no-repeat;
}

/* Nuke inline heights if any sneak in */
section[id^="portfolio-single-info"] .ps-video[style*="height"],
section[id^="portfolio-single-info"] video[style*="height"],
section[id^="portfolio-single-info"] .ps-gallery-item-image[style*="height"]{
  height:auto !important;
}

/* Slightly enlarge tiles for a tighter look */
section[id^="portfolio-single-info"] .isotope-item{
  transform: scale(1.02);
  transform-origin: center;
}

/* Ensure isotope viewport doesn't clip scaled items */
section[id^="portfolio-single-info"] .isotope-items-wrap{
  overflow: visible !important;
}

/* =========================================================
   Prev/Next strip — shorter, consistent height
   (replaces old padding-top:42.857% hack)
========================================================= */

.ps-nav { position: relative; overflow: hidden; display: block; }
.ps-nav.bg-image{
  background: center / cover no-repeat;
  width: 100%;
  /* Modern: preferred height via aspect-ratio */
  aspect-ratio: 3 / 1;       /* ~33% of width (shorter than before) */
  padding-top: 0;            /* disable old ratio hack when supported */
}

/* Fallback for older browsers (no aspect-ratio) */
@supports not (aspect-ratio: 1 / 1) {
  .ps-nav.bg-image { padding-top: 33.333%; } /* emulate 3:1 */
}

/* Tweak by viewport so it never feels tall */
@media (max-width: 991px){
  .ps-nav.bg-image{
    aspect-ratio: 2.35 / 1;
  }
  @supports not (aspect-ratio: 1 / 1){
    .ps-nav.bg-image{ padding-top: 42.55%; } /* ~2.35:1 */
  }
}
@media (max-width: 575px){
  .ps-nav.bg-image{
    aspect-ratio: 2 / 1;
  }
  @supports not (aspect-ratio: 1 / 1){
    .ps-nav.bg-image{ padding-top: 50%; } /* 2:1 */
  }
}

/* Ensure overlay text doesn't add height */
.ps-nav .ps-nav-meta{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none; /* click goes to full link */
  padding: 10px;
}
.ps-nav .ps-nav-meta h2,
.ps-nav .ps-nav-meta h4{ margin: 0; }