/* ==================================================
FILE : /assets/01-mstr-tmplet/04-jz-mobile/css-v2/mobile-w03-trust-points.css
LINK : <link rel="stylesheet" href="/assets/01-mstr-tmplet/04-jz-mobile/css-v2/mobile-w03-trust-points.css">
PURPOSE : MOBILE WIDGET 03 - Trust Points (Master RGB Wrapper + 3 RGB Inner Rectangles)
VERSION: v1.0 - DATE CREATED : 2026-04-07 - Rebuild - New Typography Architecture
==================================================== */

/* ==================================================
   🛠️ BRAT TWEAKS: LOCAL OVERRIDES & WIRING
   ================================================== */
.jz-mob-w03-wrapper {
  /* --- INTERNAL PADDING --- */
  --mob-w03-master-pad: 10px;

  /* --- MASTER CONTAINER RGB HOOKS --- */
  --active-mob-rgb-speed: var(--mob-w03-rgb-speed, 16s);
  --active-mob-rgb-colors: var(--mob-w03-rgb-colors);

  /* --- INTERNAL GRID & SHAPE CONTROLS --- */
  --mob-w03-grid-gap: 10px;
  --mob-w03-radius: 8px;
  --mob-w03-pill-pad: 8px 10px;
  --mob-w03-rgb-thickness: 2px;

  /* --- INNER PILL RGB ANIMATION CONTROLS --- */
  --mob-w03-pill-speed: 10s;
  --mob-w03-pill-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000;
}

/* ==================================================
   SECTION 1: THE MASTER WRAPPER
   ================================================== */
.jz-mob-w03-wrapper {
  width: 100%;
  max-width: var(--mob-max-width) !important;
  box-sizing: border-box;
  display: block !important;

  /* 🎯 DIRECT MASTER HOOK: Pulling straight from W00 */
  margin-top: var(--mob-w03-margin-top, 15px) !important;
  margin-bottom: var(--mob-w03-margin-bottom, 15px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.jz-mob-w03-rgb-box {
  width: 100%;
  padding: var(--mob-w03-master-pad) !important;
  box-sizing: border-box;
  position: relative;
  z-index: 2; /* Content above the main mask */
}

/* ==================================================
   SECTION 2: THE 2-UP, 1-DOWN GRID
   ================================================== */
.jz-mob-w03-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--mob-w03-grid-gap);
  width: 100%;
  position: relative;
  z-index: 3; 
}

.jz-w03-half {
  width: calc(50% - (var(--mob-w03-grid-gap) / 2)) !important;
}

.jz-w03-full {
  width: 100% !important;
}

/* ==================================================
   SECTION 3: THE INNER RGB RECTANGULAR PILLS
   ================================================== */
.jz-mob-w03-rect-pill {
  position: relative;
  border-radius: var(--mob-w03-radius) !important;
  padding: var(--mob-w03-rgb-thickness) !important;
  z-index: 1;
  display: flex;
}

.jz-mob-w03-rect-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mob-w03-pill-colors));
  background-size: 400% 400%;
  animation: jz-mob-rgbFlow var(--mob-w03-pill-speed) linear infinite;
  z-index: -1;
}

/* ==================================================
   SECTION 4: THE INNER CONTENT (Fluid Engine)
   ================================================== */
.jz-mob-w03-rect-pill-inner {
  background: var(--jzn-container); 
  border-radius: calc(var(--mob-w03-radius) - 1px) !important; 
  padding: var(--mob-w03-pill-pad) !important;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;

  /* 🎯 FLUID TYPOGRAPHY ENGINE MAP */
  font-family: var(--jzn-active-font);
  font-size: var(--jzn-size-micro) !important; /* Micro size for compact pill labels */
  font-weight: var(--jzn-font-weight-sub) !important;
  line-height: 1.2 !important;
  color: var(--mob-text-color, var(--jzn-text));
  text-transform: uppercase;
}

.jz-mob-w03-icon {
  font-size: 1.2em !important;
}