/* «نجم الشبّاك» (nagm), look 4 of 10. Owner: d3 design, then p5.
   The idea: a film poster where the teacher is the star. The hero (split) puts a big photo first, under a soft
   spotlight, fading into the page; marquee bulbs run along the top and bottom of the hero; sparkles sit on the
   photo's corners; numbers read like a box-office board; the closing card is a cinema ticket.
   Rules: colours only from --site-* (8 palettes + night mode), shape through d2's --site-radius* variables, logical
   properties, no animation (the bulbs don't blink), safe at 320px. The title never sits on the photo (it starts
   under it), so contrast doesn't depend on the picture. Markup: d2's sections.css hooks (build/design/d3/spec.md §6).
   Masks (alpha only): star.svg, sparkles.svg. */

.a-site.a-look-nagm {
  --site-radius: 16px;
  --site-radius-btn: 999px;
  --site-radius-img: 24px;
  --ng-star: url("../../../images/academy/templates/nagm/star.svg");
  --ng-sparkles: url("../../../images/academy/templates/nagm/sparkles.svg");
  --ng-bulbs: radial-gradient(circle, var(--site-accent) 0 3px, transparent 3.5px) 0 50% / 22px 100% repeat-x;
}

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

/* A star before each section heading. */
.a-look-nagm .a-sec__title::before {
  content: "";
  display: inline-block;
  inline-size: .75em;
  block-size: .75em;
  margin-inline-end: .4em;
  vertical-align: .02em;
  background: var(--site-accent);
  -webkit-mask: var(--ng-star) center / contain no-repeat;
  mask: var(--ng-star) center / contain no-repeat;
}

/* ---------- Header: the current page sits on a row of bulbs ---------- */
.a-look-nagm .a-site-nav a[aria-current="page"] {
  text-decoration: none;
  background: radial-gradient(circle, var(--site-accent) 0 2.5px, transparent 3px) 50% 100% / 12px 8px repeat-x;
}

/* ---------- Hero (split) as a poster: the photo first and big ---------- */
.a-look-nagm .a-sec-hero--split { isolation: isolate; padding-block: 28px; }
/* Marquee bulbs along the top and bottom of the hero (static). */
.a-look-nagm .a-sec-hero--split::before,
.a-look-nagm .a-sec-hero--split::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 10px;
  background: var(--ng-bulbs);
  opacity: .9;
  pointer-events: none;
}
.a-look-nagm .a-sec-hero--split::before { inset-block-start: 6px; }
.a-look-nagm .a-sec-hero--split::after { inset-block-end: 6px; }
/* The spotlight behind the photo (ink stays at 10:1 or more on the tint in every palette). */
.a-look-nagm .a-sec-hero--split .a-sec__inner { position: relative; }
.a-look-nagm .a-sec-hero--split .a-sec__inner::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -10%;
  block-size: 70%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--site-primary-tint), transparent);
  pointer-events: none;
}
.a-look-nagm .a-sec-hero--split .a-sec-hero__media {
  inline-size: 100%;
  max-inline-size: 420px;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  background: transparent;
  --a-sec-avatar: clamp(140px, 44vw, 200px);
}
/* The picture fades into the page at the bottom, like a poster. */
.a-look-nagm .a-sec-hero--split .a-sec-hero__media > :is(img, .a-sec-photo, .a-sec-photo-slot) {
  -webkit-mask: linear-gradient(#000 70%, transparent);
  mask: linear-gradient(#000 70%, transparent);
}
/* Sparkles on the photo's corners (over the picture, never over words). */
.a-look-nagm .a-sec-hero--split .a-sec-hero__media::after {
  content: "";
  position: absolute;
  inset: 4% 2% 30%;
  background: var(--site-accent);
  pointer-events: none;
  -webkit-mask: var(--ng-sparkles) center / 100% 100% no-repeat;
  mask: var(--ng-sparkles) center / 100% 100% no-repeat;
}
.a-look-nagm .a-sec-hero--split .a-sec-hero__title { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.5rem); line-height: 1.35; }
.a-look-nagm .a-sec-hero--split .a-sec-hero__body { text-align: center; justify-items: center; }
.a-look-nagm .a-sec-hero--split .a-sec-hero__actions { justify-content: center; }
@media (min-width: 768px) {
  .a-look-nagm .a-sec-hero--split .a-sec-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .a-look-nagm .a-sec-hero--split .a-sec-hero__media { max-inline-size: 460px; }
  .a-look-nagm .a-sec-hero--split .a-sec-hero__body { text-align: start; justify-items: start; }
  .a-look-nagm .a-sec-hero--split .a-sec-hero__actions { justify-content: flex-start; }
  .a-look-nagm .a-sec-hero--split .a-sec__inner::before { inset-inline: 50% 0; block-size: 100%; inset-block-start: 0; }
}

/* ---------- «أرقام»: the box-office board ---------- */
.a-look-nagm .a-sec-stats__list {
  position: relative;
  padding-block-start: 20px;
  background: var(--ng-bulbs);
  background-size: 22px 10px;
  background-position: 0 0;
  background-repeat: repeat-x;
}
.a-look-nagm .a-sec-stat { border-color: var(--site-accent); }
.a-look-nagm .a-sec-stats__value { font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); line-height: 1.15; }
.a-look-nagm .a-sec-stats__value::after {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0;
  background: var(--site-accent);
  -webkit-mask: var(--ng-star) center / contain no-repeat;
  mask: var(--ng-star) center / contain no-repeat;
}

