/* ============================================================
   معهد قلم — ورشات القلم · الأنماط المشتركة
   Workshop pages: the shared skeleton only.
   ------------------------------------------------------------
   يُحمَّل هذا الملف في:
   • workshops.html            — صفحة «ورشات قلم» (الورشة القادمة + الأرشيف)
   • workshop-*.html           — صفحة كل ورشة (صفحة مستقلة بتصميمها الخاص)

   كل ورشة لها تصميمها الخاص: ما يتكرر شهريًا فقط موجود هنا (الهيكل،
   البطاقات، الشرائح، زر التسجيل، حالة «انتهت»). أما لمسات كل ورشة
   (خلفيات، زخارف، تفاصيل) فتُكتب داخل <style> في صفحتها — صفحات HTML
   غير مخزّنة في الكاش (no-cache) فتظهر التعديلات فورًا بلا تحديث ?v=.

   الألوان: كل ورشة تختار لوحتها عبر data-theme على العنصر .ws
   (وعلى بطاقتها في الأرشيف)، وكل لوحة تُعرَّف مرة واحدة هنا.
   ------------------------------------------------------------
   Per-workshop palettes are CSS custom properties selected by
   [data-theme]; add a new block per palette. Everything below the
   palettes is theme-agnostic and reads those variables.
   ============================================================ */

/* ---------- palettes ----------
   plum: «البوصلة» — dusty mauve + plum + burnt orange, from the workshop's
   own poster. Text tones are darkened past the poster's pastels so body copy
   clears 4.5:1 and the big wordmark clears 3:1 on the mauve. */
[data-theme="plum"]{
  --ws-bg:#E7D7DB; --ws-bg-2:#DCC6CE; --ws-band:#D3B9C3;
  --ws-paper:#FAF6F5;
  --ws-ink:#432E4B; --ws-ink-2:#65506C;
  --ws-accent:#C4682C;         /* the wordmark — large text only */
  --ws-accent-deep:#9C4E13;    /* accent for small text / links */
  --ws-tab:#A9788F; --ws-tab-2:#C8972A;
  --ws-cta:#432E4B; --ws-cta-hover:#2E1D35;
}
/* blue: the house palette — the default when a workshop has no art direction
   of its own. Uses the site tokens so it always matches the rest of Qalam. */
[data-theme="blue"]{
  --ws-bg:#E4F1F9; --ws-bg-2:#D3E8F5; --ws-band:#C2DFF1;
  --ws-paper:#fff;
  --ws-ink:#15202e; --ws-ink-2:#5c6b7a;
  --ws-accent:#1f7699; --ws-accent-deep:#0f4d6b;
  --ws-tab:#4AB3E2; --ws-tab-2:#C8972A;
  --ws-cta:#0f4d6b; --ws-cta-hover:#0a3a52;
}

/* ============================================================
   1 · صفحة الورشة المستقلة  ·  the standalone workshop page
   ============================================================ */

