/* ==========================================================================
   UNIFIED HIGH-TECH SECTION-SUBTITLE MULTI-SCREEN ARCHITECTURE
   ========================================================================== */

/* 1. CORE LARGE DESKTOP SPECIFICATION (> 1200px) */
.section-subtitle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 14px !important;
  padding: 8px 16px !important;
  
  /* High-Tech Monospace Typography */
  font-family: var(--font-tech) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--ice-white) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  line-height: 1.5 !important;
  
  /* Cyberpunk Translucent Glass Engine */
  background: rgba(3, 8, 20, 0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--neon-cyan-border) !important;
  border-radius: 6px !important;
  box-shadow: 
    inset 0 0 14px rgba(0, 255, 204, 0.05),
    0 6px 24px rgba(0, 0, 0, 0.55) !important;
  
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Base Terminal Log Prepend Block */
.section-subtitle::before {
  content: '▼ TELEMETRY LOG' !important;
  flex-shrink: 0 !important; /* Prevents text compression on squish points */
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  color: var(--neon-cyan) !important;
  letter-spacing: 0.08em !important;
  padding: 3px 10px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--neon-cyan-border) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 8px var(--neon-cyan-glow) !important;
}

/* Ambient Radial Background Aura Layer */
.section-subtitle::after {
  content: '' !important;
  position: absolute !important;
  top: -8px !important;
  left: -8px !important;
  right: -8px !important;
  bottom: -8px !important;
  z-index: -1 !important;
  background: radial-gradient(circle, var(--neon-cyan-glow) 0%, transparent 75%) !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
}

/* Interactive Hover Feedback Loop */
.section-header:hover .section-subtitle {
  border-color: var(--neon-cyan-border-active) !important;
  box-shadow: 
    inset 0 0 18px rgba(0, 255, 204, 0.12),
    0 0 20px var(--neon-cyan-glow) !important;
  color: #ffffff !important;
}


/* ==========================================================================
   2. MIDDLE VIEWPORT ADAPTATION ENGINE (768px to 1200px)
   ========================================================================== */
@media (max-width: 1200px) and (min-width: 768px) {
  .section-subtitle {
    display: inline-flex !important; /* Forces layout to remain beautifully horizontal */
    width: auto !important;           /* Prevents unnecessary full-width breaking */
    max-width: 100% !important;
    gap: 10px !important;            /* Compresses gaps tight to save real estate */
    padding: 6px 12px !important;     /* Reduces vertical footprint density */
    font-size: 0.74rem !important;    /* Clean intermediate type scaling */
    letter-spacing: 0.12em !important;
  }

  .section-subtitle::before {
    font-size: 0.68rem !important;
    padding: 2px 8px !important;
  }

  .section-subtitle::after {
    top: -4px !important;
    left: -4px !important;
    opacity: 0.35 !important; /* Lowers bloom slightly to maintain UI sharpness */
  }
}


/* ==========================================================================
   3. MOBILE SCREEN COMPACTION TARGET (< 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .section-subtitle {
    display: flex !important;
    flex-direction: column !important; /* Stacks layout to clear narrow columns */
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
  }

  /* Horizontal Telemetry Drawer Block Strategy for Mobile */
  .section-subtitle::before {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  
  /* Suppresses wide clipping ambient layout glow lines on tight viewports */
  .section-subtitle::after {
    top: 0 !important;
    left: 0 !important;
    opacity: 0.2 !important;
  }
}