/* =========================================================
   Guaranteed Rate — page-specific gallery, video & hero
   (Clean build + blue rule dividers between sections)
   ========================================================= */

/* ---------- Isotope: columns, gutters, and item heights ---------- */

/* Tight, consistent gutters for all GR grids */
#portfolio-single-info .isotope .isotope-item,
#portfolio-single-info2 .isotope .isotope-item,
#portfolio-single-info3 .isotope .isotope-item,
#portfolio-single-info4 .isotope .isotope-item {
  box-sizing: border-box !important;
  padding: 8px !important;         /* gutter */
  margin: 0 !important;
  height: auto !important;         /* kill any theme fixed heights */
}

#portfolio-single-info .isotope-items-wrap,
#portfolio-single-info2 .isotope-items-wrap,
#portfolio-single-info3 .isotope-items-wrap,
#portfolio-single-info4 .isotope-items-wrap {
  margin: -8px !important;         /* cancels item padding */
}

/* Correct column widths per section */
#portfolio-single-info .isotope.col-3 .grid-sizer,
#portfolio-single-info .isotope.col-3 .isotope-item { width: 33.3333% !important; }

#portfolio-single-info2 .isotope.col-4 .grid-sizer,
#portfolio-single-info2 .isotope.col-4 .isotope-item { width: 25% !important; }

#portfolio-single-info3 .isotope.col-2 .grid-sizer,
#portfolio-single-info3 .isotope.col-2 .isotope-item,
#portfolio-single-info4 .isotope.col-2 .grid-sizer,
#portfolio-single-info4 .isotope.col-2 .isotope-item { width: 50% !important; }

/* ---------- Background-image tiles (images) ---------- */

#portfolio-single-info2 .ps-gallery-item,
#portfolio-single-info3 .ps-gallery-item,
#portfolio-single-info4 .ps-gallery-item,
#portfolio-single-info .ps-gallery-item { display:block !important; }

#portfolio-single-info2 .ps-gallery-item-image.bg-image,
#portfolio-single-info3 .ps-gallery-item-image.bg-image,
#portfolio-single-info4 .ps-gallery-item-image.bg-image,
#portfolio-single-info  .ps-gallery-item-image.bg-image {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;   /* change to cover if you prefer edge-to-edge */
}

/* Give image tiles their height via classic ::before ratio boxes */
#portfolio-single-info2 .isotope-item.iso-height-1 .ps-gallery-item-image.bg-image::before { content:""; display:block; padding-top: 90% !important; }   /* tall boards/vehicles */
#portfolio-single-info2 .isotope-item.iso-height-2 .ps-gallery-item-image.bg-image::before { content:""; display:block; padding-top:180% !important; }

#portfolio-single-info3 .isotope-item.iso-height-1 .ps-gallery-item-image.bg-image::before { content:""; display:block; padding-top: 56.25% !important; }   /* 16:9 */
#portfolio-single-info3 .isotope-item.iso-height-2 .ps-gallery-item-image.bg-image::before { content:""; display:block; padding-top:112.5% !important; }

#portfolio-single-info4 .isotope-item.iso-height-1 .ps-gallery-item-image.bg-image::before { content:""; display:block; padding-top: 56.25% !important; }
#portfolio-single-info4 .isotope-item.iso-height-2 .ps-gallery-item-image.bg-image::before { content:""; display:block; padding-top:112.5% !important; }

/* ---------- Video tiles (mp4 / YouTube) ---------- */

/* YouTube tiles in section #portfolio-single-info (3-up grid) */
#portfolio-single-info .ps-video-tile {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}
#portfolio-single-info .ps-video-tile::before {
  content: "" !important;
  display: block !important;
  padding-top: 56.25% !important;    /* 16:9 */
}
#portfolio-single-info .ps-video-tile iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* MP4 tiles in sections 3 & 4: match image tile heights via ::before */
#portfolio-single-info3 .isotope-item .ps-video,
#portfolio-single-info4 .isotope-item .ps-video {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}
#portfolio-single-info3 .isotope-item.iso-height-1 .ps-video::before,
#portfolio-single-info4 .isotope-item.iso-height-1 .ps-video::before { content:""; display:block; padding-top:56.25% !important; }
#portfolio-single-info3 .isotope-item.iso-height-2 .ps-video::before,
#portfolio-single-info4 .isotope-item.iso-height-2 .ps-video::before { content:""; display:block; padding-top:112.5% !important; }

#portfolio-single-info3 .ps-video > video,
#portfolio-single-info4 .ps-video > video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;     /* use cover for edge-to-edge */
}

/* Mobile: stack the 3-up YouTube grid to single-column for readability */
@media (max-width: 767.98px) {
  #portfolio-single-info .isotope.col-3 .grid-sizer,
  #portfolio-single-info .isotope.col-3 .isotope-item { width: 100% !important; }
}

/* ---------- Hero (intro slideshow) height ---------- */

#intro,
#intro .owl-carousel,
#intro .owl-stage-outer,
#intro .owl-stage,
#intro .owl-item,
#intro .cc-item.bg-image {
  height: auto !important;
  min-height: 520px !important;       /* desktop floor */
}

@media (min-width: 992px) {
  #intro,
  #intro .owl-carousel,
  #intro .owl-stage-outer,
  #intro .owl-stage,
  #intro .owl-item,
  #intro .cc-item.bg-image {
    min-height: 62vh !important;
  }
}

#intro .cc-item.bg-image {
  background-size: cover !important;
  background-position: 50% 55% !important;  /* tweak focal point */
}
#intro { margin-bottom: 0 !important; }

/* ---------- BLUE RULE DIVIDERS (clean, with breathing room) ---------- */

/* Position context */
#content-container section { position: relative; }

/* Only draw rules on sections that come AFTER #intro */
#intro ~ section:not(#portfolio-single-nav):not(.no-divider)::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: 1;
}

/* Breathing room around each divider */
#intro ~ section:not(#portfolio-single-nav):not(.no-divider) {
  padding-top: 80px;   /* 50px base + 30px buffer */
  padding-bottom: 30px;
}

@media (max-width: 767px) {
  #intro ~ section:not(#portfolio-single-nav):not(.no-divider) {
    padding-top: 66px;  /* 36px base + 30px */
    padding-bottom: 24px;
  }
}
/* ===== Kill the divider directly under the hero ===== */
#intro + section::before {
  content: none !important;
  display: none !important;
}

/* (Optional) if that first section inherited the extra top padding,
   trim it so the gap under the hero feels right. Tweak if you want. */
#intro + section {
  padding-top: 30px !important;   /* keep a little space, not the full divider spacing */
}

/* Everything else (all later sections) keeps the rule + 30px buffers from before */