/* «السبّورة» (sabboura), look 1 of 10. Owner: d3 design, then p5.
   The idea: the class they know. The hero is a framed green board with chalk doodles and a chalk tray, headings get
   a chalk underline, «أرقام» are written on a small board, course covers without a picture are little boards, and
   the closing strip is a board too.
   Rules: colours only from --site-* (8 palettes + the visitor's night mode; board pairs are --site-board /
   --site-on-board / --site-chalk, AA in d2's aa-report.md), shape through d2's --site-radius* variables, logical
   properties (RTL), no animation, nothing wider than the screen at 320px. Markup: d2's sections.css hooks
   (build/design/d3/spec.md §6). Decorations are CSS masks (alpha only, coloured by the background they cut), so no
   markup slot is needed: chalk-line.svg, chalk-dust.svg, doodles.svg. */

.a-site.a-look-sabboura {
  --site-radius: 14px;
  --site-radius-btn: 12px;
  --site-radius-img: 12px;
  --sb-line: url("../../../images/academy/templates/sabboura/chalk-line.svg");
  --sb-dust: url("../../../images/academy/templates/sabboura/chalk-dust.svg");
  --sb-doodles: url("../../../images/academy/templates/sabboura/doodles.svg");
}

/* ---------- Shared pieces ---------- */

/* A chalk underline under every section heading. */
.a-look-sabboura .a-sec__title::after {
  content: "";
  display: block;
  inline-size: min(9rem, 70%);
  block-size: .5rem;
  margin-block-start: .35rem;
  background: var(--site-accent);
  -webkit-mask: var(--sb-line) center / 100% 100% no-repeat;
  mask: var(--sb-line) center / 100% 100% no-repeat;
}
.a-look-sabboura .a-sec__head--center .a-sec__title::after { margin-inline: auto; }

/* Every board surface: board colour, chalk-coloured text, a little chalk dust under the text. */
.a-look-sabboura :is(.a-sec-hero--chalkboard .a-sec-hero__board, .a-sec-stats__list, .a-sec-cta--strip .a-sec-cta__row, .a-sec-course__cover--art) {
  position: relative;
  isolation: isolate;
  background-color: var(--site-board);
  color: var(--site-on-board);
}
.a-look-sabboura :is(.a-sec-hero--chalkboard .a-sec-hero__board, .a-sec-stats__list, .a-sec-cta--strip .a-sec-cta__row, .a-sec-course__cover--art)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--site-on-board);
  opacity: .35;
  pointer-events: none;
  -webkit-mask: var(--sb-dust) 0 0 / 120px 120px repeat;
  mask: var(--sb-dust) 0 0 / 120px 120px repeat;
}
/* Focus on a board: the chalk colour (8.9:1 or more on the board in every palette). */
.a-look-sabboura :is(.a-sec-hero--chalkboard .a-sec-hero__board, .a-sec-cta--strip .a-sec-cta__row) :focus-visible { outline-color: var(--site-chalk); }
/* The wooden frame of a board (any palette: the outline colour reads as the frame). */
.a-look-sabboura :is(.a-sec-hero--chalkboard .a-sec-hero__board, .a-sec-stats__list, .a-sec-cta--strip .a-sec-cta__row) {
  border: 6px solid var(--site-outline);
  border-block-end-width: 10px;
  border-radius: var(--site-radius);
}

/* ---------- Header ---------- */
.a-look-sabboura .a-site-nav a[aria-current="page"] {
  text-decoration: none;
  background: linear-gradient(var(--site-accent), var(--site-accent)) 50% 100% / calc(100% - 20px) 3px no-repeat;
}

