/* JDM Sports Car Experience - Hero セクション専用CSS
   このファイル内のクラスは全て jexp-hero プレフィックスを使用し、
   他のセクションに影響しないようにする。 */

.jexp-hero {
    position: relative;
    width: 100%;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;

    /* --- 背景設定 ---
       本番画像が用意でき次第、下記1行を差し替えるだけでOK。
       例：background-image: url('../../uploads/hero/main.jpg');
       現時点ではダミーのグラデーション背景。 */
    background-image: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 60%, #050505 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

/* 文字を読みやすくするための暗いオーバーレイ（画像使用時に特に効果を発揮） */
.jexp-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 100%);
    z-index: 1;
}

.jexp-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: var(--jexp-space-xl);
    padding-bottom: var(--jexp-space-xl);
}

.jexp-hero__title {
    font-size: var(--jexp-font-size-2xl);
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.3;
    color: var(--jexp-color-text);
    margin: 0 0 var(--jexp-space-md);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.jexp-hero__cta {
    font-size: var(--jexp-font-size-base);
    padding: 16px 36px;
}

/* --- タブレット以上（768px〜） --- */
@media (min-width: 768px) {
    .jexp-hero__title {
        font-size: 44px;
    }
}

/* --- PC以上（1024px〜） --- */
@media (min-width: 1024px) {
    .jexp-hero__title {
        font-size: 56px;
    }

    .jexp-hero__cta {
        font-size: var(--jexp-font-size-lg);
        padding: 18px 48px;
    }
}