/* ── index.css：トップページ専用のスタイル ── */
/* common.css の後に読み込むこと */


/* ── 1. 一番上：名前と顔写真 ── */
.hero {
  padding-top: var(--space-sm);
}

/* 顔写真を貼った紙 */
.hero__card {
  max-width: 340px;
  margin-inline: auto;
  text-align: center;
}

.hero__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background-color: #ddd7c9;
}

.hero__name {
  font-family: var(--font-serif);
  font-size: var(--font-2xl);
  line-height: 1.3;
  margin-top: var(--space-sm);
}

.hero__name-en {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-xs);
  letter-spacing: 0.2em;
  color: var(--text-sub);
  margin-top: 4px;
}

/* 名前の下の一言 */
.hero__catch {
  max-width: 340px;
  margin: var(--space-md) auto 0;
  font-size: var(--font-sm);
}


/* ── 2. 基本情報（名前・出身・居住地・誕生日） ── */
.profile-list__item {
  display: flex;
  gap: var(--space-sm);
  padding-block: 6px;
  /* 方眼紙のような薄い区切り線 */
  border-bottom: 1px dashed var(--paper-edge);
}

.profile-list__item:last-child {
  border-bottom: none;
}

.profile-list__label {
  flex: 0 0 84px;
  font-size: var(--font-sm);
  color: var(--text-sub);
}

.profile-list__value {
  font-size: var(--font-sm);
}


/* ── 3. 好きなこと / 最近興味があること ── */
/* ふせんを並べたような見た目にする */
.tag-list {
  display: flex;
  flex-wrap: wrap;                 /* 入りきらなければ折り返す */
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.tag {
  display: inline-block;
  padding: 3px 12px;
  font-size: var(--font-sm);
  background-color: #f2ede0;
  border: 1px solid var(--paper-edge);
}

/* 1つおきに少し傾けて、手で貼った感じを出す */
.tag:nth-child(odd)  { transform: rotate(-1.5deg); }
.tag:nth-child(even) { transform: rotate(1.5deg); }

/* 特に推しの項目（赤いふせん） */
.tag--pick {
  background-color: #f8ddd8;
  border-color: #eabfb8;
}


/* ── 4. 愛車紹介 ── */
.bike {
  display: grid;
  grid-template-columns: 1fr;      /* スマホは縦積み */
  gap: var(--space-sm);
}

.bike__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: #ddd7c9;
}

.bike__spec {
  margin-top: var(--space-xs);
}

.bike__spec-item {
  display: flex;
  gap: var(--space-xs);
  font-size: var(--font-sm);
  padding-block: 2px;
}

.bike__spec-label {
  flex: 0 0 72px;
  color: var(--text-sub);
}


/* ── 5. 各ページへの入口 ── */
.menu-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);            /* 紙が重ならないよう広めにとる */
}

.menu-card__photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background-color: #ddd7c9;
}

.menu-card__title {
  font-family: var(--font-serif);
  font-size: var(--font-lg);
  margin-top: var(--space-xs);
}

.menu-card__text {
  font-size: var(--font-sm);
  color: var(--text-sub);
  margin-bottom: var(--space-xs);
}


/* ── 6. 更新履歴 ── */
.news-list__item {
  display: flex;
  flex-direction: column;          /* スマホは日付の下に内容 */
  gap: 0;
  padding-block: 8px;
  border-bottom: 1px dashed var(--paper-edge);
}

.news-list__item:last-child {
  border-bottom: none;
}

.news-list__date {
  font-size: var(--font-xs);
  color: var(--text-sub);
}

.news-list__text {
  font-size: var(--font-sm);
}


/* ── 7. タブレット以上（768px〜） ── */
@media (min-width: 768px) {

  /* 愛車は写真と説明を横並びに */
  .bike {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: start;
  }

  /* 入口カードは2列 */
  .menu-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--space-md);
  }

  /* 更新履歴は日付と内容を横並びに */
  .news-list__item {
    flex-direction: row;
    gap: var(--space-md);
  }

  .news-list__date {
    flex: 0 0 90px;
  }
}


/* ── 8. PC（1024px〜） ── */
@media (min-width: 1024px) {
  /* 入口カードは3列 */
  .menu-list {
    grid-template-columns: repeat(3, 1fr);
  }
}