/* Native plants by state — pages generated by flora-api scripts/explorer/build_state_pages.py.
   Site tokens come from /root.css; greens match the Native Plant Finder. */

.np {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 24px 32px;
    font-family: var(--special);
    color: var(--black);
}

.np a { color: var(--primary-dark); text-decoration: underline; }
.np i { font-style: italic; }
.np h2 { font-size: 1.5em; margin: 28px 0 12px; color: var(--primary-dark); }
.np p { line-height: 1.45; margin: 8px 0; }

.np-crumbs { font-size: 0.875em; color: #4d4d4d; }
.np-lede { font-size: 1.125em; }
.np-updated { font-size: 0.8125em; color: #4d4d4d; margin-top: 20px; }

.np-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 16px 0;
    padding: 14px 18px;
    background: var(--primary-x-light);
    border-left: 4px solid var(--primary);
    border-radius: 6px;
}
.np-cta p { flex: 1 1 320px; margin: 0; }
.np .np-button {
    display: inline-block;
    padding: 10px 18px;
    background: var(--primary-dark);
    color: var(--white);
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--subtleShadow);
}
.np .np-button:hover { background: var(--primary); }

.np-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.np-card {
    background: var(--white);
    border-radius: 8px;
    box-shadow: var(--standardShadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.np .np-card-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: inherit;
    text-decoration: none;
    padding-bottom: 6px;
}
.np-card-link:hover .np-name, .np-card-link:focus .np-name { text-decoration: underline; }
.np-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--neutral-light);
    margin-bottom: 6px;
}
.np-name { font-weight: 600; padding: 0 12px; }
.np-sci { font-size: 0.875em; color: #4d4d4d; padding: 0 12px; }
.np-facts { font-size: 0.8125em; color: #4d4d4d; padding: 0 12px; }
.np .np-credit { font-size: 0.6875em; color: #666; padding: 0 12px 10px; margin: auto 0 0; line-height: 1.3; }

.np-states {
    list-style: none;
    margin: 16px 0;
    padding: 0;
    columns: 3 220px;
    column-gap: 32px;
}
.np-states li { padding: 5px 0; break-inside: avoid; }
.np-states span { font-size: 0.8125em; color: #4d4d4d; }

.np-about {
    margin-top: 36px;
    padding: 4px 18px 10px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: var(--subtleShadow);
}
.np-about h2 { font-size: 1.25em; margin-top: 14px; }
.np-about p { font-size: 0.9375em; }

.np-attribution { margin-top: 16px; font-size: 0.8125em; color: #4d4d4d; text-align: center; }

@media (max-width: 480px) {
    .np { padding: 8px 12px 24px; }
    .np-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

/* The site header caps its title at 152px on phones — too narrow for "Native Plants of North Carolina". */
@media (max-width: 480px) {
    .np-page .utilityHeaderSubgroup h1 { max-width: 200px; font-size: 1.25em; }
}