/* ============================================================
   Wantedly hiringeek サイドバー用メルマガ登録CTA - Figma準拠版
   ============================================================
   - 記事内CTA (article-mail-cta) とは別デザイン
   - サイドバー (340px幅) 専用、SPでもコンパクトデザインを維持
   - すべての子要素セレクタは .side-mail-cta 親に紐づけて
     詳細度を確保し、外部CSSの上書きを防止
   ============================================================ */

/* ---- 外枠 ---- */
.side-mail-cta {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 24px auto;
  padding: 25px;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  text-align: center;
  font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  background-color: #292929;
  background-image: url("../images/mailmagazine-bg-side.png"); /* ← 本番CDN URLに差し替え */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}

.side-mail-cta .side-mail-cta__inner {
  position: relative;
  z-index: 2;
}

/* ---- Eyebrow: グラデ青文字（背景クリップ） ---- */
.side-mail-cta .side-mail-cta__eyebrow {
  margin: 0 0 5px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  background: linear-gradient(174deg, #32BDD9 0%, #618FEB 101.5%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Title: 白文字 ----
   Wantedly child theme の `#sidebar h3` (color:#000 / font-size:16px)
   に詳細度で負けるため、ID付きセレクタを並列指定して打ち勝つ
   ((1,1,0) > (1,0,1)) */
.side-mail-cta .side-mail-cta__title,
#sidebar .side-mail-cta__title {
  margin: 0 0 13px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #fff;
}

/* ---- Input (フォーム) ---- */
.side-mail-cta .side-mail-cta__form {
  margin: 0;
}

.side-mail-cta .side-mail-cta__input {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  background: #fff;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: "Lato", "Hiragino Sans", sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.84);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.side-mail-cta .side-mail-cta__input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* ---- Button: 全幅 pill ---- */
.side-mail-cta .side-mail-cta__button {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  border: none;
  cursor: pointer;
  background: linear-gradient(173deg, #32BDD9 0%, #618FEB 100%);
  color: #fff;
  font-family: "Hiragino Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  padding: 6px 18px;
  border-radius: 100px;
  white-space: nowrap;
  transition: opacity 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.side-mail-cta .side-mail-cta__button:hover {
  opacity: 0.88;
}

/* ---- Policy: 白70% ---- */
.side-mail-cta .side-mail-cta__policy {
  margin: 10px 0 0;
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.7);
}

.side-mail-cta .side-mail-cta__policy a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}

.side-mail-cta .side-mail-cta__policy a:hover {
  opacity: 0.85;
}

/* ---- HubSpot送信結果メッセージ ---- */
.side-mail-cta .side-mail-cta__message {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  min-height: 1em;
  text-align: center;
  color: #fff;
}
.side-mail-cta .side-mail-cta__message:empty {
  margin: 0;
  min-height: 0;
}

/* ---- 狭幅対応：タイトル12文字「新着記事や実践ノウハウを」が
   1行に収まり切らずに崩れるのを段階的に防ぐ ---- */
@media (max-width: 320px) {
  .side-mail-cta .side-mail-cta__title {
    font-size: 22px;
  }
}

/* ============================================================
   PC ⇔ SP の表示切替
   - PC (>834px): #sidebar 内のみ表示、.entry-content 内のものは非表示
   - SP (≦834px): .entry-content 内のみ表示、#sidebar 内のものは非表示
   ============================================================ */
.entry-content .side-mail-cta {
  display: none;
}

@media (max-width: 834px) {
  #sidebar .side-mail-cta {
    display: none;
  }
  .entry-content .side-mail-cta {
    display: block;
  }
}

/* ============================================================
   SP専用CTA（メインカラム上に配置されるもの）
   - SP (≦834px): 表示
   - PC (≧835px): 非表示
   ============================================================ */
.side-mail-cta--sp-only {
  display: block;
}

@media (min-width: 835px) {
  .side-mail-cta--sp-only {
    display: none;
  }
}