/* ============================================================
   responsive.css
   タブレット・スマホ向けのレイアウト調整（画面幅ごとに上書き）
   ============================================================ */

/* ---------- タブレット以下 (1024px) ---------- */
@media (max-width: 1024px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card--feature {
    grid-row: span 1;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .profile-hero {
    grid-template-columns: 260px 1fr;
    gap: 36px;
  }

  .hero-portrait {
    width: 260px;
    height: 260px;
  }

  .embed-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- ナビゲーションがハンバーガーに切り替わるライン (860px) ---------- */
@media (max-width: 860px) {
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 82vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 40px;
    background: rgba(5, 6, 8, 0.94);
    backdrop-filter: var(--glass-blur);
    border-left: 1px solid var(--color-border);
    transform: translateX(100%);
    transition: transform var(--transition-base);
  }

  .main-nav.open {
    transform: translateX(0);
  }

  .main-nav a {
    font-size: 1.1rem;
  }

  .nav-toggle {
    display: flex;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }

  .profile-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .profile-portrait {
    max-width: 280px;
    margin-inline: auto;
  }

  .hero-portrait {
    width: min(280px, 70vw);
    height: min(280px, 70vw);
  }

  .skill-tags {
    justify-content: center;
  }
}

/* ---------- スマートフォン (640px) ---------- */
@media (max-width: 640px) {
  .container {
    padding-inline: 18px;
  }

  .service-grid,
  .works-grid {
    grid-template-columns: 1fr;
  }

  .service-card--feature {
    grid-column: span 1;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .modal-body {
    padding: 26px 20px 32px;
  }

  .timeline {
    padding-left: 24px;
  }

  .timeline-item::before {
    left: -29.5px;
  }

  .cta-panel {
    padding: 40px 22px;
  }

  .service-feature-visual {
    height: 220px;
  }
}

/* PCでは大きな紹介カードと2列のサービスカードで整列 */
@media (min-width: 1025px) {
  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .service-card--feature {
    grid-column: auto;
  }

  .service-feature-visual {
    height: 180px;
  }
}