/* «هالو» (lughat), look 6 of 10. Owner: d4 design, then p5.
   A conversation: every box is a speech bubble with one small corner on its tail side, the marked word sits in a
   bubble, the questions read like a chat. Text the teacher writes in English reads left to right inside the Arabic
   page (unicode-bidi: plaintext), so the look works with Arabic or English content.
   Colours: --site-* only (8 palettes + night mode, d4/tools/contrast_d4.py). Markup: d2's sections.css.
   Decoration: hero.svg inlined in the hero's .a-sec__deco (a sibling of .a-sec-hero__media). No animation. */

.a-site.a-look-lughat {
  --site-radius: 22px;
  --site-radius-btn: 999px;
  --site-radius-img: 28px;
  --lughat-tail: 6px;
}

/* English or Arabic: each paragraph takes the direction of its first letter. */
.a-look-lughat :is(.a-sec__title, .a-sec__lead, .a-sec-hero__title, .a-sec-hero__sub, .a-sec-course__title,
  .a-sec-quote__text, .a-sec-quote__name, .a-sec-bubble__name, .a-sec-bubble__text, .a-sec-faq__item > summary,
  .a-site-prose :is(p, li), .a-sec-text__body :is(p, li), .a-sec-cta__title, .a-sec-cta__line, .a-sec-slot,
  .a-sec-stats__label, .a-sec-about__point, .a-sec-video__caption) {
  unicode-bidi: plaintext;
}

/* The marked word is a small bubble (on-primary on primary: AA in every palette). */
.a-look-lughat .a-sec-mark {
  padding: 0 .28em .04em;
  border-radius: .42em;
  border-end-start-radius: .1em;
  background: var(--site-primary);
  color: var(--site-on-primary);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A small bubble before each section title. */
.a-look-lughat .a-sec__title::before {
  content: "";
  display: inline-block;
  inline-size: .8em;
  block-size: .8em;
  margin-inline-end: .35em;
  vertical-align: -.05em;
  background: var(--site-link);
  -webkit-mask: url("/images/academy/templates/lughat/bubble.svg") center / contain no-repeat;
  mask: url("/images/academy/templates/lughat/bubble.svg") center / contain no-repeat;
}

/* Hero (split): the photo is a bubble; the four-language bubbles sit on its lower corner (same grid cell). */
.a-look-lughat .a-sec-hero__media { border-end-start-radius: var(--lughat-tail); }
/* Phones: a smaller photo on the starting side, the bubbles beside it, so the headline shows sooner. */
.a-look-lughat .a-sec-hero--split .a-sec-hero__media { grid-row: 1; grid-column: 1; width: min(60%, 210px); }
.a-look-lughat .a-sec-hero--split .a-sec-hero__body { grid-row: 2; grid-column: 1; }
.a-look-lughat .a-sec__deco { pointer-events: none; }
.a-look-lughat .a-sec__deco svg { display: block; inline-size: 100%; block-size: auto; }
.a-look-lughat .a-sec-hero__grid > .a-sec__deco {
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
  align-self: end;
  justify-self: end;
  inline-size: min(62%, 220px);
  margin-block-end: -12px;
}
.a-look-lughat .a-sec-hero--center .a-sec-hero__body > .a-sec__deco { inline-size: min(100%, 240px); }

/* Cards are bubbles with the tail at the bottom start. */
.a-look-lughat :is(.a-sec-course, .a-sec-contact__card, .a-sec-about--card .a-sec-about__grid, .a-sec-cta--card .a-sec-cta__row) {
  border-end-start-radius: var(--lughat-tail);
}
.a-look-lughat .a-sec-course__cover[data-tone] { position: relative; background: var(--site-link-tint); }
.a-look-lughat .a-sec-course__cover[data-tone="2"] { background: var(--site-primary-tint); }
.a-look-lughat .a-sec-course__cover[data-tone="3"] { background: var(--site-band); }
.a-look-lughat .a-sec-course__cover[data-tone]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--site-link);
  -webkit-mask: url("/images/academy/templates/lughat/bubble.svg") center / 44px no-repeat;
  mask: url("/images/academy/templates/lughat/bubble.svg") center / 44px no-repeat;
}

