/* ========================================
   Mobile UX Critical Fixes (UX監査 2026-04-22)
   ======================================== */

/* Mobile 2カラムレイアウト強制解除 */
@media (max-width: 767px) {
  /* main-layout 系は全て 1カラム */
  .main-layout,
  .main-layout--article,
  .main-layout--facility,
  .column-single-wrap,
  .column-archive-grid,
  .ranking-layout,
  .facility-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .main-layout > main,
  .main-layout > .sidebar,
  .main-layout .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: static !important;
    float: none !important;
  }
  /* article 本文の幅確保 */
  .article,
  .article__body,
  .article__content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .article__body { padding: 20px !important; }
  /* テキストの正常な折り返し */
  .article__content p,
  .article__content li,
  .article__content h2,
  .article__content h3 {
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
    white-space: normal;
  }
  /* grid の 2fr 1fr パターン全般を1列化 */
  [class*="grid"][class*="-2"],
  [class*="grid--2"],
  .grid-2,
  .tile-grid--3col,
  .tile-grid,
  .article-grid,
  .related-grid,
  .accordion-grid,
  .mp-kpi-grid,
  .mp-grid,
  .job-type-grid,
  .mp-fac-block,
  .agent-cards,
  .job-cards {
    grid-template-columns: 1fr !important;
  }
  /* 画像の最大幅 */
  img { max-width: 100% !important; height: auto !important; }
}

/* Tablet ブレークポイント追加 (768-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .main-layout--article,
  .main-layout--facility,
  .column-single-wrap {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .main-layout .sidebar {
    width: 100%;
    position: static;
  }
  /* Tablet ではヘッダーのナビは折り返し許可 */
  .header__nav {
    flex-wrap: wrap;
  }
  /* 一覧系はTabletで2カラム維持 */
  .tile-grid--3col,
  .article-grid,
  .related-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile下部固定CTA の文脈判定 */
body.page-review-post .mobile-bottom-bar,
body.page-login .mobile-bottom-bar,
body.single-review-post .mobile-bottom-bar {
  display: none !important;
}

}

/* 口コミ詳細のトピックバッジ: pill 内改行禁止 */
.rd-review__topic-badge,
.rd-related__topic {
  white-space: nowrap;
}

/* 求人一覧・求人詳細の見出しを適切サイズに */
.job-list-card h2 {
  font-size: var(--font-lg);
  margin-bottom: var(--space-2);
}
.single-job h1,
.page-template-single-job h1 {
  font-size: 22px;
  margin-bottom: var(--space-3);
}
body.single-job main h1 {
  font-size: 22px;
}
.jd-section h2,
.jd-section__title,
main h2 {
  font-size: var(--font-xl);
  margin-bottom: var(--space-3);
}

/* Mobile: さらにコンパクトに */
@media (max-width: 767px) {
  .job-list-card h2 { font-size: var(--font-base); }
  body.single-job main h1 { font-size: var(--font-xl); }
  .jd-section h2, .jd-section__title, main h2 { font-size: var(--font-lg); }
}

/* Mobile: ランキングを縦並びに（横スクロール廃止、確実に1枚ずつ表示）*/
@media (max-width: 767px) {
  .ranking-slider-wrap {
    padding: 0 !important;
  }
  .ranking-slider-nav {
    display: none !important;
  }
  .ranking-slider {
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }
  .ranking-slider__track {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-4) !important;
    padding: 0 !important;
  }
  .ranking-card {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-shrink: 1 !important;
  }
}

/* パンくずがモバイルで崩れる対策 */
.breadcrumb--bar .breadcrumb__inner {
  flex-wrap: wrap;
}
/* 最後の要素（現在のページ名）は長い場合省略 */
.breadcrumb--bar .breadcrumb__inner > span:last-child,
.breadcrumb--bar .breadcrumb__inner > strong:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}
.breadcrumb,
.breadcrumb--bar .breadcrumb__inner {
  min-width: 0;
}
@media (max-width: 767px) {
  .breadcrumb--bar {
    padding: var(--space-2) 0;
  }
  .breadcrumb--bar .breadcrumb__inner {
    padding: 0 var(--space-4);
    font-size: 12px;
    gap: var(--space-1);
  }
  /* 長い病院名は省略、最大2行まで */
  .breadcrumb--bar .breadcrumb__inner > span:last-child,
  .breadcrumb--bar .breadcrumb__inner > strong:last-child {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-all;
  }
}