/* =========================================================
   CB Portfolio Grid — STYLE ONLY
   ========================================================= */

/* ---------- base ---------- */

.cb-portfolio-grid .cb-item {
  position: relative;
  overflow: hidden;
  --cb-data-op: 0; /* 0..1 */
}

.cb-portfolio-grid a.cb-item-link {
  display: block;
  width: 100%;
  height: 100%;
}

.cb-item-meta {
  left: 0;
  right: 0;
  width: 100%;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.cb-title {
  font-size: 22px;
  line-height: 1.1;
}

.cb-meta-cats .cb-cat {
  display: inline-block;
  font-size: 12px;
  line-height: 1.1;
  padding: 4px 8px;
  margin-right: 6px;
  margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,0.35);
}

/* =========================================================
   DATA STYLE
   ========================================================= */

/* ---------- combined ---------- */
.cb-data-style-combined .cb-item-meta {
  padding: 14px 16px;
}

/* ---------- split ---------- */
.cb-data-style-split .cb-item-meta {
  padding: 12px 16px;
  background: transparent;
}

.cb-data-style-split .cb-meta-cats {
  padding: 0;
  margin-bottom: 8px;
  background: transparent;
}

.cb-data-style-split .cb-meta-main {
  padding: 10px;
}

/* =========================================================
   DATA LOCATION
   ========================================================= */

.cb-data-location-bottom .cb-item-meta {
  position: absolute;
  bottom: 0;
}

.cb-data-location-top .cb-item-meta {
  position: absolute;
  top: 0;
}

/* hover bottom */
.cb-data-location-hover-bottom .cb-item-meta {
  position: absolute;
  bottom: 0;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 240ms ease, opacity 240ms ease;
}

.cb-data-location-hover-bottom:hover .cb-item-meta {
  transform: translateY(0);
  opacity: 1;
}

/* hover top */
.cb-data-location-hover-top .cb-item-meta {
  position: absolute;
  top: 0;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 240ms ease, opacity 240ms ease;
}

.cb-data-location-hover-top:hover .cb-item-meta {
  transform: translateY(0);
  opacity: 1;
}

/* cursor */
.cb-data-location-cursor .cb-item-meta {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.cb-data-location-cursor.cb-cursor-active .cb-item-meta {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   COLORS (ONLY applied when bg-color is present)
   ========================================================= */

/* ---------- combined ---------- */
.cb-data-style-combined.cb-bg-black .cb-item-meta {
  background: rgba(0,0,0,var(--cb-data-op));
}

.cb-data-style-combined.cb-bg-white .cb-item-meta {
  background: rgba(255,255,255,var(--cb-data-op));
}

.cb-data-style-combined.cb-bg-gold .cb-item-meta {
  background: rgba(255,204,0,var(--cb-data-op));
}

/* ---------- split ---------- */
.cb-data-style-split.cb-bg-black .cb-meta-main,
.cb-data-style-split.cb-bg-black .cb-cat {
  background: rgba(0,0,0,var(--cb-data-op));
}

.cb-data-style-split.cb-bg-white .cb-meta-main,
.cb-data-style-split.cb-bg-white .cb-cat {
  background: rgba(255,255,255,var(--cb-data-op));
}

.cb-data-style-split.cb-bg-gold .cb-meta-main,
.cb-data-style-split.cb-bg-gold .cb-cat {
  background: rgba(255,204,0,var(--cb-data-op));
}

/* =========================================================
   TEXT COLOR (derived, already working)
   ========================================================= */

.cb-text-white .cb-item-meta,
.cb-text-white .cb-item-meta * {
  color: #fff;
}

.cb-text-black .cb-item-meta,
.cb-text-black .cb-item-meta * {
  color: #000;
}


.cb-item-meta .cb-meta-main .cb-title {
  font-family: var(--theme-font-h1_font-family);
}