/* ==================================================
FILE : /assets/01-mstr-tmplet/04-jz-mobile/css-v2/mobile-w02-title-h1-adaptor.css
LINK : <link rel="stylesheet" href="/assets/01-mstr-tmplet/04-jz-mobile/css-v2/mobile-w02-title-h1-adaptor.css">
PURPOSE : MOBILE WIDGET 02 - Tool Header (2 Independent Containers)
VERSION: v1.0 - DATE CREATED : 2026-04-07 - Rebuild - New Typography Architecture
VERSION: v2.0 - DATE CREATED : 2026-04-12 - Rebuild - Mobile Homepage & Tool Dual Wiring
VERSION: v3.0 - DATE CREATED : 2026-04-19 - Atomic Order & Spacing Tweaks Added
==================================================== */

/* ==================================================
   🛠️ BRAT TWEAKS: LOCAL OVERRIDES & WIRING
   ================================================== */
.jz-mob-w02-layout-grid {
  /* --- INTERNAL LAYOUT SPLIT & SIZING --- */
  --mob-w02-left-width: 25%;
  --mob-w02-right-width: 75%;
  --mob-w02-col-gap: 8px;
  --mob-w02-inner-pad: 10px;
  --mob-w02-icon-size: 80px; /* <-- Brat Tweak: Adjust Mobile Icon Size Here */

  /* --- 📏 SPACING & TYPOGRAPHY CONTROLS --- */
  --mob-w02-gap-h1-h2: 4px; /* <-- Brat Tweak: Space between H1 and H2 */
  --mob-w02-gap-sections: 12px; /* <-- Brat Tweak: Space between Dock, Static Line, and Pills */
  --mob-w02-lh-h1: 1.1; /* <-- Brat Tweak: Line height (squishiness) of H1 */
  --mob-w02-lh-h2: 1; /* <-- Brat Tweak: Line height (squishiness) of H2 */
  --mob-w02-lh-static: 1; /* <-- Brat Tweak: Line height of Static Line */

  /* --- 🌓 ISOLATED STATIC LINE CONTROLS --- */
  --mob-w02-static-text-dark: #00cc00;
  --mob-w02-static-text-light: #008800;

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

/* ==================================================
   SECTION 1: THE INVISIBLE LAYOUT GRID
   ================================================== */
.jz-mob-w02-layout-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--mob-w02-col-gap);
  width: 100%;
  max-width: var(--mob-max-width);
  box-sizing: border-box;

  margin-top: var(--mob-w02-margin-top, 15px) !important;
  margin-bottom: var(--mob-w02-margin-bottom, 15px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==================================================
   SECTION 2: THE 2 INDEPENDENT CONTAINERS
   ================================================== */
.jz-mob-w02-col-left,
.jz-mob-w02-col-right {
  --active-mob-rgb-speed: var(--mob-w02-rgb-speed);
  --active-mob-rgb-colors: var(--mob-w02-rgb-colors);

  max-width: 100% !important;
  margin: 0 !important;
  padding: var(--mob-w02-inner-pad) !important;

  display: flex !important;
  border-radius: var(--mob-border-radius, 12px) !important;
}

.jz-mob-w02-col-left {
  width: calc(var(--mob-w02-left-width) - (var(--mob-w02-col-gap) / 2)) !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

.jz-mob-w02-col-right {
  width: calc(var(--mob-w02-right-width) - (var(--mob-w02-col-gap) / 2)) !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* 🎯 TELEPORTED DESKTOP ICON FIX */
.jz-w02-tool-icon-img {
  width: var(--mob-w02-icon-size) !important; /* Wired to Brat Tweak */
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* ==================================================
   SECTION 3: TELEPORTED TYPOGRAPHY & ATOMIC ORDER
   ================================================== */

/* 1. FORCE THE MOBILE DOCK (AND H1/H2 CARGO) TO THE TOP */
#jz-w02-text-mobile-dock {
  order: 1 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: var(--mob-w02-gap-sections) !important; /* Injects gap between headers and static line */
}

/* --- 🎯 DUAL SELECTOR: HEADING (ORDER 1 INSIDE DOCK) --- */
.jz-mob-w02-col-right .jz-dsktop-w02-tool-heading,
.jz-mob-w02-col-right .jz-dsktop-w02-hmpg-heading {
  order: 1 !important;
  font-family: var(--jzn-active-heading-font);
  color: var(--mob-heading-color);
  font-size: var(--jzn-size-h2) !important;
  font-weight: var(--jzn-font-weight-heading) !important;
  line-height: var(--mob-w02-lh-h1) !important; /* Wired to Brat Tweak */
  margin: 0 0 var(--mob-w02-gap-h1-h2) 0 !important; /* Wired to Brat Tweak */
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* --- 🎯 DUAL SELECTOR: SUBHEADING (ORDER 2 INSIDE DOCK) --- */
.jz-mob-w02-col-right .jz-dsktop-w02-tool-subheading,
.jz-mob-w02-col-right .jz-dsktop-w02-hmpg-subheading {
  order: 2 !important;
  font-family: var(--jzn-active-font);
  color: var(--mob-subtext-color);
  font-size: var(--jzn-size-text) !important;
  font-weight: var(--jzn-font-weight-body) !important;
  line-height: var(--mob-w02-lh-h2) !important; /* Wired to Brat Tweak */
  opacity: 0.8;
  margin: 0 !important;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* --- 🎯 DUAL SELECTOR: STATIC LINE (ORDER 2 OUTSIDE DOCK) --- */
.jz-mob-w02-col-right .jz-tool-universal-static-line,
.jz-mob-w02-col-right .jz-hmpg-universal-static-line {
  order: 2 !important; /* Forces it below the mobile dock */
  font-family: var(--jzn-active-font);
  color: var(--mob-w02-active-static-text) !important;
  font-size: var(--jzn-size-sub) !important;
  font-weight: var(--jzn-font-weight-sub) !important;
  line-height: var(--mob-w02-lh-static) !important; /* Wired to Brat Tweak */
  text-transform: uppercase;
  margin: 0 0 var(--mob-w02-gap-sections) 0 !important; /* Injects gap before pills */
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ==================================================
   SECTION 4: INDIVIDUAL PILLS (ORDER 3 OUTSIDE DOCK)
   ================================================== */
.jz-mob-w02-pills-row {
  order: 3 !important; /* Forces it to the very bottom */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
  z-index: 2;
  margin: 0 !important;
}

.jz-mob-w02-pill {
  position: relative;
  border-radius: 50px;
  padding: 2px;
  z-index: 1;
  display: inline-flex;
}

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

.jz-mob-w02-pill-inner {
  background: var(--jzn-container);
  border-radius: 50px;
  padding: 4px 10px;
  font-family: var(--jzn-active-font);
  font-size: var(--jzn-size-micro) !important;
  font-weight: var(--jzn-font-weight-sub);
  line-height: 1;
  color: var(--mob-text-color);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==================================================
   SECTION 5: LIGHT / DARK COLOR BRIDGE
   ================================================== */
body div.jz-mob-w02-layout-grid {
  --mob-w02-active-static-text: var(--mob-w02-static-text-dark);
}

html[data-palette='13'] div.jz-mob-w02-layout-grid,
html[data-palette='14'] div.jz-mob-w02-layout-grid,
html[data-palette='15'] div.jz-mob-w02-layout-grid,
html[data-palette='16'] div.jz-mob-w02-layout-grid,
html[data-palette='17'] div.jz-mob-w02-layout-grid,
html[data-palette='18'] div.jz-mob-w02-layout-grid {
  --mob-w02-active-static-text: var(--mob-w02-static-text-light);
}