/* «الكارت» (kart), look 10 of 10. Owner: d4 design, then p5.
   One short page on one card: a narrow column (560px) on a dotted table, sections divided by a dashed line instead
   of bands, no menu (the manifest's nav is empty and touches.single_page is true: the other pages land on their
   anchor here). Small by design: fewer, shorter sections, the buttons full width on phones. The course page, the
   courses list and the legal pages wear the same card.
   Default palette «رمل», default font «مرِح». Colours: --site-* only (8 palettes + night mode,
   d4/tools/contrast_d4.py). Markup: d2's site.css + sections.css. Decoration: sparkles.svg around the photo. */

.a-site.a-look-kart {
  --site-radius: 18px;
  --site-radius-btn: 14px;
  --site-radius-img: 14px;
  --site-section-pad: clamp(28px, 6vw, 44px);
  --site-max: 560px;
  --kart-gap: 12px;
}

/* The table: faint dots behind the card. */
.a-look-kart .a-site-main { position: relative; padding-block: var(--kart-gap) var(--a-space-6); }
.a-look-kart .a-site-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--site-line);
  -webkit-mask: url("/images/academy/templates/kart/dots.svg") 0 0 / 20px 20px repeat;
  mask: url("/images/academy/templates/kart/dots.svg") 0 0 / 20px 20px repeat;
  pointer-events: none;
}

/* The card: every section is a slice of it; the first and last slices round the corners. */
.a-look-kart .a-sec {
  max-inline-size: var(--site-max);
  margin-inline: max(var(--kart-gap), env(safe-area-inset-left));
  background: var(--site-surface);
  border-inline: 1px solid var(--site-line);
}
.a-look-kart .a-sec--band { background: var(--site-surface); }
.a-look-kart .a-sec + .a-sec { border-block-start: 1px dashed var(--site-line); }
.a-look-kart .a-sec:first-of-type {
  border-block-start: 1px solid var(--site-line);
  border-start-start-radius: var(--site-radius);
  border-start-end-radius: var(--site-radius);
}
.a-look-kart .a-sec:last-of-type {
  border-block-end: 1px solid var(--site-line);
  border-end-start-radius: var(--site-radius);
  border-end-end-radius: var(--site-radius);
  box-shadow: 0 6px 0 var(--site-band);
}
.a-look-kart .a-sec__head { margin-block-end: var(--a-space-4); }
.a-look-kart .a-sec__title { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.5rem); }

/* Page heads of the other pages (course, all courses, legal) sit on the same card. */
.a-look-kart .a-site-main > .a-site-wrap {
  position: relative;
  width: auto;
  max-inline-size: var(--site-max);
  margin-inline: max(var(--kart-gap), env(safe-area-inset-left));
  padding-block-end: var(--a-space-5);
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
}

/* ---------- Hero (center): the photo with sparkles, the name, one line, full-width buttons ---------- */
.a-look-kart .a-sec-hero { padding-block: var(--a-space-6) var(--a-space-5); }
.a-look-kart .a-sec-hero__title { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2rem); }
.a-look-kart .a-sec-hero__actions { display: grid; justify-content: stretch; inline-size: 100%; }
.a-look-kart .a-sec-hero__actions .a-site-btn { inline-size: 100%; }
.a-look-kart .a-sec-hero--center .a-sec-hero__media { position: relative; overflow: visible; z-index: 1; }
.a-look-kart .a-sec__deco { pointer-events: none; }
.a-look-kart .a-sec__deco svg { display: block; inline-size: 100%; block-size: auto; }
.a-look-kart .a-sec-hero--center .a-sec-hero__body { position: relative; }
.a-look-kart .a-sec-hero--center .a-sec-hero__body > .a-sec__deco {
  position: absolute;
  inset-block-start: -36px;
  inset-inline: 0;
  inline-size: 176px;
  margin-inline: auto;
}

