/* Medicinal Plants Gallery (plant-gallery-page.php)
   Search + A-Z toolbar, plants grouped by letter in a card grid, detail pop-up. */

.pg-gallery {
    --pg-ink: #26312b;
    --pg-muted: #66675c;
    --pg-line: #e6dcc8;
    --pg-gold: #b3781e;
    --pg-green: #455631;
    --pg-cream: #fffdf8;
    padding: clamp(56px, 6vw, 80px) 0 clamp(56px, 6vw, 88px);
    background: #f6f4ec;
}

/* ---- Heading ---- */
.pg-head {
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
}
.pg-head .section-kicker {
    display: block;
    color: #8d562e;
    font-size: var(--fs-xs);
    letter-spacing: 3px;
    text-transform: uppercase;
}
.pg-head .section-kicker::after {
    content: '';
    display: block;
    width: 50px;
    height: 1px;
    margin: 14px auto 16px;
    background: #c9a46e;
}
.pg-head .section-title {
    margin-bottom: 14px;
    color: var(--pg-ink);
    font-weight: 400;
}
.pg-head__intro p {
    margin: 0 0 10px;
    color: var(--pg-muted);
    font-size: var(--fs-lead);
    line-height: 1.6;
}
.pg-empty {
    text-align: center;
    color: var(--pg-muted);
}

/* ---- Toolbar (sticks under the fixed header) ---- */
.pg-toolbar {
    position: sticky;
    top: calc(var(--pg-top, 90px) + 8px);
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(260px, 380px) 1fr;
    align-items: center;
    gap: 14px 24px;
    margin-bottom: 34px;
    padding: 16px 20px;
    background: rgb(255 253 248 / 92%);
    border: 1px solid var(--pg-line);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgb(60 50 30 / 9%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.pg-search {
    position: relative;
}
.pg-search svg {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--pg-gold);
    stroke-width: 2;
    stroke-linecap: round;
    transform: translateY(-50%);
    pointer-events: none;
}
.pg-search input {
    width: 100%;
    height: 46px;
    padding: 0 40px 0 42px;
    color: var(--pg-ink);
    font-size: var(--fs-body);
    background: #fff;
    border: 1px solid #ddd0b8;
    border-radius: 999px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.pg-search input::-webkit-search-cancel-button {
    display: none;
}
.pg-search input:focus {
    border-color: var(--pg-gold);
    box-shadow: 0 0 0 4px rgb(179 120 30 / 14%);
}
.pg-search__clear {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--pg-muted);
    font-size: 20px;
    line-height: 1;
    background: #f1ece0;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.pg-az {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.pg-az__btn {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    color: var(--pg-ink);
    font-family: var(--font-secondary);
    font-size: 1.05rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.pg-az__btn[data-pg-letter="all"] {
    padding: 0 12px;
    font-family: var(--font-primary);
    font-size: var(--fs-xs);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.pg-az__btn:hover:not(:disabled) {
    border-color: #d8c3a0;
    background: #fbf6ec;
}
.pg-az__btn.is-active {
    color: #fff;
    background: var(--pg-green);
    border-color: var(--pg-green);
}
.pg-az__btn:disabled {
    color: #c9c4b6;
    cursor: default;
}
.pg-az__btn:focus-visible,
.pg-card__open:focus-visible,
.pg-modal button:focus-visible {
    outline: 2px solid var(--pg-gold);
    outline-offset: 2px;
}
.pg-count {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--pg-muted);
    font-size: var(--fs-small);
}

/* ---- Letter groups ---- */
.pg-group + .pg-group {
    margin-top: 44px;
}
.pg-group__letter {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 20px;
    color: var(--pg-gold);
    font-family: var(--font-secondary);
    font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem);
    font-weight: 500;
    line-height: 1;
}
.pg-group__letter::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #d8c3a0, transparent);
}

