/* «شطّور» (shatoor), look 9 of 10. Owner: d4 design, then p5.
   Toy blocks and stickers: very round corners, thick soft edges, tinted cards in turn, a wavy top on every band,
   a little star before each heading, and big tap targets for small fingers and their parents' phones. Playful but
   readable: body text a step larger, no text on a pattern, no moving parts. Default palette «ورد», default font «مرِح».
   Colours: --site-* only (8 palettes + night mode, d4/tools/contrast_d4.py). Markup: d2's sections.css.
   Decoration: hero.svg (letter blocks, a cloud, a crayon, stars) inlined in the hero's .a-sec__deco. */

.a-site.a-look-shatoor {
  --site-radius: 28px;
  --site-radius-btn: 999px;
  --site-radius-img: 32px;
  --site-border: 3px;
  --site-shadow: 0 4px 0 var(--site-line);
  font-size: calc(var(--site-body-size) * 1.0625);
}

/* Big, friendly buttons (56px high) everywhere on the page. */
.a-look-shatoor .a-site-btn { min-height: 56px; padding-inline: 26px; font-size: 1.0625rem; }
.a-look-shatoor .a-site-btn--primary { border-color: var(--site-ink); box-shadow: 0 4px 0 var(--site-ink); }
.a-look-shatoor .a-site-btn--outline,
.a-look-shatoor .a-site-btn--whatsapp { border-color: var(--site-outline); }

/* A star sticker before each heading. */
.a-look-shatoor .a-sec__title::before {
  content: "";
  display: inline-block;
  inline-size: .9em;
  block-size: .9em;
  margin-inline-end: .3em;
  vertical-align: -.08em;
  background: var(--site-accent);
  -webkit-mask: url("/images/academy/templates/shatoor/star.svg") center / contain no-repeat;
  mask: url("/images/academy/templates/shatoor/star.svg") center / contain no-repeat;
}

/* The marked word is a rounded sticker (ink on the marker colour). */
.a-look-shatoor .a-sec-mark {
  padding: 0 .25em;
  border-radius: .45em;
  background: var(--site-marker);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Every band starts with a soft wave instead of a straight line. */
.a-look-shatoor .a-sec--band::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -15px;
  block-size: 16px;
  background: var(--site-band);
  -webkit-mask: url("/images/academy/templates/shatoor/wave.svg") 0 0 / 80px 16px repeat-x;
  mask: url("/images/academy/templates/shatoor/wave.svg") 0 0 / 80px 16px repeat-x;
  pointer-events: none;
}

/* ---------- Hero (center): the blocks under the words, the photo in a thick round frame ---------- */
.a-look-shatoor .a-sec-hero__title { font-size: clamp(1.75rem, 1.25rem + 3vw, 3rem); }
.a-look-shatoor .a-sec-hero__media { box-shadow: 0 0 0 6px var(--site-primary); }
.a-look-shatoor .a-sec__deco { pointer-events: none; }
.a-look-shatoor .a-sec__deco svg { display: block; inline-size: 100%; block-size: auto; }
.a-look-shatoor .a-sec-hero .a-sec__deco { inline-size: min(100%, 280px); margin-inline: auto; }
.a-look-shatoor .a-sec-hero__grid > .a-sec__deco { grid-column: 1 / -1; }

/* ---------- Courses: tinted cards in turn, a round picture inside the card ---------- */
.a-look-shatoor .a-sec-course { border-color: var(--site-outline); }
.a-look-shatoor .a-sec-courses__list > :nth-child(3n + 1) .a-sec-course { background: var(--site-primary-tint); }
.a-look-shatoor .a-sec-courses__list > :nth-child(3n + 2) .a-sec-course { background: var(--site-link-tint); }
.a-look-shatoor .a-sec-courses__list > :nth-child(3n) .a-sec-course { background: var(--site-band); }
.a-look-shatoor .a-sec-course__cover {
  inline-size: auto;
  margin: 10px 10px 0;
  border-radius: calc(var(--site-radius) - 10px);
  background: var(--site-surface);
}
.a-look-shatoor .a-sec-courses--list .a-sec-course__cover { margin: 10px; margin-inline-end: 0; }
.a-look-shatoor .a-sec-course__cover[data-tone] { position: relative; }
.a-look-shatoor .a-sec-course__cover[data-tone]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--site-accent);
  -webkit-mask: url("/images/academy/templates/shatoor/star.svg") center / 56px no-repeat;
  mask: url("/images/academy/templates/shatoor/star.svg") center / 56px no-repeat;
}
.a-look-shatoor .a-sec-course__cover[data-tone="2"]::after { background: var(--site-primary); }
.a-look-shatoor .a-sec-course__cover[data-tone="3"]::after { background: var(--site-success); }
.a-look-shatoor .a-sec-course__title { font-size: 1.1875rem; }
.a-look-shatoor .a-sec-course__go { color: var(--site-ink); text-decoration: underline; text-decoration-thickness: 2px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .a-look-shatoor .a-sec-course { transition: transform .15s, border-color .2s; }
  .a-look-shatoor .a-sec-course:hover { transform: translateY(-3px); }
}