/* Testimonials «زي الواتساب»: a longer tail on the chat bubbles. */
.a-look-lughat .a-sec-bubble { border-radius: var(--site-radius); border-start-start-radius: var(--lughat-tail); }
.a-look-lughat .a-sec-bubble:nth-child(even) { border-start-start-radius: var(--site-radius); border-start-end-radius: var(--lughat-tail); }
/* A reply bubble sits on the primary tint, where the link colour is borderline (notebook 4.5:1): the name goes ink. */
.a-look-lughat .a-sec-bubble:nth-child(even) .a-sec-bubble__name { color: var(--site-ink); }

/* Questions: the question is the visitor's bubble, the answer is the reply. */
.a-look-lughat .a-sec-faq__item { border: 0; background: none; }
.a-look-lughat .a-sec-faq__item > summary {
  border: 1px solid var(--site-outline);
  border-radius: var(--site-radius);
  border-end-start-radius: var(--lughat-tail);
  background: var(--site-surface);
}
.a-look-lughat .a-sec-faq__answer {
  margin-block-start: var(--a-space-2);
  margin-inline-start: var(--a-space-6);
  padding: var(--a-space-3) var(--a-space-4);
  border-radius: var(--site-radius);
  border-end-end-radius: var(--lughat-tail);
  background: var(--site-primary-tint);
  color: var(--site-ink);
}
.a-look-lughat .a-sec-faq__answer a { color: var(--site-ink); }

.a-look-lughat .a-sec-day--today { background: var(--site-link-tint); }
.a-look-lughat .a-sec-slot { border-radius: var(--site-radius-btn); border-end-start-radius: var(--lughat-tail); }

/* The strip: link colour with surface text (4.97:1 or more in every palette and night mode; full opacity, so the
   line keeps it too). */
.a-look-lughat .a-sec-cta--strip { background: var(--site-link); color: var(--site-surface); }
.a-look-lughat .a-sec-cta--strip .a-sec-cta__line { opacity: 1; }
.a-look-lughat .a-sec-cta--strip :focus-visible { outline-color: var(--site-surface); }

/* Inlined illustrations follow the palette (the files' own fills are the default palette for <img> use). */
.a-look-lughat svg .f-surface { fill: var(--site-surface); }
.a-look-lughat svg .f-ink { fill: var(--site-ink); }
.a-look-lughat svg .f-band { fill: var(--site-band); }
.a-look-lughat svg .f-link { fill: var(--site-link); }
.a-look-lughat svg .f-link-tint { fill: var(--site-link-tint); }
.a-look-lughat svg .f-primary { fill: var(--site-primary); }
.a-look-lughat svg .f-on-primary { fill: var(--site-on-primary); }
.a-look-lughat svg .f-primary-tint { fill: var(--site-primary-tint); }
.a-look-lughat svg .f-accent { fill: var(--site-accent); }
.a-look-lughat svg .f-success { fill: var(--site-success); }
.a-look-lughat svg .s-ink { stroke: var(--site-ink); }
.a-look-lughat svg .s-muted { stroke: var(--site-muted); }

@media (min-width: 768px) {
  .a-look-lughat .a-sec-hero--split .a-sec-hero__media { grid-column: 2; width: 100%; }
  .a-look-lughat .a-sec-hero--split .a-sec-hero__body { grid-row: 1; }
  .a-look-lughat .a-sec-hero__grid > .a-sec__deco {
    grid-column: 2;
    justify-self: start;
    inline-size: 240px;
    margin-inline-start: -56px;
    margin-block-end: -36px;
  }
  .a-look-lughat .a-sec-faq__answer { margin-inline-start: var(--a-space-8); }
}