/**
 * Two-column layout styles
 *🏚️Tea World Base Layout (Origin)
 * Tea World 全体の本文＋サイドバー用レイアウト。
 *
 * 内容:
 * - 共通2カラム
 * - サイドバー落下防止
 * - タグ統計ページ用レイアウト
 * - tea_link archive 用2カラム
 * - モバイル時の1カラム化
 * ver.1.0 2025.06.14
 * ver.2.0 2026.04.20
 * tea-layout.css から分離・整理
 */

/* ======================================
   🏚️ 共通2カラム（本文＋サイドバー）2025.06.14
   ====================================== */

/* ✅ 共通の本文＋サイドバー2カラム */
.content-area.with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2rem;
  align-items: start;
}

/* ✅ 本文側のはみ出し防止 */
.content-area.with-sidebar > .site-main {
  min-width: 0;
}

/* ✅ サイドバー側のはみ出し防止 */
.content-area.with-sidebar > .sidebar,
.content-area.with-sidebar > aside,
.content-area.with-sidebar > #secondary {
  min-width: 0;
}

/* ======================================
   📱 共通2カラムのモバイル対応 2025.06.14
   ====================================== */

@media (max-width: 768px) {
  /* ✅ スマホでは1カラム化 */
  .content-area.with-sidebar {
    grid-template-columns: 1fr;
  }

  /* ✅ 本文・サイドバーを全幅に戻す */
  .content-area.with-sidebar > .site-main,
  .content-area.with-sidebar > .sidebar,
  .content-area.with-sidebar > aside,
  .content-area.with-sidebar > #secondary {
    width: 100%;
    max-width: 100%;
  }

  /* ✅ サイドバーを本文の下に少し離して配置 */
  .content-area.with-sidebar > .sidebar,
  .content-area.with-sidebar > aside,
  .content-area.with-sidebar > #secondary {
    margin-top: 2rem;
  }
}

/* ======================================
   📊 タグ統計ページ用2カラム 2025.07.20
   ====================================== */

/* ✅ タグ統計ページ専用レイアウト */
.tag-stats-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ✅ 本文が幅固定で押し出されるのを防ぐ */
.tag-stats-layout .site-main {
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  min-width: 0;
}

/* ✅ サイドバーの clear / float を解除して落下を防ぐ */
.tag-stats-layout #secondary,
.tag-stats-layout .site-sidebar,
.tag-stats-layout .widget-area {
  clear: none !important;
  float: none !important;
  width: auto !important;
  max-width: 320px;
}

/* ✅ 画像やグラフのはみ出し防止 */
.tag-stats-layout .site-main img,
.tag-stats-layout .site-main canvas,
.tag-stats-layout .site-main svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ✅ タグ統計ページもスマホでは1カラム化 */
@media (max-width: 768px) {
  .tag-stats-layout {
    display: block !important;
    max-width: 100%;
    padding: 0 12px;
  }
}

/* ======================================
   🧱 汎用 content-wrapper 2カラム 2025.06.14
   ====================================== */

/* ✅ 本文＋サイドバーの横並び用ラッパ */
.content-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
  align-items: start;
}

/* ✅ 本文側の縮み許可 */
.content-wrapper .site-main,
.content-wrapper #primary {
  min-width: 0;
}

/* ✅ サイドバー幅の基準 */
.content-wrapper #secondary.site-sidebar,
.content-wrapper #secondary,
.content-wrapper .site-sidebar {
  max-width: 320px;
  clear: none;
}

/* ======================================
   🫖 Tea World 基本文本＋サイドバー
   ====================================== */

/* ✅ ベースの本文＋サイドバー2カラム */
.content-wrapper .site-main {
  width: auto;
  margin: 0;
  border: none;
  padding-right: 1rem;
}

/* ✅ ベースのサイドバー装飾 */
.content-wrapper .site-sidebar {
  width: auto;
  border-left: 2px solid #cbe5c5;
  padding-left: 1rem;
}

/* ======================================
   🌿 tw-2col レイアウト
   ====================================== */

/* ✅ 2カラム全体の器 */
.tw-2col {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* ✅ PC幅では横並び */
@media (min-width: 1024px) {
  .tw-2col {
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }

  /* ✅ 本文エリア */
  .tw-2col #main-content {
    flex: 2 1 0;
    min-width: 0;
    margin: 0 !important;
  }

  /* ✅ サイドバー候補を広めに拾う */
  .tw-2col .tw-sidebar,
  .tw-2col #secondary,
  .tw-2col .widget-area,
  .tw-2col .sidebar {
    flex: 1 1 300px;
    max-width: 420px;
  }

  /* ✅ float / clear / width の影響を打ち消す */
  .tw-2col #main-content,
  .tw-2col .tw-sidebar,
  .tw-2col #secondary,
  .tw-2col .widget-area,
  .tw-2col .sidebar {
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin-top: 0 !important;
  }
}

/* ======================================
   🔗 tea_link archive 用2カラム 2025.07.25
   ====================================== */

/* ✅ tea_link archive の基本2カラム */
.layout-two-column {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* ✅ 本文エリア */
.layout-two-column .content-area {
  flex: 1 1 auto;
  min-width: 0;
}

/* ✅ サイドバー幅 */
.layout-two-column #secondary,
.layout-two-column .widget-area {
  flex: 0 0 320px;
  max-width: 320px;
}

/* ✅ 狭い画面では縦並び　2025.07.20 */
@media (max-width: 900px) {
  .layout-two-column {
    display: block;
  }
}

/*固定ページ*/
.content-area.with-sidebar{
  display: flex !important;
  align-items: flex-start !important;
  gap: 32px !important;
}

.content-area.with-sidebar > main.site-main,
.content-area.with-sidebar > #main-content.site-main{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  margin-right: 0 !important;
}


/*ナビゲーターページ*/
.content-area.with-sidebar{
  display: flex;
  align-items: flex-start;
  gap: 32px;

  width: calc(100% - 24px);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 12px;
}

.content-area.with-sidebar > main.site-main,
.content-area.with-sidebar > #main-content.site-main{
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.content-area.with-sidebar > aside.site-sidebar,
.content-area.with-sidebar > #secondary.site-sidebar{
  flex: 0 0 300px;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
}