/* the page has no site header/footer — it is a poster you can scroll. */
.wspage{background:var(--ws-bg,#E7D7DB)}

.ws{
  min-height:100vh;
  background:
    radial-gradient(120% 60% at 50% 0%, var(--ws-bg) 0%, var(--ws-bg-2) 62%, var(--ws-bg-2) 100%);
  color:var(--ws-ink);
  padding-bottom:clamp(28px,6vw,56px);
  overflow:hidden;position:relative
}
.ws .wsw{max-width:760px;margin:0 auto;padding:0 clamp(18px,5vw,30px)}
.ws section{padding:clamp(26px,6vw,44px) 0}
.ws p{margin:0}

/* ---------- 1.1 the torn top band + the opening line ----------
   The band is a deeper wash of the page colour with a ragged lower edge
   (an inline <svg class="ws-tear">), and the quotation glyph is set as a
   graphic element, oversized and half-faded, not as punctuation. */
.ws-top{position:relative;background:var(--ws-band);padding:clamp(18px,5vw,28px) 0 clamp(26px,6vw,40px)}
.ws-tear{position:absolute;inset-inline:0;bottom:-1px;width:100%;height:clamp(16px,3.4vw,30px);display:block;fill:var(--ws-bg)}
.ws-quote{display:block;font-size:clamp(4.4rem,17vw,8rem);line-height:.62;font-weight:700;
  color:var(--ws-ink);opacity:.34;text-align:start;margin-bottom:clamp(2px,1.5vw,10px)}
.ws-hook{font-size:clamp(1.18rem,4.6vw,1.9rem);font-weight:700;line-height:1.5;color:var(--ws-ink);
  text-align:center;text-wrap:balance}
.ws-hook span{display:block}

/* ---------- 1.2 the framed title ----------
   Two L-shaped rules hold the title block the way the poster's white frame
   does — drawn as borders on ::before/::after so nothing boxes the content in
   completely and the frame can breathe past the card on wide screens. */
/* الغلاف يحمل ما يخرج عن الإطار (الزوايا والغصن)، والإطار نفسه يقصّ ما بداخله
   (البوصلة والقلب) — the wrapper carries what breaks out of the frame, the
   frame clips its own watermarks. */
.ws-framewrap{position:relative}
.ws-frame{position:relative;overflow:hidden;background:var(--ws-paper);border-radius:6px;
  display:flex;flex-direction:column;justify-content:center;
  min-height:min(50vh,400px);
  padding:clamp(44px,12vw,80px) clamp(20px,6vw,44px);
  box-shadow:0 24px 60px -34px rgba(67,46,75,.55)}
/* الزاويتان البيضاوان المتقابلتان حول اللوحة — كما في ملصق الورشة.
   (يُستخدم left/right الفيزيائي قصدًا: الإطار قطري لا يتبع اتجاه القراءة.)
   Physical left/right on purpose — the frame is diagonal, not direction-aware. */
.ws-framewrap::before,.ws-framewrap::after{content:"";position:absolute;
  width:clamp(46px,14vw,110px);height:clamp(46px,14vw,110px);
  border:2px solid var(--ws-ink);opacity:.55;pointer-events:none;z-index:5}
.ws-framewrap::before{top:clamp(-14px,-3vw,-10px);left:clamp(-14px,-3vw,-10px);
  border-right:0;border-bottom:0}
.ws-framewrap::after{bottom:clamp(-14px,-3vw,-10px);right:clamp(-14px,-3vw,-10px);
  border-left:0;border-top:0}
/* العنوان الفرعي واسم الورشة — المقاسات النهائية تُضبط في صفحة كل ورشة */
.ws-kicker{font-size:clamp(1.05rem,4vw,1.6rem);font-weight:700;line-height:1.55;color:var(--ws-ink);
  text-align:center;text-wrap:balance;position:relative;z-index:2}
.ws-name{font-size:clamp(3.3rem,17vw,7rem);font-weight:700;line-height:1;letter-spacing:-.01em;
  color:var(--ws-accent);text-align:center;margin-top:clamp(10px,3vw,20px);position:relative;z-index:2}

.ws-intro{font-size:clamp(1rem,3.5vw,1.25rem);line-height:1.75;color:var(--ws-ink);
  text-align:center;text-wrap:balance;margin-top:clamp(22px,6vw,38px)}
.ws-intro b{color:var(--ws-accent-deep)}

/* ---------- 1.3 the fact chips ----------
   Each fact is a paper pill with a colour tab riding its outer edge — the
   poster's alternating blocks, turned into something that survives one
   column on a phone. */
.ws-chips{display:grid;gap:clamp(10px,2.6vw,14px);grid-template-columns:1fr;margin-top:clamp(6px,2vw,10px)}
@media(min-width:620px){.ws-chips{grid-template-columns:1fr 1fr}}
.ws-chip{position:relative;display:flex;flex-direction:column;gap:2px;
  background:var(--ws-paper);border-radius:14px;
  padding:14px clamp(16px,4vw,22px) 14px clamp(42px,10vw,54px);
  box-shadow:0 10px 26px -20px rgba(67,46,75,.75)}
/* اللون الذي يرافق كل بطاقة — كتلة صغيرة على طرفها، بالتناوب بين لونَي اللوحة
   (نسخة تصمد على شاشة الهاتف من الكتل الملوّنة في الملصق) */
.ws-chip::before{content:"";position:absolute;inset-block:10px;inset-inline-end:12px;width:16px;
  border-radius:9px;background:var(--ws-tab)}
.ws-chip:nth-child(even)::before{background:var(--ws-tab-2)}
.ws-chip b{font-size:.9rem;font-weight:700;color:var(--ws-accent-deep)}
.ws-chip span{font-size:clamp(1rem,3.4vw,1.12rem);font-weight:600;color:var(--ws-ink)}
/* the phone link keeps its inline look but gets a ≥44px tap box */
.ws-chip a{color:var(--ws-ink);text-decoration:none;display:inline-block;padding-block:9px;margin-block:-9px}
.ws-chip a:hover{text-decoration:underline}

/* ---------- 1.4 register ---------- */
.ws-cta{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.ws-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;
  padding:14px clamp(28px,7vw,44px);border-radius:999px;
  background:var(--ws-cta);color:#fff;font-weight:700;font-size:clamp(1.02rem,3.6vw,1.18rem);
  text-decoration:none;box-shadow:0 14px 30px -16px rgba(67,46,75,.9);
  transition:transform .18s,background .18s,box-shadow .18s}
.ws-btn:hover{background:var(--ws-cta-hover);transform:translateY(-2px);
  box-shadow:0 20px 36px -16px rgba(67,46,75,.9)}
.ws-btn:active{transform:translateY(0)}
.ws-cta small{font-size:.92rem;color:var(--ws-ink-2)}
.ws-cta small a{color:var(--ws-accent-deep);font-weight:700;text-decoration:none}
.ws-cta small a:hover{text-decoration:underline}

/* حالة «انتهت الورشة»: أضف past إلى <main class="ws"> ليختفي زر التسجيل
   ويظهر شريط الإحالة إلى صفحة «ورشات قلم».
   Past state — one class on <main> swaps the button for a pointer forward. */
.ws-ended{display:none;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:var(--ws-paper);border-radius:999px;padding:12px clamp(18px,5vw,28px);
  font-weight:600;color:var(--ws-ink-2);text-align:center}
.ws-ended a{color:var(--ws-accent-deep);font-weight:700;text-decoration:none}
.ws-ended a:hover{text-decoration:underline}
.ws.past .ws-cta .ws-btn{display:none}
.ws.past .ws-ended{display:flex}

/* ---------- 1.4 نموذج التسجيل داخل صفحة الورشة ----------
   ثلاثة حقول (الاسم/الهاتف/البلد) داخل بطاقة بلون ورق الورشة. لا يعتمد على
   ألوان الموقع العامة: كل شيء هنا مبني على متغيّرات data-theme، فتتلوّن
   البطاقة تلقائيًا مع لوحة كل ورشة دون كتابة CSS جديد كل شهر.
   ⚠️ يرث النموذج سلوك .field/.err من css/style.css (صنف invalid يُظهر رسالة
   الخطأ) — لذا نعيد هنا تنسيق المظهر فقط، لا المنطق.
   Inline registration form: a paper card themed entirely from the [data-theme]
   custom properties, so each workshop's palette restyles it for free. */
.ws-form{background:var(--ws-paper);border-radius:22px;
  padding:clamp(22px,5.5vw,34px) clamp(18px,5vw,32px);
  max-width:560px;margin-inline:auto;
  box-shadow:0 24px 50px -32px rgba(67,46,75,.9)}
.ws-form-title{font-size:clamp(1.3rem,4.6vw,1.7rem);font-weight:700;color:var(--ws-ink);
  text-align:center;margin-bottom:6px}
.ws-form-sub{font-size:.95rem;color:var(--ws-ink-2);text-align:center;
  margin-bottom:clamp(18px,4.5vw,26px)}

.ws-form .field{margin-bottom:clamp(14px,3.4vw,18px)}
.ws-form label{display:block;font-weight:600;font-size:.95rem;color:var(--ws-ink);
  margin-bottom:7px}
.ws-form .req{color:var(--ws-accent-deep)}
.ws-form input{width:100%;min-height:52px;   /* 52px: مساحة لمس مريحة على الجوال */
  padding:12px 16px;border-radius:14px;
  border:1.5px solid color-mix(in srgb,var(--ws-ink) 22%,transparent);
  background:color-mix(in srgb,var(--ws-bg) 26%,#fff);
  font:inherit;font-size:1rem;   /* 1rem يمنع iOS من تكبير الصفحة عند التركيز */
  color:var(--ws-ink);
  transition:border-color .18s,box-shadow .18s,background .18s}
.ws-form input::placeholder{color:color-mix(in srgb,var(--ws-ink) 42%,transparent)}
/* a real focus ring (same style as style.css's :focus-visible ring), not
   just a border-colour change — keyboard users need to see where they are */
.ws-form input:focus{outline:3px solid var(--ws-accent-deep);outline-offset:2px;background:#fff;border-color:var(--ws-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ws-accent) 26%,transparent)}
/* الهاتف أرقام لاتينية: يبقى من اليسار لليمين داخل صفحة عربية */
.ws-form input[type="tel"]{direction:ltr;text-align:start;unicode-bidi:isolate}

/* رسالة الخطأ: مخفية حتى يضيف المحرك صنف invalid على .field */
.ws-form .err{display:none;margin-top:6px;font-size:.86rem;font-weight:600;color:#B3261E}
.ws-form .field.invalid .err{display:block}
.ws-form .field.invalid input{border-color:#B3261E;
  box-shadow:0 0 0 3px color-mix(in srgb,#B3261E 16%,transparent)}

/* يمتد الزر بعرض النموذج، و.ws-btn عنصر flex بلا justify-content — فيلتصق نصه
   ببداية السطر (اليمين في RTL). المحاذاة هنا تعيده إلى الوسط.
   .ws-btn is a flex box with no justify-content: harmless while it is sized by
   its content, but this one is full-width, so the label needs centring. */
.ws-form-btn{width:100%;justify-content:center;margin-top:clamp(6px,2vw,10px)}
.ws-form-note{margin-top:12px;font-size:.85rem;color:var(--ws-ink-2);text-align:center}
/* ملاحظة حارس الوقت (يضيفها السكربت عند إرسال سريع جدًا) */
.ws-form .form-note{margin-bottom:12px;padding:10px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--ws-tab) 18%,transparent);
  font-size:.88rem;font-weight:600;color:var(--ws-ink)}

/* حين تنتهي الورشة يختفي النموذج كما يختفي زر التسجيل */
.ws.past #ws-register{display:none}

/* ---------- 1.5 من ينظّم الورشة + العودة ----------
   بطاقتان متطابقتان لكل جهة: شارة، اسم، سطر تعريف، ثم صفوف تواصل قابلة
   للضغط (هاتف/إنستغرام/بريد/خريطة). كل صف رابط حقيقي بمساحة لمس مريحة —
   هذه آخر ما يقرأه الزائر قبل أن يتصل. */
.ws-partner-lead{text-align:center;font-weight:700;font-size:.88rem;letter-spacing:.04em;
  color:var(--ws-ink-2);margin-bottom:clamp(14px,3.5vw,20px);position:relative}
.ws-partner-lead::before,.ws-partner-lead::after{content:"";position:absolute;top:50%;width:clamp(28px,12vw,90px);
  height:1px;background:color-mix(in srgb,var(--ws-ink) 25%,transparent)}
.ws-partner-lead::before{inset-inline-end:calc(50% + 5.5em)}
.ws-partner-lead::after{inset-inline-start:calc(50% + 5.5em)}

.ws-partner{display:grid;gap:clamp(14px,3.4vw,20px);grid-template-columns:1fr}
@media(min-width:620px){.ws-partner{grid-template-columns:1fr 1fr}}
.ws-org{position:relative;background:var(--ws-paper);border-radius:20px;
  padding:clamp(20px,5vw,26px);box-shadow:0 18px 40px -30px rgba(67,46,75,.9)}
.ws-org-mark{position:absolute;inset-block-start:clamp(16px,4vw,22px);inset-inline-end:clamp(16px,4vw,22px);
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:color-mix(in srgb,var(--ws-tab) 22%,transparent)}
.ws-org-mark svg{width:26px;height:26px;fill:none;stroke:var(--ws-ink);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ws-org-mark img{width:30px;height:auto}
.ws-org h3{font-size:1.14rem;font-weight:700;color:var(--ws-ink);
  padding-inline-end:56px;margin-bottom:2px}
.ws-org-tag{font-size:.9rem;color:var(--ws-ink-2);padding-inline-end:56px;
  margin-bottom:clamp(12px,3vw,16px)}

.ws-lines{list-style:none;display:flex;flex-direction:column;gap:6px}
.ws-lines a{display:flex;align-items:center;gap:12px;min-height:46px;padding:6px 10px;
  border-radius:12px;color:var(--ws-ink);text-decoration:none;font-weight:600;font-size:.96rem;
  transition:background .18s}
.ws-lines a:hover{background:color-mix(in srgb,var(--ws-tab) 16%,transparent)}
.ws-lines .ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:color-mix(in srgb,var(--ws-accent) 14%,transparent);color:var(--ws-accent-deep)}
.ws-lines .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* السطر الثاني: ما هذا الرقم أو الحساب — يوضح دون أن يزاحم */
.ws-lines .lbl{display:block;width:100%;font-size:.8rem;font-weight:500;color:var(--ws-ink-2);
  order:3;margin-top:-4px;padding-inline-end:46px}   /* يبدأ تحت النص لا تحت الأيقونة */
.ws-lines a{flex-wrap:wrap}

.ws-back{display:inline-flex;align-items:center;gap:8px;min-height:48px;
  margin-top:clamp(20px,5vw,28px);padding:10px 22px;border-radius:999px;
  border:1.5px solid color-mix(in srgb,var(--ws-ink) 30%,transparent);
  font-weight:700;color:var(--ws-ink);text-decoration:none;
  transition:background .18s,border-color .18s,color .18s}
.ws-back:hover{background:var(--ws-paper);border-color:var(--ws-ink);color:var(--ws-accent-deep)}

/* ============================================================
   2 · صفحة «ورشات قلم» (workshops.html)  ·  the hub
   بطاقة الورشة الحالية + شبكة الورشات السابقة — على خلفية الموقع العادية.
   ============================================================ */

/* this month: a wide card carrying the workshop's own palette, so the hub,
   the home card and the workshop page all read as one thing */
.wsfeature{display:block;position:relative;overflow:hidden;
  background:var(--ws-bg);border-radius:var(--r);
  padding:clamp(24px,5vw,40px);box-shadow:var(--shadow-md)}
.wsfeature::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:5px;
  background:linear-gradient(90deg,var(--ws-tab),var(--ws-tab-2))}
.wsfeature .wsf-eyebrow{display:inline-block;font-size:.86rem;font-weight:700;
  color:var(--ws-accent-deep);background:var(--ws-paper);border-radius:999px;padding:5px 14px}
.wsfeature h3{font-size:clamp(1.6rem,6vw,2.6rem);font-weight:700;line-height:1.2;
  color:var(--ws-accent);margin:12px 0 4px}
.wsfeature .wsf-kicker{font-size:clamp(1rem,3.4vw,1.2rem);font-weight:600;color:var(--ws-ink)}
.wsfeature .wsf-meta{margin-top:10px;font-size:.98rem;color:var(--ws-ink-2)}
.wsfeature .wsf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(16px,4vw,22px)}
.wsfeature .wsf-actions a{min-height:48px;display:inline-flex;align-items:center;
  padding:12px 26px;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .18s,background .18s}
.wsfeature .wsf-actions a:hover{transform:translateY(-2px)}
.wsfeature .wsf-go{background:var(--ws-cta);color:#fff}
.wsfeature .wsf-go:hover{background:var(--ws-cta-hover)}
/* زخرفة نباتية بلون اللوحة، مقصوصة عند الحواف كما في بطاقة الصفحة الرئيسية */
.wsf-art{position:absolute;pointer-events:none;z-index:0;
  inset-block-end:-12px;inset-inline-end:-16px;width:clamp(96px,16vw,160px)}
.wsf-art.top{inset-block-end:auto;inset-inline-end:auto;inset-block-start:2px;inset-inline-start:-12px;
  width:clamp(62px,10vw,104px);transform:scaleX(-1)}
.wsf-art svg{width:100%;height:auto;display:block;fill:none;stroke:var(--ws-tab);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.wsf-art.top svg{stroke:var(--ws-accent);opacity:.42}
.wsfeature > *:not(.wsf-art){position:relative;z-index:1}

/* the archive: one card per finished workshop, each in its own palette */
.wsarchive{display:grid;gap:16px;grid-template-columns:1fr;margin-top:16px}
@media(min-width:700px){.wsarchive{grid-template-columns:1fr 1fr}}
.wsacard{display:block;position:relative;overflow:hidden;text-decoration:none;
  background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:20px 22px 20px 22px;box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.wsacard::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:6px;
  background:linear-gradient(180deg,var(--ws-tab),var(--ws-tab-2))}
.wsacard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--ws-tab)}
.wsacard .wsa-date{font-size:.94rem;font-weight:600;color:var(--ink)}
/* the title sits on WHITE here, not on the workshop's tinted paper, so the
   palette's accent is darkened a step to clear 4.5:1 on every theme */
.wsacard h3,.wsacard h4{font-size:1.28rem;font-weight:700;margin:4px 0 6px;
  color:color-mix(in srgb,var(--ws-accent-deep) 78%,#000)}
.wsacard p{font-size:.96rem;color:var(--ink-2);margin:0}
.wsacard .wsa-go{display:inline-block;margin-top:10px;font-weight:700;color:var(--blue-deep)}
/* لا توجد ورشات سابقة بعد */
.wsempty{background:var(--paper-2);border:1px dashed var(--line);border-radius:18px;
  padding:26px 22px;color:var(--ink-2);text-align:center;margin-top:16px}

/* ============================================================
   3 · إمكانية الوصول  ·  accessibility
   ============================================================ */
/* تباين عالٍ: نفس منطق style.css — نصوص أغمق وحدود أوضح */
html.a11y-contrast .ws{--ws-ink:#2c1d33;--ws-ink-2:#402f47;--ws-accent-deep:#7d3d0c;--ws-accent:#96490f}
html.a11y-contrast .ws-quote{opacity:.55}
html.a11y-contrast .ws-frame::before,html.a11y-contrast .ws-frame::after{opacity:.9}
html.a11y-contrast .wsacard{border-color:rgba(9,63,88,.4)}
@media(prefers-reduced-motion:reduce){
  .ws-btn,.wsacard,.wsfeature .wsf-actions a{transition:none}
}