/* =========================
   HML Cast Staff
   追加CSSから上書きしやすいように、色/サイズは変数寄り
   ========================= */
:root{
  --hml-cast-text: #111;
  --hml-cast-subtext: #666;
  --hml-cast-border: #e7e7e7;
  --hml-cast-card-radius: 14px;
  --hml-cast-gap: 14px;
  --hml-cast-name-size: 16px;
  --hml-cast-sub-size: 13px;
  --hml-cast-btn-bg: #111;
  --hml-cast-btn-text: #fff;
  /* watermark */
  --hml-cast-wm-text: "";
  --hml-cast-wm-size: 14px;
}

/* ===== List ===== */
.hml-cast-list{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hml-cast-gap);
}
@media (max-width: 1024px){
  .hml-cast-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .hml-cast-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hml-cast-card{
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--hml-cast-border);
  border-radius: var(--hml-cast-card-radius);
  overflow: hidden;
  background: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
}
.hml-cast-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.07);
}

.hml-cast-photo{
  position: relative;
  aspect-ratio: 4 / 5;
  background: #f6f6f6;
}
.hml-cast-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hml-cast-photo-placeholder{
  width: 100%;
  height: 100%;
}

.hml-cast-meta{
  padding: 10px 12px 12px;
  text-align: center;
}
.hml-cast-name{
  font-size: var(--hml-cast-name-size);
  font-weight: 700;
  color: var(--hml-cast-text);
  line-height: 1.25;
}
.hml-cast-furigana,
.hml-cast-age{
  font-size: var(--hml-cast-sub-size);
  color: var(--hml-cast-subtext);
  margin-top: 4px;
  line-height: 1.3;
}

/* ===== Watermark overlay (CSS) ===== */
.hml-cast-wm::after{
  content: var(--hml-cast-wm-text);
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: var(--hml-cast-wm-size);
  font-weight: 800;
  letter-spacing: .06em;
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.55);
  color: rgba(0,0,0,.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  display: none; /* textが空ならJSで非表示維持 */
}
.hml-cast-wm.hml-cast-wm-on::after{ display: block; }

/* ===== Detail ===== */
.hml-cast-detail{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 12px 40px;
  color: var(--hml-cast-text);
}
.hml-cast-hero{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 767px){
  .hml-cast-hero{ grid-template-columns: 1fr; }
}

.hml-cast-hero-photo{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #f6f6f6;
  aspect-ratio: 4 / 5;
}
.hml-cast-hero-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hml-cast-hero-name{
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.2;
}

.hml-cast-kv{
  margin: 0;
  padding: 0;
}
.hml-cast-kv-row{
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hml-cast-border);
}
.hml-cast-kv-row dt{
  color: var(--hml-cast-subtext);
  font-size: 13px;
}
.hml-cast-kv-row dd{
  margin: 0;
  font-size: 15px;
}

.hml-cast-body{
  margin-top: 18px;
}
.hml-cast-section{
  margin-top: 18px;
}
.hml-cast-section h2{
  margin: 0 0 10px;
  font-size: 18px;
}
.hml-cast-profile{
  border: 1px solid var(--hml-cast-border);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

/* Gallery (square thumbs) */
.hml-cast-gallery{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1024px){
  .hml-cast-gallery{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .hml-cast-gallery{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hml-cast-thumb{
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
}
.hml-cast-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CTA button */
.hml-cast-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--hml-cast-btn-bg);
  color: var(--hml-cast-btn-text);
  text-decoration: none;
  font-weight: 700;
}

/* Lightbox */
.hml-cast-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 20px;
}
.hml-cast-lightbox.is-open{ display: flex; }
.hml-cast-lightbox-inner{
  max-width: min(980px, 100%);
  max-height: min(90vh, 100%);
  position: relative;
}
.hml-cast-lightbox-img{
  max-width: 100%;
  max-height: 90vh;
  border-radius: 16px;
  display: block;
}
.hml-cast-lightbox-close{
  position: absolute;
  top: -10px;
  right: -10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
}

/* ==================================================
   Patch: List thumbnail center-crop (keep existing design)
   - テーマ/Elementor側の img { height:auto !important; } 等に負けないよう最優先で固定
   - 上下左右センター起点でトリミング（object-position: 50% 50%）
   ================================================== */
html body .hml-cast-list .hml-cast-photo{
  overflow: hidden;
}

html body .hml-cast-list .hml-cast-photo > img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important; /* 上下左右センター */
  display: block !important;
}


/* ==================================================
   Patch: discourage image saving (no right-click/drag)
   - 100%防止は不可能ですが、操作を抑止します
   ================================================== */
html body .hml-cast-detail img,
html body .hml-cast-list img,
html body .hml-cast-lightbox img{
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ==================================================
   Patch: キャスト詳細ページの「日付（投稿メタ）」を非表示
   - Hello Elementor 側で表示される投稿日（左上）を想定
   - 対象カテゴリー（cast）投稿のみ影響
   ================================================== */
body.hml-cast-staff-single .entry-meta,
body.hml-cast-staff-single .entry-header .entry-meta,
body.hml-cast-staff-single .posted-on,
body.hml-cast-staff-single .entry-date,
body.hml-cast-staff-single time.entry-date,
body.hml-cast-staff-single .post-meta{
  display: none !important;
}

body.hml-cast-staff-single .elementor-post-info,
body.hml-cast-staff-single .elementor-post-info__item,
body.hml-cast-staff-single .elementor-post-info__item--type-date,
body.hml-cast-staff-single .elementor-post-info__item--type-time,
body.hml-cast-staff-single .elementor-post-info__item--type-modified,
body.hml-cast-staff-single .elementor-post-info__item--type-custom,
body.hml-cast-staff-single time.published,
body.hml-cast-staff-single time.updated,
body.hml-cast-staff-single .entry-date.published,
body.hml-cast-staff-single .entry-date.updated,
body.hml-cast-staff-single .published,
body.hml-cast-staff-single .updated,
body.hml-cast-staff-single .elementor-post-info__terms-list,
body.hml-cast-staff-single .elementor-widget-post-info,
body.hml-cast-staff-single .elementor-widget-theme-post-info,
body.hml-cast-staff-single .elementor-widget-theme-post-title + .elementor-widget-post-info{
  display: none !important;
}