/* What: the public page of one workshop - the hero and its calendar leaves, the strip of facts, the reading column with the programme line, the pass beside it, the closing band and the register bar.
   Use: linked by Site/views/workshop.php itself. tokens.css gives every colour and size; buttons, badges, the price and the progress bar come from app.css.
   Needs: logical properties only. Gold is spent on what gold means here: the eyebrow, the certificate (the last leaf, the last node) and the hero's one button. */

/* ---------- 1. The hero: the title on one side, the workshop's own days on the other ---------- */
/* The admin's strip (partial workshop_admin_bar): only an admin sees it, at the head of the page, the full width of the window. Navy so it
   can never be mistaken for the page the public sees; the way into the admin panel is the gold button, the one thing on it to press. */
.wp-admin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5);
  margin-block-start: calc(-1 * var(--space-7)); padding-block: var(--space-3); background: var(--navy-900); color: #fff; }
.wp-admin + .wp-hero { margin-block-start: 0; }
.wp-admin-say { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--fs-sm); }
.wp-admin-tag { display: inline-flex; align-items: center; gap: var(--space-2); font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-400); }
html[lang="ar"] .wp-admin-tag { font-family: var(--font-body), sans-serif; font-size: var(--fs-sm); letter-spacing: 0; font-weight: 600; }
.wp-admin-tag .icon { inline-size: 16px; block-size: 16px; }
.wp-admin-state { display: inline-flex; align-items: center; gap: var(--space-2); color: rgba(255, 255, 255, .82); }
.wp-admin-state i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #3DD68C; box-shadow: 0 0 0 3px rgba(61, 214, 140, .2); }
.wp-admin.is-draft .wp-admin-state { color: #FFD9A0; font-weight: 600; }
.wp-admin.is-draft .wp-admin-state i { background: #F5A524; box-shadow: 0 0 0 3px rgba(245, 165, 36, .22); }
.wp-admin-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.wp-admin-link { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 40px; padding: 0 var(--space-4); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-pill); color: #fff; font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.wp-admin-link:hover, .wp-admin-link:focus-visible { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); color: #fff; text-decoration: none; }
.wp-admin-link .icon { inline-size: 16px; block-size: 16px; color: var(--teal-100); }
.wp-admin-link b { min-inline-size: 22px; padding: 1px 7px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .14); font-size: var(--fs-xs); text-align: center; }
.wp-admin-link b.is-waiting { background: var(--danger); color: #fff; }
.wp-admin-open { min-block-size: 44px; padding-inline: var(--space-5); font-weight: 700; }
.wp-admin-open .icon { inline-size: 18px; block-size: 18px; }
@media (max-width: 699px) {
  .wp-admin-go { inline-size: 100%; }
  .wp-admin-open { order: -1; flex: 1 0 100%; justify-content: center; }
  .wp-admin-link { flex: 1 1 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .wp-admin-link { transition: none; } }

.wp-hero { position: relative; isolation: isolate; margin-block-start: calc(-1 * var(--space-7)); padding-block: var(--space-9) 0;
  background:
    radial-gradient(60rem 28rem at 100% 0%, rgba(16, 100, 87, .07), transparent 60%),
    radial-gradient(40rem 22rem at 0% 100%, rgba(201, 162, 39, .06), transparent 62%),
    var(--surface);
  border-block-end: 1px solid var(--border); overflow: clip; }
.wp-hero:not(.bleed) { margin-block-start: 0; padding-inline: var(--space-7); border: 1px solid var(--border); border-radius: var(--radius-xl); }
/* The head runs across the whole hero: the date line and the share marks on one row, the title under them with the full width to
   itself - one line on a laptop, two at most - instead of three narrow lines beside the leaves (owner, 2026-09-21). */
.wp-hero-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-6); align-items: center; padding-block-end: var(--space-7); }
.wp-hero-head > * { margin: 0; min-inline-size: 0; }
.wp-hero-head .eyebrow { flex-wrap: wrap; row-gap: 2px; max-inline-size: 100%; }
.wp-hero-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); order: 3; }
.wp-hero-share small { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
html[lang="ar"] .wp-hero-share small { font-family: var(--font-body), sans-serif; letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); font-weight: 600; }
/* A share mark: a round button with the network's own sign. Quiet until pointed at, then the brand's green. */
.wp-share-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wp-share-way { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; padding: 0; border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--ink-700); cursor: pointer; box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.wp-share-way .icon { inline-size: 18px; block-size: 18px; }
/* Each mark wears its network's own colour (owner, 2026-09-21): the sign in that colour on a wash of it, and the full colour under the
   pointer. Email is the page's gold and Copy link its teal - they are the academy's own, not a network's. */
