/* =====================================================================
   TGL — lgenx-lyrics Mobile Padding Optimization
   Version: 1.0
   Date: September 17, 2026
   Purpose: Optimize left/right padding for .lgenx-lyrics on mobile/tablet
   for better readability while maintaining desktop experience
   
   Note: This file ONLY affects .lgenx-lyrics padding. 
   No changes to ads, layout, or other elements.
   ===================================================================== */

/* =====================================================================
   DESKTOP (>= 1024px) — Keep existing behavior
   Nothing changes on desktop — lyrics already have good spacing
   ===================================================================== */
@media (min-width: 1024px) {
  .lgenx-lyrics {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =====================================================================
   TABLET (769px - 1023px) — Optimize for tablet reading
   Improve horizontal spacing for better readability on medium screens
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1023px) {
  .lgenx-lyrics {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
}

/* =====================================================================
   MOBILE LANDSCAPE (481px - 768px) — Balanced spacing
   Comfortable reading distance while preserving line width for lyrics
   ===================================================================== */
@media (min-width: 481px) and (max-width: 768px) {
  .lgenx-lyrics {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* =====================================================================
   MOBILE PORTRAIT (320px - 480px) — Optimized for mobile
   Best balance: enough breathing room without losing readability
   Lyrics are the primary focus on mobile, so padding is generous
   ===================================================================== */
@media (max-width: 480px) {
  .lgenx-lyrics {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }
}

/* =====================================================================
   SMALL PHONES (320px - 360px) — Extra-tight but readable
   Narrowest devices still get comfortable margins without cramping
   ===================================================================== */
@media (max-width: 360px) {
  .lgenx-lyrics {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
}

/* =====================================================================
   TEXT INSIDE LYRICS — Inherit from parent, no double-padding
   Prevents compound padding issues
   ===================================================================== */
.lgenx-lyrics p,
.lgenx-lyrics br,
.lgenx-lyrics span {
  padding-left: inherit !important;
  padding-right: inherit !important;
}

/* =====================================================================
   SAFETY RULES — Prevent conflicts
   Keep lyrics readable and prevent any layout shifts
   ===================================================================== */
.lgenx-lyrics {
  overflow-x: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* =====================================================================
   ADS INTERACTION — Preserve ad safety
   Do NOT modify ads behavior or positioning
   This only affects lyric text padding, not ad zones
   ===================================================================== */
/* No ad rules here — ads.css handles all ad positioning */
/* This file is completely separate from ad layout */

/* =====================================================================
   NOTES FOR MAINTENANCE
   
   1. This file loaded LAST in the cascade (see functions.php)
   2. It ONLY targets .lgenx-lyrics element
   3. No other elements are affected
   4. Can be disabled by removing from functions.php
   5. Safe to modify values without breaking ads
   6. Mobile-first approach: smallest first, then up
   
   Breakpoints used:
   - Small phones: <= 360px
   - Mobile portrait: 360px - 480px
   - Mobile landscape: 481px - 768px
   - Tablet: 769px - 1023px
   - Desktop: >= 1024px
   ===================================================================== */