/* ---------- Courses: compact rows ---------- */
.a-look-kart .a-sec-courses__list { gap: var(--a-space-2); }
.a-look-kart .a-sec-course { border-color: var(--site-line); box-shadow: none; }
.a-look-kart .a-sec-courses--list .a-sec-course__cover { inline-size: 88px; }
.a-look-kart .a-sec-courses--grid .a-sec-courses__list { grid-template-columns: minmax(0, 1fr); }
.a-look-kart .a-sec-course__cover[data-tone] { position: relative; background: var(--site-primary-tint); }
.a-look-kart .a-sec-course__cover[data-tone="2"] { background: var(--site-link-tint); }
.a-look-kart .a-sec-course__cover[data-tone="3"] { background: var(--site-band); }
.a-look-kart .a-sec-course__cover[data-tone]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--site-accent);
  -webkit-mask: url("/images/academy/templates/kart/sparkles.svg") center / 64px no-repeat;
  mask: url("/images/academy/templates/kart/sparkles.svg") center / 64px no-repeat;
}

/* ---------- Live: the week stays a short list, even on a wide screen ---------- */
.a-look-kart .a-sec-live__week { grid-template-columns: minmax(0, 1fr); gap: var(--a-space-2); }
.a-look-kart .a-sec-day { grid-template-columns: 76px minmax(0, 1fr); min-height: 0; border-color: var(--site-line); }
.a-look-kart .a-sec-day--empty { display: none; }
.a-look-kart .a-sec-day--today { background: var(--site-primary-tint); box-shadow: inset -4px 0 0 var(--site-link); }
[dir="ltr"] .a-look-kart .a-sec-day--today { box-shadow: inset 4px 0 0 var(--site-link); }
.a-look-kart .a-sec-slot { inline-size: auto; }

/* ---------- Inner cards become flat: we are already on a card ---------- */
.a-look-kart :is(.a-sec-about--card .a-sec-about__grid, .a-sec-cta--card .a-sec-cta__row) {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.a-look-kart .a-sec-about--side .a-sec-about__grid { grid-template-columns: minmax(0, 1fr); }
.a-look-kart .a-sec-about--side .a-sec-about__media { inline-size: 120px; border-radius: 50%; }
.a-look-kart .a-sec-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a-look-kart .a-sec-testimonials--quotes .a-sec-testimonials__list { grid-template-columns: minmax(0, 1fr); }
.a-look-kart .a-sec-quote { padding: var(--a-space-4); border-color: var(--site-line); }
.a-look-kart .a-sec-faq__item { border-color: var(--site-line); }
.a-look-kart .a-sec-contact__list { grid-template-columns: minmax(0, 1fr); }
.a-look-kart .a-sec-contact__card { border-color: var(--site-line); }
.a-look-kart .a-sec-cta--strip { background: var(--site-primary-tint); color: var(--site-ink); }
.a-look-kart .a-sec-cta--strip .a-site-btn--primary { background: var(--site-primary); border-color: var(--site-primary); color: var(--site-on-primary); }
.a-look-kart .a-sec-cta--strip :focus-visible { outline-color: var(--site-focus); }
.a-look-kart .a-sec-cta .a-site-btn { inline-size: 100%; }
.a-look-kart .a-sec-cta--strip .a-sec-cta__row { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }

/* Inlined illustrations follow the palette. */
.a-look-kart svg .f-surface { fill: var(--site-surface); }
.a-look-kart svg .f-band { fill: var(--site-band); }
.a-look-kart svg .f-link { fill: var(--site-link); }
.a-look-kart svg .f-primary { fill: var(--site-primary); }
.a-look-kart svg .f-accent { fill: var(--site-accent); }

@media (min-width: 600px) {
  .a-look-kart .a-sec,
  .a-look-kart .a-site-main > .a-site-wrap { margin-inline: auto; }
  .a-look-kart .a-site-main { padding-block-start: var(--a-space-6); }
  .a-look-kart .a-sec-hero__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}