.wp-share-way { --brand: var(--ink-700); border-color: color-mix(in srgb, var(--brand) 32%, #fff); background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); }
.wp-share-way.is-whatsapp { --brand: #1FA855; }
.wp-share-way.is-facebook { --brand: #1877F2; }
.wp-share-way.is-linkedin { --brand: #0A66C2; }
.wp-share-way.is-twitter-x { --brand: #0F1419; }
.wp-share-way.is-telegram { --brand: #229ED9; }
.wp-share-way.is-mail { --brand: var(--gold-600); }
.wp-share-way.is-copy { --brand: var(--primary); }
.wp-share-way:hover, .wp-share-way:focus-visible { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); text-decoration: none;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
.wp-share-way.is-done { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (prefers-reduced-motion: reduce) { .wp-share-way { transition: none; } .wp-share-way:hover, .wp-share-way:focus-visible { transform: none; } }
.wp-hero-grid { display: grid; gap: var(--space-9); align-items: center; grid-template-columns: minmax(0, 1fr); padding-block-end: var(--space-9); }
/* The copy side is a size container too: the way-in box lays itself out from the room it really has, not from the window. */
.wp-hero-copy { display: grid; gap: var(--space-5); justify-items: start; min-inline-size: 0; container-type: inline-size; }
.wp-hero-copy > * { margin: 0; }
/* On a phone the date, the place and the delivery do not fit one line: the eyebrow may wrap, it never pushes the page wide. */
.wp-title { font-family: var(--font-display), sans-serif; font-weight: 800; font-size: clamp(30px, 3.9vw, 52px); line-height: 1.14; text-wrap: balance;
  letter-spacing: -.01em; color: var(--ink-900); text-wrap: balance; text-align: match-parent; }
/* Arabic sets wider and taller than Latin at the same size: a step smaller and a longer measure keep a title to two lines. */
html[lang="ar"] .wp-title { font-size: clamp(28px, 3.7vw, 50px); line-height: 1.35; letter-spacing: 0; }
/* What is taught: the topic reel (app.css), here without its top rule - it is the subtitle, not a footer. */
.wp-reel { inline-size: 100%; padding-block-start: 0; border-block-start: 0; }
.wp-reel .reel-cell { cursor: default; }
/* The way in: the sales tag and the page's one gold button abreast, the state of registration as the box's foot. */
.wp-way-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-6); align-items: center; inline-size: 100%; margin-block-start: var(--space-2);
  padding: var(--space-5) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-2); }
/* A signed-in student's Reserve is a button in a form (it posts the seat); the form is no box, so the button sits where a link would. */
.wp-press { display: contents; }
.wp-way-in > .btn, .wp-way-in > .wp-press > .btn { justify-self: stretch; }
.wp-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); }
.wp-state .badge { font-size: var(--fs-sm); padding: 5px 12px; }
/* Abreast only when the box is wide enough for the whole tag (Before -> Now on ONE line) beside the button; narrower, the button
   takes the full width under the tag - it never squeezes the price onto two lines. */
@container (min-width: 660px) {
  .wp-way-in { grid-template-columns: minmax(0, 1fr) auto; }
  .wp-way-in > .btn, .wp-way-in > .wp-press > .btn { justify-self: end; min-inline-size: 14rem; }
  .wp-state, .wp-way-in > .wp-pay { grid-column: 1 / -1; }
}
.wp-price { display: grid; gap: 2px; font-family: var(--font-display), sans-serif; font-size: var(--fs-lg); line-height: 1.2; }

/* The side is a size container: a leaf is sized from the room the side really has (cqi), never from the window - which is how
   four days and a certificate used to reach over the topics beside them. */
.wp-hero-side { display: grid; gap: var(--space-6); justify-items: center; min-inline-size: 0; container-type: inline-size; }
/* The countdown is the width of the side (owner, 2026-09-21: "make this timer fill the space"): the same edge as the leaves above it and
   the instructor below it, not a small block parked at the end with a hole beside it. */
.wp-starts { justify-self: stretch; display: grid; gap: var(--space-3); min-inline-size: 0; }
/* Who gives it, in the corner the leaves and the countdown left empty beside a tall way-in (Instructors/views/hero.php): one quiet card the
   width of the side, pinned to the foot of the side so it closes level with the way-in box. Its eyebrow is a way down to "Your
   instructors"; each name opens that instructor's CV, and the whole cell answers the press (the name's ::after covers it). */
.wp-hero-coach { justify-self: stretch; display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--surface); box-shadow: var(--shadow-1); }
.wp-hero-coach-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); text-decoration: none; }
html[lang="ar"] .wp-hero-coach-head { font-family: var(--font-body), sans-serif; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 600; }
.wp-hero-coach-head:hover { color: var(--primary); text-decoration: none; }
.wp-hero-coach-head em { font-style: normal; font-weight: 600; letter-spacing: 0; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--teal-700); }
.wp-hero-coach-head .icon { inline-size: 16px; block-size: 16px; color: var(--primary); transition: translate var(--dur-base) var(--ease-out); }
.wp-hero-coach-head:hover .icon { translate: 4px 0; }
html[dir="rtl"] .wp-hero-coach-head:hover .icon { translate: -4px 0; }
.wp-hero-coach-row, .wp-hero-mate { position: relative; border-radius: 14px; transition: background var(--dur-base) var(--ease-out); }
.wp-hero-coach-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.wp-hero-coach-row:has(button:hover), .wp-hero-mate:has(button:hover) { background: var(--ink-50); }
/* The stars and the score are drawn over the name's ::after: they let the press through to it, so they open the CV too. */
.wp-hero-coach-rating, .wp-hero-mate-rate { pointer-events: none; }
.wp-hero-coach-face { inline-size: 52px; block-size: 52px; border-radius: 16px; object-fit: cover; display: block; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--gold-400); }
.wp-hero-coach-face.is-letter { display: grid; place-items: center; background: linear-gradient(150deg, var(--teal-600), var(--navy-700)); color: #fff;
  font-family: var(--font-display), sans-serif; font-size: 22px; font-weight: 700; }
.wp-hero-coach-who { display: grid; gap: 2px; min-inline-size: 0; }
/* A name is a button that reads as a name: no box, the display face, underlined under the pointer; its ::after is the cell. */
.wp-hero-coach-name, .wp-hero-mate-name { justify-self: start; max-inline-size: 100%; padding: 0; border: 0; background: none; font-family: var(--font-display), sans-serif;
  color: var(--ink-900); text-align: start; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-underline-offset: 4px; }
