/*
Theme Name: Kadence Child
Template: kadence
*/


body.single-mix {
    background: #161d2b;
}

body.single-mix .content-bg,
body.single-mix .site-content,
body.single-mix .site-main {
    background: #161d2b !important;
}


/* =========================
   Global Player
========================= */
#global-player {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: #111820 !important;
  z-index: 999999 !important;
  display: none;
}

#global-player iframe {
  display: block;
}

/* =========================
   Player Click Blocks
========================= */
#global-player .block-cover,
#global-player .block-top,
#global-player .block-top-right,
#global-player .block-bottom-right {
  position: absolute;
  z-index: 100000;
  background: transparent;
  pointer-events: auto;
}

/* Mixcloud: audio mode */
#global-player.audio-mode .block-cover {
  display: block !important;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
}

#global-player.audio-mode .block-top {
  display: block !important;
  top: 0;
  left: 165px;
  right: 220px;
  height: 50px;
}

#global-player.audio-mode .block-top-right {
  display: block !important;
  top: 0;
  right: 0;
  width: 180px;
  height: 50px;
}

#global-player.audio-mode .block-bottom-right {
  display: block !important;
  bottom: 0;
  right: 0;
  width: 120px;
  height: 55px;
}

/* Vimeo / YouTube: video mode */
#global-player.video-mode .block-cover {
  display: none !important;
}

#global-player.video-mode .block-top {
  display: block !important;
  top: 0;
  right: 0;
  left: auto;
  width: 190px;
  height: 70px;
}

#global-player.video-mode .block-top-right {
  display: none !important;
}

#global-player.video-mode .block-bottom-right {
  display: block !important;
  bottom: 0;
  right: 0;
  width: 42px;
  height: 42px;
}

/* =========================
   Link Reset
========================= */
.mix-card-play a,
.mix-card-play a:visited,
.mix-card-play a:hover,
.mix-card-play a:active,
.mix-title a,
.mix-title a:hover {
  color: inherit !important;
  text-decoration: none !important;
}

/* =========================
   Horizontal Scroll Layout
========================= */
.mix-row {
  margin-top: -10px !important;
  position: relative;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-top: 18px !important;
  padding-bottom: 16px !important;
}

.mix-row .kt-row-column-wrap {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  width: max-content !important;
  min-width: max-content !important;
  overflow: visible !important;
  padding-top: 0 !important;
  row-gap: 0 !important;
}

.mix-row .wp-block-kadence-column {
  flex: 0 0 220px !important;
  max-width: 220px !important;
  width: 220px !important;
}
/* =========================
   Section Title Margin
========================= */

.mix-section-title {
    padding-left: 20px;
    margin-bottom: 28px;
}

/* =========================
   Mix Row Spacing
========================= */

.mix-row {
    padding-left: 20px;
    padding-right: 20px;
}

/* =========================
   Mix Title Line Break
========================= */

.mix-title-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mix-title-line {
    display: block;
}

.mix-title-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mix-title-line {
    display: block;
}

/* =========================
   Card / Image Effects
========================= */
.mix-card-play {
  position: relative;
  transition: none;
  box-shadow: none !important;
  outline: none !important;
}

.mix-card-play:focus,
.mix-card-play:focus-visible,
.mix-card-play *:focus,
.mix-card-play *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.mix-card-play img {
  transition: transform 0.25s ease, filter 0.25s ease;
}


/* 通常ホバー */
.mix-card-play:hover img {
  transform: translateY(-4px) scale(1.03);
  filter: brightness(1.06);
}

/* 再生中：通常状態では拡大しない */
.mix-card-play.is-playing img {
  transform: none !important;
  filter: brightness(1.04);
}

/* 再生中でもホバー時は同じ動き */
.mix-card-play.is-playing:hover img {
  transform: translateY(-4px) scale(1.03) !important;
  filter: brightness(1.06) !important;
}


/* =========================
   Playing Badge
========================= */
.mix-card-play.is-playing::after {
  content: "PLAYING";
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: rgba(80,180,255,0.9);
  border-radius: 999px;
  z-index: 10;
  pointer-events: none;
}

/* =========================
   Audio Player Mode
========================= */
#global-player.audio-mode {
  height: 120px;
}

#global-player.audio-mode iframe {
  width: 100%;
  height: 120px;
}

/* =========================
   Video Player Mode
========================= */
#global-player.video-mode {
  width: 520px !important;
  height: 292px !important;
  left: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  background: #000 !important;
}

#global-player.video-mode iframe {
  width: 100%;
  height: 100%;
}

/* Smartphone */
@media (max-width: 768px) {
  #global-player.video-mode {
    width: calc(100% - 32px) !important;
    height: 56vw !important;
    right: 16px !important;
    bottom: 16px !important;
  }
}

/* =========================
   Shortcode Mix Row
========================= */
.mix-section {
  margin-top: 40px;
}

.mix-section-title {
  margin-bottom: 20px;
  color: #ffffff;
}

