/* =========================================================
   Creative_CSS.css  —  minimal, page-scoped
   ========================================================= */

/* 0) Header logo: control by height only */
#logo img{
  height: 48px !important;
  width: auto !important;
  max-width: none !important;
  display: inline-block;
  object-fit: contain !important;
}
@media (min-width:1200px){ #logo img{ height:56px !important; } }
@media (min-width:768px) and (max-width:1199.98px){ #logo img{ height:52px !important; } }
@media (max-width:767.98px){ #logo img{ height:44px !important; } }

/* 1) Hero / header image (Owl item) */
#intro,
#intro .owl-carousel,
#intro .owl-stage-outer,
#intro .owl-stage,
#intro .owl-item{ height:auto !important; }

#intro .cc-item.bg-image{
  min-height: 60vh !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
}
@media (max-width:991.98px){ #intro .cc-item.bg-image{ min-height: 52vh !important; } }
@media (max-width:575.98px){ #intro .cc-item.bg-image{ min-height: 45vh !important; } }

/* 2) Kill the blue rule directly under the hero,
      and add 30px breathing room before the first content block */
#content-container > section:first-of-type::before,
#intro + section::before{
  display: none !important;
}
#content-container > section:first-of-type,
#intro + section{
  padding-top: 30px !important;
}

/* 3) Portfolio grids: taller tiles and zero gutters (flush edges) */

/* remove any padding/margins the theme adds so tiles touch */
#content-container .isotope .isotope-item{
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
#content-container .isotope-items-wrap{
  margin: 0 !important;
  padding: 0 !important;
}

/* anchors / wrappers should not add spacing */
#content-container .isotope a.ps-gallery-item,
#content-container .isotope .ps-gallery-item{
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
}

/* background-image tiles */
#content-container .isotope .ps-gallery-item-image.bg-image{
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: cover !important;   /* use 'contain' if you prefer no crop */
}

/* build tile height with a ratio box — 3:2 so they’re not thin */
#content-container .isotope .ps-gallery-item-image.bg-image::before{
  content: "" !important;
  display: block !important;
  padding-top: 66.666% !important;  /* 3:2 */
}

/* double-height items, if you use iso-height-2 */
#content-container .isotope .isotope-item.iso-height-2
  > a.ps-gallery-item > .ps-gallery-item-image.bg-image::before{
  padding-top: 133.333% !important; /* 2 × 3:2 */
}

/* plain <img> tiles (if any) */
#content-container .isotope .ps-gallery-item img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
/* ===== Fix remaining seams in the masonry ===== */

/* 1) Force exact column math for each grid size */
#content-container .isotope.col-4 .grid-sizer,
#content-container .isotope.col-4 .isotope-item { width: 25% !important; }

#content-container .isotope.col-3 .grid-sizer,
#content-container .isotope.col-3 .isotope-item { width: 33.3333% !important; }

#content-container .isotope.col-2 .grid-sizer,
#content-container .isotope.col-2 .isotope-item { width: 50% !important; }

/* 2) Absolutely zero gutters/padding anywhere inside the grid */
#content-container .isotope .isotope-item,
#content-container .isotope.gutter-1 .isotope-item,
#content-container .isotope.gutter-2 .isotope-item,
#content-container .isotope.gutter-3 .isotope-item {
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* the wrapper itself must not introduce negative margins or padding */
#content-container .isotope-items-wrap {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;        /* avoid tiny inline gaps in some themes */
  font-size: 0;          /* (anchors/images set their own size) */
}

/* 3) Nuke any inline padding some items/anchors may carry */
#content-container .isotope .isotope-item > a,
#content-container .isotope .ps-gallery-item {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  display: block !important;
}

/* 4) The image box fills its tile; no inner spacing */
#content-container .isotope .ps-gallery-item-image.bg-image {
  background-size: cover !important;
  background-position: 50% 50% !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

/* 5) Keep the taller tile ratio you liked (3:2) */
#content-container .isotope .ps-gallery-item-image.bg-image::before {
  content: "" !important;
  display: block !important;
  padding-top: 66.666% !important;
}
#content-container .isotope .isotope-item.iso-height-2
  > a.ps-gallery-item > .ps-gallery-item-image.bg-image::before {
  padding-top: 133.333% !important;
}