/* «المجموع» (thanawya), look 8 of 10. Owner: d4 design, then p5.
   An answer sheet: crisp edges, ink borders, a row of answer bubbles under every heading, and «نتايج طلابي» right
   after the hero, each score on the marker band under a small seal. The results are «مثال» until the teacher writes
   real ones (the section is stats with auto_counts false; the privacy hint lives in the manifest's touches.results).
   Questions are numbered like an exam. Default palette «واضح», default font «كلاسيكي».
   Colours: --site-* only (8 palettes + night mode, d4/tools/contrast_d4.py). Markup: d2's sections.css.
   Decoration: hero.svg (answer sheet, pencil, rosette) inlined in the hero's .a-sec__deco. No animation. */

.a-site.a-look-thanawya {
  --site-radius: 10px;
  --site-radius-btn: 10px;
  --site-radius-img: 10px;
  --site-border: 2px;
  --site-shadow: none;
}

/* Every heading sits on a row of answer bubbles, one of them filled. */
.a-look-thanawya :is(.a-sec__title, .a-sec-cta--card .a-sec-cta__title)::after {
  content: "";
  display: block;
  inline-size: 90px;
  block-size: 18px;
  margin-block-start: var(--a-space-2);
  background: var(--site-link);
  -webkit-mask: url("/images/academy/templates/thanawya/bubbles.svg") center / contain no-repeat;
  mask: url("/images/academy/templates/thanawya/bubbles.svg") center / contain no-repeat;
}
.a-look-thanawya .a-sec__head--center .a-sec__title::after,
.a-look-thanawya .a-sec-cta--card .a-sec-cta__title::after { margin-inline: auto; }

/* Buttons have an ink edge, like a box on the exam paper. */
.a-look-thanawya .a-site-btn--primary { border-color: var(--site-ink); }
.a-look-thanawya .a-site-btn--outline { border-color: var(--site-outline); }

/* ---------- Hero (split): a light band, the photo with the answer sheet peeking from its corner ---------- */
.a-look-thanawya .a-sec-hero { background: var(--site-primary-tint); }
.a-look-thanawya .a-sec-hero .a-sec-hero__sub { color: var(--site-muted); }
.a-look-thanawya .a-sec-hero__media { border: 2px solid var(--site-ink); background: var(--site-surface); }
.a-look-thanawya .a-sec__deco { pointer-events: none; }
.a-look-thanawya .a-sec__deco svg { display: block; inline-size: 100%; block-size: auto; }
/* Phones: a smaller photo on the starting side and the sheet beside it, so the headline shows sooner. */
.a-look-thanawya .a-sec-hero--split .a-sec-hero__media { grid-row: 1; grid-column: 1; width: min(60%, 210px); }
.a-look-thanawya .a-sec-hero--split .a-sec-hero__body { grid-row: 2; grid-column: 1; }
.a-look-thanawya .a-sec-hero__grid > .a-sec__deco {
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
  align-self: end;
  justify-self: end;
  inline-size: min(58%, 200px);
  margin-block-end: -16px;
}
.a-look-thanawya .a-sec-hero--center .a-sec-hero__body > .a-sec__deco { inline-size: min(100%, 240px); }

/* ---------- «نتايج طلابي» (stats): the score on the marker band, a seal above it ---------- */
.a-look-thanawya .a-sec-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-space-3); }
.a-look-thanawya .a-sec-stat {
  position: relative;
  gap: var(--a-space-1);
  padding: var(--a-space-5) var(--a-space-2) var(--a-space-4);
  border-color: var(--site-outline);
  background: var(--site-surface);
}
.a-look-thanawya .a-sec-stat::before {
  content: "";
  display: block;
  inline-size: 28px;
  block-size: 28px;
  background: var(--site-link);
  -webkit-mask: url("/images/academy/templates/thanawya/seal.svg") center / contain no-repeat;
  mask: url("/images/academy/templates/thanawya/seal.svg") center / contain no-repeat;
}
.a-look-thanawya .a-sec-stats__value {
  padding-inline: .15em;
  background: linear-gradient(transparent 52%, var(--site-marker) 52%);
  font-size: clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
}
.a-look-thanawya .a-sec-stats__value::after { content: none; }
.a-look-thanawya .a-sec-stats__label { font-weight: 600; }

/* ---------- Courses: a paper with a coloured term header and the answer bubbles on the cover ---------- */
.a-look-thanawya .a-sec-course { border-color: var(--site-outline); }
.a-look-thanawya .a-sec-course__cover[data-tone] { position: relative; background: var(--site-link-tint); }
.a-look-thanawya .a-sec-course__cover[data-tone="2"] { background: var(--site-primary-tint); }
.a-look-thanawya .a-sec-course__cover[data-tone="3"] { background: var(--site-band); }
.a-look-thanawya .a-sec-course__cover[data-tone]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--site-link);
  -webkit-mask: url("/images/academy/templates/thanawya/bubbles.svg") center / 120px 24px no-repeat;
  mask: url("/images/academy/templates/thanawya/bubbles.svg") center / 120px 24px no-repeat;
}
.a-look-thanawya .a-sec-course__price { font-variant-numeric: tabular-nums; }

