/**
 * イベントバナー（v6.2.457〜）
 *
 * トップ・製品詳細（/search/product/）・見積詳細（/estimate/details/）の3か所で使うので、
 * front-page.css から切り出した。読み込みは inc/setup.php（3か所だけ）。
 * どこに・どのメーカーで出すかはイベント編集画面で選ぶ（inc/cpt/event.php）。
 */

.fp-event-section {
    background: var(--bg-page);
    padding: 56px 0;
    border-bottom: 1px solid var(--color-border);
}
.fp-event-banner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--content-side-padding);
}
.fp-event-banner-inner {
    background: #fff;
    border: 2px solid var(--brand-red);
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    /* 画像 2：文字 1（v6.2.455〜）。以前は画像が 420px 固定で、文字入りのバナーだと小さくて読めなかった
       （一樹さん「せっかくの大きいイベントなのに画像が小さいね」）。
       ⚠️ minmax(0,…) にする（素の 1fr は min-content に引っ張られる・§9.2） */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: stretch;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}
.fp-event-banner-inner:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}
.fp-event-image {
    background: linear-gradient(135deg, #c2185b 0%, #e70012 100%);
    /* バナーは幅1600×高さ1000（16:10）で作る想定。この比率なら切れずに全体が見える（v6.2.455〜） */
    aspect-ratio: 16 / 10;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* ⚠️ WebP Express が img を picture で包むので、picture も広げる（§9.2） */
.fp-event-image picture {
    display: block;
    width: 100%;
    height: 100%;
}
.fp-event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 「画像だけ」の出し方（v6.2.456〜）。幅いっぱい・枠もリンクもなし
   ⚠️ WebP Express が img を picture で包むので、picture にも display:block（§9.2） */
.fp-event-image-only {
    border-radius: 14px;
    overflow: hidden;
}
/* リンク先を入れたとき（v6.2.460〜）。押せると分かるように、乗せたら少しだけ薄く */
.fp-event-image-only a { display: block; transition: opacity 0.2s; }
.fp-event-image-only a:hover { opacity: 0.9; }
.fp-event-image-only a:focus-visible { outline: 3px solid var(--brand-red); outline-offset: -3px; }   /* 外側だと親の overflow:hidden で切れる */
.fp-event-image-only picture,
.fp-event-image-only img {
    display: block;
    width: 100%;
    height: auto;
}
.fp-event-image-placeholder {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding: 20px;
    line-height: 1.7;
}
.fp-event-detail {
    padding: 28px 32px;
    /* 画像が大きくなって枠が縦に伸びたので、文字は上下の真ん中に（v6.2.455〜） */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.fp-event-tag {
    display: inline-block;
    background: var(--brand-red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    letter-spacing: 0.08em;
}
.fp-event-detail .fp-event-title {
    font-size: 22px;
    margin-bottom: 12px;
    color: var(--color-ink);
    font-weight: 700;
    line-height: 1.5;
}
.fp-event-meta {
    font-size: 14px;
    color: #555;
    margin-bottom: 14px;
    line-height: 1.9;
}
.fp-event-meta strong { color: var(--color-ink); }


/* 製品詳細・見積詳細に出すとき（v6.2.457〜）。ページの中なので背景と下線は付けない */
.fp-event-section.is-inpage {
    background: transparent;
    border-bottom: 0;
    padding: 32px 0 8px;
}

/* 「イベント詳細を見る」ボタン。⚠️ 見た目は front-page.css の .fp-btn-primary と同じ
   （トップ以外では front-page.css を読まないので、イベント用に持っている） */
.fp-event-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--brand-red);
    color: #fff;
    font-size: var(--fs-btn);
    font-weight: var(--fw-btn);
    letter-spacing: 0.08em;
    padding: 14px 28px;
    border-radius: 10px;
    transition: background 0.2s;
}
.fp-event-banner-inner:hover .fp-event-btn { background: var(--brand-red-hv); }

@media (max-width: 960px) {
    .fp-event-banner-inner { grid-template-columns: 1fr; }
}