/* ============================================
   海凪 澪 official site — 下層ページ共通スタイル
   （profile / movie / live / contact）
   home.css（fx-bg / reveal / navlink / drawer /
   artist-menu-btn / live-item / field-input / sbtn）
   を前提に、ページ見出し・カード等を追加する。
   ============================================ */

.page-title {
  font-size: 88px;
}

/* ── Live 詳細ページ（live-data.js が生成するマークアップ） ── */
.live-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.live-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.detail-link {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #4A7FA5;
  text-decoration: none;
  border-bottom: 1px solid rgba(104, 196, 223, .5);
  white-space: nowrap;
  transition: color .25s, border-color .25s;
}
.detail-link:hover { color: #1A3A5C; border-color: #68c4df; }

/* ── SNSピル（Profile / Contact） ── */
.sns-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 50px;
  border: 1px solid rgba(140, 210, 235, .6);
  background: rgba(255, 255, 255, .34);
  color: #1A3A5C;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  letter-spacing: .14em;
  text-decoration: none;
  transition: all .25s;
}
.sns-pill:hover {
  background: rgba(255, 255, 255, .65);
  border-color: #68c4df;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(90, 160, 205, .2);
}

/* ── Movie: Latest スライダー（movie.html固有：横長比率 + ドット） ── */
/* 基本コンポーネント（.mv-slider等）は home.css で index.html と共有 */
.mv-slide { aspect-ratio: 21 / 8; }
.mv-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.mv-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(90, 140, 175, .3);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.mv-slider__dot.is-active {
  background: #4A7FA5;
  transform: scale(1.3);
}

/* ── Movie: アーカイブカード ── */
.mv-card { cursor: pointer; display: block; text-decoration: none; }
.mv-card .mv-ov { opacity: 0; transition: opacity .3s; }
.mv-card:hover .mv-ov { opacity: 1; }
.mv-card img { transition: transform 5s ease; }
.mv-card:hover img { transform: scale(1.06); }
.mv-card-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 15px;
  line-height: 1.6;
  color: #3f6d97;
  margin: 14px 0 4px;
  transition: color .25s;
}
.mv-card:hover .mv-card-title { color: #1A3A5C; }
.mv-card-date {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  letter-spacing: .08em;
  color: #7A909E;
  margin: 0;
}

/* レスポンシブ */
@media (max-width: 820px) {
  .page-title { font-size: 64px !important; }
  .pf-grid { grid-template-columns: 1fr !important; text-align: center; justify-items: center; }
  .pf-info { max-width: 520px; }
  .mv-slide { aspect-ratio: 4 / 3; }
  .mv-archive-grid { grid-template-columns: 1fr 1fr !important; }
  .ct-grid { grid-template-columns: 1fr !important; }
  .live-item-right { flex-direction: row; align-items: center; }
}
@media (max-width: 520px) {
  .mv-archive-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .page-title { font-size: 44px !important; }
}