/* Catalog style "demo8" — tags add-on (loaded instead of _tags.css). */
/* "Suits a site for …" as film frames: the tags are the scene strip's dark frames, an agreed tag lights up yellow like a picked rating; on the post they are centred end credits. Mirrors /demo8/ like demo8.css. */

/* list page: a centred row of frames right under the chapters */
.categories:has(+ .tagcloud) { margin-bottom: 0; }
.tagcloud { display: grid; justify-items: center; gap: 12px; margin: 22px 0 clamp(32px, 4vw, 56px); text-align: center; }
.tagcloud__title { margin: 0; font-family: var(--title); font-size: 20px; font-weight: 400; color: var(--soft); }
.tagcloud__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; margin: 0; padding: 0; list-style: none; }
.tagcloud__item { min-width: 0; }
.tagcloud__link {
    display: inline-flex; align-items: baseline; gap: 10px; max-width: 100%; min-height: 40px; padding: 9px 16px;
    background: var(--raise-2); border: 1px solid transparent; color: var(--soft); font-size: 15px; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere;
    transition: color 200ms ease, border-color 200ms ease;
}
.tagcloud__link:hover { color: var(--ink); border-color: var(--soft); }
.tagcloud__link.is-active { color: var(--ink); border-color: var(--yellow); }
.tagcloud__count { font-family: var(--title); font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tagcloud__link.is-active .tagcloud__count { color: var(--yellow); }
.tagcloud__empty { max-width: 46ch; margin: 0; color: var(--soft); font-size: 15px; }

.listing__tag strong { font-family: var(--title); font-size: 1.15em; font-weight: 400; color: var(--ink); }
.listing__tag a { color: var(--ink); text-decoration-color: var(--yellow); text-underline-offset: 5px; }
.listing__tag a:hover { color: var(--yellow); }

/* cards: small frames under the stats line, left of the buttons */
.post--card { grid-template-rows: auto auto auto auto auto; }
.post--card .post__fits { grid-column: 1; grid-row: 4; }
.post--card .post__excerpt { grid-row: 5; }
.post--card .post__actions { grid-row: 2 / span 3; }
.post__fits { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; padding: 0; list-style: none; }
.post__fit { min-width: 0; }
.post__fit a {
    display: inline-flex; align-items: center; max-width: 100%; min-height: 32px; padding: 4px 12px;
    background: var(--raise-2); border: 1px solid transparent; color: var(--soft); font-size: 14px; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere;
    transition: color 200ms ease, border-color 200ms ease;
}
.post__fit a:hover { color: var(--ink); border-color: var(--soft); }

/* post: end credits — a centred Lazurski card, the tags as frames, the form below */
.fits { max-width: 70ch; margin: clamp(64px, 8vw, 120px) auto 0; text-align: center; }
.fits__title { margin: 0 0 20px; font-family: var(--title); font-weight: 400; font-size: clamp(34px, 3.6vw, 56px); line-height: 1; letter-spacing: -0.01em; word-spacing: -0.08em; color: var(--ink); }
.fits__title::after { content: ""; display: block; width: 48px; height: 1px; margin: 20px auto 0; background: var(--soft); }
.fits__intro { max-width: 52ch; margin: 0 auto 26px; color: var(--soft); }
.fits__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 36px; padding: 0; list-style: none; }
.fits__item { min-width: 0; max-width: 100%; }
.fits__vote { margin: 0; }
.fits__tag {
    display: inline-flex; align-items: baseline; gap: 12px; max-width: 100%; min-height: 52px; padding: 12px 22px;
    background: var(--raise-2); border: 1px solid transparent; border-radius: 0; color: var(--ink); font-family: var(--title); font-size: 22px; font-weight: 400; line-height: 1.2;
    overflow-wrap: anywhere; cursor: pointer; transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.fits__tag:hover { border-color: var(--soft); }
.fits__tag.is-mine { background: var(--yellow); border-color: var(--yellow); color: #17130a; }
.fits__tag.is-mine::before { content: "✓"; font-family: var(--text); font-size: 16px; font-weight: 700; }
.fits__tag.is-mine:hover { background: #ffc93d; }
.fits__tag:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.fits__count { font-family: var(--text); font-size: 14px; color: var(--soft); font-variant-numeric: tabular-nums; }
.fits__tag.is-mine .fits__count { color: #17130a; font-weight: 700; }
.fits__empty { margin: 0 0 32px; font-family: var(--title); font-size: 24px; color: var(--soft); }

.fits-form { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin: 0; padding: clamp(22px, 3vw, 36px); background: var(--raise); border-top: 2px solid var(--yellow); }
.fits-form__label { width: 100%; font-family: var(--title); font-size: 20px; color: var(--ink); }
.fits-form__input {
    flex: 1 1 240px; min-width: 0; max-width: 380px; min-height: 50px; padding: 12px 16px; border: 1px solid rgb(242 239 232 / 0.32); border-radius: 0;
    background: var(--ground); color: var(--ink); font: 400 17px/1.4 var(--text); transition: border-color 200ms ease;
}
.fits-form__input::placeholder { color: #9a9488; }
.fits-form__input:hover { border-color: var(--soft); }
.fits-form__input:focus { border-color: var(--yellow); outline: 2px solid var(--yellow); outline-offset: 2px; }
.fits-form__submit {
    justify-content: center; min-height: 50px; padding: 0 32px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink);
    cursor: pointer; transition: background 220ms ease, color 220ms ease;
}
.fits-form__submit::after { display: none; }
.fits-form__submit:hover { background: var(--ink); color: var(--ground); }

@media (max-width: 860px) {
    .post--card .post__actions { grid-row: 6; }
}
@media (max-width: 560px) {
    .fits__tag { font-size: 20px; }
    .fits-form__input { flex-basis: 100%; max-width: none; }
    .fits-form__submit { flex: 1 0 100%; }
}