/* «على رواقة» (hadi), look 3 of 10, and the fallback look for any subject (TemplateRegistry::FALLBACK). Owner: d3
   design, then p5.
   The idea: take it easy. Lots of air, flat surfaces, hairlines instead of boxes, one short bar above each heading,
   a round photo on a soft disc, and a tea glass above the last call to action. Nothing shouts.
   Rules: colours only from --site-* (8 palettes + night mode), shape through d2's --site-radius* variables, logical
   properties, no animation, safe at 320px. Markup: d2's sections.css hooks (build/design/d3/spec.md §6).
   Mask (alpha only): tea.svg. */

.a-site.a-look-hadi {
  --site-radius: 20px;
  --site-radius-btn: 14px;
  --site-radius-img: 16px;
  --site-shadow: none;
  --site-section-pad: clamp(48px, 9vw, 104px);
  --hd-tea: url("../../../images/academy/templates/hadi/tea.svg");
}

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

/* One short bar above each heading: the only ornament. */
.a-look-hadi .a-sec__title::before {
  content: "";
  display: block;
  inline-size: 2.5rem;
  block-size: 3px;
  margin-block-end: 12px;
  border-radius: 2px;
  background: var(--site-primary);
}
.a-look-hadi .a-sec__head--center .a-sec__title::before { margin-inline: auto; }
.a-look-hadi :is(.a-sec__lead, .a-sec-hero__sub, .a-sec-about__body .a-site-prose) { max-inline-size: 60ch; }

/* ---------- Header ---------- */
.a-look-hadi .a-site-header { box-shadow: 0 1px 0 var(--site-line); }
.a-look-hadi .a-site-nav a[aria-current="page"] {
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--site-primary);
}

/* ---------- Hero (split): calm words, a round photo on a soft disc ---------- */
.a-look-hadi .a-sec-hero--split .a-sec-hero__title { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem); line-height: 1.5; }
.a-look-hadi .a-sec-hero--split .a-sec-hero__media {
  inline-size: min(64%, 240px);
  aspect-ratio: 1;
  margin: 18px auto 0;
  border-radius: 50%;
  box-shadow: 0 0 0 clamp(10px, 2.5vw, 18px) var(--site-primary-tint);
  --a-sec-avatar: 120px;
}
@media (min-width: 768px) {
  .a-look-hadi .a-sec-hero--split .a-sec-hero__media { inline-size: 100%; max-inline-size: 320px; margin: 18px; justify-self: end; }
}

/* ---------- «كورساتي»: flat cards; a cover without a picture is a soft disc on a tint ---------- */
.a-look-hadi .a-sec-course { box-shadow: none; }
.a-look-hadi .a-sec-course__cover--art { background: radial-gradient(circle at 78% 35%, var(--site-surface) 0 18%, transparent 18.5%), var(--site-primary-tint); }
.a-look-hadi .a-sec-course__cover--art[data-tone="2"] { background: radial-gradient(circle at 22% 70%, var(--site-surface) 0 22%, transparent 22.5%), var(--site-link-tint); }
.a-look-hadi .a-sec-course__cover--art[data-tone="3"] { background: linear-gradient(var(--site-surface), var(--site-surface)) 0 72% / 100% 3px no-repeat, var(--site-band); }

/* ---------- «عني» (side): a round photo ---------- */
.a-look-hadi .a-sec-about__media { border-radius: 50%; }
@media (min-width: 768px) { .a-look-hadi .a-sec-about--side .a-sec-about__media { border-radius: 50%; } }
.a-look-hadi .a-sec-about__point { background: transparent; border: 1px solid var(--site-line); font-weight: 500; }

/* ---------- «آراء الطلاب» (quotes): a thin line, no boxes ---------- */
.a-look-hadi .a-sec-quote {
  border: 0;
  border-inline-start: 3px solid var(--site-primary);
  border-radius: 0;
  background: transparent;
  padding-block: 4px;
}
.a-look-hadi .a-sec-quote__text::before { content: none; }

/* ---------- «أسئلة»: hairlines only ---------- */
.a-look-hadi .a-sec-faq__list { gap: 0; }
.a-look-hadi .a-sec-faq__item { border: 0; border-block-end: 1px solid var(--site-line); border-radius: 0; background: transparent; }
.a-look-hadi .a-sec-faq__item > summary { padding-inline: 0; }
.a-look-hadi .a-sec-faq__answer { padding-inline: 0; }

/* ---------- «الحصص المباشرة» and contact: flat ---------- */
.a-look-hadi :is(.a-sec-day, .a-sec-contact__card) { background: transparent; }
.a-look-hadi .a-sec-day--today { background: var(--site-surface); }

/* ---------- «ابدأ دلوقتي» (strip): a tea glass above the title (in the flow, never behind words) ---------- */
.a-look-hadi .a-sec-cta--strip .a-sec-cta__row > div::before {
  content: "";
  display: block;
  inline-size: 3.5rem;
  aspect-ratio: 1;
  margin: 0 auto 8px;
  background: currentColor;
  opacity: .9;
  pointer-events: none;
  -webkit-mask: var(--hd-tea) center / contain no-repeat;
  mask: var(--hd-tea) center / contain no-repeat;
}
@media (min-width: 768px) { .a-look-hadi .a-sec-cta--strip .a-sec-cta__row > div::before { margin-inline: 0; } }