/* ==================================================
FILE : /assets/01-mstr-tmplet/03-jz-desktop/css-v2/dsktop-w01-jz-ad-full-span.css
LINK : <link rel="stylesheet" href="/assets/01-mstr-tmplet/03-jz-desktop/css-v2/dsktop-w01-jz-ad-full-span.css">
PURPOSE : DESKTOP WIDGET 01 - Ad Spot 01 (Compact Edition with Restored RGB & Padding)
VERSION: v1.0 - DATE MODIFIED: 2026-04-05 - Studio Typography, Padding Fix & RGB Restoration
==================================================== */

/* ==================================================
   🛠️ BRAT TWEAKS: LOCAL INTERNAL SPACING
   ================================================== */
.jz-dsktop-w01-wrapper {
  /* --- COMPRESSION CONTROLS --- */
  --w01-box-min-height: 90px;
  --w01-gap-label: 4px;
  --w01-gap-heading: 4px;
  --w01-gap-subtext: 6px;

  /* --- 📏 GLASS FRAME PADDING FIX --- */
  --w01-wrapper-pad: 10px; /* <-- Space between glass edge and RGB border */
  --w01-inner-pad-y: 20px; /* <-- Top/Bottom gap inside RGB Box */
  --w01-inner-pad-x: 20px; /* <-- Left/Right gap inside RGB Box */

  /* --- 🌈 THE MISSING RGB CONTROLS RESTORED --- */
  --w01-rgb-speed: 16s;
  --w01-rgb-border: 3px; 
  --w01-rgb-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000;

  /* --- 🌓 ISOLATED AD TEXT CONTROLS (Matches W06/W04) --- */
  --w01-dim-text-dark: #00befd; /* <-- Light Grey Dimensions (Dark Mode) */
  --w01-dim-text-light: #0217fa; /* <-- Dark Slate Dimensions (Light Mode) */

  /* Pulls outer spacing from Universal Control */
  width: 100% !important;
  max-width: var(--jzn-max-width) !important;
  box-sizing: border-box !important;
  margin: var(--w01-margin-top) auto var(--w01-margin-bottom) auto !important;
  padding: var(--w01-wrapper-pad) !important; /* <-- Restores the glass frame */
}

/* ==================================================
   SECTION 2: CONTAINER A - THE RGB INNER BOX
   ================================================== */
.jz-dsktop-w01-rgb-box {
  position: relative;
  background: transparent;
  border-radius: 12px;
  width: 100%;
  min-height: var(--w01-box-min-height);
  padding: var(--w01-inner-pad-y) var(--w01-inner-pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jz-dsktop-w01-rgb-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--w01-rgb-border);
  background: linear-gradient(90deg, var(--w01-rgb-colors));
  background-size: 400% 400%;
  animation: jz-dsktop-w01-rgbFlow var(--w01-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;
}

/* ==================================================
   SECTION 3: SEMANTIC CONTENT & TYPOGRAPHY
   ================================================== */
.jz-dsktop-w01-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  color: var(--jzn-text);
}

.jz-dsktop-w01-label {
  font-family: var(--jzn-active-font); /* <-- Studio Font Engine */
  font-size: var(--jzn-size-sub); /* <-- Studio Fluid Sub Size */
  font-weight: var(--jzn-font-weight-sub); /* <-- Studio Sub Weight */
  color: var(--jzn-subtext-color); /* <-- Mapped to Studio Subtext */
  opacity: 0.8;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--w01-gap-label);
  line-height: 1.2;
}

.jz-dsktop-w01-heading {
  font-family: var(--jzn-active-heading-font); /* <-- Studio Heading Font Engine */
  font-size: var(--jzn-size-h3); /* <-- Studio Fluid H3 Size */
  font-weight: var(--jzn-font-weight-heading); /* <-- Mapped to Studio Heading Weight */
  color: var(--jzn-heading-color); /* <-- Mapped to Studio Heading Color */
  margin: 0 0 var(--w01-gap-heading) 0;
  text-transform: uppercase;
  line-height: 1.2;
}

.jz-dsktop-w01-subtext {
  font-family: var(--jzn-active-font); /* <-- Studio Font Engine */
  font-size: var(--jzn-size-text); /* <-- Studio Fluid Text Size */
  font-weight: var(--jzn-font-weight-body); /* <-- Studio Body Weight */
  color: var(--jzn-subtext-color); /* <-- Mapped to Studio Subtext */
  opacity: 0.7;
  margin: 0 0 var(--w01-gap-subtext) 0;
  line-height: 1.2;
}

.jz-dsktop-w01-dim {
  font-family: var(--jzn-active-font); /* <-- Studio Font Engine */
  font-size: var(--jzn-size-sub); /* <-- Bumped up from Micro to Sub */
  font-weight: var(--jzn-font-weight-sub); /* <-- Studio Sub Weight */
  color: var(--w01-active-dim-text) !important; /* <-- Routed from Override Bridge */
  line-height: 1.2;
}

/* ==================================================
   SECTION 4: CONTAINER B - ADSENSE FALLBACK
   ================================================== */
.jz-dsktop-w01-fallback {
  display: none;
  width: 100%;
  min-height: var(--w01-box-min-height);
  align-items: center;
  justify-content: center;
}

/* ==================================================
   SECTION 5: THE GLOBAL OVERRIDE BRIDGE
   ================================================== */
/* 🌙 Default to Dark Mode */
body div.jz-dsktop-w01-wrapper.jzn-container {
  background: var(--jzn-container) !important; 
  border: var(--w01-glass-border-dark) !important;
  --w01-active-dim-text: var(--w01-dim-text-dark); 
}

body div.jz-dsktop-w01-wrapper.jzn-container::before {
  box-shadow: var(--w01-glow-dark) !important;
}

/* ☀️ Light Mode Overrides */
html[data-palette='13'] div.jz-dsktop-w01-wrapper.jzn-container,
html[data-palette='14'] div.jz-dsktop-w01-wrapper.jzn-container,
html[data-palette='15'] div.jz-dsktop-w01-wrapper.jzn-container,
html[data-palette='16'] div.jz-dsktop-w01-wrapper.jzn-container,
html[data-palette='17'] div.jz-dsktop-w01-wrapper.jzn-container,
html[data-palette='18'] div.jz-dsktop-w01-wrapper.jzn-container {
  background: var(--jzn-container) !important; 
  border: var(--w01-glass-border-light) !important;
  --w01-active-dim-text: var(--w01-dim-text-light); 
}

html[data-palette='13'] div.jz-dsktop-w01-wrapper.jzn-container::before,
html[data-palette='14'] div.jz-dsktop-w01-wrapper.jzn-container::before,
html[data-palette='15'] div.jz-dsktop-w01-wrapper.jzn-container::before,
html[data-palette='16'] div.jz-dsktop-w01-wrapper.jzn-container::before,
html[data-palette='17'] div.jz-dsktop-w01-wrapper.jzn-container::before,
html[data-palette='18'] div.jz-dsktop-w01-wrapper.jzn-container::before {
  box-shadow: var(--w01-glow-light) !important;
}

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