/* «السنتر» (markaz), look 5 of 10. Owner: d3 design, then p5.
   The idea: the board at the tutoring centre. A sign-like hero with the centre's clock, then the week's groups as
   paper slips pinned on a cork board (today's slip highlighted), recorded courses as index cards with a coloured
   tab, numbers in scoreboard boxes, pinned business-card contacts, and an announcement banner at the end.
   Rules: colours only from --site-* (8 palettes + night mode), shape through d2's --site-radius* variables, logical
   properties, no animation, safe at 320px (slips tilt 1deg at most). Times always sit on a paper slip
   (--site-surface): --site-link text on --site-band fails AA in three palettes. Markup: d2's sections.css hooks
   (build/design/d3/spec.md §6). Masks (alpha only): pin.svg, clock.svg. */

.a-site.a-look-markaz {
  --site-radius: 10px;
  --site-radius-btn: 10px;
  --site-radius-img: 8px;
  --site-head-weight: 800;
  --mk-pin: url("../../../images/academy/templates/markaz/pin.svg");
  --mk-clock: url("../../../images/academy/templates/markaz/clock.svg");
}

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

/* A push pin on top of any pinned paper. */
.a-look-markaz :is(.a-sec-day, .a-sec-contact__card)::before {
  content: "";
  position: absolute;
  inset-block-start: -9px;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 20px;
  block-size: 20px;
  background: var(--site-danger);
  pointer-events: none;
  -webkit-mask: var(--mk-pin) center / contain no-repeat;
  mask: var(--mk-pin) center / contain no-repeat;
}

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

/* ---------- Hero (center): the centre's sign with its wall clock ---------- */
.a-look-markaz .a-sec-hero--center .a-sec-hero__body {
  position: relative;
  padding: 28px 16px 24px;
  border: 3px solid var(--site-outline);
  border-radius: var(--site-radius);
  background: var(--site-surface);
  box-shadow: inset 0 0 0 5px var(--site-surface), inset 0 0 0 6px var(--site-line);
}
/* The clock hangs in the sign's top corner, beside the photo (never behind words). */
.a-look-markaz .a-sec-hero--center .a-sec-hero__body::before {
  content: "";
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  inline-size: clamp(44px, 14vw, 72px);
  aspect-ratio: 1;
  background: var(--site-ink);
  opacity: .8;
  pointer-events: none;
  -webkit-mask: var(--mk-clock) center / contain no-repeat;
  mask: var(--mk-clock) center / contain no-repeat;
}
.a-look-markaz .a-sec-hero--center .a-sec-hero__media { border-radius: var(--site-radius-img); }
.a-look-markaz .a-sec-hero--center .a-sec-hero__title { font-size: clamp(1.7rem, 1.25rem + 2.2vw, 2.6rem); line-height: 1.45; }
@media (min-width: 768px) {
  .a-look-markaz .a-sec-hero--center .a-sec-hero__body { padding: 40px 56px 36px; }
  .a-look-markaz .a-sec-hero--center .a-sec-hero__body::before { inset-block-start: 22px; inset-inline-start: 22px; }
}

