/*
 * Collapse primitive (SEO-safe: all text stays in the DOM). PHP: poea_native_collapse( $html, $args ).
 *
 * A. details mode (no JS):
 *   <details class="c-collapse c-collapse--details"><summary class="c-collapse__summary">Read more</summary>
 *     <div class="c-collapse__body">...</div></details>
 * B. clamp mode (JS enhancement in assets/js/collapse.js; without JS the full text simply shows):
 *   <div class="c-collapse c-collapse--clamp" data-collapse style="--c-collapse-lines:3">
 *     <div class="c-collapse__text" id="..">...</div>
 *     <button type="button" class="c-collapse__toggle" aria-expanded="false" aria-controls=".." hidden>Read more</button></div>
 *   JS adds .is-clamped (line-clamp) only when the text overflows, and un-hides the button.
 * Tune lines per instance with --c-collapse-lines. Uses semantic tokens, so html[data-theme=dark] follows.
 */
.c-collapse { font-size: var(--fs-14); line-height: 1.6; color: var(--color-text-2); }
.c-collapse__summary,
.c-collapse__toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2); margin-left: calc(var(--space-2) * -1); font: inherit; font-weight: var(--fw-semibold); color: var(--color-link); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; list-style: none; }
.c-collapse__summary::-webkit-details-marker { display: none; }
.c-collapse__summary::after,
.c-collapse__toggle::after { content: ""; width: .5em; height: .5em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-.15em) rotate(45deg); transition: transform var(--dur-fast) var(--ease); }
.c-collapse[open] > .c-collapse__summary::after,
.c-collapse__toggle[aria-expanded="true"]::after { transform: translateY(.1em) rotate(-135deg); }
.c-collapse__summary:hover,
.c-collapse__toggle:hover { color: var(--color-link-hover); text-decoration: underline; }
.c-collapse__body > * + *,
.c-collapse__text > * + * { margin-top: var(--space-3); }
.c-collapse--clamp .c-collapse__text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--c-collapse-lines, 3); line-clamp: var(--c-collapse-lines, 3); overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .c-collapse__summary::after, .c-collapse__toggle::after { transition: none; } }