/* ==========================================================================
   rich.css — rich text editor (rich-editor.js), rich post content and the teacher portfolio gallery.
   Loaded only by the pages that use them (Q&A, teacher panel, public teacher page). Tokens come from site.css; logical properties only (RTL-first).
   ========================================================================== */

/* ---------- editor ---------- */
.rte { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .18s, box-shadow .18s, background-color .18s; }
.rte:focus-within { border-color: var(--lapis-light); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lapis-light) 24%, transparent); }
.rte.is-over { border-color: var(--vermilion); }
.rte.is-drag { border-color: var(--citron-600); background: color-mix(in srgb, var(--citron) 10%, var(--surface)); }

.rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: .4rem .5rem; border-block-end: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 72%, var(--surface)); }
.rte-btn { display: inline-grid; place-items: center; min-inline-size: 34px; block-size: 34px; padding: 0 .4rem; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 1.05rem; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s, transform .12s; }
.rte-btn:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.rte-btn:active { transform: scale(.94); }
.rte-btn.is-on { background: var(--ink); color: #fff; }
[data-bs-theme="dark"] .rte-btn.is-on { background: var(--citron); color: var(--citron-ink); }
.rte-btn:focus-visible, .rte-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.rte-sep { inline-size: 1px; block-size: 22px; margin-inline: .25rem; background: var(--line); }
.rte-select { block-size: 34px; max-inline-size: 9.5rem; padding: 0 .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-size: .88rem; }

.rte-linkbar { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem; border-block-end: 1px solid var(--line); background: var(--surface-2); }
.rte-linkbar .form-control { flex: 1 1 220px; min-inline-size: 0; }

.rte-surface { position: relative; padding: .9rem 1rem; max-block-size: 70vh; overflow: auto; outline: none; line-height: 1.95; overflow-wrap: anywhere; background: transparent; }
.rte-surface.form-control { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.rte.is-empty .rte-surface::before { content: attr(data-placeholder); position: absolute; inset-inline: 1rem; inset-block-start: .9rem; color: var(--muted); pointer-events: none; }
.rte-status { padding: .35rem 1rem .5rem; color: var(--muted); font-size: .85rem; }
.rte-status:empty { display: none; }
.rte-status.is-error { color: var(--vermilion-text); }

/* ---------- text typography shared by the editor and the stored post ---------- */
.rte-surface, .rich-content { color: var(--text); }
.rte-surface :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, pre), .rich-content :is(p, li, h1, h2, h3, h4, h5, h6, blockquote) { unicode-bidi: plaintext; }
.rte-surface > :first-child, .rich-content > :first-child { margin-block-start: 0; }
.rte-surface > :last-child, .rich-content > :last-child { margin-block-end: 0; }
.rte-surface :is(p, ul, ol, blockquote, pre), .rich-content :is(p, ul, ol, blockquote, pre) { margin-block: 0 .9em; }
.rte-surface :is(h1, h2, h3, h4, h5, h6), .rich-content :is(h1, h2, h3, h4, h5, h6) { margin-block: 1.1em .45em; line-height: 1.55; font-weight: 800; color: var(--ink); }
[data-bs-theme="dark"] .rte-surface :is(h1, h2, h3, h4, h5, h6), [data-bs-theme="dark"] .rich-content :is(h1, h2, h3, h4, h5, h6) { color: var(--text); }
/* the editor shows the real levels; a posted text is rendered one level lower (the page title is the h1), so h2 here is the author's "H1" */
.rte-surface h1 { font-size: 1.8rem; }
.rte-surface h2 { font-size: 1.55rem; }
.rte-surface h3 { font-size: 1.35rem; }
.rte-surface h4 { font-size: 1.2rem; }
.rte-surface h5 { font-size: 1.08rem; }
.rte-surface h6 { font-size: 1rem; }
.rich-content h2 { font-size: 1.7rem; }
.rich-content h3 { font-size: 1.45rem; }
.rich-content h4 { font-size: 1.25rem; }
.rich-content h5 { font-size: 1.1rem; }
.rich-content h6 { font-size: 1rem; }
.rte-surface :is(ul, ol), .rich-content :is(ul, ol) { padding-inline-start: 1.6rem; }
.rte-surface li, .rich-content li { margin-block-end: .25em; }
.rte-surface blockquote, .rich-content blockquote { padding: .6rem 1rem; border-inline-start: 4px solid var(--citron); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--citron) 9%, transparent); color: var(--muted); }
.rte-surface a, .rich-content a { color: var(--lapis-light); text-decoration: underline; word-break: break-word; }
[data-bs-theme="dark"] .rte-surface a, [data-bs-theme="dark"] .rich-content a { color: var(--citron); }
.rte-surface code, .rich-content code { direction: ltr; unicode-bidi: isolate; padding: .08em .4em; border-radius: 6px; background: var(--surface-2); font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rte-surface pre, .rich-content pre { direction: ltr; text-align: left; unicode-bidi: isolate; padding: .9rem 1rem; border-radius: var(--radius-sm); background: #0f1535; color: #eceffb; overflow: auto; font-size: .9rem; line-height: 1.7; }
.rte-surface pre code, .rich-content pre code { padding: 0; background: transparent; color: inherit; }
.rte-surface hr, .rich-content hr { margin-block: 1.2rem; border: 0; border-block-start: 1px solid var(--line); opacity: 1; }
.rte-surface img, .rich-content img { display: block; max-inline-size: 100%; block-size: auto; margin-block: .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.bubble-text.rich-content { white-space: normal; }

/* ---------- teacher portfolio: public gallery ---------- */
.pf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-block-end: 1rem; }
.pf-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.pf-chip { padding: .35rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .9rem; font-weight: 700; cursor: pointer; transition: background-color .18s, color .18s, border-color .18s, transform .15s; }
.pf-chip:hover { border-color: var(--gilt-line); transform: translateY(-1px); }
.pf-chip.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
[data-bs-theme="dark"] .pf-chip.is-active { border-color: var(--citron); background: var(--citron); color: var(--citron-ink); }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.pf-item { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.pf-item:hover { transform: translateY(-3px); border-color: var(--gilt-line); box-shadow: var(--shadow); }
.pf-item[hidden] { display: none; }
.pf-open { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.pf-open img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.pf-item:hover .pf-open img { transform: scale(1.05); }
.pf-kind { position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem; padding: .15rem .6rem; border-radius: 999px; background: rgb(21 35 90 / .82); color: #fff; font-size: .75rem; font-weight: 700; backdrop-filter: blur(4px); }
.pf-caption { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem .9rem; }
.pf-caption strong { font-size: .98rem; line-height: 1.6; }
.pf-caption span { color: var(--muted); font-size: .85rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.pf-lightbox { inline-size: min(1100px, 96vw); max-inline-size: none; max-block-size: 94vh; padding: 0; border: 0; border-radius: var(--radius-lg); background: #0b1130; color: #fff; box-shadow: var(--shadow-lg); overflow: hidden; }
.pf-lightbox::backdrop { background: rgb(5 8 25 / .82); backdrop-filter: blur(3px); }
.pf-lightbox[open] { display: flex; flex-direction: column; animation: pf-pop .28s var(--ease); }
.pf-stage { display: grid; place-items: center; flex: 1 1 auto; min-block-size: 0; padding: 1rem; }
.pf-stage img { max-inline-size: 100%; max-block-size: calc(94vh - 9rem); object-fit: contain; border-radius: var(--radius-sm); }
.pf-meta { padding: .25rem 1.25rem 1.1rem; text-align: center; }
.pf-meta strong { display: block; font-size: 1.05rem; }
.pf-meta span { display: block; margin-block-start: .15rem; color: #c3c9e6; font-size: .9rem; line-height: 1.8; }
.pf-nav, .pf-close { position: absolute; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .14); color: #fff; font-size: 1.25rem; cursor: pointer; transition: background-color .15s, transform .15s; }
.pf-nav:hover, .pf-close:hover { background: rgb(255 255 255 / .28); transform: scale(1.06); }
.pf-nav:focus-visible, .pf-close:focus-visible { outline: 3px solid var(--citron); outline-offset: 2px; }
.pf-close { inset-block-start: .75rem; inset-inline-start: .75rem; z-index: 2; }
.pf-prev { inset-block-start: 50%; inset-inline-start: .75rem; transform: translateY(-50%); }
.pf-next { inset-block-start: 50%; inset-inline-end: .75rem; transform: translateY(-50%); }
.pf-prev:hover, .pf-next:hover { transform: translateY(-50%) scale(1.06); }
@keyframes pf-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- teacher portfolio: panel ---------- */
.pf-drop { display: grid; gap: .5rem; place-items: center; padding: 1.25rem; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--surface); text-align: center; transition: border-color .18s, background-color .18s; }
.pf-drop.is-over { border-color: var(--citron-600); background: color-mix(in srgb, var(--citron) 10%, var(--surface)); }
.pf-drop i { font-size: 2rem; color: var(--gilt-deep); }
.pf-drop input[type="file"] { max-inline-size: 100%; }
.pf-drop-preview { display: block; max-inline-size: min(100%, 280px); max-block-size: 220px; margin-inline: auto; border-radius: var(--radius-sm); object-fit: cover; box-shadow: var(--shadow-sm); }
.pf-manage { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.pf-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.pf-card img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.pf-card-body { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .9rem; }
.pf-card-body small { color: var(--muted); }
.pf-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: auto; padding: 0 .9rem .9rem; }

@media (max-width: 575.98px) {
  .rte-toolbar { gap: 1px; padding: .3rem; }
  .rte-btn { min-inline-size: 38px; block-size: 38px; }
  .rte-select { max-inline-size: 7.5rem; }
  .pf-grid, .pf-manage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .pf-caption { padding: .55rem .65rem .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-item, .pf-open img, .pf-chip, .rte, .rte-btn, .pf-nav, .pf-close { transition: none; }
  .pf-lightbox[open] { animation: none; }
  .pf-item:hover, .pf-item:hover .pf-open img { transform: none; }
}