.wp-hero-coach-name { font-size: var(--fs-lg); line-height: 1.3; }
.wp-hero-coach-name::after, .wp-hero-mate-name::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; }
.wp-hero-coach-name:hover, .wp-hero-mate-name:hover { color: var(--primary); text-decoration: underline; }
.wp-hero-coach-name:focus-visible, .wp-hero-mate-name:focus-visible { outline: 0; }
.wp-hero-coach-row:has(:focus-visible), .wp-hero-mate:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.wp-hero-coach-who > span { font-size: var(--fs-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-hero-coach-rating { display: grid; justify-items: end; gap: 2px; }
.wp-hero-coach-rating > span:not(.wp-stars):not(.sr-only) { display: inline-flex; align-items: baseline; gap: 4px; direction: ltr; }
.wp-hero-coach-rating b { font-family: var(--font-display), sans-serif; font-size: 20px; line-height: 1; color: var(--ink-900); }
.wp-hero-coach-rating i { font-style: normal; font-size: var(--fs-xs); color: var(--text-faint); }
.wp-hero-coach-rating small { font-size: 11px; color: var(--text-muted); }
/* Two or more instructors (owner 2026-09-27: "show them all"): equal cells, two to a row - a smaller face, the name, one line (the stars
   when they have them) - so the card stays about as low as one instructor's and the hero's two sides still end level. Four at most. */
.wp-hero-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
.wp-hero-mate { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); min-inline-size: 0; padding: 4px; }
.wp-hero-coach.is-team .wp-hero-coach-face { inline-size: 40px; block-size: 40px; border-radius: 12px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--gold-400); }
.wp-hero-coach.is-team .wp-hero-coach-face.is-letter { font-size: 17px; }
.wp-hero-mate-who { display: grid; gap: 1px; min-inline-size: 0; }
.wp-hero-mate-name { font-size: var(--fs-md); line-height: 1.3; }
.wp-hero-mate-line { min-inline-size: 0; font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-hero-mate-rate { display: flex; align-items: center; gap: 4px; min-inline-size: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.wp-hero-mate-rate .icon { flex: none; inline-size: 13px; block-size: 13px; color: var(--gold-500); fill: currentColor; stroke-width: 1.2; }
.wp-hero-mate-rate b { flex: none; font-weight: 700; color: var(--ink-900); }
.wp-hero-mate-rate > .num:not(b) { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 400px) { .wp-hero-team { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .wp-hero-coach-head .icon, .wp-hero-coach-row, .wp-hero-mate { transition: none; } }
.wp-starts > * { margin: 0; }
.wp-starts-label { display: flex; align-items: center; gap: var(--space-3); font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint); }
/* The label's rule runs to the end of the side, the way the page's eyebrow is led in by its gold line. */
.wp-starts-label::after { content: ""; flex: 1; block-size: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
html[dir="rtl"] .wp-starts-label::after { background: linear-gradient(270deg, var(--border-strong), transparent); }
html[lang="ar"] .wp-starts-label { font-family: var(--font-body), sans-serif; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 600; }
/* The countdown is an instrument, not paper (owner, 2026-09-21: the leaves and the countdown looked alike). The leaves are white with a teal
   head and the display face; the countdown is ONE panel of split-flap tiles in the mono face - a seam across each number, gold colons
   pulsing between them - and a tile drops like a flap each time its number changes (js/workshop.js adds .is-flip). In the page's own bright
   colours (owner, same day: not dark): a light teal-washed panel, fresh teal flaps with white numbers, and the seconds on a gold flap cut
   from the same gold as "Reserve my seat". */
.wp-starts .wp-count { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); justify-content: stretch;
  padding: var(--space-4) var(--space-5) var(--space-3); border-radius: 22px; border: 1px solid var(--teal-100);
  background: radial-gradient(120% 140% at 50% 0%, #FFFFFF 0%, var(--teal-50) 70%), var(--teal-50);
  box-shadow: inset 0 1px 0 #fff, 0 18px 36px -24px rgba(16, 100, 87, .45); }
.wp-starts .wp-count > span { position: relative; gap: var(--space-2); padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; perspective: 420px; }
/* The flap: a lighter upper half, a darker lower half, and the hairline seam between them where the card hinges. */
.wp-starts .wp-count b { display: block; inline-size: 100%; padding-block: 6px 7px; border-radius: 12px; text-align: center;
  background:
    linear-gradient(180deg, transparent calc(50% - 1px), rgba(5, 52, 44, .38) calc(50% - 1px), rgba(5, 52, 44, .38) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(180deg, #2AA08A 0%, #1E8C77 50%, #177A67 50%, #13705E 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 3px 0 #0E5A4C, 0 10px 18px -10px rgba(16, 100, 87, .7);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: clamp(28px, 7.4cqi, 48px); font-weight: 600; line-height: 1.2;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; color: #fff; text-shadow: 0 1px 0 rgba(6, 60, 50, .45); transform-origin: 50% 50%; }
/* The seconds - the one that moves - wear the page's gold, the gold of the button that reserves a seat. */
.wp-starts .wp-count > span:last-child b { color: #33240A; text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  background:
    linear-gradient(180deg, transparent calc(50% - 1px), rgba(122, 90, 22, .42) calc(50% - 1px), rgba(122, 90, 22, .42) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(180deg, #F8E7AE 0%, #ECCB6A 50%, #D8AC40 50%, #C0911F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 3px 0 #9A7219, 0 10px 18px -10px rgba(164, 119, 24, .7); }
.wp-starts .wp-count b.is-flip { animation: wp-flip .44s cubic-bezier(.2, .7, .3, 1); }
@keyframes wp-flip { 0% { transform: rotateX(-82deg); filter: brightness(1.2); } 100% { transform: none; filter: none; } }
/* The colon sits in the gap between two tiles, level with the numbers, and breathes once a second. */
.wp-starts .wp-count > span:not(:last-child)::after { content: ":"; position: absolute; inset-block: 0 calc(1.1em + var(--space-2)); inset-inline-end: calc(-1 * var(--space-5));
  inline-size: var(--space-5); display: grid; place-items: center; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 22px; font-weight: 600;
  color: var(--gold-500); animation: wp-colon 1s ease-in-out infinite; }
@keyframes wp-colon { 50% { opacity: .25; } }
.wp-starts .wp-count small { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-700); }
html[lang="ar"] .wp-starts .wp-count small { font-family: var(--font-body), sans-serif; font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wp-starts .wp-count b.is-flip, .wp-starts .wp-count > span::after { animation: none; }
}
/* Once it has started the script replaces the tiles with one line of words: that line is centred on the panel. */
.wp-starts .wp-count:not(:has(span)) { display: block; text-align: center; font-family: var(--font-display), sans-serif; font-size: var(--fs-xl); color: var(--teal-700); padding-block: var(--space-5); }

/* The leaves. One per day, a little askew like pages of a tear-off calendar, overlapping; the last one is the
   certificate and the only gold in the artwork. Hovering (or focusing within) squares a leaf up and lifts it. */
.wp-leaves { --lap: 12px; --leaf-w: min(148px, calc((100cqi + (var(--n, 3) - 1) * var(--lap)) / var(--n, 3)));
  display: flex; justify-content: center; align-items: stretch; margin: 0; padding: var(--space-4) 0; list-style: none; min-inline-size: 0; max-inline-size: 100%; }
.wp-leaf { position: relative; flex: none; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; align-content: start; gap: 2px;
  inline-size: var(--leaf-w); padding-block-end: var(--space-4); border: 1px solid var(--border); border-radius: 18px; background: var(--surface);
  box-shadow: var(--shadow-2); overflow: hidden; margin-inline-start: calc(-1 * var(--lap)); rotate: calc((var(--i) * 2 - 3) * 1.6deg);
  translate: 0 calc(var(--i) * 6px - 8px); transition: rotate var(--dur-slow) var(--ease-out), translate var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.wp-leaf:first-child { margin-inline-start: 0; }
.wp-leaf > a { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; justify-items: center; gap: 2px; inline-size: 100%; color: inherit; text-decoration: none; }
.wp-leaf > a:hover { text-decoration: none; }
.wp-leaf:focus-within { rotate: 0deg; translate: 0 -12px; box-shadow: var(--shadow-3); z-index: 2; }
.wp-leaf:hover { rotate: 0deg; translate: 0 -12px; box-shadow: var(--shadow-3); z-index: 2; }
.wp-leaf-month { inline-size: 100%; padding-block: 7px; background: var(--teal-600); color: #fff; text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
html[lang="ar"] .wp-leaf-month { font-family: var(--font-body), sans-serif; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 600; }
/* The two ring holes of a calendar pad. */
.wp-leaf-month::before, .wp-leaf-month::after { content: ""; position: absolute; inset-block-start: 9px; inline-size: 7px; block-size: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.wp-leaf-month::before { inset-inline-start: 14px; }
.wp-leaf-month::after { inset-inline-end: 14px; }
.wp-leaf-day { font-family: var(--font-display), sans-serif; font-size: calc(var(--leaf-w) * .42); font-weight: 800; line-height: 1.15; color: var(--ink-900); padding-block-start: var(--space-2); }
.wp-leaf-week { font-size: clamp(11px, calc(var(--leaf-w) * .115), 14px); font-weight: 600; color: var(--ink-700); }
.wp-leaf-time { font-size: var(--fs-xs); color: var(--text-muted); }
.wp-leaf.is-cert { background: linear-gradient(180deg, var(--gold-50), var(--surface)); border-color: var(--gold-400); align-content: start; }
.wp-leaf.is-cert .wp-leaf-month { background: var(--grad-gold); color: #33240A; }
.wp-leaf.is-cert .wp-leaf-month::before, .wp-leaf.is-cert .wp-leaf-month::after { background: rgba(51, 36, 10, .35); }
.wp-leaf-seal { display: grid; place-items: center; inline-size: 56px; block-size: 56px; margin-block: var(--space-3) var(--space-1); border-radius: 50%;
  border: 1.5px solid var(--gold-500); color: var(--gold-700); background: var(--surface); }
.wp-leaf-seal .icon { inline-size: 26px; block-size: 26px; }
.wp-leaf.is-cert .wp-leaf-week { color: var(--gold-700); text-align: center; padding-inline: var(--space-2); }
/* More than four days: a tidy grid of small leaves, square to the page - a fan of ten would be a mess. */
.wp-leaves.is-many { flex-wrap: wrap; gap: var(--space-3); justify-content: flex-start; }
.wp-leaves.is-many .wp-leaf { inline-size: 96px; margin-inline-start: 0; rotate: 0deg; translate: none; box-shadow: var(--shadow-1); }
.wp-leaves.is-many .wp-leaf-day { font-size: 34px; }

/* The facts, once each, under the hero: mono labels over plain values, hairlines between. */
.wp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-block-start: 1px solid var(--border); }
.wp-facts > div { display: grid; gap: 4px; align-content: start; padding: var(--space-4) var(--space-4) var(--space-5); border-block-end: 1px solid var(--border); }
.wp-facts dt { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
html[lang="ar"] .wp-facts dt { font-family: var(--font-body), sans-serif; letter-spacing: 0; font-size: var(--fs-xs); }
.wp-facts dd { margin: 0; font-weight: 600; color: var(--ink-900); text-align: start; }
.wp-facts-seats dd { display: grid; gap: var(--space-2); font-weight: 500; font-size: var(--fs-sm); color: var(--ink-700); }
.wp-facts-seats .progress { max-inline-size: 220px; }
.wp-facts-seats .progress > span { animation: wp-fill 1200ms var(--ease-out) 400ms both; }
@keyframes wp-fill { from { max-inline-size: 0; } to { max-inline-size: 100%; } }

/* ---------- 1b. The learning outcomes: what a participant will be able to do by the end (owner 2026-09-23) ---------- */
/* One emerald band under the hero, in the certificate's materials - the proof panel's green with its gold streams, a foil line along
   the top - the sentence they finish on one side and the outcomes as pearl cards on the other, each with a gold edge. The sentence
   is set in two voices: its lead-in quiet in the reading face, the promise in the display face at 600 (bold Kufi in white on the
   dark green closes up). */
.wp-outcomes { position: relative; isolation: isolate; display: grid; gap: var(--space-4); margin-block: var(--space-8) 0;
  padding: var(--space-4) var(--space-5); overflow: hidden; border-radius: var(--radius-xl); color: #F6F3E8;
  scroll-margin-block-start: 96px; box-shadow: 0 28px 60px -34px rgba(7, 58, 50, .55);
  background:
    url("../img/spine-lines.svg") 100% 0 / 420px auto no-repeat,
    radial-gradient(60% 130% at 100% 100%, rgba(59, 175, 152, .24), transparent 70%),
    linear-gradient(to left, #0F5A4D 0%, var(--teal-700) 55%, #083F36 100%); }
/* The label and the sentence sit on the darker side, where the gold reads at 5.5:1 or more; the light and the streams go behind the
   cards. The same band mirrored for a page that runs right to left. */
html[dir="rtl"] .wp-outcomes {
  background:
    url("../img/spine-lines.svg") 0 0 / 420px auto no-repeat,
    radial-gradient(60% 130% at 0% 100%, rgba(59, 175, 152, .24), transparent 70%),
    linear-gradient(to right, #0F5A4D 0%, var(--teal-700) 55%, #083F36 100%); }
.wp-outcomes::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 6%; block-size: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(220, 187, 97, .85), transparent); }
.wp-outcomes-lead { display: grid; align-content: center; gap: var(--space-2); min-inline-size: 0; }
.wp-outcomes-lead .eyebrow { margin: 0; color: var(--gold-400); }
.wp-outcomes-lead .eyebrow::before { background: var(--gold-400); }
.wp-outcomes-lead h2 { margin: 0; font-family: var(--font-display), var(--font-arabic), sans-serif; font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600; line-height: 1.2; color: #F6F3E8; text-wrap: balance; }
.wp-outcomes-pre { display: block; margin-block-end: var(--space-1); font-family: var(--font-body), var(--font-arabic), sans-serif;
  font-size: var(--fs-md); font-weight: 500; line-height: 1.5; letter-spacing: 0; color: var(--teal-100); }
/* Arabic stands taller than Latin - dots, shadda and tanween above and below the letters - so it gets the room it needs, and the
   outcomes are read in the reading face, the way a paragraph is. An outcome shown in Arabic on the English page is set the same. */
html[lang="ar"] .wp-outcomes-lead h2 { line-height: 1.45; }
html[lang="ar"] .wp-outcomes-pre { font-size: var(--fs-lg); line-height: 1.6; }
.wp-outcome p:lang(ar) { padding-block-start: 1px; font-family: var(--font-arabic), sans-serif; font-size: var(--fs-md); font-weight: 500; line-height: 1.65; }
.wp-outcomes-list { list-style: none; display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; }
.wp-outcome { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); padding-inline-start: var(--space-3); overflow: hidden; border-radius: var(--radius-lg);
  background: #FCFBF6; color: var(--ink-900); box-shadow: 0 16px 36px -22px rgba(0, 0, 0, .55); }
.wp-outcome::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: var(--grad-gold); }
.wp-outcome-mark { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%;
  background: var(--teal-50); color: var(--teal-600); box-shadow: inset 0 0 0 1px var(--teal-100); }
.wp-outcome-mark .icon { inline-size: 14px; block-size: 14px; }
.wp-outcome p { margin: 0; padding-block-start: 3px; font-family: var(--font-display), var(--font-arabic), sans-serif; font-size: 14px;
  font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; text-align: match-parent; }
/* A slim band (owner 2026-09-23: "make this box thinner"; 2026-09-27: "can be more thin, no need to such big font in the 3 boxes"):
   the check stays beside its sentence at every width, never stacked above it, the outcomes in 14px at 500 (Arabic 15px), the same at
   every width, and the band keeps 16-20px above and below - its height is its content's, not the padding's. Up to six outcomes, never
   more than three to a row (--n, from Workshops\OffersPure::outcomeColumns); the cards of a row share its height. */
@media (min-width: 700px) { .wp-outcomes { padding: var(--space-4) var(--space-6); } }
@media (min-width: 900px) {
  .wp-outcomes-list { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .wp-outcomes { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; gap: var(--space-6);
    padding: var(--space-5) var(--space-7); }
}

/* ---------- 2. The reading column and the pass beside it ---------- */
.wp-body { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); margin-block: var(--space-9); align-items: start; }
.wp-main { display: grid; gap: var(--space-9); min-inline-size: 0; }
.wp-block > h2, .wp-fit h2, .wp-gets h2 { margin: 0 0 var(--space-4); font-family: var(--font-display), sans-serif; font-size: var(--fs-2xl); font-weight: 700; color: var(--ink-900); }
.wp-prose { max-inline-size: 68ch; font-size: var(--fs-lg); line-height: 1.75; color: var(--ink-700); }
html[lang="ar"] .wp-prose, .wp-prose:dir(rtl) { line-height: 1.95; }
.wp-prose p { margin: 0 0 var(--space-4); }
.wp-prose p:last-child { margin-block-end: 0; }
.wp-prose strong { color: var(--ink-900); font-weight: 700; }
.wp-fit { display: flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); overflow: hidden; }
.wp-fit h2 { font-size: var(--fs-lg); }
.wp-fit-col { flex: 1 1 210px; min-inline-size: 0; padding: var(--space-6); border-block-start: 1px solid var(--border); border-inline-start: 1px solid var(--border);
  margin-block-start: -1px; margin-inline-start: -1px; transition: background var(--dur-base) var(--ease-out); }
.wp-fit-col:hover { background: var(--ink-50); }
/* What you will get: a gold band under the two lists, the whole width - its items side by side, each award in a white gold-ringed disc,
   and the sample certificate at its end. On a phone the certificate drops under the items. */
.wp-fit-col.wp-fit-gets { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-8);
  border-block-start-color: var(--gold-100); background: linear-gradient(180deg, var(--gold-50), var(--surface)); }
.wp-fit-gets-text { flex: 1 1 340px; min-inline-size: 0; }
.wp-fit-gets .wp-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-4) var(--space-6); }
.wp-fit-gets .wp-list li { align-items: center; }
.wp-fit-gets .wp-list .icon { inline-size: 38px; block-size: 38px; margin: 0; padding: 9px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 0 0 1px var(--gold-100), 0 6px 14px -8px rgba(122, 90, 22, .55); color: var(--gold-600); }
.wp-fit-gets .wp-cert-sample { flex: none; margin-block-start: 0; }
.wp-fit-gets .wp-cert-sample img { inline-size: 250px; max-inline-size: 100%; }
.wp-fit-note { flex: 1 1 100%; margin: 0; padding: var(--space-3) var(--space-6); border-block-start: 1px solid var(--border); }
.wp-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.wp-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 500; color: var(--ink-900); line-height: 1.6; }
.wp-list .icon { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 3px; color: var(--primary); }

/* The programme: a row of cards on one line that ends in the certificate. On a phone the line runs down the side instead.
   The day a calendar leaf jumped to (:target) is lit. */
.wp-programme-block { margin-block: var(--space-9); scroll-margin-block-start: 96px; }
.wp-programme { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.wp-programme > li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); padding-block-end: var(--space-5); scroll-margin-block-start: 110px; }
.wp-programme > li::before { content: ""; position: absolute; inset-block: 44px 0; inset-inline-start: 21px; inline-size: 2px; background: var(--teal-100); }
.wp-programme > li:last-child { padding-block-end: 0; }
.wp-programme > li:last-child::before { display: none; }
.wp-programme > li:nth-last-child(2)::before { background: linear-gradient(180deg, var(--teal-100), var(--gold-400)); }
.wp-node { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--primary); color: #fff;
  font-family: var(--font-display), sans-serif; font-size: var(--fs-lg); font-weight: 700; box-shadow: 0 0 0 5px var(--primary-soft); transition: scale var(--dur-base) var(--ease-out); }
.wp-programme > li:hover .wp-node { scale: 1.08; }
.wp-programme > .is-cert .wp-node { background: var(--grad-gold); color: #33240A; box-shadow: 0 0 0 5px var(--gold-50); }
.wp-node .icon { inline-size: 22px; block-size: 22px; }
.wp-programme > li:target .wp-day { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-2); }
.wp-day { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.wp-programme > li:hover .wp-day { border-color: var(--teal-100); box-shadow: var(--shadow-2); }
.wp-programme > .is-cert .wp-day { border-color: var(--gold-100); background: var(--gold-50); }
.wp-day p { margin: 0; }
.wp-day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); }
.wp-day-head b { font-family: var(--font-display), sans-serif; font-size: var(--fs-lg); color: var(--ink-900); }
.wp-day-head span { color: var(--text-muted); font-size: var(--fs-md); }
.wp-day-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--fs-md); color: var(--ink-700); }
.wp-day-meta > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.wp-day-meta .icon { inline-size: 16px; block-size: 16px; color: var(--primary); }
.wp-day-meta a { font-weight: 600; }
/* The place (owner 2026-09-23): the pin, the name over the card's whole width, the map link on its own line under the name - side by
   side in a narrow card they squeezed each other a word to a line. The name is isolated (bdi),
   not given a direction of its own, so a Latin name in an Arabic card keeps its word order and still lines up on the card's side. */
.wp-day-meta > .wp-day-place { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 2px var(--space-2);
  flex-basis: 100%; }
.wp-day-place > .icon { margin-block-start: 3px; }
.wp-day-place-name { min-inline-size: 0; line-height: 1.45; overflow-wrap: anywhere; }
.wp-day-place .wp-day-map { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-sm); color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.wp-day-place .wp-day-map .icon { inline-size: 13px; block-size: 13px; }

/* Where we meet (Workshops/views/venue.php), straight under the facts when a day is in person. The map sits in a plain white frame with
   a glass plate for the address and the way there; the hall's photo is the one piece of luxury - a bevelled gold frame, a slow drift
   in on hover, and a band of light that crosses it now and then, like light on a polished frame. The photo is the larger of the two:
   it is what makes somebody want to be in the room. */
.wp-venue { margin-block: var(--space-9) 0; scroll-margin-block-start: 96px; }
.wp-venue-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-block-end: var(--space-5); }
.wp-venue-head h2 { margin: 4px 0 0; }
.wp-venue-where { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: 600; color: var(--ink-700); }
.wp-venue-where .icon { color: var(--gold-600); }
.wp-venue-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.wp-venue-map, .wp-venue-photo { position: relative; margin: 0; min-block-size: 300px; }
.wp-venue-map { padding: 6px; border: 1px solid var(--border); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-2); }
.wp-venue-map iframe { display: block; inline-size: 100%; block-size: 100%; min-block-size: 288px; border: 0; border-radius: 22px; filter: saturate(.9); }
/* Lifted clear of Google's own line at the foot of the map (its credits and terms stay readable). */
.wp-venue-plate { position: absolute; inset-inline: 20px; inset-block-end: 38px; display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 18px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 14px 30px -16px rgba(11, 31, 26, .45); }
.wp-venue-pin { position: relative; flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%;
  background: linear-gradient(150deg, var(--teal-500), var(--teal-700)); color: #fff; }
.wp-venue-pin .icon { inline-size: 18px; block-size: 18px; }
/* The pin breathes: "you will be here". */
.wp-venue-pin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(22, 128, 111, .45); animation: wp-ping 2.4s ease-out infinite; }
@keyframes wp-ping { 70% { box-shadow: 0 0 0 14px rgba(22, 128, 111, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 128, 111, 0); } }
.wp-venue-plate-say { display: grid; gap: 1px; min-inline-size: 0; flex: 1; }
.wp-venue-plate-say small { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
html[lang="ar"] .wp-venue-plate-say small { font-family: var(--font-body), sans-serif; font-size: var(--fs-xs); letter-spacing: 0; }
.wp-venue-plate-say b { font-weight: 700; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-venue-open { flex: none; display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; color: var(--ink-700); }
.wp-venue-open:hover, .wp-venue-open:focus-visible { background: var(--ink-100); color: var(--primary); }
/* The gold bevel: a metal edge around the photo, darker where it turns away from the light, with a warm glow under it. */
.wp-venue-photo { padding: 5px; border-radius: 30px; background: linear-gradient(135deg, #F8E7AE 0%, #C9A227 22%, #FBF3D5 46%, #B48317 70%, #EBD79A 100%);
  box-shadow: 0 0 0 1px rgba(164, 119, 24, .35), 0 34px 60px -30px rgba(143, 109, 30, .6), 0 10px 24px -14px rgba(11, 31, 26, .35); }
.wp-venue-frame { position: relative; display: block; block-size: 100%; min-block-size: 290px; overflow: hidden; border-radius: 25px; background: var(--ink-100); }
/* The place's photos lie on top of one another; the one showing is .is-on, and the next fades in over it (js/workshop.js). */
.wp-venue-frame img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transform: scale(1.02);
  transition: opacity 1.1s ease-in-out, transform 6s cubic-bezier(.2, .7, .3, 1); }
.wp-venue-frame img.is-on { opacity: 1; }
.wp-venue-photo:hover .wp-venue-frame img.is-on, .wp-venue-frame:focus-visible img.is-on { transform: scale(1.09); }
/* Which photo, and a way to any of them: small light dots at the top corner, the current one a gold pill. */
.wp-venue-dots { position: absolute; inset-block-start: 22px; inset-inline-end: 24px; z-index: 3; display: flex; gap: 6px; padding: 6px 8px; border-radius: var(--radius-pill);
  background: rgba(10, 26, 47, .35); backdrop-filter: blur(6px); }
.wp-venue-dots button { inline-size: 8px; block-size: 8px; padding: 0; border: 0; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .6); cursor: pointer;
  transition: inline-size var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.wp-venue-dots button[aria-current="true"] { inline-size: 22px; background: #F2DC9A; }
.wp-venue-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Back and forward: two round glass buttons halfway down the sides (previous at the reading start), turning gold when pointed at. */
.wp-venue-step { position: absolute; inset-block-start: 50%; z-index: 3; display: grid; place-items: center; inline-size: 46px; block-size: 46px; margin-block-start: -23px;
  padding: 0; border: 1px solid rgba(255, 255, 255, .75); border-radius: 50%; background: rgba(255, 255, 255, .8); backdrop-filter: blur(8px); color: var(--ink-900);
  cursor: pointer; box-shadow: 0 12px 26px -12px rgba(10, 26, 47, .6);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.wp-venue-step.is-prev { inset-inline-start: 20px; }
.wp-venue-step.is-next { inset-inline-end: 20px; }
.wp-venue-step .icon { inline-size: 22px; block-size: 22px; }
.wp-venue-step:hover, .wp-venue-step:focus-visible { background: linear-gradient(135deg, #FBF3D5, #E3C46A); border-color: #F8E7AE; color: #33240A; transform: scale(1.08); }
.wp-venue-step:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.wp-venue-step:active { transform: scale(.95); }
/* Evening at the foot of the photo, so the caption reads on any picture. */
.wp-venue-frame::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10, 26, 47, .62) 0%, rgba(10, 26, 47, .12) 42%, transparent 60%); }
/* The glint is light crossing the photo, not reading order: it travels the same way in Arabic and in English. */
.wp-venue-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translateX(-130%); /* rtl-ok */
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .42) 49%, rgba(255, 248, 225, .18) 55%, transparent 64%); animation: wp-sheen 7.5s ease-in-out 1.2s infinite; }
@keyframes wp-sheen { 0% { transform: translateX(-130%); } 26%, 100% { transform: translateX(130%); } } /* rtl-ok */
.wp-venue-caption { position: absolute; inset-inline-start: 30px; inset-block-end: 26px; z-index: 3; display: grid; gap: 4px; color: #fff; pointer-events: none; }
.wp-venue-caption small { display: inline-flex; align-items: center; gap: var(--space-2); font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: #F2DC9A; }
.wp-venue-caption small::before { content: ""; inline-size: 22px; block-size: 1px; background: currentColor; }
html[lang="ar"] .wp-venue-caption small { font-family: var(--font-body), sans-serif; font-size: var(--fs-sm); letter-spacing: 0; font-weight: 600; }
.wp-venue-caption b { font-family: var(--font-display), sans-serif; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
@media (min-width: 900px) {
  .wp-venue-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .wp-venue-grid.is-single { grid-template-columns: minmax(0, 1fr); }
  .wp-venue-map, .wp-venue-photo { min-block-size: 400px; }
  .wp-venue-map iframe { min-block-size: 388px; }
  .wp-venue-frame { min-block-size: 390px; }
}
@media (max-width: 899px) {
  /* On a phone the photo comes first: it is the reason to scroll to the map. */
  .wp-venue-photo { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-venue-sheen, .wp-venue-pin::after { animation: none; display: none; }
  .wp-venue-frame img, .wp-venue-step { transition: none; }
  .wp-venue-photo:hover .wp-venue-frame img.is-on { transform: scale(1.02); }
}

/* A sample of the certificate under "What you will get": the picture itself, large enough to read as a certificate, slightly tilted
   like a card laid on the table, straightening when pointed at; the words under it say it opens large. */
.wp-cert-sample { display: grid; justify-items: start; gap: var(--space-2); margin-block-start: var(--space-4); padding: 0; border: 0; background: none;
  color: var(--gold-700); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-align: start; cursor: zoom-in; }
.wp-cert-sample img { display: block; inline-size: min(230px, 100%); block-size: auto; border-radius: 8px; border: 4px solid #fff;
  box-shadow: 0 14px 26px -14px rgba(122, 90, 22, .65), 0 0 0 1px rgba(164, 119, 24, .3);
  rotate: -2.5deg; transition: rotate var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.wp-cert-sample span { display: inline-flex; align-items: center; gap: var(--space-2); padding-inline-start: 2px; }
.wp-cert-sample .icon { inline-size: 16px; block-size: 16px; }
.wp-cert-sample:hover img, .wp-cert-sample:focus-visible img { rotate: 0deg; scale: 1.03; box-shadow: 0 20px 34px -16px rgba(122, 90, 22, .7), 0 0 0 1px rgba(164, 119, 24, .45); }
.wp-cert-sample:hover span, .wp-cert-sample:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
.wp-cert-dialog { inline-size: min(980px, calc(100vw - 32px)); max-block-size: calc(100vh - 32px); padding: 10px; border: 0; border-radius: 20px; background: var(--surface);
  box-shadow: 0 40px 90px -30px rgba(10, 26, 47, .6); }
.wp-cert-dialog::backdrop { background: rgba(10, 26, 51, .55); backdrop-filter: blur(3px); }
.wp-cert-dialog img { display: block; inline-size: 100%; block-size: auto; border-radius: 12px; }
.wp-cert-dialog form { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-2) 2px; }
.wp-cert-dialog form p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .wp-cert-sample img { transition: none; } }

/* The pass: when it starts, what it costs, the way in. It follows the reader down the page. */
.wp-aside { display: grid; gap: var(--space-5); min-inline-size: 0; }
.wp-pass { display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--teal-700); color: #fff;
  background-image: radial-gradient(24rem 14rem at 100% 0%, rgba(255, 255, 255, .10), transparent 60%); box-shadow: var(--shadow-3); }
.wp-pass > * { margin: 0; }
.wp-pass-label { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-400); }
html[lang="ar"] .wp-pass-label { font-family: var(--font-body), sans-serif; letter-spacing: 0; font-size: var(--fs-sm); }
.wp-count { display: grid; grid-template-columns: repeat(4, auto); gap: var(--space-2); justify-content: center; }
.wp-count > span { display: grid; justify-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: rgba(255, 255, 255, .09); }
.wp-count b { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 24px; font-weight: 500; line-height: 1.2; }
.wp-count small { font-size: 11px; color: var(--teal-100); }
.wp-pass .btn-primary { background: #fff; color: var(--teal-700); border-color: #fff; }
.wp-pass .btn-primary:hover { background: var(--teal-50); color: var(--teal-700); }
.wp-pass .btn.is-disabled { background: rgba(255, 255, 255, .12); color: var(--teal-100); border-color: transparent; }
.wp-pass-note { font-size: var(--fs-sm); color: var(--teal-100); text-align: center; }
/* The ways to pay, where the price is sold. One way is a sentence with its icon ("Payment in cash only"); several are named, each
   with its own. In the way-in box it is the box's last line; on the dark pass it turns white. */
.wp-pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.wp-way-in > .wp-pay { grid-column: 1 / -1; }
.wp-pay small { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin-inline-end: var(--space-1); }
html[lang="ar"] .wp-pay small { font-family: var(--font-body), sans-serif; letter-spacing: 0; font-size: var(--fs-xs); font-weight: 600; }
.wp-pay .icon { flex: none; inline-size: 16px; block-size: 16px; }
.wp-pay.is-only { gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--gold-50); border: 1px solid var(--gold-100); color: var(--gold-700); }
.wp-pay.is-only .icon { inline-size: 18px; block-size: 18px; }
.wp-pay.on-pass { justify-content: center; color: var(--teal-100); }
.wp-pay.on-pass small { color: var(--teal-100); }
.wp-pay.on-pass .pay-badge-plain { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
.wp-pay.on-pass .pay-badge-plain .icon { color: var(--gold-400); }
.wp-pay.on-pass.is-only { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
.wp-share { display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); }
.wp-share p { margin: 0; font-weight: 600; color: var(--ink-900); }

/* Sections come up into place as they are reached (workshop.js adds .wp-reveal-on; without it nothing is ever hidden). On the screen
   only: a page printed before it was scrolled keeps every section. */
@media screen and (prefers-reduced-motion: no-preference) {
  .wp-reveal-on [data-reveal] { opacity: 0; translate: 0 22px; transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out); }
  .wp-reveal-on [data-reveal].is-in { opacity: 1; translate: none; }
  /* The outcomes arrive one after another, once their band is in view. */
  .wp-reveal-on .wp-outcomes[data-reveal] .wp-outcome { opacity: 0; translate: 0 14px;
    transition: opacity 500ms var(--ease-out), translate 500ms var(--ease-out); transition-delay: calc(180ms + var(--i, 0) * 110ms); }
  .wp-reveal-on .wp-outcomes[data-reveal].is-in .wp-outcome { opacity: 1; translate: none; }
}

/* ---------- 3. The bar that keeps the way in within reach (no closing band: the owner took it out, 2026-09-22) ---------- */
.wp-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5) calc(var(--space-3) + var(--safe-b)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--border); box-shadow: 0 -10px 30px -12px rgba(11, 31, 26, .18); transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-out); }
.wp-bar[hidden] { display: none; }
.wp-bar.is-in { transform: none; }
.wp-bar p { display: grid; gap: 0; margin: 0; margin-inline-end: auto; min-inline-size: 0; }
.wp-bar p b { font-family: var(--font-display), sans-serif; font-size: var(--fs-md); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-bar p span { font-size: var(--fs-xs); color: var(--text-muted); }
.wp-bar .wp-price { display: none; font-size: var(--fs-lg); }

@media (max-width: 699px) {
  .wp-leaves { --lap: 9px; }
  .wp-leaf { border-radius: 14px; }
  .wp-leaf-time { font-size: 11px; }
  .wp-leaf-seal { inline-size: 40px; block-size: 40px; margin-block-start: var(--space-2); }
  .wp-leaf-seal .icon { inline-size: 20px; block-size: 20px; }
  .wp-leaf-month::before, .wp-leaf-month::after { display: none; }
}
@media (min-width: 700px) {
  .wp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wp-bar .wp-price { display: grid; }
}
@media (min-width: 1024px) {
  .wp-hero-head { grid-template-columns: minmax(0, 1fr) auto; }
  .wp-hero-share { order: 0; justify-content: flex-end; }
  .wp-hero-head .wp-title { grid-column: 1 / -1; }
  .wp-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-block-size: 320px; align-items: start; }
  /* Side by side, the side is as tall as the copy: the leaves at its head, the instructor at its foot, the countdown between them. */
  .wp-hero-side { justify-items: end; }
  .wp-hero-side:has(.wp-hero-coach) { align-self: stretch; align-content: space-between; }
  /* The programme turns on its side: cards in a row, the line running through the nodes above them. */
  .wp-programme { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-5) var(--space-4); }
  .wp-programme > li { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--space-4); padding-block-end: 0; }
  .wp-programme > li::before { inset-block: 21px auto; inset-inline: 44px calc(-1 * var(--space-4)); inline-size: auto; block-size: 2px; }
  .wp-programme > li:nth-last-child(2)::before { background: linear-gradient(90deg, var(--teal-100), var(--gold-400)); }
  html[dir="rtl"] .wp-programme > li:nth-last-child(2)::before { background: linear-gradient(270deg, var(--teal-100), var(--gold-400)); }
  .wp-day { block-size: 100%; align-content: start; }
  .wp-leaves { justify-content: flex-end; }
  .wp-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .wp-facts > div { border-block-end: 0; border-inline-start: 1px solid var(--border); padding-inline: var(--space-5); }
  .wp-facts > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .wp-body { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-10); }
  .wp-aside { position: sticky; inset-block-start: var(--space-6); }
  .wp-bar { inset-block: 0 auto; transform: translateY(-110%); border-block-start: 0; border-block-end: 1px solid var(--border); box-shadow: 0 10px 30px -14px rgba(11, 31, 26, .18);
    padding-block: var(--space-3); padding-inline: max(var(--space-7), calc(50vw - var(--content-max) / 2)); }
}
@media (prefers-reduced-motion: reduce) {
  .wp-leaf, .wp-day, .wp-bar { transition: none; }
  .wp-leaf { rotate: 0deg; translate: none; }
}

