/*
 * 見た目から探す（plant-look）
 * タイルはトップページの「科から探す」（plant-browse）、カードは50音検索（search-by-kana）と同じ見た目にする。
 * ほかのプラグインの CSS には頼らない（どちらかが無効でも崩れないように）。
 */

/*
 * 一覧のページ・結果のページの全体。
 * 固定ページは page-no-title（上の間がなく、本文は constrained の 645px）なので、50音検索と同じく広い幅（1340px）にし、上下の間を取る。
 * 左右の余白は constrained の has-global-padding に任せる
 */
.plant-look-page {
    max-width: var(--wp--style--global--wide-size) !important;
    margin: 0 auto;
    padding: 2rem 0 3rem;
}

/* 特徴のタイルの並び。PC 6列・タブレット 4列・スマートフォン 3列（「科から探す」と同じ） */
.plant-look-tiles {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.8em;
    margin: 1em 0 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 1024px) {
    .plant-look-tiles {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    .plant-look-tiles {
        grid-template-columns: repeat(3, 1fr);
    }
}

.plant-look-tiles a {
    display: block;
    color: #333;
    text-decoration: none;
}

/* 写真は spinner-lazy-load の .image-wrapper に包まれる。枠は投稿一覧のカードと同じく、ふだんは透明にしてホバーで緑にする */
.plant-look-tiles .image-wrapper {
    display: block;
    border-radius: 8px;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.2s ease;
}

.plant-look-tiles img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
}

.plant-look-tile-name {
    display: block;
    margin-top: 0.4rem;
    font-size: 15px;
    line-height: 1.4;
    text-wrap: balance; /* 2行になるとき、1〜2文字だけが次の行に落ちないよう、行の長さをそろえる */
    transition: color 0.2s ease;
}

/* マウスを乗せる・キーボードで選ぶと、名前を緑にして写真に緑の枠を出す（投稿一覧のカードと同じ） */
.plant-look-tiles a:hover .plant-look-tile-name,
.plant-look-tiles a:focus-visible .plant-look-tile-name {
    color: #4eb34c;
}

.plant-look-tiles a:hover .image-wrapper,
.plant-look-tiles a:focus-visible .image-wrapper {
    outline-color: #4eb34c;
}

/* キーボードで選んだときに本体の標準のフォーカスの枠と緑の枠が二重にならないよう、リンクの枠は消す */
.plant-look-tiles a:focus,
.plant-look-card a:focus {
    outline: none;
}

/* 一覧のページ・結果のページの見出し（50音検索と同じ） */
.plant-look-title {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-large);
}

.plant-look-note {
    margin: 0.4rem 0 1.5rem;
    color: #767676;
    font-size: var(--wp--preset--font-size--small);
}

.plant-look-empty {
    margin: 2rem 0;
}

/* 結果のページの上の「見た目から探す」（一覧のページへ） */
.plant-look-back {
    margin: 0 0 0.5rem;
    font-size: var(--wp--preset--font-size--small);
}

.plant-look-back a {
    color: #4eb34c;
    text-decoration: none;
}

.plant-look-back .fa {
    margin-right: 0.3em;
}

/* 植物のカードの並び。PC 4列・タブレット 3列・スマートフォン 2列（50音検索と同じ） */
.plant-look-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media screen and (max-width: 1024px) {
    .plant-look-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .plant-look-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* カード全体が1つのリンク */
.plant-look-card a {
    display: block;
    color: #333;
    text-decoration: none;
}

/* 写真。正方形の枠に、4枚なら 2×2、それ以外は1枚を大きく */
.plant-look-photos {
    display: grid;
    gap: 2px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f2f2f2;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.2s ease;
}

.plant-look-photos.is-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.plant-look-photos img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0; /* グリッドのマスより大きな画像でも、マスに収める */
    object-fit: cover;
}

/* 植物名は2行までにして、カードの高さをそろえる。全角の空白は plant_look_display_title() でまとめてから出す */
.plant-look-card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 0.5rem;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.plant-look-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.3rem;
}

.plant-look-count {
    color: #767676;
    font-size: 12px;
}

.plant-look-card a:hover .plant-look-card-title,
.plant-look-card a:focus-visible .plant-look-card-title {
    color: #4eb34c;
}

.plant-look-card a:hover .plant-look-photos,
.plant-look-card a:focus-visible .plant-look-photos {
    outline-color: #4eb34c;
}

/* 札。文字が付くので、色が分からなくても見分けられる（50音検索と同じ色） */
.plant-look-type {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.1em 0.6em;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
}

.plant-look-type-genus {
    background-color: #e8f5e7;
    color: #2a6b29;
}

