/* ==================================================
FILE : /assets/01-mstr-tmplet/03-jz-desktop/css-v2/dsktop-w04-jz-staging-area-3w3c.css
LINK : <link rel="stylesheet" href="/assets/01-mstr-tmplet/03-jz-desktop/css-v2/dsktop-w04-jz-staging-area-3w3c.css">
PURPOSE : DESKTOP WIDGET 04 (3w3c) - Naked Grid, 3 Glass Columns
VERSION: v1.0 - DATE MODIFIED: 2026-04-05 - Studio Typography Wiring & Exact Size Preservation
==================================================== */

/* ==================================================
   🛠️ BRAT TWEAKS: LOCAL VISUAL CONTROLS
   ================================================== */
.jz-dsktop-w04-3w3c-master-grid {
  --w04-ad-width: 160px; /* <-- Brat Tweak: Width of Left/Right Ads */
  --w04-grid-gap: 20px; /* <-- Brat Tweak: Space between 3 glass columns */
  --w04-ad05-margin: 5px; /* <-- Brat Tweak: Margin of bottom Ad Spot 05 */

  --w04-ad-rgb-speed: 16s; /* <-- Brat Tweak: Speed of Ad Spot RGB borders */
  --w04-ad-rgb-border: 3px; /* <-- Brat Tweak: Thickness of Ad Spot RGB borders */
  --w04-ad-rgb-colors:
    #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000; /* <-- Brat Tweak: Flattened */

  --w04-staging-rgb-speed: 16s; /* <-- Brat Tweak: Speed of Center Staging RGB */
  --w04-staging-rgb-border: 3px; /* <-- Brat Tweak: Thickness of Center Staging RGB */
  --w04-staging-rgb-colors:
    #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000; /* <-- Brat Tweak: Flattened */

  /* --- 🌓 ISOLATED AD TEXT CONTROLS (Matches W01/W04-1w3c) --- */
  --w04-dim-text-dark: #00befd; /* <-- Brat Tweak: Cyan Blue Dimensions (Dark Mode) */
  --w04-dim-text-light: #0217fa; /* <-- Brat Tweak: Deep Blue Dimensions (Light Mode) */

  /* --- 📏 EXACT TYPOGRAPHY SIZING (LOCKED PER REQUEST) --- */
  --w04-ad-title-size: 0.8rem; /* <-- Brat Tweak: Locked exact size */
  --w04-ad-heading-size: 0.95rem; /* <-- Brat Tweak: Locked exact size */
  --w04-ad-subtext-size: 0.8rem; /* <-- Brat Tweak: Locked exact size */
  --w04-ad-dim-size: 0.75rem; /* <-- Brat Tweak: Locked exact size */
  --w04-staging-heading-size: 2.5rem; /* <-- Brat Tweak: Locked exact size */
  --w04-staging-subtext-size: 1rem; /* <-- Brat Tweak: Locked exact size */
  --w04-ad05-text-size: 1rem; /* <-- Brat Tweak: Locked exact size */

  /* Naked Grid Settings - No glass backgrounds here! */
  width: 100%;
  max-width: var(--jzn-max-width) !important;
  box-sizing: border-box !important;
  margin: var(--w04-margin-top, 15px) auto var(--w04-margin-bottom, 15px) auto !important;

  display: flex;
  flex-direction: row;
  align-items: stretch; /* Ensures all 3 glass blocks stretch to match heights */
  gap: var(--w04-grid-gap);
  min-height: 600px; /* Staging vertical breathing room */
}

/* ==================================================
   SECTION 1: THE 3 INDIVIDUAL GLASS COLUMNS
   ================================================== */
/* Applies inner padding between the glass edge and the RGB boundary */
.jz-w04-3w3c-col-left,
.jz-w04-3w3c-col-right,
.jz-w04-3w3c-col-center {
  padding: var(--w04-wrapper-pad, 10px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box !important;
}

/* Locks Side Ad Widths */
.jz-w04-3w3c-col-left,
.jz-w04-3w3c-col-right {
  width: var(--w04-ad-width) !important;
  flex: 0 0 var(--w04-ad-width) !important;
}

/* Fills Center Area */
.jz-w04-3w3c-col-center {
  flex: 1 !important;
  min-width: 0;
}

/* ==================================================
   SECTION 2: THE INNER RGB BOXES (Ad Rails)
   ================================================== */
.jz-w04-3w3c-ad-rgb-box {
  position: relative;
  background: transparent;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  box-sizing: border-box;
  text-align: center;
  z-index: 1;
}

.jz-w04-3w3c-ad-rgb-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--w04-ad-rgb-border);
  background: linear-gradient(90deg, var(--w04-ad-rgb-colors));
  background-size: 400% 400%;
  animation: jz-3w3c-rgbFlow var(--w04-ad-rgb-speed) linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