/* ---------- Questions and comments (Comments/views/public.php) ---------- */
/* A conversation under the programme: what people asked and what the academy said on one side, the box to write on the other, kept
   in reach while the thread is read. A comment is a plain row - the round initial, the name, the words; the academy's answer hangs
   under it on a teal rule, because it is a reply and not another comment. */
.wp-talk-head { display: grid; gap: var(--space-1); margin-block-end: var(--space-6); }
.wp-talk-head > * { margin: 0; }
.wp-talk-count { display: inline-grid; place-items: center; min-inline-size: 28px; block-size: 28px; padding-inline: 8px; border-radius: var(--radius-pill);
  background: var(--primary-soft); color: var(--primary); font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: var(--fs-sm); vertical-align: 3px; }
/* One wide column (owner, 2026-09-21): what was said first, easy to read across the page, and the box to write at the end. */
.wp-talk-grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.wp-ask { display: grid; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-1); }
.wp-ask > * { margin: 0; }
.wp-ask h3 { font-size: var(--fs-lg); }
.wp-ask-who { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.wp-ask-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.wp-ask-foot .hint { margin: 0; flex: 1 1 18rem; }
.wp-ask-foot .btn { min-inline-size: 12rem; }
.wp-ask .textarea { min-block-size: 7.5rem; resize: vertical; }
.wp-ask-count { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--text-faint); text-align: end; }
.wp-ask-photo { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 40px; padding-inline: var(--space-4); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill); color: var(--ink-700); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; max-inline-size: 100%; }
.wp-ask-photo:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.wp-ask-photo .icon { flex: none; inline-size: 18px; block-size: 18px; }
.wp-ask-photo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-ask-trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.wp-ask.is-staff { justify-items: start; background: var(--primary-soft); border-color: var(--teal-100); }

