/**
 * Featured Plants Index
 * Dedicated familiar-plants family and genus index.
 */

.featured-plants-index-layout { max-width: 1240px; }

.featured-plants-index {
    --pgi-ink: #352f29;
    --pgi-muted: #746a61;
    --pgi-line: #ddd4c8;
    --pgi-green: #2e7d32;
    --pgi-green-dark: #235f27;
    --pgi-green-soft: #edf5eb;
    --pgi-surface: #fffdf9;
    display: block;
}

.featured-plants-index * { box-sizing: border-box; }

.fpi-filter-form {
    display: grid;
    grid-template-columns: minmax(210px, 1.35fr) repeat(4, minmax(130px, .75fr)) auto;
    gap: .75rem;
    align-items: end;
    margin: 1rem 0 .65rem;
    padding: .9rem;
    border: 1px solid var(--pgi-line);
    border-radius: 12px;
    background: var(--pgi-surface);
}

.fpi-filter-form label { display: grid; gap: .3rem; min-width: 0; }
.fpi-filter-form label > span { color: var(--pgi-muted); font-size: .68rem; font-weight: 800; }
.fpi-filter-form input,
.fpi-filter-form select {
    width: 100%;
    min-height: 42px;
    padding: .55rem .65rem;
    border: 1px solid #cfc7bd;
    border-radius: 8px;
    background: #fff;
    color: var(--pgi-ink);
    font: inherit;
    font-size: .78rem;
}
.fpi-filter-form input:focus,
.fpi-filter-form select:focus { outline: 3px solid rgba(46,125,50,.18); border-color: #7f9f79; }

.fpi-filter-actions { display: flex; gap: .4rem; align-items: center; }
.fpi-filter-actions button,
.fpi-filter-actions a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: .55rem .8rem;
    border: 1px solid var(--pgi-green);
    border-radius: 8px;
    font-size: .74rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
.fpi-filter-actions button { background: var(--pgi-green); color: #fff; }
.fpi-filter-actions a { background: #fff; color: var(--pgi-green-dark); }
.fpi-filter-actions button:hover,
.fpi-filter-actions button:focus-visible { background: var(--pgi-green-dark); }
.fpi-filter-actions a:hover,
.fpi-filter-actions a:focus-visible { background: var(--pgi-green-soft); }

.fpi-type-filter { grid-column: 1 / -1; min-width: 0; margin: 0; padding: .15rem 0 0; border: 0; }
.fpi-type-filter legend { margin-bottom: .38rem; padding: 0; color: var(--pgi-muted); font-size: .68rem; font-weight: 800; }
.fpi-type-buttons { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .4rem; }
.fpi-type-buttons button {
    min-height: 38px;
    padding: .42rem .48rem;
    border: 1px solid #b9cbb5;
    border-radius: 999px;
    background: #fff;
    color: var(--pgi-green-dark);
    font: inherit;
    font-size: .68rem;
    font-weight: 750;
    line-height: 1.25;
    cursor: pointer;
}
.fpi-type-buttons button:hover,
.fpi-type-buttons button:focus-visible { border-color: var(--pgi-green); background: var(--pgi-green-soft); }
.fpi-type-buttons button:focus-visible { outline: 3px solid rgba(46,125,50,.18); outline-offset: 2px; }
.fpi-type-buttons button.is-active { border-color: var(--pgi-green); background: var(--pgi-green); color: #fff; }

.fpi-results-bar {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    padding: .2rem .1rem;
    color: var(--pgi-muted);
    font-size: .75rem;
}
.fpi-results-bar strong { color: var(--pgi-green-dark); font-size: 1rem; }
.fpi-results-bar small { margin-left: auto; }

.fpi-taxonomy-guide {
    display: flex;
    align-items: center;
    gap: .8rem 1rem;
    margin: .8rem 0;
    padding: .75rem .9rem;
    border: 1px solid #c8d9c4;
    border-radius: 12px;
    background: var(--pgi-green-soft);
    color: var(--pgi-green-dark);
    font-size: .78rem;
}
.fpi-taxonomy-guide > strong { white-space: nowrap; }
.fpi-taxonomy-path { display: flex; flex-wrap: wrap; align-items: center; gap: .38rem; }
.fpi-taxonomy-path span { padding: .18rem .48rem; border-radius: 999px; background: #fff; font-weight: 800; }
.fpi-taxonomy-path b { color: #799274; }

.fpi-family-nav {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    gap: 0.7rem;
    margin: 1rem 0 1.4rem;
    padding: 0.7rem;
    border: 1px solid var(--pgi-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--special-page-surface-bg, #fff) 94%, transparent);
    backdrop-filter: blur(7px);
}

.fpi-order-nav-group { display: grid; grid-template-columns: minmax(9rem, .3fr) 1fr; align-items: start; gap: .45rem .8rem; }
.fpi-order-nav-group + .fpi-order-nav-group { padding-top: .65rem; border-top: 1px solid var(--pgi-line); }
.fpi-order-nav-name { display: flex; align-items: baseline; gap: .42rem; min-width: 0; color: var(--pgi-green-dark); }
.fpi-order-nav-name strong { overflow-wrap: anywhere; font-family: Georgia, "Times New Roman", serif; font-size: .82rem; }
.fpi-order-nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }

.fpi-family-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.58rem;
    border: 1px solid #cdd9c9;
    border-radius: 999px;
    background: #fff;
    color: #465b43;
    font-size: 0.7rem;
    font-weight: 750;
    text-decoration: none;
}

.fpi-family-nav a:hover,
.fpi-family-nav a:focus-visible { border-color: #8eaa87; background: var(--pgi-green-soft); color: var(--pgi-green-dark); }
.fpi-family-nav a:focus-visible { outline: 3px solid rgba(46,125,50,.2); outline-offset: 2px; }
.fpi-family-nav small { color: #778571; font-size: 0.62rem; }

.fpi-rank-label { display: inline-flex; flex: 0 0 auto; padding: .12rem .4rem; border-radius: 999px; background: #e4eee1; color: #587052; font-family: system-ui, sans-serif; font-size: .62rem; font-style: normal; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.fpi-order-section { margin-top: 2rem; scroll-margin-top: 5.4rem; }
.fpi-order-heading { display: flex; align-items: center; gap: .6rem; padding: .72rem .85rem; border-left: 5px solid var(--pgi-green); border-radius: 8px; background: #edf5eb; }
.fpi-order-heading h2 { margin: 0; color: var(--pgi-green-dark); font-family: Georgia, "Times New Roman", serif; font-size: 1.28rem; }
.fpi-family-section { margin: 1.2rem 0 0 1rem; padding-left: 1rem; border-left: 2px solid #dce7d9; scroll-margin-top: 5.4rem; }
.fpi-family-heading { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; padding-bottom: .42rem; border-bottom: 1px solid #c8d9c4; }
.fpi-family-heading h3 { margin: 0; color: var(--pgi-ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; }

.fpi-genus-section { margin-top: 1rem; }
.fpi-genus-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 .48rem; }
.fpi-genus-title { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.fpi-genus-heading h4 { margin: 0; color: var(--pgi-green-dark); font-family: Georgia, "Times New Roman", serif; font-size: .92rem; font-style: italic; }
.fpi-genus-heading h4 a { color: inherit; text-decoration-color: #a9c1a3; text-underline-offset: 2px; }
.fpi-genus-actions { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: .4rem .7rem; margin-left: auto; }
.fpi-genus-total { display: inline-flex; justify-content: center; padding: .12rem .5rem; border-radius: 999px; background: var(--pgi-green-soft); color: #557151; font-size: .74rem; font-weight: 800; white-space: nowrap; }
.fpi-genus-count { color: #557151; font-size: .76rem; font-weight: 700; text-decoration: none; }
.fpi-genus-count:hover,
.fpi-genus-count:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

.fpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.fpi-card {
    display: flex;
    min-height: 140px;
    flex-direction: column;
    overflow: hidden;
    padding: .7rem 1.25rem;
    border: 1px solid var(--pgi-line);
    border-radius: 18px;
    background: var(--pgi-surface);
    color: inherit;
    text-decoration: none;
}
a.fpi-card { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
a.fpi-card:hover,
a.fpi-card:focus-visible { transform: translateY(-2px); border-color: #a9c1a3; box-shadow: 0 7px 16px rgba(66,50,34,.1); }
a.fpi-card:focus-visible { outline: 3px solid rgba(46,125,50,.2); outline-offset: 2px; }

.fpi-title { display: block; margin: 0 0 .25rem; color: #2f2924; font-size: .9rem; line-height: 1.4; }
.fpi-card-content { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: .65rem; flex: 1; min-height: 0; }
.fpi-media { display: grid; place-items: center; min-height: 84px; overflow: visible; background: transparent; }
.fpi-media img {
    width: 100%;
    height: 100%;
    max-height: 96px;
    object-fit: contain;
    border-radius: 16px;
    transform: scale(1.18);
    transform-origin: center;
    -webkit-mask-image:
        linear-gradient(to right, transparent, #000 16%, #000 84%, transparent),
        linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent, #000 16%, #000 84%, transparent),
        linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    mask-composite: intersect;
}
.fpi-media > span { display: none; }
.fpi-body { display: flex; min-width: 0; flex-direction: column; padding: 0; }
.fpi-body .jp { display: block; color: #5e554d; font-size: 0.75rem; }
.fpi-body .en { display: block; margin-top: 0.12rem; color: #756a61; font-size: 0.69rem; }
.fpi-body .latin { display: block; margin-top: 0.35rem; color: #6d6259; font-family: Georgia, "Times New Roman", serif; font-size: 0.68rem; font-style: italic; line-height: 1.35; }
.fpi-body .genus { display: block; margin-top: .1rem; color: #6d6259; font-size: .68rem; line-height: 1.35; }
.fpi-family-tag { display: inline-flex; align-self: flex-end; justify-content: center; min-width: 56px; margin-top: auto; padding: 0.13rem 0.42rem; border-radius: 999px; background: var(--pgi-green-soft); color: #557151; font-size: 0.61rem; font-weight: 800; }

.fpi-empty {
    margin: 1rem 0 0;
    padding: 1rem;
    border: 1px dashed var(--pgi-line);
    border-radius: 10px;
    color: var(--pgi-muted);
    text-align: center;
}

.fpi-pagination { margin-top: 1.4rem; }
.fpi-pagination .page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.fpi-pagination a,
.fpi-pagination span {
    display: inline-flex;
    min-width: 36px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: .3rem .5rem;
    border: 1px solid var(--pgi-line);
    border-radius: 7px;
    background: #fff;
    color: var(--pgi-green-dark);
    text-decoration: none;
}
.fpi-pagination .current { border-color: var(--pgi-green); background: var(--pgi-green); color: #fff; }

@media (max-width: 980px) {
    .fpi-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fpi-type-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
    .fpi-filter-form { grid-template-columns: 1fr; }
    .fpi-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .fpi-type-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fpi-taxonomy-guide { align-items: flex-start; flex-direction: column; }
    .fpi-family-nav { position: static; }
    .fpi-order-nav-group { grid-template-columns: 1fr; }
    .fpi-family-section { margin-left: .35rem; padding-left: .65rem; }
    .fpi-genus-heading { align-items: flex-start; }
    .fpi-grid { grid-template-columns: 1fr; }
}

@media (max-width: 340px) {
    .fpi-card { padding: .9rem 1rem; }
    .fpi-card-content { grid-template-columns: 92px minmax(0, 1fr); gap: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    a.fpi-card { transition: none; }
}