/* ==========================================================================
   HumanProse example library: the example cards
   Shared by the library pages (hp-examples.css adds the rest) and by the
   one-line includes on the template and pack pages. Tokens only, so the
   dark theme follows; logical properties keep Arabic right.
   ========================================================================== */

body.hp-ui .hpx-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr)); gap: 16px;
    margin: 0; padding: 0; list-style: none;
}
body.hp-ui .hpx-cards.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.hp-ui .hpx-cards.is-dense { grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 12px; }
body.hp-ui .hpx-cards > li { display: flex; min-width: 0; }
body.hp-ui .hpx-cards > li[hidden] { display: none; }

/* A card is a small sheet: brass hairline on top, a folded corner, the template as a kicker. */
body.hp-ui .hpx-card {
    position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0;
    padding: 22px 22px 18px;
    background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 18px;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--hx-ink) 4%, transparent);
    transition: border-color .2s ease, transform .25s var(--hx-ease), box-shadow .25s ease;
}
body.hp-ui .hpx-card::before {
    content: ""; position: absolute; z-index: -1; inset-block-start: -1px; inset-inline-end: -1px; width: 26px; height: 26px;
    border-start-end-radius: 18px;
    background: linear-gradient(225deg, var(--hx-paper) 50%, color-mix(in srgb, var(--hx-quill) 26%, var(--hx-surface-2)) 50%);
    box-shadow: -1px 1px 0 color-mix(in srgb, var(--hx-quill) 30%, transparent);
}
[dir="rtl"] body.hp-ui .hpx-card::before { background: linear-gradient(135deg, var(--hx-paper) 50%, color-mix(in srgb, var(--hx-quill) 26%, var(--hx-surface-2)) 50%); box-shadow: 1px 1px 0 color-mix(in srgb, var(--hx-quill) 30%, transparent); }
body.hp-ui .hpx-card::after {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: 22px 40px; height: 2px; border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, var(--hx-quill), color-mix(in srgb, var(--hx-quill) 0%, transparent));
    opacity: .55; transition: opacity .2s ease;
}
[dir="rtl"] body.hp-ui .hpx-card::after { background: linear-gradient(270deg, var(--hx-quill), color-mix(in srgb, var(--hx-quill) 0%, transparent)); }
body.hp-ui .hpx-card:hover { border-color: color-mix(in srgb, var(--hx-quill) 65%, transparent); transform: translateY(-2px); box-shadow: var(--hx-shadow); }
body.hp-ui .hpx-card:hover::after { opacity: 1; }
body.hp-ui .hpx-card-kicker {
    display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; padding-inline-end: 20px;
    font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hx-quill-ink);
}
body.hp-ui .hpx-card-kicker > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.hp-ui .hpx-card-icon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.hp-ui .hpx-card-title { margin: 0; font-family: var(--hx-f-display); font-weight: 400; font-size: 1.36rem; line-height: 1.18; color: var(--hx-ink); text-wrap: balance; }
body.hp-ui .hpx-card-title a { color: inherit; text-decoration: none; }
body.hp-ui .hpx-card-title a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
html body.hp-ui .hpx-card-title a:focus-visible { outline: none; }
body.hp-ui .hpx-card:has(.hpx-card-title a:focus-visible) { outline: 2px solid var(--hx-focus); outline-offset: 3px; }
body.hp-ui .hpx-card-context {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0; color: var(--hx-ink-2); font-size: .9rem; line-height: 1.55;
}
body.hp-ui .hpx-card-meta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
    margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--hx-line-2);
    font-size: .8rem; font-weight: 600; color: var(--hx-ink-3); font-variant-numeric: tabular-nums;
}
body.hp-ui .hpx-tag {
    display: inline-flex; align-items: center; max-width: 100%; padding: 3px 10px; border-radius: 999px;
    background: var(--hx-royal-soft); color: var(--hx-royal-ink); font-size: .76rem; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[lang="ar"] body.hp-ui .hpx-card-kicker { letter-spacing: 0; font-size: .82rem; }
/* On Arabic pages the kicker may carry the English name in brackets, "البيان الشخصي (Personal Statement)":
   it wraps under the Arabic instead of being cut mid-word by the ellipsis, and stays in plain case. */
html[lang="ar"] body.hp-ui .hpx-card-kicker { align-items: flex-start; }
html[lang="ar"] body.hp-ui .hpx-card-kicker > span { white-space: normal; text-overflow: clip; line-height: 1.55; }
html[lang="ar"] body.hp-ui .hpx-card-kicker span[lang="en"] { display: inline-block; text-transform: none; letter-spacing: .01em; font-weight: 600; opacity: .85; }
html[lang="ar"] body.hp-ui .hpx-card-title { font-family: var(--hx-f-display); font-size: 1.28rem; line-height: 1.45; }
html[lang="ar"] body.hp-ui .hpx-card-context { line-height: 1.75; }

/* ---------- The band on template and pack pages ---------- */
body.hp-ui .hpx-links-band { margin-top: 72px; }
body.hp-ui .hpx-links-band-head { position: relative; max-width: 72ch; margin-bottom: 22px; }
body.hp-ui .hpx-links-band-head .hp-kicker { margin: 0 0 8px; }
body.hp-ui .hpx-links-band-head h2 { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.1; color: var(--hx-ink); text-wrap: balance; }
body.hp-ui .hpx-links-band-head p { margin: 10px 0 0; color: var(--hx-ink-2); font-size: 1rem; line-height: 1.65; }
body.hp-ui .hpx-links-band-all {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    color: var(--hx-royal-ink); font-weight: 700; font-size: .92rem; text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--hx-quill) 55%, transparent);
}
body.hp-ui .hpx-links-band-all:hover { border-bottom-color: var(--hx-quill); }
body.hp-ui .hpx-link-icon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] body.hp-ui .hpx-link-icon.is-arrow { transform: scaleX(-1); }
html[lang="ar"] body.hp-ui .hpx-links-band-head h2 { line-height: 1.4; }

@media (max-width: 760px) {
    body.hp-ui .hpx-cards.is-pair { grid-template-columns: minmax(0, 1fr); }
    body.hp-ui .hpx-links-band { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
    body.hp-ui .hpx-card, body.hp-ui .hpx-card::after { transition: none; }
    body.hp-ui .hpx-card:hover { transform: none; }
}
@media print {
    body.hp-ui .hpx-links-band { display: none; }
}