/* Drashta — the site's ground, shared by the home page, a teacher's page and a class page.
   Design spec of 30.9: a dark green-charcoal ground, the teacher's frame as the hero, one amber for
   Drashta speaking and for the primary button, green for "in the pose". Rubik carries Hebrew and English
   from the same family, so both versions of a page look the same. No shadows: depth comes from the pictures. */
:root {
  --bg: #121816; --surface: #1B2420; --surface-2: #222D28; --line: #2A3530;
  --text: #ECE7DC; --muted: #9AA69E; --amber: #D89E3C; --amber-ink: #1A1408; --green: #5DA57F;
  --r: 12px; --wrap: 1120px; --gutter: 20px;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Rubik', system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; } [hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, p { margin: 0; }
/* a teacher's own words keep their direction inside either language's page, on the page's own edge */
[dir="auto"] { unicode-bidi: plaintext; text-align: start; } h1, h2, h3 { font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
img { display: block; max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 20px; text-decoration: none; }
.brand svg { width: 24px; height: 24px; }
.top .side { display: flex; align-items: center; gap: 18px; font-size: 15px; }
.top .side a:not(.btn) { color: var(--muted); text-decoration: none; } .top .side a:not(.btn):hover { color: var(--text); }
.switch { font: inherit; font-size: 14px; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; min-width: 44px; }
.switch:hover { border-color: var(--muted); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r); font: inherit; font-weight: 500; font-size: 16px; text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn.primary { background: var(--amber); color: var(--amber-ink); } .btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text); } .btn.ghost:hover { background: var(--surface); }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }

/* the frame: a teacher's recording, in its own shape; the fade carries text on its lower edge */
.frame { position: relative; border-radius: 16px; overflow: hidden; background: var(--surface); aspect-ratio: 4 / 5; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,24,22,0) 45%, rgba(18,24,22,0.92) 100%); pointer-events: none; }
.frame .on { position: absolute; inset-inline: 20px; bottom: 18px; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.frame .on h1 { font-size: clamp(30px, 6vw, 44px); }
.frame .on .meta { color: var(--muted); font-size: 15px; }

/* Drashta speaking: amber, light weight, a dot before the sentence */
.says { display: flex; flex-direction: column; gap: 4px; }
.says .who { font-size: 13px; font-weight: 500; color: var(--amber); }
.says .line { font-size: 22px; font-weight: 300; line-height: 1.3; color: var(--text); }
.says .line::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-inline-end: 10px; vertical-align: middle; }

/* cards: a class is a picture, a title, the teacher's sentence, a small line, a small button */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
.card { background: var(--surface); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; text-decoration: none; height: 100%; }
.card .pic { aspect-ratio: 16 / 10; background: var(--surface-2); position: relative; }
.cards > li { display: flex; } .cards > li > .card { flex: 1 1 0; min-width: 0; }   /* a card fills its track; a small picture never shrinks it */
.card .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
/* the title sits on the picture, over a dark gradient, so the room never outshines the name */
.card .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,24,22,0) 40%, rgba(18,24,22,0.88) 100%); }
.card .pic h3 { position: absolute; inset-inline: 16px; bottom: 12px; z-index: 1; font-size: 20px; line-height: 1.2; text-wrap: balance; }
.card .body { padding: 12px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.card .body:empty { display: none; }
.card h3 { font-size: 20px; }
.card .sent { color: var(--text); opacity: .9; font-size: 15px; line-height: 1.45; }
.card .line { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 14px; margin-top: auto; padding-top: 6px; }
.card:hover .pic img { filter: brightness(1.06); }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* profile */
.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 3px solid var(--bg); }
.avatar.initial { display: grid; place-items: center; background: var(--amber); color: var(--amber-ink); font-size: 36px; font-weight: 500; }

h2.head { font-size: 24px; margin: 36px 0 16px; }
.para { max-width: 62ch; font-size: 17px; line-height: 1.6; }
.fine { color: var(--muted); font-size: 14px; }
footer.foot { margin: 64px 0 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; gap: 18px; flex-wrap: wrap; }
footer.foot a { text-decoration: none; }
@media (prefers-reduced-motion: no-preference) { .btn, .switch, .card .pic img { transition: filter .15s, background .15s, border-color .15s; } }