/*
 * 旅先検索カード 共通スタイル（追加日: 2026-09-11）
 * 読み込み元: functions.php（is_post_type_archive('job') || is_page('about-furerutrip') で enqueue）
 * 対象マークアップ: templete/tmpjob-card.php
 * 「ふれるとりっぷとは」ページの既存 .ft-lcard 系デザインをベースに、
 * archive-job.php（PC/SP）でも使える独立クラス（.jc-*）として切り出したもの。
 * 削除すれば旧カードの見た目には影響しません（旧マークアップはコメントアウトで温存）。
 */

.jc-card {
  --jc-o: #d97d3d;
  --jc-o-dk: #b96632;
  --jc-o-bg: #f4ede2;
  --jc-g: var(--variable-collection-mughal-green, #27632a);
  --jc-g-dk: #1e4c21;
  --jc-g-bg: #e9f2e6;

  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e0dbd1;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(58, 68, 53, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
}
.jc-card * {
  box-sizing: border-box;
}
.jc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 55px rgba(58, 68, 53, 0.11);
}
.jc-card .jc-link {
  display: block;
  color: inherit;
  text-decoration: none !important;
}
/* 2026-09-12 修正: aspect-ratioを<img>ではなくラッパーに持たせる方式に変更（不具合1対応）。
   the_post_thumbnail()が出力するwidth/height属性由来の実寸とアスペクト比が競合し、
   一部環境で画像が縦長の枠に伸びて左右が切れる不具合があったため。
.jc-card .jc-media {
  position: relative;
}
.jc-card .jc-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #ede9e1;
  display: block;
}
*/
.jc-card .jc-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #ede9e1;
}
.jc-card .jc-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.jc-card .jc-body {
  padding: 24px;
}
/* 2026-09-12 修正（不具合3対応）: 固定px+vertical-alignの微調整をやめ、
   文字サイズに追従する1em指定に統一。vertical-alignはflexコンテナ内では無効なため削除。
.jc-card .jc-icn {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex: none;
  vertical-align: -2px;
  margin-right: 6px;
}
*/
.jc-card .jc-icn {
  display: block;
  width: 1em;
  height: 1em;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
  object-fit: contain; /* 料金行の<img>アイコン（raster）用。svgには影響なし */
}

/* ブランドタグ */
.jc-card .jc-tag {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.jc-card .jc-tag--furerutrip {
  background: var(--jc-o-bg);
  color: var(--jc-o-dk);
}
.jc-card .jc-tag--oshigotrip {
  background: var(--jc-g-bg);
  color: var(--jc-g-dk);
}

/* 旅先（都道府県＋市町村）。1行前提のため align-items:center で中央揃え（不具合3対応） */
.jc-card .jc-loc {
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.jc-card--furerutrip .jc-loc {
  color: var(--jc-o);
}
.jc-card--oshigotrip .jc-loc {
  color: var(--jc-g);
}

/* 2026-09-12 修正（修正1対応）: PC/SPで別サイズを指定するため font-size をここから外し、
   下の .pc/.sp 別ルールに分離。line-heightはfont-sizeに合わせて据え置き(1.6)。
.jc-card .jc-title {
  margin: 12px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: #29382b;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: calc(1.6em * 3);
}
*/
/* タイトル（3行クランプ）。font-sizeはPC/SPで異なるため個別指定（下記参照） */
.jc-card .jc-title {
  margin: 12px 0 0;
  font-weight: 700;
  line-height: 1.6;
  color: #29382b;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: calc(1.6em * 3);
}
/* 2026-09-12 修正: 14px/15px は縮小しすぎとのフィードバックのためPC/SPとも16pxに統一。
.pc .jc-card .jc-title {
  font-size: 14px;
}
.sp .jc-card .jc-title {
  font-size: 15px;
}
*/
.pc .jc-card .jc-title {
  font-size: 16px;
}
.sp .jc-card .jc-title {
  font-size: 16px;
}

/* 2026-09-12 修正（修正2対応）: 1行だった料金＋期間を「料金行」「期間行」の2行に分割。
   旧指定（.jc-meta 1行・区切り「｜」）はコメントアウトして温存。
.jc-card .jc-meta {
  margin: 16px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: #676b65;
}
.jc-card .jc-meta .jc-icn {
  margin-top: 3px;
}
*/
/* 料金行（¥アイコン）。テキストが長く2行に折り返す場合があるため align-items:flex-start とし、
   アイコンにmargin-topを付けて1行目の中央に揃える */
.jc-card .jc-fee {
  margin: 16px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: #676b65;
}
.jc-card .jc-fee .jc-icn {
  margin-top: 3px;
}
/* 2026-09-12 修正: 期間行を廃止したためコメントアウト（温存）。戻す場合はコメントを外す。
.jc-card .jc-period {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: #676b65;
}
*/

/* ハッシュタグ。期間行を廃止し直下が料金行になったため、
   旅先行→タイトル間（12px）と同程度の余白に調整（旧: 16px） */
.jc-card .jc-hashtags {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jc-card .jc-hashtag {
  display: inline-block;
  background: #f5f3ee;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: #596159;
}

/* 募集を見る リンク。矢印はインラインSVG（フォント由来のズレを避けるため文字「→」は使用しない） */
.jc-card .jc-cta {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.jc-card--furerutrip .jc-cta {
  color: var(--jc-o-dk);
}
.jc-card--oshigotrip .jc-cta {
  color: var(--jc-g-dk);
}

/* ===== 一覧グリッド（archive-job.php） =====
   PC 3カラム／SP 1カラム。既存の job-list/style.css にある可能性のある
   旧カード用レイアウト指定を確実に上書きするため !important を付与。 */
.pc .postcard-group {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px !important;
}
.sp .frame-3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
@media (max-width: 1023px) {
  .pc .postcard-group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}