/* Side Ad Typography */
.jz-w04-3w3c-ad-content {
  z-index: 2;
  width: 100%;
}
.jz-w04-3w3c-ad-title {
  font-family: var(--jzn-active-font); /* <-- Brat Tweak: Studio Font Engine */
  font-size: var(--w04-ad-title-size); /* <-- Locked to Brat Tweak */
  font-weight: var(--jzn-font-weight-sub); /* <-- Brat Tweak: Studio Sub Weight */
  color: var(--jzn-subtext-color); /* <-- Wired to Subtext */
  margin-bottom: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.jz-w04-3w3c-ad-heading {
  font-family: var(--jzn-active-heading-font); /* <-- Brat Tweak: Studio Heading Font */
  font-size: var(--w04-ad-heading-size); /* <-- Locked to Brat Tweak */
  font-weight: var(--jzn-font-weight-heading); /* <-- Wired to Heading Weight */
  color: var(--jzn-heading-color); /* <-- Wired to Heading Color */
  margin-bottom: 5px;
  line-height: 1.2;
  text-transform: uppercase;
}
.jz-w04-3w3c-ad-subtext {
  font-family: var(--jzn-active-font); /* <-- Brat Tweak: Studio Font Engine */
  font-size: var(--w04-ad-subtext-size); /* <-- Locked to Brat Tweak */
  font-weight: var(--jzn-font-weight-sub); /* <-- Brat Tweak: Studio Sub Weight */
  color: var(--jzn-subtext-color); /* <-- Wired to Subtext */
  margin-bottom: 12px;
  line-height: 1.2;
  text-transform: uppercase;
}
.jz-w04-3w3c-ad-dim {
  font-family: var(--jzn-active-font); /* <-- Brat Tweak: Studio Font Engine */
  font-size: var(--w04-ad-dim-size); /* <-- Locked to Brat Tweak */
  font-weight: var(--jzn-font-weight-sub); /* <-- Brat Tweak: Studio Sub Weight */
  color: var(--w04-active-dim-text) !important; /* <-- Wired to Blue Brat Tweak Switch */
  margin-bottom: 5px;
  line-height: 1.4;
}

/* ==================================================
   SECTION 3: CENTER COLUMN (Staging Area & Ad 05)
   ================================================== */
.jz-w04-3w3c-staging-rgb-box {
  position: relative;
  background: transparent;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  z-index: 1;
}

.jz-w04-3w3c-staging-rgb-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--w04-staging-rgb-border);
  background: linear-gradient(90deg, var(--w04-staging-rgb-colors));
  background-size: 400% 400%;
  animation: jz-3w3c-rgbFlow var(--w04-staging-rgb-speed) linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

/* Center Column Content Fixes */
.jz-w04-3w3c-staging-content-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  flex: 1; /* Pushes content to exact center */
}

.jz-w04-3w3c-staging-heading {
  font-family: var(--jzn-active-heading-font); /* <-- Brat Tweak: Studio Heading Font */
  font-size: var(--w04-staging-heading-size); /* <-- Locked to Brat Tweak */
  font-weight: var(--jzn-font-weight-heading); /* <-- Studio Engine */
  color: var(--jzn-heading-color); /* <-- Studio Engine */
  margin: 0 0 10px 0;
  letter-spacing: 2px;
  opacity: 0.2;
  width: 100%;
}
.jz-w04-3w3c-staging-subtext {
  font-family: var(--jzn-active-font); /* <-- Brat Tweak: Studio Font Engine */
  font-size: var(--w04-staging-subtext-size); /* <-- Locked to Brat Tweak */
  color: var(--jzn-subtext-color); /* <-- Studio Engine */
  font-weight: var(--jzn-font-weight-body); /* <-- Studio Engine Weight */
  opacity: 0.4;
  width: 100%;
}

/* Bottom Ad Spot 05 Banner */
.jz-w04-3w3c-ad-spot-05 {
  margin: var(--w04-ad05-margin);
  margin-top: auto !important; /* Forces banner to absolute bottom */
  width: calc(100% - (var(--w04-ad05-margin) * 2));
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 2;
  box-sizing: border-box;
}

.jz-w04-3w3c-ad-05-text {
  font-family: var(--jzn-active-font); /* <-- Brat Tweak: Studio Font Engine */
  font-size: var(--w04-ad05-text-size); /* <-- Locked to Brat Tweak */
  font-weight: var(--jzn-font-weight-body); /* <-- Studio Engine Weight */
  color: var(--jzn-subtext-color); /* <-- Studio Engine */
  letter-spacing: 1px;
}

/* ==================================================
   SECTION 4: RESPONSIVE (< 1024px)
   ================================================== */
@media (max-width: 1024px) {
  .jz-dsktop-w04-3w3c-master-grid {
    flex-direction: column;
    min-height: auto;
  }

  /* Staging goes to top */
  .jz-w04-3w3c-col-center {
    order: 1;
    width: 100% !important;
    min-height: 300px;
  }

  /* Side Ads stack below */
  .jz-w04-3w3c-col-left {
    order: 2;
    width: 100% !important;
    flex: auto !important;
    min-height: 150px;
  }
  .jz-w04-3w3c-col-right {
    order: 3;
    width: 100% !important;
    flex: auto !important;
    min-height: 150px;
  }
}