/* ---------- «مواعيد المجموعات»: paper slips on the cork board ---------- */
.a-look-markaz .a-sec-live__week {
  gap: 18px 10px;
  padding: 24px 10px 14px;
  border: 3px solid var(--site-outline);
  border-radius: var(--site-radius);
  background-color: var(--site-band);
  background-image: radial-gradient(circle, var(--site-line) 1px, transparent 1.6px), radial-gradient(circle, var(--site-line) 1px, transparent 1.6px);
  background-size: 14px 14px, 14px 14px;
  background-position: 0 0, 7px 7px;
}
.a-look-markaz .a-sec-day {
  position: relative;
  padding-block-start: 16px;
  border: 0;
  border-radius: 4px;
  background: var(--site-surface);
  box-shadow: 0 2px 0 var(--site-line), var(--site-shadow);
}
.a-look-markaz .a-sec-day:nth-child(odd) { rotate: -1deg; }
.a-look-markaz .a-sec-day:nth-child(even) { rotate: .8deg; }
.a-look-markaz .a-sec-day:nth-child(even)::before { background: var(--site-link); }
.a-look-markaz .a-sec-day--today,
[dir="ltr"] .a-look-markaz .a-sec-day--today {
  rotate: none;
  outline: 3px solid var(--site-link);
  outline-offset: 2px;
  box-shadow: 0 2px 0 var(--site-line);
}
.a-look-markaz .a-sec-day__name { font-weight: 800; }
.a-look-markaz .a-sec-slot { background: var(--site-surface); border: 1px dashed var(--site-line); border-radius: 6px; }
.a-look-markaz .a-sec-slot__time { font-size: 1.125rem; font-weight: 800; color: var(--site-link); font-variant-numeric: tabular-nums; }
.a-look-markaz .a-sec-live__hint { color: var(--site-ink); }
@media (min-width: 900px) {
  .a-look-markaz .a-sec-live__week { padding: 28px 16px 18px; }
  .a-look-markaz .a-sec-day--today { box-shadow: 0 2px 0 var(--site-line); }
}

/* ---------- «كورساتي المسجّلة» (list): index cards with a coloured tab ---------- */
.a-look-markaz .a-sec-course { border-inline-start: 6px solid var(--site-primary); }
.a-look-markaz .a-sec-courses__list > li:nth-child(3n+2) .a-sec-course { border-inline-start-color: var(--site-link); }
.a-look-markaz .a-sec-courses__list > li:nth-child(3n) .a-sec-course { border-inline-start-color: var(--site-accent); }
.a-look-markaz .a-sec-course__cover--art { background: repeating-linear-gradient(var(--site-surface) 0 10px, var(--site-primary-tint) 10px 12px); }
.a-look-markaz .a-sec-course__cover--art[data-tone="2"] { background: repeating-linear-gradient(var(--site-surface) 0 10px, var(--site-link-tint) 10px 12px); }
.a-look-markaz .a-sec-course__cover--art[data-tone="3"] { background: repeating-linear-gradient(var(--site-surface) 0 10px, var(--site-band) 10px 12px); }
.a-look-markaz .a-site-chip--free { border-radius: 4px; background: var(--site-ink); color: var(--site-bg); }

/* ---------- «أرقام»: scoreboard boxes ---------- */
.a-look-markaz .a-sec-stats__value {
  min-inline-size: 3.6rem;
  padding: .05em .45em;
  border: 2px solid var(--site-outline);
  border-radius: 8px;
  background: var(--site-surface);
  font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.2rem);
  font-weight: 800;
  text-align: center;
}
.a-look-markaz .a-sec-stats__value::after { content: none; }

/* ---------- «عن أ. …» (side): a photo print, a little tilted ---------- */
.a-look-markaz .a-sec-about__media { border: 6px solid var(--site-surface); border-radius: 4px; box-shadow: 0 0 0 1px var(--site-line); rotate: -1.5deg; }
@media (min-width: 768px) { .a-look-markaz .a-sec-about--side .a-sec-about__media { border-radius: 4px; } }

/* ---------- «أسئلة» and contact: index and business cards ---------- */
.a-look-markaz .a-sec-faq__item { border-inline-start: 4px solid var(--site-outline); border-radius: 6px; }
.a-look-markaz .a-sec-contact__list { row-gap: 20px; }
.a-look-markaz .a-sec-contact__card { border-radius: 6px; box-shadow: 0 2px 0 var(--site-line); }

/* ---------- «ابدأ دلوقتي» (strip): the announcement banner ---------- */
.a-look-markaz .a-sec-cta--strip .a-sec-cta__row { padding-block: 20px; border-block: 5px double var(--site-on-primary); }