/* ---------- «كورساتي»: posters under a spotlight ---------- */
.a-look-nagm .a-sec-course__cover--art { background: radial-gradient(ellipse 60% 90% at 50% 0, var(--site-primary-tint), transparent 70%), var(--site-band); }
.a-look-nagm .a-sec-course__cover--art[data-tone="2"] { background: radial-gradient(ellipse 60% 90% at 50% 0, var(--site-link-tint), transparent 70%), var(--site-band); }
.a-look-nagm .a-sec-course__cover--art[data-tone="3"] { background: var(--ng-bulbs), var(--site-band); background-size: 22px 12px, auto; background-position: 0 8px, 0 0; background-repeat: repeat-x, no-repeat; }
.a-look-nagm .a-site-chip--free { background: var(--site-accent); color: var(--site-on-accent); }

/* ---------- «الطلبة بيقولوا إيه»: review cards with a gold top edge ---------- */
.a-look-nagm .a-sec-quote { border-block-start: 4px solid var(--site-accent); }

/* ---------- «مين أ. …؟» (about card): a framed portrait ---------- */
.a-look-nagm .a-sec-about--card .a-sec-about__grid { border: 2px solid var(--site-accent); box-shadow: 0 0 0 6px var(--site-surface), 0 0 0 7px var(--site-line); }
.a-look-nagm .a-sec-about--card .a-sec-about__media { inline-size: 132px; border-radius: var(--site-radius-img); --a-sec-avatar: 132px; }

/* ---------- «ابدأ دلوقتي» (card): a cinema ticket with notched sides ---------- */
.a-look-nagm .a-sec-cta--card .a-sec-cta__row {
  --ng-notch: 14px;
  padding-inline: calc(var(--ng-notch) + 16px);
  border-top-width: 1px;
  border-style: dashed;
  -webkit-mask:
    radial-gradient(circle at 0 50%, transparent var(--ng-notch), #000 calc(var(--ng-notch) + .5px)) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent var(--ng-notch), #000 calc(var(--ng-notch) + .5px)) 100% 0 / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 50%, transparent var(--ng-notch), #000 calc(var(--ng-notch) + .5px)) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent var(--ng-notch), #000 calc(var(--ng-notch) + .5px)) 100% 0 / 51% 100% no-repeat;
}

/* ---------- Live ---------- */
.a-look-nagm .a-sec-day--today { border-color: var(--site-accent); box-shadow: inset 0 3px 0 var(--site-accent); }
.a-look-nagm .a-sec-slot__time { font-variant-numeric: tabular-nums; }

/* A cover without a picture gets the sparkles under its spotlight. */
.a-look-nagm .a-sec-course__cover--art { position: relative; }
.a-look-nagm .a-sec-course__cover--art::after {
  content: "";
  position: absolute;
  inset: 16% 24%;
  background: var(--site-accent);
  opacity: .85;
  pointer-events: none;
  -webkit-mask: var(--ng-sparkles) center / contain no-repeat;
  mask: var(--ng-sparkles) center / contain no-repeat;
}