/* スマホ・タブレット・狭いPC画面用の追加CSS。
   HTMLで styles.css の「後」に読み込んでください。
   画面幅1160pxを超える場合は何も変更しません。 */
@media (max-width: 1160px) {
  /* 自己紹介は文章→写真の縦並びにします。 */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding: 2rem 0;
    justify-items: center;
    align-items: start;
  }

  .hero-copy {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .hero .eyebrow {
    margin: 0 auto 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }

  .hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.2rem);
    line-height: 1.3;
  }

  .hero .name-en {
    margin-bottom: 1rem;
  }

  .hero .affiliation {
    padding-left: 0;
    border-left: 0;
    font-size: 0.9rem;
    line-height: 1.8;
  }

  /* absoluteを解除し、写真が名前に重ならないようにします。
     relativeは写真保護用の透明な層の基準にもなります。 */
  .hero .portrait-card {
    position: relative;
    inset: auto;
    margin: 0 auto;
    width: min(20rem, 100%);
    height: auto;
    min-height: 0;
    max-width: 100%;
    transform: none;
    border-radius: 1rem;
    box-sizing: border-box;
    justify-self: center;
  }

  /* HTMLのheight属性があっても、横:縦＝4:3にします。
     人物の切り抜き位置は元のobject-positionを引き継ぎます。 */
  .hero .portrait-card img {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  /* 枠内の余白と年月の幅を少し抑え、文章の幅を確保します。 */
  .panel {
    min-width: 0;
    padding: 1.2rem;
    overflow-wrap: anywhere;
  }

  .timeline li {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.7rem;
  }

  .timeline time {
    white-space: nowrap;
  }

  .presentation-item,
  .interest-list li {
    min-width: 0;
  }

  /* スライドショーの重ね合わせ・切り替えは変更しません。 */
  .interest-list li > * {
    min-width: 0;
  }
}