/* =========================================================
   the Sanctuary — promo（ブログ誘導：トップティーザー / CTAバナー）
   既存パレット/変数（style.css）に依存。全ページで読み込み。
   ========================================================= */

/* ---- トップ：ブログティーザー（最新3記事） ---- */
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px)}
.teaser-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.teaser-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.teaser-card a{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.teaser-thumb{aspect-ratio:3/2;overflow:hidden;background:var(--bg-subtle);
  display:flex;align-items:center;justify-content:center}
.teaser-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.teaser-card:hover .teaser-thumb img{transform:scale(1.05)}
.teaser-thumb__ph{font-family:var(--font-en);letter-spacing:.16em;color:#b9a88f;font-size:.82rem}
.teaser-card__body{padding:1.1em 1.2em 1.4em;display:flex;flex-direction:column;gap:.5em}
.teaser-card__meta{display:flex;align-items:center;gap:.7em;flex-wrap:wrap}
.teaser-card__meta time{font-family:var(--font-en);font-size:.76rem;letter-spacing:.1em;color:var(--accent)}
.teaser-card__title{font-family:var(--font-jp);font-size:1.04rem;line-height:1.55;color:var(--dark);margin:0}

/* ティーザー内のカテゴリバッジ（promo.cssでも自己完結） */
.teaser-card .blog-cat-badge{display:inline-block;font-family:var(--font-en);font-size:.7rem;
  letter-spacing:.08em;padding:.22em .75em;border-radius:999px;background:var(--bg-subtle);
  color:var(--dark);line-height:1.6}

/* ---- 体験/プラン：ブログ誘導CTAバナー ---- */
.promo-banner{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,48px);
  flex-wrap:wrap;background:var(--bg-section);border-radius:var(--r-lg);
  padding:clamp(28px,4vw,52px);border:1px solid var(--line)}
.promo-banner__text{flex:1 1 320px}
.promo-banner__title{font-family:var(--font-jp);font-size:clamp(1.3rem,2.6vw,1.9rem);
  color:var(--dark);margin:.3em 0 .5em;line-height:1.4}
.promo-banner__lead{font-size:.92rem;line-height:1.9;color:#6d5b4c;margin:0;max-width:40em}
.promo-banner__actions{display:flex;gap:.8em;flex-wrap:wrap;flex:0 0 auto}

@media (max-width:900px){ .teaser-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){
  .promo-banner{flex-direction:column;align-items:flex-start;text-align:left}
  .promo-banner__actions{width:100%}
}
@media (max-width:560px){ .teaser-grid{grid-template-columns:1fr} }