/* ---------- Stats: round stickers with a star ---------- */
.a-look-shatoor .a-sec-stat { border-color: var(--site-outline); background: var(--site-surface); }
.a-look-shatoor .a-sec-stats__value::after {
  inline-size: 20px;
  block-size: 20px;
  border-radius: 0;
  background: var(--site-accent);
  -webkit-mask: url("/images/academy/templates/shatoor/star.svg") center / contain no-repeat;
  mask: url("/images/academy/templates/shatoor/star.svg") center / contain no-repeat;
}

/* ---------- Testimonials (whatsapp): rounder bubbles on a white panel ---------- */
.a-look-shatoor .a-sec-testimonials--whatsapp .a-sec-testimonials__list { border: 3px solid var(--site-outline); background: var(--site-surface); }
.a-look-shatoor .a-sec-bubble { border-radius: 22px; border-start-start-radius: 6px; background: var(--site-link-tint); box-shadow: none; }
.a-look-shatoor .a-sec-bubble:nth-child(even) { border-start-start-radius: 22px; border-start-end-radius: 6px; background: var(--site-primary-tint); }
.a-look-shatoor .a-sec-bubble__name { color: var(--site-ink); }
.a-look-shatoor .a-sec-quote { border-color: var(--site-outline); }

/* ---------- Questions: big rows, a round plus ---------- */
.a-look-shatoor .a-sec-faq__item { border-color: var(--site-outline); border-radius: 24px; }
.a-look-shatoor .a-sec-faq__item > summary { min-height: 64px; padding-inline: 20px; font-size: 1.0625rem; }
.a-look-shatoor .a-sec-faq__item > summary::after { inline-size: 32px; block-size: 32px; }
.a-look-shatoor .a-sec-faq__answer { padding: 0 20px 20px; }

/* ---------- Live: each class is a sticker ---------- */
.a-look-shatoor .a-sec-day { border-color: var(--site-outline); border-radius: 22px; }
.a-look-shatoor .a-sec-day--today { background: var(--site-primary-tint); }
.a-look-shatoor .a-sec-slot { border-radius: 999px; background: var(--site-accent); color: var(--site-on-accent); }

/* ---------- «عني», contact, the closing card ---------- */
.a-look-shatoor .a-sec-about__media { box-shadow: 0 0 0 5px var(--site-primary); }
.a-look-shatoor .a-sec-about__point { background: var(--site-accent); color: var(--site-on-accent); }
.a-look-shatoor .a-sec-about--card .a-sec-about__grid { border-color: var(--site-outline); }
.a-look-shatoor .a-sec-contact__card { border-color: var(--site-outline); min-height: 72px; }
.a-look-shatoor .a-sec-contact__icon { inline-size: 48px; block-size: 48px; }
.a-look-shatoor .a-sec-cta--card .a-sec-cta__row { border-color: var(--site-outline); border-top-width: 3px; background: var(--site-primary-tint); }
.a-look-shatoor .a-sec-cta--card .a-sec-cta__line { color: var(--site-ink); }
.a-look-shatoor .a-sec-cta--card .a-sec-cta__title::before {
  content: "";
  display: block;
  inline-size: 40px;
  block-size: 40px;
  margin: 0 auto var(--a-space-2);
  background: var(--site-accent);
  -webkit-mask: url("/images/academy/templates/shatoor/star.svg") center / contain no-repeat;
  mask: url("/images/academy/templates/shatoor/star.svg") center / contain no-repeat;
}
.a-look-shatoor .a-sec-video__frame { border: 3px solid var(--site-outline); }

/* Inlined illustrations follow the palette (the files' own fills are the default palette for <img> use). */
.a-look-shatoor svg .f-surface { fill: var(--site-surface); }
.a-look-shatoor svg .f-ink { fill: var(--site-ink); }
.a-look-shatoor svg .f-band { fill: var(--site-band); }
.a-look-shatoor svg .f-link { fill: var(--site-link); }
.a-look-shatoor svg .f-link-tint { fill: var(--site-link-tint); }
.a-look-shatoor svg .f-primary { fill: var(--site-primary); }
.a-look-shatoor svg .f-on-primary { fill: var(--site-on-primary); }
.a-look-shatoor svg .f-accent { fill: var(--site-accent); }
.a-look-shatoor svg .f-success { fill: var(--site-success); }
.a-look-shatoor svg .f-danger { fill: var(--site-danger); }
.a-look-shatoor svg .s-ink { stroke: var(--site-ink); }
.a-look-shatoor svg .s-muted { stroke: var(--site-muted); }
.a-look-shatoor svg .s-surface { stroke: var(--site-surface); }
/* The letters on the link and success blocks use the surface colour: light on the deep fills of the light
   palettes, dark on the bright fills of night mode, so they read in both (decorative, aria-hidden anyway). */

@media (min-width: 768px) {
  .a-look-shatoor .a-sec-hero .a-sec__deco { inline-size: 340px; }
  .a-look-shatoor .a-sec-hero__media { width: 132px; --a-sec-avatar: 132px; }
}