/* ★ここだけ min-width(「〇〇px以上のとき」)。
     他は max-width(狭いとき)なので、条件の向きが逆になっている。

   Skills:6列×2行 → 12列×1行。PCで全画面表示にしたときだけ横一列に並べる。

   ▼ ★1536px という数字の出どころ

     12列の合計幅 = 72px × 12 + 横の隙間 × 11
     隙間を 1.75rem(28px) にすると 864 + 308 = 1172px 必要。
     #skills の左右padding(10%)を引いた表示領域は 画面幅 × 0.8 なので、
     1536px なら 1228px 使えて収まる(1920pxを125%表示にした幅がこれ)。

     ★隙間を広げるとこの計算が変わる。
       広げるなら、入りきる画面幅も一緒に上げること。
       はみ出すと justify-content: center のせいで左側が画面外に出てしまう。 */
@media (min-width: 1536px) {
    .skills-grid {
        grid-template-columns: repeat(12, 72px);
        gap: 1.75rem;
    }

    /* Products:2列×2行のまま、1枚を大きくする。

       ★4列×1行にしないこと。
         横1行に4枚並べるとカード幅が326pxまで痩せ、
         画像(ロゴ)が小さくて何か分からなくなる。
         広い画面では列を増やさず、1枚を大きくするほうを選ぶ。

       ★1200px で止めているのは、ウルトラワイドで
         際限なく間延びさせないため。

         カード幅  584px … max-width 1200px から
                           横の隙間 2rem(32px) を引いて2等分
         584 × 5 / 16 = 182px  ← 基準(136px)の約1.3倍 */
    .products-grid {
        max-width: 1200px;
    }
}

@media screen and (max-width: 1200px) {

    #hamburger-nav {
        display: flex;
    }

    #experience {
        margin-top: 2rem;
    }

    section {
        height: fit-content;
        margin: 0;
    }

    #welcome {
        margin: 0;
    }
}

