/* References

   1. Responsive Design & Media Queries:
      - W3Schools: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
      - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
      - CSS-Tricks: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

   2. Flexbox Layout (horizontal & vertical stacking):
      - W3Schools: https://www.w3schools.com/css/css3_flexbox.asp
      - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
      - CSS-Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

   3. Text Wrapping & Word Breaks:
      - W3Schools: https://www.w3schools.com/css/css_text.asp
      - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
      - CSS-Tricks: https://css-tricks.com/almanac/properties/w/white-space/
      - CSS-Tricks: https://css-tricks.com/almanac/properties/w/word-break/

   4. Dark Mode Styling:
      - W3Schools: https://www.w3schools.com/howto/howto_css_dark_mode.asp
      - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
      - CSS-Tricks: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/

   5. Inline Block & Minimum Width (channel names):
      - W3Schools: https://www.w3schools.com/css/css_inline-block.asp
      - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/display
      - CSS-Tricks: https://css-tricks.com/almanac/properties/d/display/
*/

.heading3 {
  font-weight: bold;
}

.channel-column {
  background-color: #ffd95c;
}

/* Hide Now & Next under 500px */
@media (max-width: 500px) {
  .mini-epg {
    display: none !important;
  }
}

/* Wrap Now/Next text instead of truncating */
.mini-epg div {
  white-space: normal;
  /* allow wrapping */
  overflow-wrap: break-word;
  /* break long words if needed */
  word-break: break-word;
  /* ensure wrapping even for long strings */
  max-width: 100%;
  margin-bottom: 2px;
  /* optional spacing between lines */
}

/* Make Now & Next text white in dark mode */
body.dark-mode .mini-epg {
  color: #e6e6e6 !important;
}

/* Optional: widen channel name area to avoid overlap */
.channel-name {
  min-width: 180px;
  display: inline-block;
}

/* Center all category headings */
.channel-category h3 {
  text-align: center;
}

/* Channels side-by-side by default */
.channels-container {
  display: flex;
  gap: 20px;
  /* spacing between columns */
}

/* Make it stack vertically when window is ≤ 952px */
@media (max-width: 952px) {
  .channels-container {
    flex-direction: column;
  }

  .channel-column {
    width: 100%;
    /* full width for each column */
  }
}