/* «الكرّاسة» (korrasa), look 2 of 10. Owner: d3 design, then p5.
   The idea: a school copybook, cheerful. Ruled lines and a red margin on the hero page, the «عني» card and the
   closing card; washi tape over the photo; doodles under the buttons; spiral holes on the course cards; round sticker
   numbers; a hand-drawn star before each heading; cartoon shadows.
   Rules: colours only from --site-* (8 palettes + night mode), shape through d2's --site-radius* variables, logical
   properties, no animation, safe at 320px (cards tilt 1deg at most inside the 16px gutter). Markup: d2's
   sections.css hooks (build/design/d3/spec.md §6). Masks (alpha only): star.svg, doodles.svg. */

.a-site.a-look-korrasa {
  --site-radius: 18px;
  --site-radius-btn: 999px;
  --site-radius-img: 18px;
  --site-border: 2px;
  --site-shadow: 3px 3px 0 var(--site-outline);
  --kr-rule: 2rem;
  --kr-star: url("../../../images/academy/templates/korrasa/star.svg");
  --kr-doodles: url("../../../images/academy/templates/korrasa/doodles.svg");
}
:root[data-theme="dark"] .a-site.a-look-korrasa { --site-shadow: 3px 3px 0 var(--site-line); }

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

/* Ruled copybook paper with a red margin line on the starting side. */
.a-look-korrasa :is(.a-sec-hero--center .a-sec-hero__body, .a-sec-about--card .a-sec-about__grid, .a-sec-cta--card .a-sec-cta__row) {
  position: relative;
  isolation: isolate;
  background-color: var(--site-surface);
  background-image:
    linear-gradient(var(--site-danger), var(--site-danger)),
    linear-gradient(var(--site-line) 1px, transparent 1px);
  background-size: 2px 100%, 100% var(--kr-rule);
  background-position: right 1.4rem top 0, 0 calc(var(--kr-rule) - 1px);
  background-repeat: no-repeat, repeat;
  border: 2px solid var(--site-outline);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
}
[dir="ltr"] .a-look-korrasa :is(.a-sec-hero--center .a-sec-hero__body, .a-sec-about--card .a-sec-about__grid, .a-sec-cta--card .a-sec-cta__row) {
  background-position: left 1.4rem top 0, 0 calc(var(--kr-rule) - 1px);
}

/* A hand-drawn star before every section heading. */
.a-look-korrasa .a-sec__title::before {
  content: "";
  display: inline-block;
  inline-size: .85em;
  block-size: .85em;
  margin-inline-end: .35em;
  vertical-align: -.08em;
  background: var(--site-link);
  -webkit-mask: var(--kr-star) center / contain no-repeat;
  mask: var(--kr-star) center / contain no-repeat;
}

