/*
Component: YouTube Embed Templates
Used in: 5 service pages, About Us, blog posts
*/

/* ============================
   YouTube動画埋め込みテンプレート（ブログ記事用）
   ============================ */

/* 共通: YouTube動画埋め込み */
.qc-yt-embed{
  margin: 32px auto;
  max-width: 800px;
}

.qc-yt-embed__frame{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #0a1532;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .08), 0 12px 32px rgba(29, 67, 130, .1);
}

.qc-yt-embed__frame iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.qc-yt-embed__caption{
  margin-top: 12px;
  font-size: 13px;
  color: #64748b;
  text-align: center;
  line-height: 1.6;
}

/* バリエーション1: シンプル（caption付き、影あり） */
/* デフォルトの .qc-yt-embed そのまま */

/* バリエーション2: グロー付き（CEOメッセージのような目を引く演出） */
.qc-yt-embed--glow .qc-yt-embed__frame{
  position: relative;
}
.qc-yt-embed--glow .qc-yt-embed__frame::before{
  content: '';
  position: absolute;
  inset: -12px;
  background: linear-gradient(135deg, rgba(29, 67, 130, .15), rgba(96, 165, 250, .1));
  border-radius: 20px;
  filter: blur(20px);
  opacity: .5;
  z-index: -1;
}

/* バリエーション3: ラベル付き（「動画解説」「インタビュー」など） */
.qc-yt-embed--labeled{
  position: relative;
  padding: 8px;
  background: linear-gradient(135deg, rgba(29, 67, 130, .04), rgba(96, 165, 250, .04));
  border-radius: 16px;
}
.qc-yt-embed--labeled .qc-yt-embed__label{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3em;
  color: #1D4382;
  text-transform: uppercase;
  margin: 8px 8px 12px;
  padding: 4px 12px;
  background: #ffffff;
  border-radius: 999px;
  border: 1px solid rgba(29, 67, 130, .15);
}
.qc-yt-embed--labeled .qc-yt-embed__frame{
  border-radius: 10px;
}

/* バリエーション4: 横並び型（PCで動画+説明を横配置） */
.qc-yt-embed--side{
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: center;
}
.qc-yt-embed--side .qc-yt-embed__content{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qc-yt-embed--side .qc-yt-embed__title{
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.5;
  margin: 0;
}
.qc-yt-embed--side .qc-yt-embed__desc{
  font-size: 14px;
  color: #475569;
  line-height: 1.8;
  margin: 0;
}
.qc-yt-embed--side .qc-yt-embed__channel-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1D4382;
  text-decoration: none;
  transition: color .2s ease;
}
.qc-yt-embed--side .qc-yt-embed__channel-link:hover{
  color: #2d5aa0;
}
.qc-yt-embed--side .qc-yt-embed__channel-link::after{
  content: '→';
  transition: transform .2s ease;
}
.qc-yt-embed--side .qc-yt-embed__channel-link:hover::after{
  transform: translateX(3px);
}

/* レスポンシブ */
@media (max-width: 767px){
  .qc-yt-embed{
    margin: 24px auto;
  }
  .qc-yt-embed--side{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .qc-yt-embed--side .qc-yt-embed__title{
    font-size: 17px;
  }
}