/*
 * 症状から探す（plant-trouble）
 * タイルは見た目から探す（plant-look）、カードは投稿一覧のカード（子テーマ）と同じ見た目にする。
 * ほかのプラグインの CSS には頼らない（どちらかが無効でも崩れないように）。
 */

/*
 * 一覧のページ・症状のページの全体。
 * 固定ページは page-no-title（上の間がなく、本文は constrained の 645px）なので、見た目から探すと同じく広い幅（1340px）にし、上下の間を取る。
 * 上の間は、トップページ・ほかの一覧のページと同じ spacing-50（PC 50px・スマホ 30px。.steering/20261009-unify-page-heads）。
 * 左右の余白は constrained の has-global-padding に任せる
 */
.plant-trouble-page {
    max-width: var(--wp--style--global--wide-size) !important;
    margin: 0 auto;
    padding: var(--wp--preset--spacing--50) 0 3rem;
}

/* 見出し。大きさ・アイコンの色は、ほかのページの見出しと共通（子テーマ theme.json の custom.pageHead） */
.plant-trouble-title {
    margin: 0;
    font-size: var(--wp--custom--page-head--title-font-size, 1.75rem);
}

.plant-trouble-title > .fa {
    margin-right: 0.3em;
    color: var(--wp--custom--page-head--icon-color, #4eb34c);
}

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

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

/* 症状のページの上の「症状から探す」（一覧のページへ）。見た目から探すの戻るリンクと同じ */
.plant-trouble-back {
    margin: 0 0 0.5rem;
    font-size: var(--wp--preset--font-size--small);
}

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

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

/* 小見出し（グループの名前・ほかの症状から探す）。ほかのページの小見出しと同じ大きさ（子テーマ theme.json の custom.pageHead） */
.plant-trouble-group h2,
.plant-trouble-switch h2 {
    margin: 0 0 0.8rem;
    font-size: var(--wp--custom--page-head--section-title-font-size, 1.25rem);
}

.plant-trouble-group + .plant-trouble-group {
    margin-top: 2.5rem;
}

/*
 * 症状のタイル（写真1枚・名前・件数）。PC 6列・タブレット 4列・スマートフォン 3列（見た目から探すと同じ）
 */
.plant-trouble-tiles {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

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

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

/*
 * 写真は spinner-lazy-load の .image-wrapper に包まれる。枠は投稿一覧のカードと同じく、ふだんは透明にしてホバーで緑にする
 * （outline は角丸に沿って描かれ、border と違ってカードの大きさが変わらない）
 */
.plant-trouble-tiles .image-wrapper,
.plant-trouble-photo .image-wrapper,
.plant-trouble-tile-noimage {
    display: block;
    border-radius: 8px;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.2s ease;
}

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

/* 写真のない症状のタイル（ふつうは出ない） */
.plant-trouble-tile-noimage {
    aspect-ratio: 1 / 1;
    background-color: #f2f2f2;
}

.plant-trouble-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-trouble-tile-count {
    display: block;
    color: var(--wp--custom--page-head--note-color, #767676);
    font-size: 12px;
}

/*
 * 投稿のカード（写真・植物名・日付・メモの冒頭）。メモが読めるよう、投稿一覧（6列）より少なくする。
 * PC 4列・タブレット 3列・スマートフォン 2列（見た目から探すの植物のカードと同じ）
 */
.plant-trouble-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-trouble-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

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

/* 日付は植物名の下に小さく（投稿一覧のカードと同じ灰色。子テーマ theme.json の custom.pageHead.noteColor） */
.plant-trouble-card-date {
    display: block;
    margin-top: 0.2rem;
    color: var(--wp--custom--page-head--note-color, #767676);
    font-size: var(--wp--preset--font-size--small);
}

/* メモの冒頭は3行まで。気づいたことや対処の体験を読めるようにする（全文は投稿詳細で） */
.plant-trouble-card-memo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-top: 0.3rem;
    color: #555;
    font-size: 13px;
    line-height: 1.5;
}

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

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

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

/* ページ送り（50音検索と同じ見た目） */
.plant-trouble-pagination {
    margin: 2rem 0;
    text-align: center;
}

.plant-trouble-pagination ul {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.plant-trouble-pagination a,
.plant-trouble-pagination .current,
.plant-trouble-pagination .dots {
    display: inline-block;
    padding: 0.3em 0.6em;
    border: 1.5px solid #fff;
    border-radius: 8px;
    color: #999;
    font-size: var(--wp--preset--font-size--medium);
    text-decoration: none;
    transition: background-color 0.2s;
}

.plant-trouble-pagination .current,
.plant-trouble-pagination a:hover {
    border-color: #4eb34c;
    background-color: #4eb34c;
    color: #fff;
}

/* ほかの症状から探す（見た目から探すの「ほかの見た目」と同じ切り替えの札。選んでいるものだけ緑の塗り） */
.plant-trouble-switch {
    margin-top: 3rem;
}

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

.plant-trouble-switch a,
.plant-trouble-switch span {
    display: inline-flex;
    align-items: center;
    padding: 0.35em 1em;
    border: 1px solid var(--wp--custom--line, #e0e0e0); /* 切り替えの枠（子テーマ theme.json の custom.line） */
    border-radius: 999px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

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

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

/*
 * トップページの「症状から探す」（plant_trouble_render_top()）。写真は載せず、症状の名前の札と、一覧のページへのリンク。
 * セクションと見出しの見た目は top-page の .top-page-section がそろえる
 */
.plant-trouble-top-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* リンクの札。人気のキーワードと同じ（子テーマ theme.json の custom.chip。.steering/20261009-unify-chips-and-subtitles） */
.plant-trouble-top-list a {
    display: inline-block;
    padding: var(--wp--custom--chip--padding, 0.35em 0.9em);
    border-radius: 999px;
    background-color: var(--wp--custom--chip--background, #eef7ee);
    color: var(--wp--custom--chip--color, #2f7a2d);
    font-size: var(--wp--custom--chip--font-size, 0.9375rem); /* 15px */
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.plant-trouble-top-list a:hover,
.plant-trouble-top-list a:focus-visible {
    background-color: var(--wp--custom--chip--active-background, #4eb34c);
    color: var(--wp--custom--chip--active-color, #fff);
}

/* 「すべての症状を見る」。「科から探す」の「すべての科を見る」（plant-browse）と同じ見た目 */
.plant-trouble-top-all {
    margin: 1.5em 0 0;
    text-align: center;
}

.plant-trouble-top-all a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 1.4em;
    border: 1.5px solid #4eb34c;
    border-radius: 999px;
    color: #4eb34c;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.plant-trouble-top-all a:hover,
.plant-trouble-top-all a:focus-visible {
    background-color: #4eb34c;
    color: #fff;
}

/* 矢印はホバーで少し右へ動かし、押せることを伝える */
.plant-trouble-top-all .fa-arrow-right {
    font-size: 0.85em;
    transition: transform 0.2s;
}

.plant-trouble-top-all a:hover .fa-arrow-right,
.plant-trouble-top-all a:focus-visible .fa-arrow-right {
    transform: translateX(3px);
}

/*
 * 投稿詳細・タグのページの、症状のページへのリンク（plant_trouble_render_more_links()）。
 * 「すべての科を見る」・検索結果0件の「ほかの探し方」と同じ、緑の枠の丸いリンク
 */
.plant-trouble-more {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

/*
 * タグのページでは、件数（search-header）と同じく constrained レイアウトの幅の制限を外して左端にそろえる
 * （そのままだと本文の幅 645px の中央に置かれ、左端の件数・「類似タグも含める」とずれるため）
 */
.archive-main-grid .plant-trouble-more {
    max-width: 100vw !important;
}

.plant-trouble-more a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 1.2em;
    border: 1.5px solid #4eb34c;
    border-radius: 999px;
    color: #4eb34c;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.plant-trouble-more a:hover,
.plant-trouble-more a:focus-visible {
    background-color: #4eb34c;
    color: #fff;
}

.plant-trouble-more .fa-arrow-right {
    font-size: 0.85em;
    transition: transform 0.2s;
}

.plant-trouble-more a:hover .fa-arrow-right,
.plant-trouble-more a:focus-visible .fa-arrow-right {
    transform: translateX(3px);
}