/* ==========================================================================
   responsive.css — 画面幅ごとの調整（PC・タブレット・スマートフォン）
   ========================================================================== */

/* タブレット */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: var(--sp-7); }
  .door { width: min(70%, 260px); margin-inline: 0; }
  .door__caption { text-align: left; }
  .controls__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .controls__row .field--search { grid-column: 1 / -1; }
  .about-block { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* スマートフォン（ナビを折りたたむ） */
@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .theme-toggle__label { display: none; }
  .theme-toggle { padding-inline: 0; width: 2.5rem; }

  /* JavaScriptが使える時だけ、メニューを畳む（無効な環境では常に見える） */
  .js .site-nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .js .site-header[data-open="true"] .site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
  }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-2) var(--gutter) var(--sp-4); }
  .site-nav li + li { border-top: 1px solid var(--line); }
  .nav-link { flex-direction: row; align-items: baseline; gap: 0.9rem; padding-block: 0.95rem; width: 100%; }
  .nav-link [lang="ja"] { font-size: var(--fs-md); }
  .nav-link::after { display: none; }
  .nav-link[aria-current="page"] [lang="ja"] { color: var(--accent); }
  .no-js-wrap { flex-wrap: wrap; }

  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__nav { justify-content: flex-start; }
  .about-block__body, .principle, .aim-list li { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* 小さいスマートフォン */
@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
  .controls__row { grid-template-columns: 1fr; }
  .world-row__link { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .world-row__arrow { display: none; }
  .world-row__no { padding-left: 0; }
  .results-bar { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .results-bar__hint { display: none; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; justify-content: center; }
  .hero__actions { flex-direction: column; }
}

@media (max-width: 760px) {
  .site-footer__nav { justify-content: start; grid-template-columns: 1fr; gap: var(--sp-2); }
}