/* ============================================================
   精密審美会 採用サイト — 就職活動中の皆様へ（メッセージ一覧）
   Figma: 就職活動中の皆様へ-PC (87:158) / SP (87:260)
   ============================================================ */

/* --- MVオーバーライド ---
   secondary-mv共通を使用。ロゴサイズ・重なりのみ個別指定
   Figma: 135:879 Message 2 (363×78)
   ======================================= */
.secondary-mv--message .secondary-mv__title-logo {
  max-width: 363px;
  margin-bottom: -41px; /* Figma: logo bottom y=-14, text top y=-55 → overlap 41px */
}


/* --- キャッチコピー ---
   Figma: 87:161 fs=32, fw=400, ls=2.56, lh=52, fill=#1556A6
   ======================================= */
.message-catch {
  padding: 80px 0 40px;
}

.message-catch__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.message-catch__text {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 2.56px;
  line-height: 52px;
  color: #1556A6;
}


/* --- フィルターバー ---
   Figma: 87:398 (1000×70, bg=#EEF8FF)
          87:403 "勤務医院で絞り込む" fs=16, #333
          87:399 Component 2 (21×21 ドロップダウン)
   ======================================= */
.message-filter {
  padding-bottom: 40px;
}

.message-filter__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.message-filter__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #EEF8FF;
  height: 70px;
  padding: 0 24px;
  border-radius: 4px;
}

.message-filter__label {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  color: #333;
  cursor: default;
}

.message-filter__select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.message-filter__select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  padding: 8px 36px 8px 12px;
  cursor: pointer;
  min-width: 200px;
  outline: none;
}

.message-filter__arrow {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
}


/* --- カードグリッド ---
   Figma: 122:528 Frame 95 (1000×1051)
   PC: 3列、各カード ~323×310、gap=15
   ======================================= */
.message-cards {
  padding-bottom: 60px;
}

.message-cards__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.message-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 16px;
}

/* --- 個別カード ---
   Figma: INSTANCE Component 7 (323×310, bg=#FFF)
   上: Mask group (323×156) — 写真
   下: Frame 59 (323×154, bg=#EAF0F4)
   ======================================= */
.message-card {
  display: block;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 2px solid transparent;
  transition: border-color var(--transition-base);
}

.message-card:hover {
  border-color: #32A9E1;
}

/* ホバー時: 氏名テキスト色変更 */
.message-card:hover .message-card__name {
  color: #32A9E1;
}

/* 非表示カード（フィルタ適用時） */
.message-card[style*="display: none"] {
  margin: 0;
}

/* 写真エリア — 上半分 */
.message-card__photo {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 48.3%; /* 156/323 ≈ 48.3% */
  overflow: hidden;
  background: #D9D9D9;
}

.message-card__photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 情報エリア — 下半分 */
/* Figma: Frame 59, bg=#EAF0F4 */
.message-card__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 24px;
  background: #EAF0F4;
}

/* 大学名バッジ
   Figma: Rectangle 59 (255×30, radius=30, bg=#1556A6)
          TEXT: fs=14, fw=700, fill=white */
.message-card__univ {
  display: inline-block;
  background: #1556A6;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.12px;
  line-height: 1;
  padding: 7px 32px;
  border-radius: 30px;
  margin-bottom: 12px;
}

/* 肩書
   Figma: fs=14, fw=400, ls=1.12, fill=#333 */
.message-card__title {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.12px;
  line-height: 19px;
  color: #333;
  margin-bottom: 4px;
}

/* 氏名
   Figma: fs=20, fw=400, ls=1.6, fill=#333 */
.message-card__name {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1.6px;
  line-height: 27px;
  color: #333;
}




/* ============================================================
   SP レスポンシブ — 430px基準
   Figma: 就職活動中の皆様へ-SP (87:260)
   ============================================================ */
@media (max-width: 768px) {

  /* MV ロゴ */
  .secondary-mv--message .secondary-mv__title-logo {
    max-width: 214px;
  }

  /* キャッチ
     Figma SP: fs=25, lh=40, 3行改行 */
  .message-catch {
    padding: 50px 0 24px;
  }

  .message-catch__text {
    font-size: clamp(20px, 5.8vw, 25px); /* 430px→24.9px, 360px→20.9px */
    letter-spacing: 2.0px;
    line-height: 40px;
  }

  /* フィルター */
  .message-filter__bar {
    height: auto;
    min-height: 55px;
    padding: 12px 16px;
  }

  .message-filter__label {
    font-size: clamp(12px, 3.5vw, 14px); /* 430px→14px, 360px→12.6px */
    letter-spacing: 1.12px;
    white-space: nowrap;
  }

  .message-filter__select {
    min-width: 120px;
    font-size: 13px;
  }

  /* カードグリッド — 1列
     Figma SP: 各カード ~386×370 */
  .message-cards__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 22px;
  }

  /* 写真エリア高さ調整
     SP: 186/386 ≈ 48.2% — PCとほぼ同じ比率 */
  .message-card__photo {
    padding-bottom: 48.2%;
  }

  /* 情報エリア */
  .message-card__info {
    padding: 18px 16px 22px;
  }

  .message-card__univ {
    font-size: 16px;
    padding: 8px 36px;
  }

  .message-card__title {
    font-size: 16px;
  }

  .message-card__name {
    font-size: 23px;
    letter-spacing: 1.88px;
  }

}