/* responsive.css — site/css/decorations.css の @media ブロックをそのまま移植。
   前回のGutenberg変換（decorations-to-blocks.mjs）はメディアクエリを対象外にしていたため
   一切WPへ反映されていなかった＝レスポンシブ崩れ・モバイルメニュー非動作の主因だった。 */

@media (max-width: 900px) {
  .hero-title { font-size: 34px; }
  .section-title { font-size: 28px; }
  /* 769px幅（PC用ナビ表示の下限）は、フォント読込後の実測でナビ+ボタン幅がヘッダー幅の
     大半を占め、ロゴを拡大する余地がほぼ無い（実測で34pxでも折り返す）。この帯だけ
     ロゴを元のサイズ（32px）に留め、ナビの折り返しを防ぐ。 */
  .site-logo img { height: 32px !important; }
}

@media (max-width: 768px) {
  :root {
    --wp--preset--spacing--space-xxxl: 56px;
    --wp--preset--spacing--space-xxxxl: 72px;
  }
  /* WP core の global-styles が `body .is-layout-flex{display:flex}` という実セレクタ（詳細度 0,1,1）を
     出力するため、単純クラス（0,1,0）では負ける。詳細度を合わせる（!important は使わない）。 */
  body .hide-mobile { display: none; }
  .site-logo img { height: 26px !important; }
  .btn-compact .wp-block-button__link { padding: 9px 14px; font-size: 13px; }
  body .show-mobile { display: block; }
  .hero-title { font-size: 28px; }
  .hero-lead { font-size: 16px; }
  .section-title { font-size: 24px; }
  .page-title { font-size: 26px; }
  .product-title { font-size: 28px; }
  .product-tagline { font-size: 16px; }
  .contact-tel { font-size: 24px; }
  .tool-logo img { height: 32px; }
  .shot-panel img { height: 170px; }
  .cta-title { font-size: 22px; }
  .dark-title { font-size: 21px; }
  .card-title { font-size: 19px; }
  .profile-photo img { height: 260px; }
  .footer-cols { gap: 32px; }
  .legal-h2 { font-size: 18px; }
  .legal-h3 { font-size: 15px; }
  .legal-table th { width: 34%; font-size: 13px; padding: 10px; }
  .legal-table td { font-size: 14px; padding: 10px; }
  .info-table th { width: 38%; font-size: 13px; padding: 10px; }
  .info-table td { font-size: 14px; padding: 10px; }
}

/* ---------- 補助金情報（/grant-info/）のスマホ調整 ----------
   390px幅で横スクロールが出ないよう、固定幅を持つ要素だけを縦積みに切り替える。 */
@media (max-width: 768px) {
  .gi-section__title { font-size: 21px; }
  .gi-card__title { font-size: 18px; }
  /* dt の固定幅（68px）＋ dd で1行に収まらない場合があるため、ラベルを上に出す。 */
  .gi-card__spec { flex-direction: column; gap: 0; }
  .gi-card__spec dt { flex: none; }
  .gi-summary__value { font-size: 17px; }
  /* 日付と内容を2段にする（dt の 140px 固定を解除）。 */
  .gi-history dt { flex: none; }
  .gi-history dd { flex: none; width: 100%; }
  .gi-filter { padding: var(--wp--preset--spacing--space-sm); }
}

/* ---------- 目的別ナビ・2択カード・CTAのスマホ調整 ----------
   grid の minmax(min(...,100%),1fr) により 390px では自動的に1列になるため、
   ここでは文字サイズと内側余白だけを詰める。 */
@media (max-width: 768px) {
  .gi-purpose__title { font-size: 16px; }
  .gi-choice__item { padding: var(--wp--preset--spacing--space-md); }
  .gi-choice__title { font-size: 18px; }
  .gi-choice__text { font-size: 14px; }
  .gi-cta-primary { padding: var(--wp--preset--spacing--space-md); }
  /* 補助リンクは横並びだと2つ目が詰まって見えるため縦積みにする。 */
  .gi-sublinks { flex-direction: column; gap: 10px; }
}

/* ---------- 補助金情報の図表コンポーネントのスマホ調整 ----------
   390px幅で横スクロールが出ないよう、横並び・固定幅を持つ要素を縦に切り替える。
   詳細は site.css の「18. 補助金情報の図表コンポーネント」。 */
@media (max-width: 768px) {
  .gi-fig__title { font-size: 15px; }

  /* 比較表：1行＝1枚のカードに畳む。
     display を block に変えると表の意味が支援技術に伝わらなくなるため、
     ショートコード側で role="table" 等をHTMLに明示している。 */
  .gi-table[data-mobile="cards"] .gi-table__table,
  .gi-table[data-mobile="cards"] .gi-table__table tbody,
  .gi-table[data-mobile="cards"] .gi-table__table tr,
  .gi-table[data-mobile="cards"] .gi-table__table th,
  .gi-table[data-mobile="cards"] .gi-table__table td { display: block; }
  /* 列見出しは各セルの data-label として出し直すので、見出し行自体は視覚的に隠す
     （display:none にすると読み上げからも消えるため、位置だけ画面外へ逃がす）。 */
  .gi-table[data-mobile="cards"] .gi-table__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .gi-table[data-mobile="cards"] .gi-table__table tbody tr {
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--wp--preset--color--white);
  }
  .gi-table[data-mobile="cards"] .gi-table__table tbody tr + tr { margin-top: 12px; }
  .gi-table[data-mobile="cards"] .gi-table__table tbody th,
  .gi-table[data-mobile="cards"] .gi-table__table tbody td {
    border: 0;
    border-bottom: 1px solid var(--wp--preset--color--border);
    padding: 10px 14px;
  }
  .gi-table[data-mobile="cards"] .gi-table__table tbody tr > :last-child { border-bottom: 0; }
  .gi-table[data-mobile="cards"] .gi-table__table tbody th { font-size: 15px; }
  .gi-table[data-mobile="cards"] .gi-table__table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: var(--wp--preset--color--accent-ink);
  }
  .gi-table[data-mobile="cards"] .gi-table__table tbody td[data-label=""]::before { display: none; }
  .gi-table[data-mobile="cards"] .gi-table__table tbody td { font-size: 14px; }

  /* 横スクロール表：スマホでは最小幅を少し詰める。 */
  .gi-table__scroll .gi-table__table { min-width: 560px; }

  /* 申請フロー図：1列にし、横並びの「→」を縦並びの「↓」に切り替える。
     1列では「行末」が無いので、site.css で消していた 4n の矢印を出し直す。 */
  .gi-flow { grid-template-columns: 1fr; gap: 26px; }
  .gi-flow__item::after {
    content: "\2193";
    right: auto;
    left: 50%;
    top: auto;
    bottom: -21px;
    transform: translateX(-50%);
  }
  .gi-flow__item:nth-child(4n)::after { content: "\2193"; }
  .gi-flow__item:last-child::after { content: none; }

  .gi-calc__value { font-size: 17px; }
  .gi-calc__step--result .gi-calc__value { font-size: 20px; }
  .gi-timeline__title { font-size: 15px; }
}

/* ---------- 申請フロー図：タブレット帯は3列 ----------
   769〜1023px ではセクションのコンテンツ幅が820pxに満たないため、
   4列だと1枚あたりが狭くなりすぎる。行末（3n）の矢印は出さない。 */
@media (min-width: 769px) and (max-width: 1023px) {
  .gi-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gi-flow__item:nth-child(4n)::after { content: "\2192"; }
  .gi-flow__item:nth-child(3n)::after,
  .gi-flow__item:last-child::after { content: none; }
}