/* Article lists, article, text pages, plant page frame, search results, 404. Colours only from colors.css. */

/* ---- the category chip ---- */
.sc-cat-chip { display: inline-flex; align-items: center; padding: 4px 13px; border-radius: 999px; background: var(--sc-c-soft); color: var(--sc-c-ink); font-size: .85rem; font-weight: 600; line-height: 1.5; text-decoration: none; transition: background-color .25s ease, color .25s ease; }
.sc-cat-chip:hover, .sc-topic:hover { background: var(--sc-c-accent); color: var(--sc-c-btntext); }
/* the topics under an article (plugin article-links.php): the same chip, a bold label, room above the line under it (user) */
.sc-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2.5rem 0 3rem; }
.sc-topics-label { font-weight: 700; margin-inline-end: 4px; }
.sc-topic { display: inline-flex; align-items: center; padding: 4px 13px; border-radius: 999px; background: var(--sc-c-soft); color: var(--sc-c-ink); font-size: .85rem; font-weight: 600; line-height: 1.5; text-decoration: none !important; transition: background-color .25s ease, color .25s ease; }

/* ---- article cards (articles page, categories, topics, search) ---- */
.sc-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 26px; }
@media (min-width: 1500px) { .sc-post-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sc-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 18px; } }
@media (max-width: 600px) { .sc-post-grid { grid-template-columns: 1fr; } }
.sc-post-card { position: relative; margin: 0; }
.sc-post-card .post-thumbnail { display: block; overflow: hidden; border-radius: var(--sc-r-photo); background: var(--sc-c-panel); aspect-ratio: 4 / 3; transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; }
.sc-post-card .post-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), filter .6s ease; }
.sc-post-card:hover .post-thumbnail { transform: translateY(-4px); box-shadow: 0 24px 48px var(--sc-c-shadow); }
.sc-post-card:hover .post-thumbnail img { transform: scale(1.04); filter: saturate(1.08) brightness(1.03); }
.sc-post-card .text-wrapper { padding: 12px 2px 0; }
.sc-post-card .top-meta { margin: 0 0 4px; }
.sc-post-card .entry-title { margin: .35em 0 .4em; font-size: 1.3rem; line-height: 1.35; }
.sc-post-card .entry-title a { color: var(--sc-c-ink); text-decoration: none; transition: color .25s ease; }
.sc-post-card:hover .entry-title a { color: var(--sc-c-primary); }
.sc-post-card .entry-content { margin: 0; color: var(--sc-c-text); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.no-results, .sc-empty { padding: 40px 24px; border-radius: 20px; background: var(--sc-c-panel); text-align: center; }
.no-results p, .sc-empty p { margin: 0; }

/* ---- an article ---- */
.sc-article .entry-header { margin: 0 0 26px; }
.sc-article .entry-title { margin: 0 0 14px; text-align: start; }
.sc-article-title-row { display: flex; align-items: center; gap: 14px; min-height: 42px; }
.sc-article-title-row .sc-title-actions { margin-inline-start: auto; }
.sc-article > .post-thumbnail { margin: 0 0 36px; }
.sc-article > .post-thumbnail img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: var(--sc-r-photo); }
.entry-content { line-height: 1.85; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 { margin: 1.8em 0 .5em; font-size: 1.5rem; }
.entry-content h3 { margin: 1.5em 0 .4em; }
.entry-content li { margin-bottom: .6em; line-height: 1.85; } /* room between list lines (several links in one line read as one otherwise) */
.entry-content :is(p:not(.sc-mistake), li) > a { font-weight: 700; } /* links in an article's text stand out (user) */
.entry-content .sc-related-list li { margin-bottom: .9em; }
.entry-content .sc-related-list a + a { margin-inline-start: .8em; } /* several articles in one line: a wide space between them, no commas (user) */
.sc-post-nav { display: flex; justify-content: space-between; gap: 24px; margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--sc-c-line); }
.sc-post-nav a { display: flex; flex-direction: column; max-width: 48%; color: var(--sc-c-ink); font-weight: 600; line-height: 1.4; text-decoration: none; }
.sc-post-nav a:hover { color: var(--sc-c-primary); }
.sc-post-nav small { color: var(--sc-c-muted); font-weight: 400; }
.sc-post-nav small::before, .sc-post-nav .is-older small::after { display: inline-block; width: 7px; height: 7px; border: solid currentColor; }
.sc-post-nav .is-newer small::before { content: ""; margin-inline-end: 8px; border-width: 2px 2px 0 0; transform: rotate(45deg); }   /* → */
.sc-post-nav .is-older { margin-inline-start: auto; text-align: end; }
.sc-post-nav .is-older small::after { content: ""; margin-inline-start: 8px; border-width: 0 0 2px 2px; transform: rotate(45deg); } /* ← */

/* ---- text pages (about, terms, privacy) + the contact form ---- */
.sc-text-page > .post-thumbnail { margin: 0 0 36px; }
.sc-text-page > .post-thumbnail img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 20px; }
.sc-text-page .entry-content { font-size: 1.08rem; }

/* ---- a plant (the plugin draws it) ---- */
.sc-plant-page { margin-top: 32px; }

/* ---- search results ---- */
.sc-search-again { max-width: 640px; margin: 0 0 40px; }
.sc-sub { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 18px; font-size: 1.6rem; }
.sc-pins-grid { columns: 4; column-gap: 20px; margin-bottom: 48px; }
.sc-pins-grid .sc-card { break-inside: avoid; margin: 0 0 20px; }
.sc-pins-grid .sc-card-media { aspect-ratio: auto; max-height: 520px; } /* Pinterest: each photo keeps its own height */
.sc-pins-grid .sc-card-media img { height: auto; max-height: 520px; }
@media (max-width: 1100px) { .sc-pins-grid { columns: 3; } }
@media (max-width: 700px) { .sc-pins-grid { columns: 2; column-gap: 12px; } .sc-pins-grid .sc-card { margin-bottom: 12px; } }
.sc-page-links { padding: 0; list-style: none; }

/* ---- 404 ---- */
.sc-404 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sc-404-num { margin: 0; color: var(--sc-c-soft); font-family: var(--sc-font-head); font-size: clamp(5rem, 12vw, 9rem); font-weight: 900; line-height: 1; }
.sc-404 .sc-search-again { margin-bottom: 24px; }
.sc-404-links { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-404-photo { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 20px; }
.sc-404-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .sc-404 { grid-template-columns: 1fr; } .sc-404-photo { max-width: 420px; } }