/* =========================================
   MJB (My Japan Bites) – Full CSS
   用途: 子テーマ /assets/mjb.css
   ※ front-page.php のテンプレ名が "MJB Home (Code)"
   ========================================= */

/* ---------- Variables ---------- */
:root{
  --mjb-red:#B24B33;
  --mjb-dark:#1B1B1B;
  --mjb-bg:#FAFAFA;
  --mjb-radius:14px;
  --mjb-shadow:0 4px 16px rgba(0,0,0,.08);
  --mjb-ease:all .25s ease;
}

/* =========================================
   GLOBAL / BASE
========================================= */
.mjb-section{
  padding:80px 20px;
  max-width:1200px;
  margin:0 auto;
}
.mjb-section__title{
  text-align:center;
  font-size:2rem;
  font-weight:700;
  margin-bottom:40px;
  color:var(--mjb-dark);
}

/* =========================================
   HERO (FULL-BLEED) + HEADER GAP ZERO
   - front-page.php 版: body に page-template-mjb-home-code が付く
   - ブロック版ホームでも動くよう .home もフォールバック
========================================= */

/* ヘッダー直下の余白を完全に削除 */
.page-template-mjb-home-code .l-contents,
.page-template-mjb-home-code .l-contents__inner,
.page-template-mjb-home-code .post_content,
.home .l-contents,
.home .l-contents__inner,
.home .post_content{
  padding-top:0 !important;
}

/* 最初のブロック/要素の margin-top を打ち消し */
.page-template-mjb-home-code .post_content > *:first-child,
.home .post_content > *:first-child{
  margin-top:0 !important;
}

/* フルブリードHERO（テーマのコンテンツ幅を突破） */
.page-template-mjb-home-code .mjb-hero,
.home .mjb-hero{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  position:relative;
  min-height:56vh;
  color:#fff;
  text-align:center;
  padding:180px 20px;

  /* 背景画像は front-page.php で inline style の background-image を出力
     ここではポジション/サイズのみを定義 */
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* 暗幕オーバーレイ */
.page-template-mjb-home-code .mjb-hero::before,
.home .mjb-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

/* ヒーロー内側 */
.page-template-mjb-home-code .mjb-hero__inner,
.home .mjb-hero__inner{
  position:relative;
  z-index:1;
  max-width:900px;
  margin:0 auto;
}

.page-template-mjb-home-code .mjb-hero__title,
.home .mjb-hero__title{
  font-size:2.6rem;
  font-weight:700;
  line-height:1.3;
}

.page-template-mjb-home-code .mjb-hero__subtitle,
.home .mjb-hero__subtitle{
  font-size:1.2rem;
  margin:16px 0 40px;
  opacity:.92;
}

/* =========================================
   CARDS (共通)
========================================= */
.mjb-cards{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.mjb-card{
  background:#fff;
  border-radius:var(--mjb-radius);
  box-shadow:var(--mjb-shadow);
  overflow:hidden;
  transition:var(--mjb-ease);
}
.mjb-card:hover{ transform:translateY(-4px); }
.mjb-card img{
  width:100%;
  height:200px;
  object-fit:cover;
}
.mjb-card__content{ padding:16px; }
.mjb-card__title{ font-weight:700; margin-bottom:8px; font-size:1.1rem; }
.mjb-card__desc{ font-size:.95rem; color:#555; }

/* プレースホルダー状態の視認性 */
.mjb-card.is-placeholder{ opacity:.7; }

/* =========================================
   CATEGORY NAV
========================================= */
.mjb-category__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.mjb-cat-item{
  background:var(--mjb-red);
  color:#fff;
  padding:12px 22px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  transition:var(--mjb-ease);
}
.mjb-cat-item:hover{ background:#8e3d28; }

/* =========================================
   AREA HIGHLIGHTS
========================================= */
.mjb-area__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;
}
.mjb-area__item{
  position:relative;
  overflow:hidden;
  border-radius:var(--mjb-radius);
  display:block;
}
.mjb-area__item img{
  width:100%;
  height:240px;
  object-fit:cover;
  transition:transform .4s ease;
}
.mjb-area__item:hover img{ transform:scale(1.05); }
.mjb-area__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  font-size:1.4rem;
}

/* =========================================
   CTA
========================================= */
.mjb-cta{
  background:var(--mjb-red);
  color:#fff;
  text-align:center;
  padding:100px 20px;
}
.mjb-cta__inner{ max-width:700px; margin:0 auto; }
.mjb-btn{
  display:inline-block;
  padding:12px 28px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  transition:var(--mjb-ease);
}
.mjb-btn--primary{ background:#fff; color:var(--mjb-red); }
.mjb-btn--primary:hover{ background:#f5efee; }

/* =========================================
   NEWSLETTER
========================================= */
.mjb-newsletter{
  background:var(--mjb-bg);
  text-align:center;
  padding:80px 20px;
}
.mjb-newsletter__form{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:20px;
  flex-wrap:wrap;
}
.mjb-newsletter__form input{
  padding:10px 16px;
  border:1px solid #ccc;
  border-radius:999px;
  min-width:260px;
}
.mjb-btn--outline{
  background:transparent;
  border:2px solid var(--mjb-red);
  color:var(--mjb-red);
}
.mjb-btn--outline:hover{
  background:var(--mjb-red);
  color:#fff;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width:768px){
  .page-template-mjb-home-code .mjb-hero,
  .home .mjb-hero{ padding:120px 16px; }

  .page-template-mjb-home-code .mjb-hero__title,
  .home .mjb-hero__title{ font-size:1.9rem; }

  .mjb-section{ padding:60px 16px; }
}

/* =========================================
   OPTIONAL: ブロック版ホームで alignfull を補助
   ※ カスタムHTMLで運用中に白帯が残る場合の保険
========================================= */
.wp-block-custom-html .mjb-hero{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}