/* ============================================================
   レスポンシブ最適化(スマホ・タブレット)
   メディアリニューアル(2026-04-30) 第四弾で追加
   ============================================================ */

/* ============================================================
   タブレット(〜1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .audience-hero {
    padding: 48px 20px 36px;
  }

  .audience-hero__title {
    font-size: 32px;
  }

  .audience-hero__cards {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

/* ============================================================
   スマホ(〜768px)
   ============================================================ */
@media (max-width: 768px) {
  /* ============= メディアトップ ヒーロー ============= */
  .audience-hero {
    padding: 36px 16px 28px;
  }

  .audience-hero__eyebrow {
    font-size: 9.5px;
  }

  .audience-hero__title {
    font-size: 24px;
    line-height: 1.3;
  }

  .audience-hero__lead {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 24px;
  }

  .audience-hero__cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .audience-card {
    padding: 18px 16px;
  }

  .audience-card__title {
    font-size: 18px;
  }

  .audience-card__desc {
    font-size: 12.5px;
    min-height: auto;
  }

  .audience-hero__skip {
    font-size: 11px;
    margin-top: 20px;
  }

  /* ============= ステータスバナー ============= */
  .audience-status-banner {
    font-size: 11.5px;
    padding: 10px 16px;
    text-align: left;
  }

  /* ============= 記事グリッド ============= */
  .media-articles-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px 32px;
  }

  /* ============= ヘッダー トグル ============= */
  /* ハンバーガーが出るサイズではトグルを目立たない位置に */
  .audience-toggle {
    margin-left: 8px !important;
  }

  .audience-toggle__button {
    padding: 4px 10px;
    font-size: 11px;
  }

  .audience-toggle__menu {
    right: -10px;
    min-width: 150px;
  }

  /* ============= パンくず ============= */
  .breadcrumb {
    padding: 12px 16px 0;
  }
  .breadcrumb__list {
    font-size: 11px;
  }

  /* ============= 記事メタバー ============= */
  .article-meta-bar {
    gap: 10px;
    font-size: 11px;
  }

  /* ============= 著者カード ============= */
  .article-author-card {
    padding: 12px 14px;
    gap: 12px;
    border-radius: 4px;
  }
  .article-author-card__avatar img,
  .article-author-card__avatar--placeholder {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .article-author-card__name {
    font-size: 15px;
  }
  .article-author-card__title {
    font-size: 12px;
  }

  /* ============= シェアボタン ============= */
  .article-share--top {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .article-share__btn {
    padding: 6px 10px;
    font-size: 11px;
  }

  /* ============= 目次 ============= */
  .article-toc {
    padding: 14px 16px;
    margin: 24px 0;
  }
  .article-toc__title {
    font-size: 11px;
  }
  .article-toc__link {
    font-size: 13px;
  }
  /* スマホでは初期状態で折りたたみ */
  .article-toc {
    /* JS側で初期state決められるが、CSSで雛形整える */
  }

  /* ============= 記事下CTAブロック ============= */
  .article-cta-block {
    margin: 32px 0 24px;
    padding: 24px 16px;
    border-radius: 8px;
  }
  .article-cta-block__title {
    font-size: 18px;
  }
  .article-cta-block__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .article-cta-card {
    padding: 18px 16px;
  }
  .article-cta-card__heading {
    font-size: 15px;
  }

  /* ============= 関連記事 ============= */
  .related-articles {
    margin: 32px 0 24px;
    padding: 20px 16px;
  }
  .related-articles__list {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .related-articles__item-thumb img {
    height: 100px;
  }
  .related-articles__item-body {
    padding: 10px 12px;
  }
  .related-articles__item-title {
    font-size: 12.5px;
  }

  /* ============= ドクタープロフィール ヒーロー ============= */
  .dp-article {
    padding: 16px;
  }
  .dp-hero {
    padding: 24px 20px;
  }
  .dp-hero__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }
  .dp-hero__avatar img,
  .dp-hero__avatar--placeholder {
    width: 120px;
    height: 120px;
    margin: 0 auto;
  }
  .dp-hero__name {
    font-size: 24px;
  }
  .dp-hero__taxonomy-tags {
    justify-content: center;
  }
  .dp-hero__social {
    justify-content: center;
  }

  /* ============= 統計バー ============= */
  .dp-stats__num {
    font-size: 22px;
  }
  .dp-stats__label {
    font-size: 10px;
  }
  .dp-stats__item {
    padding: 14px 8px;
  }

  /* ============= タブ ============= */
  .dp-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }
  .dp-tab {
    flex-shrink: 0;
    font-size: 12px;
    padding: 6px 12px;
  }

  /* ============= プロフィール一覧 ============= */
  .dp-archive__hero {
    padding: 36px 16px 24px;
  }
  .dp-archive__title {
    font-size: 26px;
  }
  .dp-archive__lead {
    font-size: 13px;
  }
  .dp-archive__filter {
    padding: 12px 16px;
    overflow-x: auto;
  }
  .dp-archive__filter .inner {
    flex-wrap: nowrap;
    width: max-content;
  }
  .dp-archive__list-wrap {
    padding: 24px 16px 0;
  }
  .dp-archive__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* ============= ドクターカード(共通) ============= */
  .dp-card__avatar img,
  .dp-card__avatar--placeholder {
    width: 80px;
    height: 80px;
    font-size: 32px;
  }
  .dp-card__avatar {
    padding: 16px;
  }
  .dp-card__body {
    padding: 12px 14px 16px;
  }
  .dp-card__name {
    font-size: 14.5px;
  }
  .dp-card__title {
    font-size: 11.5px;
  }
  .dp-card__specialty {
    font-size: 11px;
  }

  /* ============= dp-CTA ============= */
  .dp-cta {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .dp-cta__heading {
    font-size: 17px;
  }

  /* ============= 関連医師グリッド ============= */
  .dp-related-doctors__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* ============= 記事内シェアボタン(対談参加医師) ============= */
  .article-participants {
    padding: 16px;
    margin: 24px 0;
  }
  .article-participants__list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   超スマホ(〜400px)・カードを1列に
   ============================================================ */
@media (max-width: 420px) {
  .related-articles__list,
  .dp-archive__grid,
  .dp-related-doctors__grid {
    grid-template-columns: 1fr;
  }

  .dp-stats {
    flex-wrap: wrap;
  }
  .dp-stats__item {
    flex: 1 1 50%;
    border-bottom: 1px solid var(--dp-line);
  }
  .dp-stats__item:nth-last-child(1),
  .dp-stats__item:nth-last-child(2) {
    border-bottom: none;
  }
}