/* ---------- Hero «سبورة»: a framed board on the wall ---------- */
.a-look-sabboura .a-sec-hero--chalkboard .a-sec__inner { position: relative; padding-block-end: 14px; }
.a-look-sabboura .a-sec-hero--chalkboard .a-sec-hero__board {
  box-shadow: var(--site-shadow);
  padding-block-start: 32px;
}
/* Chalk doodles on both sides of the photo, in the row the round photo takes (never behind the words). */
.a-look-sabboura .a-sec-hero--chalkboard .a-sec-hero__board::before {
  content: "";
  position: absolute;
  inset-inline: 12px;
  inset-block-start: 22px;
  block-size: 96px;
  z-index: -1;
  background: var(--site-chalk);
  opacity: .7;
  pointer-events: none;
  -webkit-mask: var(--sb-doodles) 0 0 / auto 100% no-repeat, var(--sb-doodles) 100% 0 / auto 100% no-repeat;
  mask: var(--sb-doodles) 0 0 / auto 100% no-repeat, var(--sb-doodles) 100% 0 / auto 100% no-repeat;
  -webkit-mask-size: min(30%, 150px) auto, min(30%, 150px) auto;
  mask-size: min(30%, 150px) auto, min(30%, 150px) auto;
}
.a-look-sabboura .a-sec-hero--chalkboard .a-sec-hero__media { box-shadow: 0 0 0 4px var(--site-chalk); }
.a-look-sabboura .a-sec-hero--chalkboard .a-sec-hero__title {
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.9rem);
  line-height: 1.45;
  letter-spacing: .01em;
  text-shadow: 0 0 1px currentColor;
}
/* The marked word: written in chalk with a hand-drawn underline instead of the marker band. */
.a-look-sabboura .a-sec-hero--chalkboard .a-sec-mark {
  position: relative;
  text-decoration: none;
  color: var(--site-chalk);
}
.a-look-sabboura .a-sec-hero--chalkboard .a-sec-mark::after {
  content: "";
  position: absolute;
  inset-inline: -.1em;
  inset-block-end: -.15em;
  block-size: .3em;
  background: var(--site-chalk);
  pointer-events: none;
  -webkit-mask: var(--sb-line) center / 100% 100% no-repeat;
  mask: var(--sb-line) center / 100% 100% no-repeat;
}
/* The chalk tray under the board: a ledge, a stick of chalk and an eraser. */
.a-look-sabboura .a-sec-hero--chalkboard .a-sec__inner::after {
  content: "";
  position: absolute;
  inset-inline: calc(var(--site-gutter) + 10%);
  inset-block-end: 4px;
  block-size: 10px;
  border-radius: 0 0 6px 6px;
  background:
    linear-gradient(var(--site-chalk), var(--site-chalk)) 22% 2px / 2rem 4px no-repeat,
    linear-gradient(var(--site-on-board), var(--site-on-board)) 30% 2px / 1rem 4px no-repeat,
    linear-gradient(var(--site-ink), var(--site-ink)) 74% 0 / 2.8rem 7px no-repeat,
    var(--site-outline);
  pointer-events: none;
}
@media (min-width: 768px) {
  .a-look-sabboura .a-sec-hero--chalkboard .a-sec-hero__board { border-width: 12px; border-block-end-width: 18px; padding-block-start: 56px; }
  .a-look-sabboura .a-sec-hero--chalkboard .a-sec-hero__board::before { inset-inline: 32px; inset-block-start: 40px; block-size: 140px; }
}

/* ---------- «أرقام»: written on a small board ---------- */
.a-look-sabboura .a-sec-stats__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr)); gap: 4px; padding: 16px 8px; }
.a-look-sabboura .a-sec-stat { background: transparent; border: 0; padding: 12px 6px; }
.a-look-sabboura .a-sec-stats__value {
  color: var(--site-chalk);
  font-size: clamp(1.9rem, 1.5rem + 2vw, 2.6rem);
  text-shadow: 0 0 1px currentColor;
}
.a-look-sabboura .a-sec-stats__value::after {
  width: 3.5rem;
  height: .3em;
  border-radius: 0;
  background: var(--site-on-board);
  opacity: .8;
  -webkit-mask: var(--sb-line) center / 100% 100% no-repeat;
  mask: var(--sb-line) center / 100% 100% no-repeat;
}
.a-look-sabboura .a-sec-stats__label { color: var(--site-on-board); }

/* ---------- «كورساتي»: a cover without a picture is a little board ---------- */
.a-look-sabboura .a-sec-course__cover { border-block-end: 6px solid var(--site-outline); }
.a-look-sabboura .a-sec-course__cover--art::before {
  content: "";
  position: absolute;
  inset: 14% 10%;
  background: var(--site-chalk);
  opacity: .75;
  pointer-events: none;
  -webkit-mask: var(--sb-doodles) center / contain no-repeat;
  mask: var(--sb-doodles) center / contain no-repeat;
}
.a-look-sabboura .a-sec-course__cover--art[data-tone="2"]::before { background: var(--site-on-board); }
.a-look-sabboura .a-sec-course__cover--art[data-tone="3"]::before { inset: 26% 30%; }

/* ---------- «آراء الطلاب»: the quote mark in chalk colour, a dashed chalk edge ---------- */
.a-look-sabboura .a-sec-quote { border-style: dashed; border-width: 2px; }

/* ---------- «الحصص المباشرة»: the timetable ---------- */
.a-look-sabboura .a-sec-day { border-inline-start: 4px solid var(--site-accent); }
.a-look-sabboura .a-sec-day--today { outline: 2px dashed var(--site-link); outline-offset: 3px; }
.a-look-sabboura .a-sec-slot__time { font-variant-numeric: tabular-nums; }

/* ---------- «أسئلة»: chalk-dashed separators ---------- */
.a-look-sabboura .a-sec-faq__item { border: 0; border-block-end: 2px dashed var(--site-line); border-radius: 0; background: transparent; }

/* ---------- «ابدأ دلوقتي» (strip): a board on the strip ---------- */
.a-look-sabboura .a-sec-cta--strip { background: var(--site-band); }
.a-look-sabboura .a-sec-cta--strip .a-sec-cta__row { padding: 24px 16px; }
.a-look-sabboura .a-sec-cta--strip .a-sec-cta__title { color: var(--site-on-board); }
.a-look-sabboura .a-sec-cta--strip .a-sec-cta__line { color: var(--site-on-board); opacity: 1; }
@media (min-width: 768px) { .a-look-sabboura .a-sec-cta--strip .a-sec-cta__row { padding: 32px 40px; } }