/* components/support.css — 支援内容 6カードグリッド（c-support）
   front-page（支援内容）と about（支援内容）で共用。トップページがマスター。 */

.c-support {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32); /* Figma 17:3466: gap 32px */
}

.c-support__card {
  background: var(--color-bg-light-yellow);                /* Figma: 背景ライトイエロー #fffcee */
  /* 手描きの枠を border-image で適用（top/top-support-card-border.webp・662×644・透過）。 */
  border-image: url("../../images/top/top-support-card-border.webp") 20 / 10px round;
  border-radius: var(--radius-sm);                         /* 8px */
  overflow: hidden;
  text-align: center;
}

.c-support__photo {
  width: 100%;
  height: auto;                  /* width/height属性(326×202)より aspect-ratio を優先させる
                                    （SPの2カラムで列幅が狭まっても写真の縦横比を保つ）*/
  aspect-ratio: 298.667 / 185;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;    /* 写真の上角を丸める（border分で内側が角張るのを防ぐ）*/
}

.c-support__body {
  padding: var(--space-16) var(--space-24);                /* Figma: 上下16 / 左右24 */
  color: var(--color-brown-text);
  /* 背景：ライトイエロー地のクレヨン紙テクスチャ */
  background-color: var(--color-bg-light-yellow);
  background-image: url("../../images/common/tex-yellow.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;
}

.c-support__title {
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-base);
}

.c-support__text {
  margin: 0;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  text-align: left;                                        /* Figma: タイトルは中央、本文は左揃え */
}

@media (max-width: 900px) { .c-support { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .c-support { grid-template-columns: 1fr; } }
/* SP：本文ボックスの余白は 12px（Figma SP）。 */
@media (max-width: 768px) { .c-support__body { padding: var(--space-12); } }