/* The marked word is a sticker label (on-accent on accent passes in every palette). */
.a-look-korrasa .a-sec-mark {
  padding: 0 .25em .05em;
  border-radius: .35em;
  background: var(--site-accent);
  color: var(--site-on-accent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Header ---------- */
.a-look-korrasa .a-site-nav a[aria-current="page"] {
  border-radius: var(--site-radius-btn);
  background: var(--site-primary-tint);
  color: var(--site-ink);
  text-decoration: none;
}

/* ---------- Hero (center): a copybook page with a taped photo sticker and doodles ---------- */
.a-look-korrasa .a-sec-hero--center .a-sec-hero__body { padding: 36px 16px 20px; padding-inline-start: 2.2rem; }
.a-look-korrasa .a-sec-hero--center .a-sec-hero__title { line-height: 1.6; }
.a-look-korrasa .a-sec-hero--center .a-sec-hero__media {
  border: 5px solid var(--site-surface);
  box-shadow: 0 0 0 2px var(--site-outline);
  rotate: -3deg;
}
/* Washi tape across the top of the photo. */
.a-look-korrasa .a-sec-hero--center .a-sec-hero__body::before {
  content: "";
  position: absolute;
  inset-block-start: 26px;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 5.5rem;
  block-size: 1.3rem;
  rotate: -8deg;
  z-index: 1;
  background: repeating-linear-gradient(-45deg, var(--site-accent) 0 8px, var(--site-primary-tint) 8px 14px);
  opacity: .9;
  pointer-events: none;
}
/* Doodles under the buttons, in the flow (never behind words). */
.a-look-korrasa .a-sec-hero--center .a-sec-hero__body::after {
  content: "";
  display: block;
  inline-size: min(80%, 15rem);
  aspect-ratio: 3 / 2;
  background: var(--site-link);
  opacity: .8;
  pointer-events: none;
  -webkit-mask: var(--kr-doodles) center / contain no-repeat;
  mask: var(--kr-doodles) center / contain no-repeat;
}
@media (min-width: 768px) {
  .a-look-korrasa .a-sec-hero--center .a-sec-hero__body { padding: 56px 48px 32px; padding-inline-start: 3.2rem; }
  .a-look-korrasa .a-sec-hero--center .a-sec-hero__body::before { inset-block-start: 46px; }
  .a-look-korrasa .a-sec-hero--center .a-sec-hero__body::after { position: absolute; inset-inline-end: 24px; inset-block-end: 20px; inline-size: 9rem; opacity: .55; z-index: -1; }
}

/* ---------- «يلا نتعلم» (courses): copybook pages with spiral holes, a little tilted ---------- */
.a-look-korrasa .a-sec-course { border-color: var(--site-outline); padding-block-start: 1.1rem; }
.a-look-korrasa .a-sec-course::before {
  content: "";
  position: absolute;
  inset-inline: .8rem;
  inset-block-start: .3rem;
  block-size: .55rem;
  background: radial-gradient(circle, var(--site-bg) 0 .2rem, var(--site-outline) .2rem .27rem, transparent .28rem) 0 0 / 1.4rem 100% repeat-x;
  pointer-events: none;
}
.a-look-korrasa .a-sec-courses--grid .a-sec-courses__list > li:nth-child(odd) .a-sec-course { rotate: -1deg; }
.a-look-korrasa .a-sec-courses--grid .a-sec-courses__list > li:nth-child(even) .a-sec-course { rotate: 1deg; }
.a-look-korrasa .a-sec-course__cover--art {
  position: relative;
  background-color: var(--site-primary-tint);
  background-image: linear-gradient(var(--site-line) 1px, transparent 1px);
  background-size: 100% 1.25rem;
}
.a-look-korrasa .a-sec-course__cover--art[data-tone="2"] { background-color: var(--site-link-tint); }
.a-look-korrasa .a-sec-course__cover--art[data-tone="3"] { background-color: var(--site-band); }
.a-look-korrasa .a-sec-course__cover--art::after {
  content: "";
  position: absolute;
  inset: 18% 22%;
  background: var(--site-ink);
  opacity: .7;
  -webkit-mask: var(--kr-doodles) center / contain no-repeat;
  mask: var(--kr-doodles) center / contain no-repeat;
}
.a-look-korrasa .a-site-chip--free { background: var(--site-accent); color: var(--site-on-accent); }

/* ---------- «أهلًا، أنا …» (about card) ---------- */
.a-look-korrasa .a-sec-about--card .a-sec-about__grid { padding-inline-start: 2.2rem; }
.a-look-korrasa .a-sec-about--card .a-sec-about__media { border: 4px solid var(--site-surface); box-shadow: 0 0 0 2px var(--site-outline); }
.a-look-korrasa .a-sec-about__point { border: 2px solid var(--site-outline); background: var(--site-surface); }

/* ---------- «أرقام»: round stickers ---------- */
.a-look-korrasa .a-sec-stats__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); }
.a-look-korrasa .a-sec-stat { background: transparent; border: 0; padding-block: 8px; }
.a-look-korrasa .a-sec-stats__value {
  display: grid;
  place-items: center;
  inline-size: 5.2rem;
  aspect-ratio: 1;
  border: 2px solid var(--site-outline);
  border-radius: 50%;
  background: var(--site-primary-tint);
  font-size: 1.35rem;
  box-shadow: var(--site-shadow);
}
.a-look-korrasa .a-sec-stats__value::after { content: none; }
.a-look-korrasa .a-sec-stat:nth-child(2) .a-sec-stats__value { background: var(--site-link-tint); rotate: 4deg; }
.a-look-korrasa .a-sec-stat:nth-child(3) .a-sec-stats__value { background: var(--site-primary); color: var(--site-on-primary); rotate: -3deg; }
.a-look-korrasa .a-sec-stat:nth-child(4) .a-sec-stats__value { background: var(--site-accent); color: var(--site-on-accent); }

/* ---------- «قالوا إيه؟» (whatsapp bubbles): sticker outlines ---------- */
.a-look-korrasa .a-sec-testimonials--whatsapp .a-sec-testimonials__list { border: 2px solid var(--site-outline); }
.a-look-korrasa .a-sec-bubble { border: 2px solid var(--site-outline); box-shadow: var(--site-shadow); }
.a-look-korrasa .a-sec-quote { box-shadow: var(--site-shadow); border-color: var(--site-outline); }

/* ---------- «أسئلة» ---------- */
.a-look-korrasa .a-sec-faq__list { gap: 12px; }
.a-look-korrasa .a-sec-faq__item { border-color: var(--site-outline); border-radius: var(--site-radius); box-shadow: var(--site-shadow); }

/* ---------- «الحصص المباشرة»: the school timetable, each day a coloured tab ---------- */
.a-look-korrasa .a-sec-day { border-color: var(--site-outline); border-radius: var(--site-radius); }
.a-look-korrasa .a-sec-day__name { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--site-primary-tint); }
.a-look-korrasa .a-sec-day:nth-child(even) .a-sec-day__name { background: var(--site-link-tint); }
.a-look-korrasa .a-sec-day--today { box-shadow: var(--site-shadow); border-color: var(--site-link); }

/* ---------- «يلا نبدأ؟» (cta card) and contact cards ---------- */
.a-look-korrasa .a-sec-cta--card .a-sec-cta__row { padding-inline-start: 2.2rem; border-top-width: 2px; }
.a-look-korrasa .a-sec-contact__card { border-color: var(--site-outline); box-shadow: var(--site-shadow); }