/* ========= 8es Babys — lean page overrides (clean) ========= */

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

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

/* ---------- HERO / INTRO (Owl) ---------- */
#intro .cc-item.bg-image{
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
@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%;             /* 16:9 on phones */
    background-size:contain;        /* avoid crop on small screens */
  }
  #intro.slideshow.bg-dark{ background:transparent; }
}

/* ---------- Isotope: reset theme heights ---------- */
.isotope .isotope-item,
.isotope .iso-height-1,
.isotope .iso-height-2{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}
.ps-gallery-item{ display:block; }

/* Base tile: control height via ::before (not fixed heights) */
.ps-gallery-item-image.bg-image{
  position:relative; width:100%;
  height:auto !important;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;            /* default = filled tiles on desktop */
}

/* ---------- Section widths so tiles aren’t huge ---------- */
#portfolio-single-info .container-fluid,
#portfolio-single-info3 .container-fluid{   /* 2-col sections */
  max-width:1200px; margin:0 auto; padding:0 16px;
}
#portfolio-single-info2 .container-fluid{   /* 4-col apparel */
  max-width:1400px; margin:0 auto; padding:0 16px;
}
@media (min-width:1400px){
  #portfolio-single-info .container-fluid,
  #portfolio-single-info3 .container-fluid{ max-width:1100px; }
}

/* ---------- Generic ratio shim ---------- */
.ps-gallery-item-image.bg-image::before{ content:""; display:block; }

/* =========================================================
   Section 1: Logo Application (2 columns, consistent with Sec 3)
   Left/Bottom = banner (45%), Right = tall (90%)
========================================================= */

/* force true 2 columns + tight gutter */
#portfolio-single-info .isotope.col-2 .grid-sizer,
#portfolio-single-info .isotope.col-2 .isotope-item{
  width:50% !important;
  box-sizing:border-box !important;
}
#portfolio-single-info .isotope.gutter-1 .isotope-item{ padding:3px !important; }
#portfolio-single-info .isotope-items-wrap{ margin:-3px auto !important; }

/* fill tiles; crop minimally */
#portfolio-single-info .ps-gallery-item-image.bg-image{
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#fff !important;
}

/* heights */
#portfolio-single-info .isotope-item.iso-height-1 .ps-gallery-item-image.bg-image::before{
  padding-top:45% !important;   /* banner */
}
#portfolio-single-info .isotope-item.iso-height-2 .ps-gallery-item-image.bg-image::before{
  padding-top:90% !important;   /* tall = 2× banner */
}

/* =========================================================
   Section 2: Apparel (4 columns) — all 16:9
========================================================= */
#portfolio-single-info2 .isotope.col-4 .ps-gallery-item-image.bg-image::before{
  padding-top:56.25%;           /* 16:9 */
}
#portfolio-single-info2 .isotope.gutter-1 .isotope-item{
  padding:8px; box-sizing:border-box;
}
#portfolio-single-info2 .isotope-items-wrap{ margin:-8px auto; }

/* =========================================================
   Section 3: Brand Voice (2 columns, same pattern as Sec 1)
   Left stack = banners (45%), Right = tall (90%)
========================================================= */

/* force true 2 columns + tight gutter */
#portfolio-single-info3 .isotope.col-2 .grid-sizer,
#portfolio-single-info3 .isotope.col-2 .isotope-item{
  width:50% !important;
  box-sizing:border-box !important;
}
#portfolio-single-info3 .isotope.gutter-1 .isotope-item{ padding:3px !important; }
#portfolio-single-info3 .isotope-items-wrap{ margin:-3px auto !important; }

/* fill tiles; if you’ve exported a portrait for the tall tile, cover is fine */
#portfolio-single-info3 .ps-gallery-item-image.bg-image{
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#fff !important;
}

/* heights */
#portfolio-single-info3 .isotope-item.iso-height-1 .ps-gallery-item-image.bg-image::before{
  padding-top:45% !important;   /* banner */
}
#portfolio-single-info3 .isotope-item.iso-height-2 .ps-gallery-item-image.bg-image::before{
  padding-top:90% !important;   /* tall = 2× banner */
}

/* If you prefer no crop on phones for S1 & S3, switch to contain */
@media (max-width: 767px){
  #portfolio-single-info  .ps-gallery-item-image.bg-image,
  #portfolio-single-info3 .ps-gallery-item-image.bg-image{
    background-size:contain !important;
  }
}

/* ---------- Prev/Next thumbnails (wide strip) ---------- */
.ps-nav.bg-image{
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  width:100%;
  padding-top:42.857%;              /* 21:9 */
}
@media (max-width:767px){
  .ps-nav.bg-image{ background-size:contain; }
}

/* ---------- Subtle section divider line ---------- */
#portfolio-single-info2,
#portfolio-single-info3,
.call-to-action{ position:relative; }

#portfolio-single-info2::before,
#portfolio-single-info3::before,
.call-to-action::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%
  );
}
.isotope-item.iso-height-1 > div, .isotope-item.iso-height-1 > a, .isotope-item.iso-height-1 > article {
    padding-bottom: 0px !important;
}
/* ===== Global blue rule between sections ===== */

/* make every section a positioning context */
#content-container section { position: relative; }

/* draw a centered, thin blue gradient line at the top of each section,
   skipping the hero, the final next/prev nav, and any .no-divider you add */
#content-container section:not(#intro):not(#portfolio-single-nav):not(.no-divider)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 1100px;                 /* keeps the rule a nice readable width */
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(29,79,156,.35) 15%,          /* #1D4F9C at 35% opacity */
    rgba(29,79,156,.35) 85%,
    rgba(0,0,0,0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* optional: a touch of breathing room above each rule if needed */
#content-container section:not(#intro):not(#portfolio-single-nav):not(.no-divider) {
  padding-top: 50px;                  /* adjust to taste */
}

/* if any section already has its own top padding, reduce duplication on phones */
@media (max-width: 767px){
  #content-container section:not(#intro):not(#portfolio-single-nav):not(.no-divider) {
    padding-top: 36px;
  }
}
/* ===== Fix Section 1 (Logo Application) proportions ===== */

/* Base tile = 16:9 */
#portfolio-single-info .isotope-item.iso-height-1 .ps-gallery-item-image.bg-image::before {
  padding-top: 56.25% !important;   /* widescreen */
}

/* Tall tile = 2 × 16:9 */
#portfolio-single-info .isotope-item.iso-height-2 .ps-gallery-item-image.bg-image::before {
  padding-top: 112.5% !important;
}
/* === Bottom “Prev/Next Project” thumbs — fixed height only here === */
#portfolio-single-nav .ps-nav.bg-image{
  padding-top: 0 !important;   /* kill the 21:9 ratio box */
  height: 260px !important;    /* desktop height; tweak */
  background-position: 50% 50% !important;
  background-size: cover !important;
  display: block !important;
}

/* Tablet */
@media (max-width: 991.98px){
  #portfolio-single-nav .ps-nav.bg-image{ height: 200px !important; }
}
/* Phone */
@media (max-width: 575.98px){
  #portfolio-single-nav .ps-nav.bg-image{ height: 150px !important; }
}