/* =========================================================
   AWS学習ナビ - responsive.css (レスポンシブ専用)
   ブレークポイント: 768px / 480px
   モバイルファースト方針のため、ここでは主に
   768px超のデスクトップ拡張と、768px以下の調整を記述
   ========================================================= */

/* ---------- タブレット〜 (〜960px) ---------- */
@media (max-width: 960px) {
  .layout-2col { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   モバイル (〜768px) — メインのブレークポイント
   ========================================================= */
@media (max-width: 768px) {

  body { font-size: 15px; }

  /* ---- ヘッダー / ハンバーガー ---- */
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--bg-elev); border-bottom: 1px solid var(--border);
    transform: translateY(-120%); transition: transform .28s ease;
    box-shadow: var(--shadow); max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .main-nav.is-open { transform: translateY(0); }
  .main-nav ul { flex-direction: column; gap: 0; padding: 8px; }
  .main-nav a { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 1rem; }
  .main-nav li + li { border-top: 1px solid var(--border); }

  /* ---- ヒーロー ---- */
  .hero { padding: 38px 0; }
  .hero h1 { font-size: 1.8rem; }
  .hero p.lead { font-size: 1rem; }
  .hero-stats { gap: 20px; }
  .hero-stat .num { font-size: 1.6rem; }

  /* ---- グリッドは1カラムへ ---- */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* ピックアップは縦積み */
  .pickup-card { flex-direction: column; }
  .pickup-card .card-thumb,
  .pickup-card .card-body { width: 100%; }
  .pickup-card .card-thumb { aspect-ratio: 16/9; }

  /* ---- セクション見出し ---- */
  .section-title { font-size: 1.3rem; }
  .section { margin-bottom: 36px; }

  /* ---- 試験情報 ---- */
  .exam-info { grid-template-columns: 1fr; }

  /* ---- ニュース ---- */
  .news-item { flex-direction: column; gap: 4px; }
  .news-date { min-width: 0; }

  /* ---- 資格タブ: 横スクロール ---- */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-btn { white-space: nowrap; }

  /* ---- フッター ---- */
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }

  /* ---- 記事: サイドバーを本文下へ ---- */
  .layout-2col { display: flex; flex-direction: column; }
  .layout-2col .sidebar { order: 2; }      /* サイドバーを記事下部に移動 */
  .layout-2col .entry-main { order: 1; }
  .entry-header h1 { font-size: 1.55rem; }
  .entry-body { font-size: 1rem; }
  .entry-body h2 { font-size: 1.3rem; }

  /* ---- おすすめ教材グリッド ---- */
  .materials-grid { grid-template-columns: 1fr !important; }

  /* ---- アーカイブのサイドバーフィルターをアコーディオン化 ---- */
  .filter-sidebar .accordion-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; cursor: pointer; padding: 12px 14px; font-weight: 700;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  }
  .filter-sidebar .accordion-toggle::after { content: "▾"; transition: transform .2s; color: var(--accent); }
  .filter-sidebar .accordion-toggle.is-open::after { transform: rotate(180deg); }
  .filter-sidebar .accordion-body { display: none; padding-top: 12px; }
  .filter-sidebar .accordion-body.is-open { display: block; }

  /* 通常サイドバーwidgetもアコーディオン土台を使えるように */
  .widget.collapsible h3 { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .widget.collapsible h3::after { content: "▾"; color: var(--accent); transition: transform .2s; }
  .widget.collapsible.is-collapsed h3::after { transform: rotate(-90deg); }
  .widget.collapsible.is-collapsed ul,
  .widget.collapsible.is-collapsed .widget-body { display: none; }

  /* ボタンを全幅に */
  .btn-row .btn { flex: 1; justify-content: center; }
}

/* ---------- 小型スマホ (〜480px) ---------- */
@media (max-width: 480px) {
  .container { padding: 0 12px; }
  .hero h1 { font-size: 1.55rem; }
  .hero-stats { width: 100%; justify-content: space-between; gap: 12px; }
  .hero-stat .num { font-size: 1.35rem; }
  .brand { font-size: 1rem; }
  .brand .logo-mark { width: 30px; height: 30px; }
  .quiz-box { padding: 18px; }
  .materials-grid, .grid-2, .grid-3, .grid-4 { gap: 14px; }
}

/* ---------- デスクトップ大画面 (1280px〜) ---------- */
@media (min-width: 1280px) {
  .hero h1 { font-size: 2.7rem; }
}

/* ---------- 印刷 ---------- */
@media print {
  .site-header, .site-footer, .sidebar, .nav-toggle, .affiliate-card, .materials-grid { display: none !important; }
  body { background: #fff; color: #000; }
  .layout-2col { display: block; }
}