/* ---- Cards ---- */
.pg-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.pg-card.is-in {
    animation: pg-in .45s ease both;
}
@keyframes pg-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
.pg-card__open {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0;
    color: inherit;
    font-family: var(--font-primary);
    font-weight: 400;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    background: var(--pg-cream);
    border: 1px solid var(--pg-line);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 6px 18px rgb(60 50 30 / 6%);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pg-card__open:hover {
    transform: translateY(-5px);
    border-color: #d8c3a0;
    box-shadow: 0 22px 40px rgb(60 50 30 / 14%);
}
.pg-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eef0e2;
}
.pg-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}
.pg-card__open:hover .pg-card__media img {
    transform: scale(1.07);
}
.pg-card__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 40%;
    background: linear-gradient(180deg, transparent, rgb(20 30 15 / 22%));
    opacity: 0;
    transition: opacity .35s;
}
.pg-card__open:hover .pg-card__media::after {
    opacity: 1;
}
/* no photo yet: botanical leaf icon on a soft sage ground */
.pg-card__media--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, #f4f6ea 0%, #e3e8d3 70%);
}
.pg-card__media--icon svg {
    width: 38%;
    height: auto;
    fill: none;
    stroke: #6f8358;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .6s ease;
}
.pg-card__open:hover .pg-card__media--icon svg {
    transform: scale(1.08) rotate(-4deg);
}
.pg-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 20px 20px;
}
.pg-card__name {
    color: var(--pg-ink);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.2;
}
.pg-card__botanical {
    margin-top: 3px;
    color: #8d562e;
    font-size: var(--fs-small);
}
.pg-card__other {
    margin-top: 2px;
    color: var(--pg-muted);
    font-size: var(--fs-xs);
    letter-spacing: .3px;
}
.pg-card__summary {
    display: -webkit-box;
    margin-top: 12px;
    padding-top: 12px;
    color: var(--pg-muted);
    font-size: var(--fs-small);
    line-height: 1.55;
    border-top: 1px solid #efe6d5;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pg-card__more {
    margin-top: auto;
    padding-top: 14px;
    color: var(--pg-green);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.pg-card__more span {
    display: inline-block;
    transition: transform .3s;
}
.pg-card__open:hover .pg-card__more span {
    transform: translateX(4px);
}

/* ---- No results / note ---- */
.pg-noresults {
    padding: 50px 20px;
    text-align: center;
    color: var(--pg-muted);
}
.pg-noresults .btn {
    margin-top: 8px;
    background: var(--pg-green);
    border-color: var(--pg-green);
}
.pg-note {
    max-width: 720px;
    margin: 48px auto 0;
    color: var(--pg-muted);
    font-size: var(--fs-small);
    font-style: italic;
    text-align: center;
}

/* ---- Detail pop-up ---- */
.pg-modal {
    width: min(980px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: var(--pg-cream, #fffdf8);
    box-shadow: 0 30px 80px rgb(0 0 0 / 30%);
    overflow: hidden;
}
.pg-modal[open] {
    animation: pg-pop .35s ease both;
}
@keyframes pg-pop {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to { opacity: 1; transform: none; }
}
.pg-modal::backdrop {
    background: rgb(20 26 16 / 62%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
html.pg-locked {
    overflow: hidden;
}
.pg-modal__inner {
    position: relative;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
.pg-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    background: rgb(20 26 16 / 55%);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.pg-modal__content {
    display: grid;
    grid-template-columns: 44% 1fr;
    min-height: 420px;
}
.pg-modal__media {
    min-height: 100%;
    background: #eef0e2;
}
.pg-modal__media img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
}
.pg-modal__media.pg-card__media--icon svg {
    width: 46%;
}
.pg-modal__body {
    padding: 38px 40px 30px;
    color: #26312b;
}
.pg-modal__name {
    margin: 0;
    color: #26312b;
    font-family: var(--font-secondary);
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.05;
}
.pg-modal__botanical {
    margin: 6px 0 0;
    color: #8d562e;
    font-size: var(--fs-lead);
}
.pg-modal__facts {
    display: grid;
    gap: 8px;
    margin: 20px 0;
    padding: 14px 0;
    border-top: 1px solid #ece2d0;
    border-bottom: 1px solid #ece2d0;
}
.pg-modal__facts:not(:has(div)) {
    display: none;
}
.pg-modal__facts div {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
}
.pg-modal__facts dt {
    color: #8d562e;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.pg-modal__facts dd {
    margin: 0;
    color: #4f5148;
    font-size: var(--fs-small);
}
.pg-modal__text {
    margin-top: 20px;
    color: #4f5148;
    font-size: var(--fs-body);
    line-height: 1.75;
}
.pg-modal__facts:not(:has(div)) + .pg-modal__text {
    margin-top: 0;
}
.pg-modal__text p {
    margin: 0 0 12px;
}
.pg-modal__nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: #f4f1e7;
    border-top: 1px solid #ece2d0;
}
.pg-modal__arrow {
    text-transform: none;
    letter-spacing: normal;
    padding: 8px 12px;
    color: var(--pg-green, #455631);
    font-family: var(--font-secondary);
    font-size: var(--fs-lead);
    font-weight: 600;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
.pg-modal__arrow:hover {
    background: #e9e4d4;
}
.pg-modal__arrow[data-pg-next] {
    margin-left: auto;
}

/* ---- Responsive ---- */
@media (max-width: 1199px) {
    .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .pg-toolbar { grid-template-columns: 1fr; }
    .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-modal__content { grid-template-columns: 1fr; }
    .pg-modal__media img { min-height: 0; height: 260px; }
    .pg-modal__media.pg-card__media--icon { height: 200px; }
    .pg-modal__body { padding: 26px 24px 22px; }
}
@media (max-width: 575px) {
    .pg-toolbar { padding: 12px; top: calc(var(--pg-top, 70px) + 4px); }
    .pg-az { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .pg-az__btn { flex: none; }
    .pg-grid { gap: 14px; }
    .pg-card__body { padding: 14px 14px 16px; }
    .pg-card__summary { -webkit-line-clamp: 2; }
    .pg-modal__facts div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .pg-card.is-in,
    .pg-modal[open] { animation: none; }
    .pg-card__open,
    .pg-card__media img,
    .pg-card__media--icon svg { transition: none; }
}

/* One continuous A-Z grid (no separate row per letter): the letter groups
   stay in the markup for the filter, but their boxes are dissolved. */
.pg-groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.pg-group,
.pg-group .pg-grid {
    display: contents;
}
.pg-group[hidden],
.pg-card[hidden] {
    display: none;
}
.pg-group + .pg-group {
    margin-top: 0;
}
.pg-group__letter {
    display: none;
}
@media (max-width: 1199px) {
    .pg-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .pg-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .pg-groups { gap: 14px; }
}

/* The cards are <button>s: keep the theme's general button hover/focus
   (blue fill) off them - a soft warm tint instead. */
.pg-card__open:hover,
.pg-card__open:focus,
.pg-card__open:active {
    color: inherit;
    background: #fbf6ea;
}
.pg-card__open:hover .pg-card__name {
    color: #8d562e;
}
.pg-card__open:hover .pg-card__summary {
    border-top-color: #e6d6b8;
}
.pg-az__btn:hover:not(:disabled):not(.is-active) {
    color: var(--pg-ink);
}
.pg-az__btn.is-active:hover {
    color: #fff;
    background: #34421f;
    border-color: #34421f;
}
.pg-az__btn:disabled:hover {
    color: #c9c4b6;
    background: transparent;
    border-color: transparent;
}
.pg-modal__arrow:hover,
.pg-modal__arrow:focus {
    color: #455631;
    background: #e9e4d4;
    border-color: transparent;
}
.pg-search__clear:hover {
    color: var(--pg-ink);
    background: #e6dcc8;
    border-color: transparent;
}
.pg-modal__close:hover,
.pg-modal__close:focus {
    color: #fff;
    background: rgb(20 26 16 / 75%);
}