/* ==========================================================================
   responsive.css
   レスポンシブ対応（Tablet / Mobile / Small Mobile）
   ========================================================================== */

/* ==========================================================================
   1. Tablet (max 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
  .models-grid,
  .archive-models-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

  .site-footer__inner {
    grid-template-columns: 1fr;
  }

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

  /* ==========================================================================
   Archive / Single Model
   ========================================================================== */
  .archive-models-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

/* ==========================================================================
   2. Mobile (max 768px)
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --header-height: 64px;  /* 5rem → px固定に統一 */
  }

  /* Header */
  .site-header__inner {
    padding-inline: 16px;
  }
  
  .site-header__logo img,
  .site-header__logo svg {
    height: 40px;  /* SP時はロゴを少し小さく */
  }

  .global-nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .header-sns {
    display: none;
  }

  /* Hero */
  .hero-slider {
    height: 70svh;
    min-height: 320px;
  }

  /* Heritage */
  .heritage-section__label {
    font-size: 9vw;  /* ブラウザ幅の約90%に文字が収まるサイズ */
  }
  
  .heritage-section__tagline {
    text-align: left;
  }

  /* Models */
  .models-grid,
  .archive-models-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  /* Information */
  .information-section .container {
    padding-inline: 0;
    max-width: 100%;
  }
  
  .information-section .section-heading {
    padding-inline: 24px;  /* 文字だけ左右余白を戻す */
  }
  
  .info-grid {
    padding-inline: 0;
  }

  /* Builders */
  .builders-wrapper {
    display: flex;        /* grid → flex に変更 */
    flex-direction: column;
  }
  
  .builder-card--kuroiwa-profile   { order: 1; }
  .builder-card--kuroiwa-youtube   { order: 2; }
  .builder-card--yanagisawa-profile { order: 3; }
  .builder-card--yanagisawa-youtube { order: 4; }

  .builders-grid--single {
    grid-template-columns: 1fr;
  }
  
  /* YouTube 動画 */
  .builders-section .builder-card__youtube {
    margin-left: -24px;   /* containerのpadding-inline(24px)に合わせる */
    margin-right: -24px;
    width: calc(100% + 48px);
  }

  /* About US */
  .about-intro__tagline {
    text-align: left;
  }

  /* Artists */
  .artists-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .artist__tagline {
    text-align: left;
  }
  
  .artist-card {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 45px;  /* 一人分の下余白 */
  }
  
  .artist-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top;
    filter: grayscale(0%);
  }

  /* SP時はhoverエフェクト無効 */
  .artist-card:hover .artist-card__image {
    transform: none;
    filter: grayscale(0%);
  }
  
  .artist-card__overlay {
    position: static;
    background: none;
    opacity: 1;
    align-items: flex-start;  /* SP時のみ左揃え */
    justify-content: flex-start;
    padding: 12px 0;
    gap: 0;
  }
  
  /* 名前を横並び */
  .artist-card__name-wrap {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;  /* 名前とgroupの間 */
  }
  
  .artist-card__name-ja {
    font-size: 3.6rem;
  }
  
  .artist-card__name-en {
    font-size: 2.1rem;
  }
  
  .artist-card__group {
    font-size: 2.8rem;
    margin-bottom: 10px;  /* 名前とgroupの間 */
  }
  
  .artist-card__links {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
  }

  /* Digimart */
  .digimart-banners {
    grid-template-columns: 1fr;
  }

  .digimart-card__title {
    font-size: 2.8rem;
    margin-bottom: 4px;
  }
  
  .digimart-card__subtitle {
    font-size: 1.6rem;
  }

  /* Dealers */
  .dealers-section-heading {
    text-align: left;
  }

  .dealers-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 16px;  /* SP時も縦余白を追加 */
  }

  /* Contact */
  .contact-form-wrap {
    max-width: 100%;
  }

  .faq-section {
    max-width: 100%;
  }
  
  .contact-info__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Price List */
  .price-models-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .price-note--bottom {
    text-align: left;
  }

  /* Footer */
  .site-footer__inner {
    gap: var(--space-8);
  }
  
  .footer-nav {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* Page Title */
  .page-title-bar {
    padding: 120px 0 80px;  /* SP時は縦幅を縮小 */
  }
  
  .page-title-bar__text {
    font-size: 3.6rem;  /* SP時は大きく */
  }

  /* Single Post */
  .single-post {
    padding: var(--space-10) var(--space-4);
  }

  .single-post__title {
    font-size: var(--font-size-xl);
  }

  /* ==========================================================================
   Archive / Single Model
   ========================================================================== */

   .archive-filter__group {
    flex-direction: column;
    align-items: flex-start;
  }

  .archive-models-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
  }

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

  .single-model__title {
    font-size: 2.8rem;
  }
  
  .single-model__color {
    font-size: 1.8rem;
  }

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

  .single-model__price {
    font-size: 20px;
  }

  /* News Archive & Single */
  .news-archive-inner {
    grid-template-columns: 1fr;
  }
  
  .news-archive-item__link {
    grid-template-columns: 120px 1fr;
    gap: 16px;
  }
  
  .news-archive-item__thumbnail img,
  .news-archive-item__no-image {
    width: 120px;
    height: 85px;
  }
  
  .news-sidebar {
    position: static;
  }

  /* ==========================================================================
   プライバシーポリシー/免責事項/特定商取引法に基づく表示
   ========================================================================== */

  .legal-dl__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .legal-dl dt {
    font-size: 1.4rem;
    color: var(--bsg-light-gray);
  }

  .legal-dl dd {
    font-size: 1.4rem;
    padding-bottom: 4px;
    margin-left: 0;
    padding-left: 0;
  }

}

/* ==========================================================================
   3. Small Mobile (max 480px)
   ========================================================================== */

@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-4);
  }

  .models-grid,
  .archive-models-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

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

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

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

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

  /* ==========================================================================
   Archive / Single Model
   ========================================================================== */

   .archive-models-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
  }

}