/**
 * Theme Name:  Sonaar Child Theme - Ultimate Creative Music WP Theme
 * Theme URI:   https://sonaar.io/
 * Description: Sonaar is a complete solution for everybody in the music industry.
 *
 * Author:      Sonaar
 * Author URI:  https://sonaar.io
 *
 * Version:     1.0
 * Template:    sonaar
 * Text Domain: sonaar-child
 *
 * License:     GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

/* =========================================================
   SONAAR / ESSENTIAL GRID – ARTIST TILE STYLE (FIXED)
   - Uses the REAL positioning parent: .esg-media-cover-wrapper
   - Keeps bar ALWAYS visible
   - True transparency + hover darken
   - Proper title/arrow alignment
   - Scoped to ONLY this grid instance: #esg-grid-55-1-wrap
   ========================================================= */

/* 1) Correct positioning context (entry-content is a sibling of entry-cover) */
#esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"] .esg-media-cover-wrapper{
  position: relative !important;
  overflow: hidden !important; /* ensures bar overlays image, not below */
}

/* 2) Always show the artist content block and overlay it at the bottom */
#esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]
.esg-entry-content.eg-sonaar-artists-content{
  display: flex !important; /* key: title + arrow side-by-side */
  align-items: stretch !important;

  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;

  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  z-index: 80 !important;

  /* prevent ESG hover rules from hiding it */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* 3) Make title portion fill remaining space */
#esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]
.esg-entry-content.eg-sonaar-artists-content .eg-sonaar-artists-element-12-a{
  flex: 1 1 auto !important;
}

/* 4) Make arrow portion fixed width on the right */
#esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]
.esg-entry-content.eg-sonaar-artists-content .eg-sonaar-artists-element-13-a{
  flex: 0 0 56px !important;
  justify-content: center !important;
}

/* 5) The two bar pieces (title + arrow) are the real “blue bar” */
#esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]
.esg-entry-content.eg-sonaar-artists-content .eg-sonaar-artists-element-12-a,
#esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]
.esg-entry-content.eg-sonaar-artists-content .eg-sonaar-artists-element-13-a{
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;

  display: flex !important;
  align-items: center !important;

  /* force visibility even on hover */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;

  /* TRUE transparency (base) */
  background: rgba(63,129,174,0.40) !important;

  transition: background 220ms ease, opacity 220ms ease !important;
}

/* Optional: blur only when supported (won't break Safari/older browsers) */
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  #esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]
  .esg-entry-content.eg-sonaar-artists-content .eg-sonaar-artists-element-12-a,
  #esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]
  .esg-entry-content.eg-sonaar-artists-content .eg-sonaar-artists-element-13-a{
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* Padding per side */
#esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]
.esg-entry-content.eg-sonaar-artists-content .eg-sonaar-artists-element-12-a{
  padding: 6px 10px 6px 12px !important;
  box-sizing: border-box !important;
}

#esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]
.esg-entry-content.eg-sonaar-artists-content .eg-sonaar-artists-element-13-a{
  padding: 6px 12px 6px 10px !important;
  box-sizing: border-box !important;
}

/* Hover: gently darken (and KEEP visible) */
#esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]:hover
.esg-entry-content.eg-sonaar-artists-content .eg-sonaar-artists-element-12-a,
#esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]:hover
.esg-entry-content.eg-sonaar-artists-content .eg-sonaar-artists-element-13-a{
  background: rgba(63,129,174,0.65) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Title container reset */
#esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]
.esg-entry-content.eg-sonaar-artists-content h2{
  margin: 0 !important;
}

/* Artist name link */
#esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]
.esg-entry-content.eg-sonaar-artists-content a.eg-sonaar-artists-element-12{
  display: block !important;
  font-size: 15px !important;
  line-height: 1.1 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  color: #fff !important;
}

/* Arrow icon */
#esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]
.esg-entry-content.eg-sonaar-artists-content i.eg-icon-right-big{
  transform: scale(0.85);
  transform-origin: center;
  transition: transform 220ms ease !important;
}

/* Arrow grows on hover */
#esg-grid-55-1-wrap .esg-grid li.tp-esg-item[data-skin="sonaar-artists"]:hover
.esg-entry-content.eg-sonaar-artists-content i.eg-icon-right-big{
  transform: scale(1.0);
}
/* Adjust the blue box height in the artist grid */
.sonaar-grid .artist-content,
.sonaar-grid .sr-grid-content,
.sr_it-grid .sr-grid-content {
    padding: 5px 5px !important;  /* Reduce padding to shrink the box */
    min-height: 30px !important;     /* Adjust minimum height */
}

/* If you want to change the background color too */
.sonaar-grid .artist-content,
.sonaar-grid .sr-grid-content,
.sr_it-grid .sr-grid-content {
    background-color: #4A90D9 !important; /* Change color if needed */
}

/* Adjust font size of artist name to match */
.sonaar-grid .sr-grid-title,
.sr_it-grid .sr-grid-title {
    font-size: 12px !important;
    line-height: 1.2 !important;
}
/* Nuclear option - targets all possible containers */
.entry-content,
.post-content,
.grid-item .content-wrapper,
[class*="artist"] [class*="content"],
[class*="grid"] [class*="content"] {
    padding: 5px !important;
    min-height: 0 !important;
    max-height: 40px !important;
}