/* assets/css/bmg-shortcode-now-next.css */

/* Only when our schedule is present */
#wp--skip-link--target > div > div:has(.bmg-now-next-grid) {
  padding: 5px !important;
}

/* Grid container: 3 columns: Channel logo | Now | Next */
.bmg-now-next-grid {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  column-gap: 0.5em;
  row-gap: 0.5em;
  align-items: stretch;
  background-color: black;
  padding: 5px;
  border-radius: 5px;
}

/* Header cells */
.bmg-cell.bmg-header {
  font-weight: bold;
  padding: 0.5em;
  border: 1px solid white;
  border-radius: 5px;
  color: #eee;
  text-align: center;
  /* ensure header rows don’t get forced tall */
  min-height: auto;
}

/* Channel column */
.bmg-cell.bmg-channel-col {
  background: #444;
  padding: 0.5em;
  border: 1px solid white;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bmg-channel-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Programme columns (without height) */
.bmg-cell.bmg-now-col,
.bmg-cell.bmg-next-col {
  background: #333;
  color: #fff;
  border: 1px solid white;
  border-radius: 5px;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Force uniform height only on actual programme rows */
.bmg-cell.bmg-now-col:not(.bmg-header),
.bmg-cell.bmg-next-col:not(.bmg-header) {
  min-height: 150px;
}

/* Each programme block: two-column flex (image/text) and full height */
.bmg-cell .bmg-prog {
  display: flex;
  align-items: stretch;
  height: 100%;
  padding: 0.5em;
  align-items: center;
}

/* Thumbnail on the left, centered vertically/horizontally */
.bmg-thumb-container {
  flex: 0 0 100px;
  width: 100px;
  margin-right: 1em;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bmg-thumb-container .bmg-thumb-placeholder,
.bmg-thumb-container .bmg-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Placeholder pulsing */
.bmg-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: #222;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  animation: bmg-pulse 1.5s ease-in-out infinite;
}

@keyframes bmg-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Text on the right */
.bmg-text {
  flex: 1 1 auto;
}

/* Truncate long titles to three lines */
.bmg-title {
  font-weight: bold;
  margin: 0 0 0.2em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Time styling */
.bmg-time {
  font-size: 0.875em;
  margin: 0 0 0.5em;
}

/* Fallback thumbnail (channel logo) */
.bmg-thumb--fallback {
  opacity: 0.3;
  filter: grayscale(100%);
}

/* Tooltip container */
.bmg-tooltip {
  position: absolute;
  top: 27px;
  left: 29%;
  width: 300px;
  background: rgba(0, 0, 0, 1);
  color: #fff;
  padding: 0.5em;
  border-radius: 4px;
  border: 1px solid #fff;
  z-index: 10;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
  pointer-events: none;

  /* Lifted off the page */
  box-shadow: 0 6px 16px rgba(177, 177, 177, 0.4);
}
.bmg-prog:hover .bmg-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.bmg-nownext-label {
    display:none;
}


/* Responsive: stack on narrow screens */
@media screen and (max-width: 600px) {

  .bmg-now-next-grid {
    grid-template-columns: 1fr;
  }

   .bmg-now-next-grid .bmg-header {
    display:none;
  }

  .bmg-now-next-grid .bmg-cell {
    padding: 0.1em;
  }
  .bmg-now-next-grid .bmg-prog {
    padding: 0;
  }

  .bmg-nownext-label {
    display:block;
  }

  .bmg-thumb-container {
    width: 60px;
  }



  .bmg-tooltip {
    left: 0;
    top: 70%;
  }
  /* Constrain channel icons to a fixed size on mobile */
  .bmg-cell.bmg-channel-col .bmg-channel-logo {
    width: 80px;
    height: auto;
    max-width: none;
    max-height: none;
  }
}