/**
 * Component: reason-card.css
 * Usage: 選ばれる理由カード（.bl_reasonCard）コンポーネント
 *
 * 使用箇所:
 * - single-symptoms.php（症状詳細ページ）
 * - pages/page-first.php（初めての方へ）
 */

/* ===========================================
   選ばれる理由レイアウト
=========================================== */
.ly_reason {
  padding: var(--section-padding-block) var(--section-padding-inline) var(--section-padding-bottom);
  background-color: #fff;
}

.bl_reason_inner {
  max-width: var(--max-width-content);
  margin-inline: auto;
}

.bl_reasonList {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

/* ===========================================
   カード基本スタイル
=========================================== */
.bl_reasonCard {
  background-color: var(--color-cream);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  padding: 8px;
  max-width: 588px;
}

.bl_reasonCard_header {
  display: flex;
  flex-direction: column;
}

.bl_reasonCard_img {
  width: 100%;
  aspect-ratio: 63 / 32;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.bl_reasonCard_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.bl_reasonCard_headContent {
  padding: 16px 8px 8px;
}

.bl_reasonCard_label {
  font-size: var(--font-sm);
  font-weight: 700;
  color: #FDDC9D;
}

.bl_reasonCard_ttl {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--color-primary);
}

.bl_reasonCard_ttl .highlight {
  color: var(--color-primary);
}

.bl_reasonCard_note {
  margin-top: 4px;
  font-size: var(--font-xs);
  color: var(--color-gray);
}

.bl_reasonCard_desc {
  padding: 0 8px 8px;
  font-size: var(--font-base);
  color: var(--color-dark);
}

/* ===========================================
   Tablet (768px~)
=========================================== */
@media screen and (min-width: 768px) {

  .bl_reasonList {
    gap: var(--space-xl);
  }

  .bl_reasonCard_headContent {
    padding: 20px 12px 12px;
  }

  .bl_reasonCard_label {
    font-size: var(--font-base);
  }

  .bl_reasonCard_ttl {
    font-size: var(--font-xl);
  }

  .bl_reasonCard_desc {
    padding: 0 12px 12px;
    font-size: var(--font-base);
  }
}

/* ===========================================
   PC (1024px~)
=========================================== */
@media screen and (min-width: 1024px) {

  .ly_reason .bl_sectionHeader {
    padding-inline: var(--section-padding-inline);
  }

  .bl_reason_inner {
    max-width: var(--max-width-content);
    padding-inline: var(--section-padding-inline);
  }

  .bl_reasonList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: var(--max-width-content);
    padding-inline: var(--section-padding-inline);
    margin-inline: auto;
  }

  .bl_reasonCard {
    border-radius: 24px;
    padding: 16px;
    height: 100%;
  }

  .bl_reasonCard_header {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
  }

  .bl_reasonCard_img {
    width: 160px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: var(--radius-xl);
  }

  .bl_reasonCard_headContent {
    flex: 1;
    padding: 0;
  }

  .bl_reasonCard_label {
    font-size: var(--font-sm);
    margin-bottom: 8px;
  }

  .bl_reasonCard_desc {
    padding: 16px 0 0;
    font-size: var(--font-lg);
  }
}