/* ---------- Live: today is circled ---------- */
.a-look-thanawya .a-sec-day { border-color: var(--site-line); }
.a-look-thanawya .a-sec-day--today { border-color: var(--site-ink); background: var(--site-link-tint); }
.a-look-thanawya .a-sec-slot { border-radius: 8px; background: var(--site-surface); border: 1px solid var(--site-outline); }

/* ---------- Testimonials: a margin rule on the starting side ---------- */
.a-look-thanawya .a-sec-quote { border-color: var(--site-line); border-inline-start: 6px solid var(--site-primary); }
.a-look-thanawya .a-sec-quote__text::before { color: var(--site-link); }

/* ---------- Questions: numbered like an exam (س1، س2…) ---------- */
.a-look-thanawya .a-sec-faq__list { counter-reset: thanawya-q; }
.a-look-thanawya .a-sec-faq__item { counter-increment: thanawya-q; border-color: var(--site-line); }
.a-look-thanawya .a-sec-faq__item > summary::before {
  content: "س" counter(thanawya-q);
  flex: none;
  display: grid;
  place-items: center;
  min-inline-size: 2.5rem;
  block-size: 2rem;
  padding-inline: var(--a-space-1);
  border: 2px solid var(--site-ink);
  border-radius: 6px;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
[dir="ltr"] .a-look-thanawya .a-sec-faq__item > summary::before { content: "Q" counter(thanawya-q); }
.a-look-thanawya .a-sec-faq__item[open] { border-color: var(--site-outline); }

/* ---------- «عني» and the closing card ---------- */
.a-look-thanawya .a-sec-about__media { border: 2px solid var(--site-ink); }
.a-look-thanawya .a-sec-about__point { background: var(--site-surface); border: 1px solid var(--site-outline); }
.a-look-thanawya .a-sec-cta--card .a-sec-cta__row { border-color: var(--site-outline); border-top-color: var(--site-primary); }

/* The strip is the stamp at the end of the paper: ink with page-coloured text (light), band with ink (dark). */
.a-look-thanawya .a-sec-cta--strip { background: var(--site-ink); color: var(--site-bg); }
.a-look-thanawya .a-sec-cta--strip .a-sec-cta__title { color: var(--site-accent); }
.a-look-thanawya .a-sec-cta--strip .a-site-btn--primary { border-color: var(--site-bg); }
.a-look-thanawya .a-sec-cta--strip :focus-visible { outline-color: var(--site-bg); }
:root[data-theme="dark"] .a-look-thanawya .a-sec-cta--strip { background: var(--site-band); color: var(--site-ink); border-block: 2px solid var(--site-line); }
:root[data-theme="dark"] .a-look-thanawya .a-sec-cta--strip :focus-visible { outline-color: var(--site-focus); }

/* Inlined illustrations follow the palette (the files' own fills are the default palette for <img> use). */
.a-look-thanawya svg .f-surface { fill: var(--site-surface); }
.a-look-thanawya svg .f-ink { fill: var(--site-ink); }
.a-look-thanawya svg .f-link { fill: var(--site-link); }
.a-look-thanawya svg .f-link-tint { fill: var(--site-link-tint); }
.a-look-thanawya svg .f-primary { fill: var(--site-primary); }
.a-look-thanawya svg .f-primary-tint { fill: var(--site-primary-tint); }
.a-look-thanawya svg .f-accent { fill: var(--site-accent); }
.a-look-thanawya svg .f-danger { fill: var(--site-danger); }
.a-look-thanawya svg .f-band { fill: var(--site-band); }
.a-look-thanawya svg .s-ink { stroke: var(--site-ink); }
.a-look-thanawya svg .s-muted { stroke: var(--site-muted); }
/* On the tinted hero band the disc behind the sheet would vanish: use the surface. */
.a-look-thanawya .a-sec-hero svg .f-primary-tint { fill: var(--site-surface); }

@media (min-width: 560px) {
  .a-look-thanawya .a-sec-stats__list { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
@media (min-width: 768px) {
  .a-look-thanawya .a-sec-hero--split .a-sec-hero__media { grid-column: 2; width: 100%; }
  .a-look-thanawya .a-sec-hero--split .a-sec-hero__body { grid-row: 1; }
  .a-look-thanawya .a-sec-hero__grid > .a-sec__deco {
    grid-column: 2;
    justify-self: start;
    inline-size: 220px;
    margin-inline-start: -64px;
    margin-block-end: -40px;
  }
}