/* Page with every plant as a plant bag. Each row of plant bags hangs from its own gold cord, over the same background as the description area of the plant pages. */

.plantsGallery,
.plantsGallery *,
.plantsGallery *::before,
.plantsGallery *::after {
    box-sizing: border-box;
}

.plantsGalleryMain {
    position: relative;
    padding-bottom: clamp(56px, 6.4vw, 96px);
    overflow-x: clip;
    background: var(--paper);
    color: var(--ink);
}

/* Dark band behind the logo and the menu, down to the gold cord of the top bar. */
.plantsGalleryMain::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: var(--cord-y);
    background: var(--night);
}

/* ---------- Title of the page ---------- */

.plantsGalleryHead {
    max-width: 860px;
    margin-inline: auto;
    padding: calc(var(--cord-y) + var(--search-h) / 2 + clamp(34px, 4vw, 60px)) var(--gutter) clamp(26px, 3vw, 44px);
    text-align: center;
}

.plantsGalleryTitle {
    margin: 0;
    color: var(--leaf-deep);
    font-family: var(--serif);
    font-size: clamp(38px, 4.4vw, 60px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.016em;
    user-select: text;
    cursor: text;
}

.plantsGalleryTitleAccent {
    color: var(--search-button-color);
    font-family: var(--serif);
    font-style: italic;
}

.plantsGalleryLead {
    margin: clamp(10px, 1.2vw, 16px) 0 0;
    font-family: var(--serif);
    font-size: clamp(21px, 1.72vw, 25px);
    line-height: 1.3;
    text-wrap: balance;
    user-select: text;
    cursor: text;
}

/* ---------- Rows of plant bags ---------- */

/* The width of the plant bags is measured from this box. */
.plantsGalleryHanger {
    container-type: inline-size;
    max-width: 1480px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.plantsGalleryLine {
    --plantsGalleryColumns: 8;
    --plantsGalleryGap: clamp(8px, 1.4vw, 22px);

    display: grid;
    grid-template-columns: repeat(var(--plantsGalleryColumns), minmax(0, 1fr));
    gap: clamp(30px, 3.4vw, 52px) var(--plantsGalleryGap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.plantsGalleryItem {
    position: relative;
    display: flex;
    justify-content: center;
}

/* Gold cord of a row. The first plant bag of each row draws it from one edge of the screen to the other; the width sections at the end of this file say which plant bags are first in a row. The color is deeper than the gold cord of the top bar, so it shows on the light background. */
.plantsGalleryItem::before {
    content: "";
    position: absolute;
    display: none;
    top: 0;
    left: -100vw;
    right: -100vw;
    height: 2px;
    background: linear-gradient(90deg, var(--brass), rgb(217, 178, 76) 50%, var(--brass));
    box-shadow: 0 1px 3px rgba(120, 90, 30, .28);
}

/* ---------- One plant bag: the design of the index page, sized to fill its column ---------- */

.plantsGalleryBag {
    --tag-w: round(down, calc((100cqw - (var(--plantsGalleryColumns) - 1) * var(--plantsGalleryGap)) / var(--plantsGalleryColumns)), 2px);
    --plantsGalleryDrop: clamp(20px, 2.4vw, 34px);

    position: relative;
    margin-top: var(--plantsGalleryDrop);
    transform-origin: 50% calc(var(--plantsGalleryDrop) * -1);
}

.plantsGalleryItem:nth-child(even) .plantsGalleryBag {
    --plantsGalleryDrop: clamp(40px, 4.6vw, 66px);
}

/* A plant bag that grows under the mouse stays above its neighbors. */
.plantsGalleryBag:hover,
.plantsGalleryBag:focus-within {
    z-index: 5;
}

.plantsGalleryThread {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: calc(100% - var(--eye-y));
    width: 1px;
    height: calc(var(--plantsGalleryDrop) + var(--eye-y));
    background: var(--brass);
    pointer-events: none;
}

/* The plant bags are the same color as this background, so here they get a dark edge and a warm shadow instead of the light edge they have over the photos. */
.plantsGalleryBag .topBarTag {
    filter: drop-shadow(0 0 .75px rgba(140, 105, 45, .75)) drop-shadow(0 10px 14px rgba(70, 48, 12, .22));
}

.plantsGalleryBag a.topBarTag:not(.topBarRailIsScrolling a):hover,
.plantsGalleryBag a.topBarTag:focus-visible {
    filter: drop-shadow(0 0 .75px rgba(140, 105, 45, .75)) drop-shadow(0 0 18px rgba(217, 165, 60, .9));
}

/* ---------- How many plant bags fit in a row, by screen width ---------- */

@media only screen and (min-width: 1200px) {
    .plantsGalleryItem:nth-child(8n + 1)::before {
        display: block;
    }
}

@media only screen and (min-width: 900px) and (max-width: 1199px) {
    .plantsGalleryLine {
        --plantsGalleryColumns: 6;
    }

    .plantsGalleryItem:nth-child(6n + 1)::before {
        display: block;
    }
}

@media only screen and (min-width: 601px) and (max-width: 899px) {
    .plantsGalleryLine {
        --plantsGalleryColumns: 5;
    }

    .plantsGalleryItem:nth-child(5n + 1)::before {
        display: block;
    }
}

@media only screen and (max-width: 600px) {
    .plantsGalleryTitle {
        font-size: 34px;
    }

    .plantsGalleryLead {
        font-size: 19px;
    }

    .plantsGalleryLine {
        --plantsGalleryColumns: 3;
    }

    .plantsGalleryItem:nth-child(3n + 1)::before {
        display: block;
    }
}