/* ==========================================================
   日本酒101 インデックス（一覧）ページ：page-sake-101.php 専用CSS
   ------------------------------------------------------------
   ・共通スキャフォールドは sake-101_common.css（container 等）を併用
   ・このファイルは index 固有（ヒーロー／絞り込み／カードグリッド）のみ
   ・SP=1rem=100vw/375、PC(>=768px)=1rem=1px
   ・ブロック名は既存 .sake-101__index-*（配下ページのアンカー枠）と衝突しない
     よう sake-101-idx__ を使用
   ========================================================== */

/* ===== ヒーロー ===== */
.sake-101-idx__hero {
    padding: 20rem 15rem 0;   /* 下は0：招き猫の底を下ブロック（一覧）に接続させる */
    background: var(--color-neutral-100, #fff);
}
.sake-101-idx__hero-inner {
    max-width: 1000rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column-reverse;   /* SP：リード文が上、イラストが下 */
    gap: 8rem;
}
.sake-101-idx__hero-img {
    display: block;
    width: 100%;
    height: auto;
}
.sake-101-idx__hero-text p {
    margin: 0;
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 16rem;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.96px;
    text-align: center;   /* SP：中央寄せ */
}
@media screen and (min-width: 768px) {
    .sake-101-idx__hero {
        padding: 40rem 20rem 0;
    }
    .sake-101-idx__hero-inner {
        /* max-width:1000px は 1000rem と同値のため不要。flex切替のみ上書き */
        flex-direction: row;          /* PC：イラスト左、リード文右 */
        align-items: center;
        gap: 30rem;
    }
    .sake-101-idx__hero-visual {
        width: 50%;
    }
    .sake-101-idx__hero-text {
        flex: 1;
        padding-left: 70rem;
    }
    .sake-101-idx__hero-text p {
        font-size: 18rem;
        letter-spacing: 1.08rem;
        text-align: left;   /* PC：左寄せ */
    }
}

/* ===== 一覧セクション（クリーム地） ===== */
.sake-101-idx__list {
    padding: 60rem 10rem;
    background: #ffefcc;
}
.sake-101-idx__list-inner {
    max-width: 1200rem;
    margin: 0 auto;
    /* 絞り込み→グリッドの余白は親のgapで管理（各ブロックは外側marginを持たない） */
    display: flex;
    flex-direction: column;
    gap: 20rem;
}
@media screen and (min-width: 768px) {
    .sake-101-idx__list {
        padding: 80rem 0;
    }
    .sake-101-idx__list-inner {
        /* max-width:1200px は 1200rem と同値のため不要。padding/gapのみ上書き */
        padding: 0 20rem;
        gap: 40rem;
    }
}

/* ===== 絞り込み ===== */
.sake-101-idx__filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10rem 6rem;
}
.sake-101-idx__filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 12rem;
    border: 1px solid #8f8c8b;
    border-radius: 6rem;
    background: var(--color-neutral-100, #fff);
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 14rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    cursor: pointer;
    white-space: nowrap;
}
.sake-101-idx__filter-btn.is-active {
    border-color: var(--color-secondary-600, #001d50);
    background: var(--color-secondary-600, #001d50);
    color: var(--color-text-inverse, #fff);
}
@media screen and (min-width: 768px) {
    /* filter-list gap / filter-btn padding・border-radius・font-size はSPと同値(rem=px)のため
       再宣言不要。PC固有(transition/hover)のみ記述 */
    .sake-101-idx__filter-btn {
        transition: .3s opacity;
    }
    .sake-101-idx__filter-btn:not(.is-active):hover {
        opacity: .7;
    }
}

/* ===== カードグリッド ===== */
.sake-101-idx__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 同じ行内のカードの高さを常に揃える（タイトルの折返し行数が画面幅によって
       カードごとに変わるため、align-items:startだと行内で高さがバラつく） */
    align-items: stretch;
    gap: 24rem 10rem;
}
.sake-101-idx__card-item[hidden] {
    display: none;
}
@media screen and (min-width: 768px) {
    .sake-101-idx__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 36rem 30rem;
    }
}

/* ===== カード ===== */
.sake-101-idx__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-neutral-100, #fff);
    border-radius: 10rem;
    overflow: hidden;
}
.sake-101-idx__card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.sake-101-idx__card-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sake-101-idx__card-tag {
    position: absolute;
    left: 12rem;
    bottom: 8rem;
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    padding: 8rem 16rem;
    border-radius: 100rem;
    background: #ffefcc;
    line-height: 1;
    white-space: nowrap;
}
.sake-101-idx__card-tag-cat {
    color: var(--color-text-accent, #e83821);
    font-family: "Hiragino Sans";
    font-size: 12rem;
    font-weight: 700;
    letter-spacing: 0.72px;
}
.sake-101-idx__card-tag-suffix {
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 10rem;
    font-weight: 700;
    letter-spacing: 0.6px;
}
.sake-101-idx__card-body {
    flex: 1;   /* 行内の高さ揃え（card-item側のstretch）で生じた余白をcard-body自身が埋める */
    padding: 12rem 15rem;
}
.sake-101-idx__card-title {
    margin: 0;
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 14rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.84px;   /* Figma実測6%（見出し12%式ではない） */
    min-height: 63rem;   /* SPは最長3行に合わせて確保（14rem×1.5×3）→ 全カードの高さを揃える */
}
/* カードタイトルの改行制御：PCのみ改行（SPはカード幅が狭いため自然折返し） */
.sake-101-idx__br-pc {
    display: none;
}
@media screen and (min-width: 768px) {
    .sake-101-idx__br-pc {
        display: inline;
    }
}
@media screen and (min-width: 768px) {
    .sake-101-idx__card {
        /* border-radius:10px は 10rem と同値のため不要。PC固有のtransition/hoverのみ */
        transition: .3s opacity;
    }
    .sake-101-idx__card:hover {
        opacity: .8;
    }
    /* .sake-101-idx__card-tag は left/bottom/gap/padding すべてSPと同値のためPC上書き不要 */
    .sake-101-idx__card-tag-cat {
        font-size: 16rem;
        letter-spacing: 0.96rem;
    }
    .sake-101-idx__card-tag-suffix {
        font-size: 13rem;
        letter-spacing: 0.78rem;
    }
    .sake-101-idx__card-body {
        padding: 20rem 36rem;
    }
    .sake-101-idx__card-title {
        font-size: 18rem;
        letter-spacing: 1.08rem;   /* Figma実測6% */
        min-height: 54rem;   /* 2行分を確保（18rem×1.5×2）→ フィルタに依らず全カード同じ高さ */
    }
}