.mix-section > .mix-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.mix-section .mix-card-play {
  flex: 0 0 220px !important;
  width: 220px !important;
  max-width: 220px !important;
  cursor: pointer;
}

.mix-section .mix-thumb {
  width: 220px !important;
  height: 220px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mix-section .mix-thumb img {
  max-width: 220px !important;
  max-height: 220px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

.mix-section .mix-title {
  margin-top: 14px;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
}

.mix-read-more {
  display: inline-block;
  margin-top: 10px;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  opacity: 0.75;
}

.mix-read-more:hover {
  opacity: 1;
  text-decoration: none !important;
}

.mix-read-more {
  display: block;
  margin-top: 10px;
  text-align: center;
}

.mix-title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-height: 90px;
}

.mix-title-text {
  min-height: 10px;
}

.mix-read-more {
  display: block;
  margin-top: 6px;
}

/* =========================================
   Single Mix Page
========================================= */

.mix-single-container {
  max-width: 1400px;
  margin: 60px auto;
  padding: 0 40px;
}

.mix-single-top {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.mix-single-left {
  width: 420px;
  flex-shrink: 0;
}

.mix-single-cover img {
  width: 100%;
  display: block;
}

.mix-single-play {
  width: 100%;
  margin-top: 18px;
  padding: 16px;
  border: none;
  background: #ffffff;
  color: #111111;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
}

.mix-single-play:hover {
  opacity: 0.85;
}

.mix-meta {
  margin-top: 24px;
  line-height: 1.9;
  font-size: 15px;
  color: #cccccc;
}

.mix-single-right {
  flex: 1;
}

.mix-single-title {
  font-size: 48px;
  line-height: 1.2;
  margin-bottom: 40px;
}

.mix-single-content {
  font-size: 20px;
  line-height: 1.9;
}

.mix-single-content h2,
.mix-single-content h3 {
  margin-top: 50px;
  margin-bottom: 20px;
}

.mix-single-content ol {
  padding-left: 24px;
}

.mix-single-content li {
  margin-bottom: 10px;
}

.mix-credit {
    margin-top: 40px;
}

.mix-single-play {
    transition: all 0.2s ease;
}

.mix-single-play:hover {
    background: #6f7d91;
    color: #ffffff;
}

/* =========================
   Single Mix Typography
========================= */

.mix-single-title {
    font-size: 30px;
    line-height: 1.15;
}

.mix-description {
    font-size: 16px;
    line-height: 1.9;
}

.mix-tracklist {
    font-size: 16px;
    line-height: 1.9;
}

.mix-tracklist h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

.mix-credit {
    font-size: 16px;
    line-height: 1.9;
}

.mix-single-title span {
    display: block;
}

.mix-single-title .title-line-main {
    font-size: 38px;
    line-height: 1.05;
    font-weight: 800;
}

.mix-single-title .title-line-sub {
    font-size: 24px;
    line-height: 1.15;
    font-weight: 700;
	color: #a8adb7;
}

.mix-tracklist {
    margin-top: 20px;
}

.mix-tracklist h2 {
    margin-bottom: 8px !important;
}

.mix-tracklist p {
    margin-top: 0;
}


.mix-single-play,
.mix-single-play:focus,
.mix-single-play:active {
    background: #e7e7e7 !important;
    color: #111 !important;
}

.mix-single-play:hover {
    background: #6f7d91 !important;
    color: #fff !important;
}

.mix-single-play.is-playing {
    background: #6f7d91 !important;
    color: #ffffff !important;
}

.mix-single-left {
    position: relative;
}

.mix-single-play.is-playing::after {
    content: "PLAYING";
    position: absolute;

    top: 14px;
    left: 14px;

    padding: 6px 10px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;

    color: #ffffff;
    background: rgba(80,180,255,0.92);

    border-radius: 999px;

    z-index: 30;
    pointer-events: none;
}

/* =========================================
   Mobile
========================================= */

@media (max-width: 900px) {

  .mix-single-top {
    flex-direction: column;
  }

  .mix-single-left {
    width: 100%;
  }

  .mix-single-title {
    font-size: 28px;
  }

  .mix-single-content {
    font-size: 18px;
  }

}

/* =========================
   Mobile Mixcloud Blocks
========================= */

@media (max-width: 768px) {

  /* 左ジャケ写だけ塞ぐ */
  #global-player.audio-mode .block-cover {
    display: block !important;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
  }

  /* 再生ボタンは塞がず、タイトル/FOLLOW周辺だけ塞ぐ */
  #global-player.audio-mode .block-top {
    display: block !important;
    top: 18px;
    left: 165px;
    right: 0;
    height: 42px;
  }

  /* スマホでは不要 */
  #global-player.audio-mode .block-top-right {
    display: none !important;
  }

  /* スマホではシークバー優先 */
  #global-player.audio-mode .block-bottom-right {
    display: none !important;
  }

}