@keyframes scroll-line{
    0%{
        transform: scaleY(0);
        transform-origin: top;
    }

    50%{
        transform: scaleY(1);
        transform-origin: top;
    }

    51%{
        transform-origin: bottom;
    }

    100%{
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

/* ★6列のままだと画面からはみ出す幅を塞ぐための中間指定

   6列の合計幅 = 72px × 6 + 横の隙間 × 5
   横の隙間が 2.5rem(40px) のとき 632px 必要だが、
   #skills の左右padding(10%)を引いた表示領域は 画面幅 × 0.8 しかない。
   つまり画面幅が 790px を下回ると入りきらない。
   下の 768px の指定が効き始めるまでの間、横の隙間だけ詰めて6列を保つ。

   ★はみ出すと justify-content: center のせいで左側が画面外に出て
     戻せなくなるので、ただの見た目の問題では済まない。 */
@media (max-width: 900px) {
    .skills-grid {
        gap: 1.75rem 3.5rem;
    }
}

@media (max-width: 768px) {
    #welcome {
        background-attachment: scroll;
    }

    /* ▼ Welcome の見出し
       ★4rem のままだと「Welcome to My Portfolio!」がスマホ幅で必ず折り返す。

         clamp(最小, 画面幅に連動, 最大)

         真ん中を vw(画面幅の割合)にすると、画面が狭いほど字も小さくなるので、
         幅が変わっても1行の長さがだいたい一定に保たれる。

       ★6.4vw の出どころ
         この文は24文字。この書体だと1文字あたり約0.55em なので、
         必要な横幅は文字サイズの約13倍。
           390px の端末 … 6.4vw = 25px → 25 × 13 = 325px(画面内に収まる)
           320px の端末 … 6.4vw = 20px → 20 × 13 = 266px(同上)
         ★文言を長くするときはこの数字も下げること。上げると折り返す。

       ★上限 2.6rem は、768px 付近で間延びさせないための頭打ち。 */
    .hero h1 {
        font-size: clamp(1.5rem, 6.4vw, 2.6rem);

        /* 上の計算どおりなら折り返さないが、念のため1行に固定する。 */
        white-space: nowrap;
    }

    .hero p {
        font-size: clamp(1.15rem, 4vw, 1.6rem);
    }

    /* ▼ ハンバーガーメニュー
       ★320px 固定だと、幅390pxのスマホでは画面の8割を覆ってしまう。
         画面幅に対する割合で決めて、後ろのページが見える余地を残す。 */
    .menu-links {
        width: min(62vw, 260px);
        padding-top: 80px;
    }

    .menu-links h1 {
        font-size: 2rem;
        margin-top: 30px;
        margin-bottom: 24px;
    }

    .menu-links a {
        font-size: 1.05rem;
    }

    .menu-links li {
        margin: 14px 0;
    }

    /* ▼ 各セクションの見出し(PCでは 3rem)。
         スマホ幅では 3rem だと画面の横幅をほぼ埋めてしまうので下げる。
         ★#contact h2 もこのファイルの下のほうで同じ値にそろえてある。 */
    #about h2,
    #skills h2,
    #products h2,
    #experience h2 {
        font-size: 2.2rem;
    }

    .about-content {
        flex-direction: column;
        gap: 2rem;
    }

    .about-text {
        max-width: 100%;
    }

    .about-image {
        align-self: center;
    }

    .about-image img {
        width: 250px;
        height: 250px;
    }

    /* Skills:6列×2行 → 3列×4行 */
    #skills {
        padding: 80px 6%;
    }

    .skills-grid {
        grid-template-columns: repeat(3, 72px);
        gap: 2.0rem 1.5rem;
    }

    .skill-icon {
        width: 58px;
        height: 58px;
        border-radius: 11px;
        padding: 9px;
    }

    /* Read More >> の文字の大きさ */
    .skills-more a,
    .skills-more a:visited,
    .products-more a,
    .products-more a:visited {
        font-size: 1.1rem;
    }

    /* Products:2列×2行 → 1列×4行
       ★2列のまま縮めるとカード幅が150px前後になり、
         画像もタイトルも読めなくなる。 */
    #products {
        padding: 80px 6%;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* スマホ(幅390px前後)ではカードが約343pxまで狭まる。
       16:5 のままだと帯が107pxしか残らずロゴが潰れるので、
       基準の厚みに戻す方向で比率を立てる。

         343 ÷ 2.5 = 137px  ← 基準の約136pxとほぼ同じ */
    .product-card img {
        aspect-ratio: 5 / 2;
    }

    /* Experience
       ★background-attachment: fixed はスマホ(特にiOS)で描画がおかしくなるため、
         #welcome と同じく scroll に戻す。 */
    #experience {
        background-attachment: scroll;
        padding: 80px 6%;
    }

    /* 年の列を狭めて、内容に幅を回す */
    .timeline-item {
        grid-template-columns: 3.2rem 1fr;
        gap: 1rem;
    }

    .timeline-body {
        padding-left: 1.25rem;
    }

    .timeline-year {
        font-size: 0.85rem;
    }

    /* 「2006~2020」など長い年。上を下げたぶん、こちらも同じ比率で下げる。 */
    .timeline-gap .timeline-year {
        font-size: 0.7rem;
    }

    /* 年表の中身。PCの 1.5rem / 1.05rem は狭い画面だと詰まって見える。 */
    .timeline-body h3 {
        font-size: 1.15rem;
    }

    .timeline-body p {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .timeline-links {
        font-size: 0.85rem;
    }

    /* Contact */
    #contact {
        padding: 80px 6%;
    }

    /* ★上の #about h2 などと同じ値。片方だけ変えるとセクションごとに
         見出しの大きさが揃わなくなる。 */
    #contact h2 {
        font-size: 2.2rem;
    }

    /* ★狭い画面では押しやすさを優先して横幅いっぱいにする。 */
    .contact-submit {
        width: 100%;
    }

    /* ポップアップ
       ★狭い画面では2つのボタンを縦に積む。
         横に並べたままだと、1つあたりが細くなって押しにくい。
         ★column-reverse … 積んだときは「送信」を上に置く。
           下は指が届きやすい位置なので、取り消すほうを下にする。 */
    .modal-actions {
        flex-direction: column-reverse;
    }

    .modal-cancel,
    .modal-send,
    .modal-danger {
        width: 100%;
    }
}