/* ==================================================
   SECTION 5: THE GLOBAL OVERRIDE BRIDGE (W04 - 3W3C)
   ================================================== */
/* 🌙 Default to Dark Mode */
body div.jzn-container.jz-w04-3w3c-col-left,
body div.jzn-container.jz-w04-3w3c-col-center,
body div.jzn-container.jz-w04-3w3c-col-right {
  background: var(--jzn-container) !important; /* <-- Brat Tweak: Studio Background tint */
  border: var(--w04-glass-border-dark) !important; /* <-- Brat Tweak: Universal Control File */
  --w04-active-dim-text: var(--w04-dim-text-dark); /* <-- Flips blue Dimensions to Dark Mode */
}

body div.jzn-container.jz-w04-3w3c-col-left::before,
body div.jzn-container.jz-w04-3w3c-col-center::before,
body div.jzn-container.jz-w04-3w3c-col-right::before {
  box-shadow: var(--w04-glow-dark) !important; /* <-- Brat Tweak: Universal Control File */
}

/* ☀️ Light Mode Overrides (Wired directly to the HTML tag) */
html[data-palette='13'] div.jzn-container.jz-w04-3w3c-col-left,
html[data-palette='13'] div.jzn-container.jz-w04-3w3c-col-center,
html[data-palette='13'] div.jzn-container.jz-w04-3w3c-col-right,
html[data-palette='14'] div.jzn-container.jz-w04-3w3c-col-left,
html[data-palette='14'] div.jzn-container.jz-w04-3w3c-col-center,
html[data-palette='14'] div.jzn-container.jz-w04-3w3c-col-right,
html[data-palette='15'] div.jzn-container.jz-w04-3w3c-col-left,
html[data-palette='15'] div.jzn-container.jz-w04-3w3c-col-center,
html[data-palette='15'] div.jzn-container.jz-w04-3w3c-col-right,
html[data-palette='16'] div.jzn-container.jz-w04-3w3c-col-left,
html[data-palette='16'] div.jzn-container.jz-w04-3w3c-col-center,
html[data-palette='16'] div.jzn-container.jz-w04-3w3c-col-right,
html[data-palette='17'] div.jzn-container.jz-w04-3w3c-col-left,
html[data-palette='17'] div.jzn-container.jz-w04-3w3c-col-center,
html[data-palette='17'] div.jzn-container.jz-w04-3w3c-col-right,
html[data-palette='18'] div.jzn-container.jz-w04-3w3c-col-left,
html[data-palette='18'] div.jzn-container.jz-w04-3w3c-col-center,
html[data-palette='18'] div.jzn-container.jz-w04-3w3c-col-right {
  background: var(--jzn-container) !important; /* <-- Brat Tweak: Studio Background tint */
  border: var(--w04-glass-border-light) !important; /* <-- Brat Tweak: Universal Control File */
  --w04-active-dim-text: var(--w04-dim-text-light); /* <-- Flips blue Dimensions to Light Mode */
}

html[data-palette='13'] div.jzn-container.jz-w04-3w3c-col-left::before,
html[data-palette='13'] div.jzn-container.jz-w04-3w3c-col-center::before,
html[data-palette='13'] div.jzn-container.jz-w04-3w3c-col-right::before,
html[data-palette='14'] div.jzn-container.jz-w04-3w3c-col-left::before,
html[data-palette='14'] div.jzn-container.jz-w04-3w3c-col-center::before,
html[data-palette='14'] div.jzn-container.jz-w04-3w3c-col-right::before,
html[data-palette='15'] div.jzn-container.jz-w04-3w3c-col-left::before,
html[data-palette='15'] div.jzn-container.jz-w04-3w3c-col-center::before,
html[data-palette='15'] div.jzn-container.jz-w04-3w3c-col-right::before,
html[data-palette='16'] div.jzn-container.jz-w04-3w3c-col-left::before,
html[data-palette='16'] div.jzn-container.jz-w04-3w3c-col-center::before,
html[data-palette='16'] div.jzn-container.jz-w04-3w3c-col-right::before,
html[data-palette='17'] div.jzn-container.jz-w04-3w3c-col-left::before,
html[data-palette='17'] div.jzn-container.jz-w04-3w3c-col-center::before,
html[data-palette='17'] div.jzn-container.jz-w04-3w3c-col-right::before,
html[data-palette='18'] div.jzn-container.jz-w04-3w3c-col-left::before,
html[data-palette='18'] div.jzn-container.jz-w04-3w3c-col-center::before,
html[data-palette='18'] div.jzn-container.jz-w04-3w3c-col-right::before {
  box-shadow: var(--w04-glow-light) !important; /* <-- Brat Tweak: Universal Control File */
}

/* ==================================================
   SECTION 6: KEYFRAMES
   ================================================== */
@keyframes jz-3w3c-rgbFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}