.plant-look-type-name {
    background-color: #f2f2f2;
    color: #555;
}

/* ほかの見た目から探す（50音検索の分類の切り替えと同じボタン） */
.plant-look-switch {
    margin-top: 3rem;
}

.plant-look-switch h2 {
    margin: 0 0 0.8rem;
    font-size: var(--wp--preset--font-size--large);
}

.plant-look-switch ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plant-look-switch a,
.plant-look-switch span {
    display: inline-flex;
    align-items: center;
    padding: 0.35em 1em;
    border: 1.5px solid #ccc;
    border-radius: 999px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.plant-look-switch a:hover {
    border-color: #4eb34c;
}

.plant-look-switch span[aria-current="page"] {
    background-color: #4eb34c;
    border-color: #4eb34c;
    color: #fff;
}

/* 組み合わせのページの、選んでいる2つの特徴（× で外す） */
.plant-look-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.8rem 0 0;
    padding: 0;
    list-style: none;
}

.plant-look-selected a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35em 0.8em 0.35em 1em;
    border: 1.5px solid #4eb34c;
    border-radius: 999px;
    background-color: #4eb34c;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.plant-look-selected a:hover,
.plant-look-selected a:focus-visible {
    background-color: #fff;
    color: #2a6b29;
}

.plant-look-remove {
    font-size: 16px;
    line-height: 1;
}

/* 読み上げだけに使う文言（テーマの screen-reader-text に頼らない） */
.plant-look-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 組み合わせて絞り込む（ほかの見た目から探すと同じボタンに、件数を付ける） */
.plant-look-combine {
    margin-top: 3rem;
}

.plant-look-combine h2 {
    margin: 0 0 0.3rem;
    font-size: var(--wp--preset--font-size--large);
}

.plant-look-combine-note {
    margin: 0 0 0.8rem;
    color: #767676;
    font-size: var(--wp--preset--font-size--small);
}

.plant-look-combine ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plant-look-combine a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 1em;
    border: 1.5px solid #4eb34c;
    border-radius: 999px;
    color: #2a6b29;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.plant-look-combine a:hover,
.plant-look-combine a:focus-visible {
    background-color: #e8f5e7;
}

.plant-look-combine-count {
    color: #767676;
    font-size: 12px;
}

/*
 * タイルを選んでから探す部品（select.js）。JavaScript が動くときだけ、並びに .is-enhanced が付く
 */
.plant-look-picker-hint {
    margin: 0.3rem 0 0;
    color: #767676;
    font-size: var(--wp--preset--font-size--small);
}

.plant-look-tiles li {
    position: relative;
}

/* 選んだ印（✓）。選んでいないときは出さない */
.plant-look-tile-check {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #4eb34c;
    color: #fff;
    font-size: 14px;
    line-height: 26px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.plant-look-tiles a.is-selected .plant-look-tile-check {
    display: block;
}

/* 選んだタイルは、写真に緑の枠をいつも出し、名前を緑の太字にする */
.plant-look-tiles a.is-selected .image-wrapper {
    outline-color: #4eb34c;
}

.plant-look-tiles a.is-selected .plant-look-tile-name {
    color: #2a6b29;
    font-weight: 600;
}

/* 押せないタイル（組み合わせて0件・3つ目）。薄くして、押せないことを「組み合わせなし」の文字でも出す */
.plant-look-tiles a.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.plant-look-tiles a.is-disabled:hover .image-wrapper {
    outline-color: transparent;
}

.plant-look-tiles a.is-disabled:hover .plant-look-tile-name {
    color: #333;
}

/* 1つ選んだときの、組み合わせの件数 */
.plant-look-tile-count {
    display: block;
    color: #767676;
    font-size: 12px;
}

/* 「〇〇で探す」と「選び直す」。タイルが長いスマートフォンでも、タイルを見ている間は画面の下に見えるようにする */
.plant-look-picker-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.8rem 0;
    background-color: rgba(255, 255, 255, 0.95);
}

.plant-look-picker-bar[hidden] {
    display: none;
}

.plant-look-picker-search {
    display: inline-flex;
    align-items: center;
    padding: 0.6em 1.4em;
    border-radius: 999px;
    background-color: #4eb34c;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s;
}

.plant-look-picker-search:hover,
.plant-look-picker-search:focus-visible {
    background-color: #3d9a3b;
    color: #fff;
}

.plant-look-picker-clear {
    padding: 0.5em 1em;
    border: 1.5px solid #ccc;
    border-radius: 999px;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    cursor: pointer;
}

.plant-look-picker-clear:hover,
.plant-look-picker-clear:focus-visible {
    border-color: #4eb34c;
}