/* =========================================================
   CB Portfolio Grid — LAYOUT ONLY
   (grid/flex sizing, rows/cols, featured-left structure)
   File: modules/portfolio-grid/assets/css/portfolio-grid-layout.css
   ========================================================= */

.cb-portfolio-grid { width: 100%; position: relative; }

/* Base tile box */
.cb-portfolio-grid .cb-item {
  position: relative;
  display: block;
  overflow: hidden;
  box-sizing: border-box;

  /* baseline height (overridden by featured-left sizing) */
  min-height: 220px;
}

/* Background layer (required for layout/hover transform) */
.cb-portfolio-grid .cb-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1);
  transition: transform 350ms ease-in-out;
  will-change: transform;
}

.cb-portfolio-grid .cb-item:hover .cb-bg,
.cb-portfolio-grid .cb-item-link:hover .cb-bg {
  transform: scale(1.08);
}

/* Overlay layer */
.cb-portfolio-grid .cb-item-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background: #000;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.cb-portfolio-grid .cb-item:hover .cb-item-overlay,
.cb-portfolio-grid .cb-item-link:hover .cb-item-overlay {
  opacity: 0.15;
}

/* Meta container baseline (placement only, animation in style.css) */
.cb-portfolio-grid .cb-item-meta {
  position: absolute;
  z-index: 2;

  /* keep meta from interfering with hover */
  pointer-events: none;

  /* full width default (cursor mode overrides) */
  left: 0;
  right: 0;
  width: 100%;
}

/* =========================================================
   DATA LOCATION (placement only)
   Supported:
     - bottom, top
     - hover-bottom, hover-top
     - cursor
   Legacy supported:
     - bottom-attached, top-attached
   ========================================================= */

/* Bottom (new) */
.cb-data-location-bottom .cb-item-meta { bottom: 0; top: auto; }

/* Top (new) */
.cb-data-location-top .cb-item-meta { top: 0; bottom: auto; }

/* Hover-bottom (new) anchored to bottom; style handles transform/opacity */
.cb-data-location-hover-bottom .cb-item-meta { bottom: 0; top: auto; }

/* Hover-top (new) anchored to top; style handles transform/opacity */
.cb-data-location-hover-top .cb-item-meta { top: 0; bottom: auto; }

/* Cursor (new): DO NOT hide it. JS will position it. */
.cb-data-location-cursor .cb-item-meta {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: auto;
}

/* ---- Legacy aliases (old shortcodes) ---- */
.cb-data-location-bottom-attached .cb-item-meta { bottom: 0; top: auto; left: 0; right: 0; width: 100%; }
.cb-data-location-top-attached .cb-item-meta { top: 0; bottom: auto; left: 0; right: 0; width: 100%; }

/* Tooltip container (if you still use it elsewhere) */
.cb-pg-cursor-tooltip {
  position: fixed;
  z-index: 99999;
  display: none;
  max-width: 380px;
  pointer-events: none;
}

/* =========================================================
   UNIFORM LAYOUT
   ========================================================= */
.cb-layout-uniform {
  display: flex;
  flex-wrap: wrap;
}

.cb-layout-uniform .cb-item {
  flex: 0 0 auto;
}

/* Columns (support up to 9) */
.cb-layout-uniform.cb-cols-1 .cb-item { width: 100%; }
.cb-layout-uniform.cb-cols-2 .cb-item { width: 50%; }
.cb-layout-uniform.cb-cols-3 .cb-item { width: calc(100% / 3); }
.cb-layout-uniform.cb-cols-4 .cb-item { width: 25%; }
.cb-layout-uniform.cb-cols-5 .cb-item { width: 20%; }
.cb-layout-uniform.cb-cols-6 .cb-item { width: calc(100% / 6); }
.cb-layout-uniform.cb-cols-7 .cb-item { width: calc(100% / 7); }
.cb-layout-uniform.cb-cols-8 .cb-item { width: calc(100% / 8); }
.cb-layout-uniform.cb-cols-9 .cb-item { width: calc(100% / 9); }

/* =========================================================
   FEATURED-LEFT (3/5/7)
   ========================================================= */
.cb-layout-featured-left {
  display: flex;
  width: 100%;
}

.cb-layout-featured-left .cb-pg-left,
.cb-layout-featured-left .cb-pg-right {
  width: 50%;
}

.cb-layout-featured-left .cb-pg-left { display: block; }
.cb-layout-featured-left .cb-pg-right {
  display: flex;
  flex-wrap: wrap;
}

/* Right-side columns (1/2/3 across) */
.cb-layout-featured-left.cb-right-cols-1 .cb-pg-right .cb-item { width: 100%; }
.cb-layout-featured-left.cb-right-cols-2 .cb-pg-right .cb-item { width: 50%; }
.cb-layout-featured-left.cb-right-cols-3 .cb-pg-right .cb-item { width: calc(100% / 3); }

/* Heights */
.cb-layout-featured-left .cb-pg-left .cb-item-featured { min-height: 520px; }
.cb-layout-featured-left .cb-pg-right .cb-item-small { min-height: 260px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .cb-layout-featured-left { flex-wrap: wrap; }

  .cb-layout-featured-left .cb-pg-left,
  .cb-layout-featured-left .cb-pg-right { width: 100%; }

  .cb-layout-uniform .cb-item { width: 50%; }
}

@media (max-width: 520px) {
  .cb-portfolio-grid .cb-item { width: 100% !important; }
  .cb-layout-featured-left .cb-pg-left .cb-item-featured { min-height: 360px; }
  .cb-layout-featured-left .cb-pg-right .cb-item-small { min-height: 220px; }
}


/* Background-color on 2nd post (FIRST item in RIGHT column) 
.cb-portfolio-grid.cb-layout-featured-left .cb-pg-right .cb-portfolio-item:nth-child(1) {
  background-color: #7CFC00 !important; 
}
.cb-portfolio-grid.cb-layout-featured-left .cb-pg-right .cb-portfolio-item:nth-child(2) .cb-portfolio-media {
  background-color: pink !important; 
}
.cb-portfolio-grid.cb-layout-featured-left .cb-pg-right .cb-portfolio-item:nth-child(3) .cb-portfolio-media {
  background-color: teal !important; 
}
.cb-portfolio-grid.cb-layout-featured-left .cb-pg-right .cb-portfolio-item:nth-child(1) .cb-portfolio-media {
  background-color: brown !important; 
}

.elementor-widget-shortcode .elementor-widget-container .elementor-shortcode 
.cb-portfolio-grid.cb-layout-featured-left .cb-pg-left .cb-portfolio-item {
    border: 3px solid aqua !important;
    background-color: teal !important;
}

.elementor-widget-shortcode .elementor-widget-container .elementor-shortcode 
.cb-portfolio-grid .cb-pg-right .cb-portfolio-item.cb-item-small,
.elementor-widget-shortcode .elementor-widget-container .elementor-shortcode 
.cb-portfolio-grid .cb-portfolio-item.cb-item {
    border: 3px solid aqua !important;
    background-color: teal !important;
}
    */