.wp-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.wp-thread.is-empty { justify-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-xl); color: var(--text-muted); text-align: center; }
.wp-thread.is-empty p { margin: 0; }
.wp-thread-mark { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.wp-thread-mark .icon { inline-size: 24px; block-size: 24px; }
.wp-say { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); }
.wp-say:target { border-color: var(--teal-400); box-shadow: 0 0 0 4px var(--primary-soft); }
.wp-say .avatar { background: var(--primary); }
.wp-say-body { display: grid; gap: var(--space-3); min-inline-size: 0; flex: 1 1 auto; }
.wp-say-body > * { margin: 0; }
.wp-say-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.wp-say-who b { font-family: var(--font-display), sans-serif; color: var(--ink-900); overflow-wrap: anywhere; }
.wp-say-who time { font-size: var(--fs-xs); color: var(--text-faint); }
.wp-say-text { line-height: 1.8; color: var(--ink-700); overflow-wrap: anywhere; }
.wp-say-photo { display: block; inline-size: fit-content; max-inline-size: 100%; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.wp-say-photo img { display: block; max-inline-size: min(100%, 360px); max-block-size: 260px; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.wp-say-photo:hover img { transform: scale(1.03); }
.wp-answer { display: grid; gap: var(--space-2); padding: var(--space-4); border-inline-start: 3px solid var(--primary); border-radius: var(--radius-md); background: var(--primary-soft); }
.wp-answer > * { margin: 0; }
.wp-answer p { line-height: 1.8; color: var(--ink-900); overflow-wrap: anywhere; }
.wp-answer-who { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--teal-700); }
.wp-answer-who .icon { inline-size: 16px; block-size: 16px; }
@media (prefers-reduced-motion: reduce) { .wp-say-photo img { transition: none; } .wp-say-photo:hover img { transform: none; } }